WordPress : création d’un thème-enfant

Il est tentant de modifier un thème “presque parfait” pour le forcer exactement à sa main, lui donner un caractère plus personnel tout en conservant les atouts du thème. Mais cette modification rend ensuite le thème impropre à la mise à jour, puisque WordPress ne reconnaîtra plus les fichiers modifiés et ne pourra plus appliquer automatiquement les changements de version. Tôt ou tard, le thème modifié prendra tellement de retard par rapport aux mises à jour de WordPress qu’il finira par en devenir incompatible.

On peut, bien sûr, appliquer chaque mise à jour à la main. Au lieu de modifier le thème original, on le duplique en renommant la copie et c’est cette copie que l’on modifie, en annotant soigneusement chaque modification par un commentaire facile à retrouver avec une recherche (genre “modifié par Xxx”). On laisse l’original se mettre à jour, puis on utilise une comparaison de fichiers avec un éditeur de texte (tel que TextWrangler sur Mac) pour examiner toutes les modifications apportées par la mise à jour, en les reportant une à une dans la version modifiée et en prenant garde de ne pas casser les modifications.

Bien évidemment, c’est abominablement laborieux, potentiellement source d’erreurs et fort pénible. On a été longtemps condamné à cette punition régulière, puis les mises à jour de WP sont devenues si fréquentes qu’il a bien fallu que quelqu’un trouve une meilleure solution… le thème-enfant.

Nota : l’auteur a choisi des solutions simples à mettre en œuvre. L’article est destiné à ceux dont l’intérêt pour la technique n’est pas la priorité, mais qui souhaitent néanmoins avoir la maîtrise de leur site WordPress. Le texte n’évoque pas SSH ni sFTP qui seraient hors-sujet, et les explications sur les CSS sont minimales. Le lecteur intéressé trouvera beaucoup de ressources sur ces points disponibles sur internet. Les éléments relatifs à l’hébergement ont été réalisés sur Infomaniak, mais pourraient être transposés facilement ailleurs.

Le thème-enfant

Un thème-enfant est une coquille où l’on trouve trois éléments obligatoires :

— Un fichier de feuilles de style nommé “style.css”. Ce fichier, par convention, doit contenir un en-tête (détaillé plus loin) qui décrit la relation entre le thème-enfant et son “parent”, c’est cette convention qui le rend obligatoire. En-dehors de cela, il peut ne contenir aucun style particulier, tout le reste est facultatif.

— Un fichier “screenshot.png” d’une taille standardisée à 1200 x 900 pixels (toujours en 72 dpi). Cette image représentera le thème dans la galerie des thèmes vue depuis WP. Elle n’est pas obligatoire, mais la galerie sera assez inesthétique si elle est manquante. L’image peut représenter absolument n’importe quoi, même si par convention elle est censée présenter le thème (personnellement j’ai choisi une tête de girafe, la première image qui me soit tombée sous la main).

— Enfin, pour que le thème-enfant puisse injecter ses styles modifiés dans le thème parent, il faut que WP exécute une fonction en langage PHP qui aura pour effet d’ajouter notre fichier “style.css” dans la liste des styles mis en service. Cette fonction PHP est placée dans un fichier “functions.php” qui est décrit plus loin.

L’ensemble de ces trois éléments est groupé dans un répertoire (un dossier) dont le nom est, par convention, identique à celui du thème parent avec le suffixe “-child”, par exemple “twentysixteen-child” si le thème parent est “twentysixteen” (le nom technique du thème, en minuscules et sans espaces, est plus condensé que le nom d’affichage “Twenty Sixteen”).

Ce répertoire doit être créé manuellement, au même endroit que les thèmes existants sur l’espace d’hébergement. Pour y accéder et manipuler directement les fichiers, il faut utiliser un client FTP (file transfer protocol). Nous verrons cela un peu plus loin, nous allons d’abord préparer les éléments à installer.

Préparation des fichiers

Voici une archive .zip que vous pouvez télécharger pour gagner du temps. Mais elle ne vous dispensera pas de lire ce qui suit, car vous devrez modifier les fichiers qu’elle contient pour les adapter à votre domaine.

Nous allons utiliser un éditeur de texte. Sur Mac, TextEdit fera l’affaire (ou TextWrangler si vous l’avez, mais ce n’est pas indispensable). Avec Windows, le plus simple sera d’utiliser Word.

Style.css

Le fichier de style ne contiendra, pour l’instant, que son en-tête, que vous pouvez copier ci-dessous :

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: http://domaine.fr/wp-content/themes/twentysixteen-child/
 Description: Twenty Sixteen Child Theme
 Author: Simone Envoiture
 Author URI: http://domaine.fr/
 Template: twentysixteen
 Version: 1.3
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: twentysixteen-child
*/

La première et la dernière ligne indiquent que l’ensemble est un “commentaire” et ne doit pas être interprété comme une feuille de style. “/*” signifie “début de commentaire”, “*/” le termine.

Certains des champs doivent être adaptés à votre situation personnelle. La seconde ligne “Theme URI” contient l’adresse du thème-enfant. Vous devez remplacer la partie “domaine.fr” par votre nom de domaine, et si vous créez un thème-enfant pour un autre thème que “twentysixteen”, corriger la fin en conséquence. Idem pour la description et pour la dernière ligne “Text Domain” qui doit contenir le nom du thème parent suivi de “-child”.

Le champ Author doit contenir votre prénom et votre nom. Le champ Author URI doit contenir l’adresse de votre site WordPress.

Le champ Template doit contenir le nom du thème parent, et le champ Version, sa version. Si vous créez un thème-enfant pour un autre thème que “twentysixteen”, vous devrez vérifier la version de votre thème parent et la reporter correctement ici.

Le champ Tags n’est utilisé que dans le contexte de la recherche de thèmes, inutile de vous en préoccuper. Les champs relatifs à la licence, en revanche, ne doivent pas être modifiés.

Une fois le texte saisi, vous devez vous assurer de l’enregistrer dans le format approprié. Dans TextEdit sur Mac, déroulez le menu Format et sélectionnez “Convertir au format Texte”, puis enregistrez-le sous le nom de “style.css”. Si vous êtes sous Word, enregistrez impérativement au format “Text brut” et vérifiez bien l’encodage, qui doit être “UTF-8”, et les fins de lignes, qui doivent utiliser “LF” seulement (et non “CR” ou “CR/LF”). Dans tous les cas, à l’arrivée, le document doit s’appeler “style.css”.

screenshot.png

L’image du thème-enfant est optionnelle mais décorera plus joliment votre liste de thèmes. Utilisez n’importe quelle image, en 72 dpi, avec une dimension de 1200 pixels de large et 900 de haut. Enregistrez l’image au format PNG sous le nom de “screenshot.png”. Et si vous êtes à cours d’idée, vous pouvez utilisez la girafe.

functions.php

Rien à modifier par rapport au fichier fourni dans l’archive .zip. Si vous préférez le créer vous-même, procédez exactement comme pour le fichier de style, avec un éditeur de texte en mode “texte brut”. Copiez le texte ci-dessous sans rien y changer, puis enregistrez-le sous le nom de “functions.php”.

<?php
function my_theme_enqueue_styles() {
 $parent_style = 'parent-style';
 wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
 wp_enqueue_style( 'child-style',
 get_stylesheet_directory_uri() . '/style.css',
 array( $parent_style ),
 wp_get_theme()->get('Version')
 );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>

Nos trois fichiers sont maintenant prêts à être installés sur l’espace d’hébergement.

Accès FTP à l’hébergement

Avant de pouvoir accéder à votre hébergement en FTP, vous devez créer un utilisateur FTP pour vous-même, et lui attribuer un mot de passe.

Allez sur Infomaniak et connectez-vous sur votre console d’administration.

Sélectionnez votre hébergement web :

Cliquez sur votre nom de domaine pour afficher les détails.

Dans l’écran suivant, dans la marge gauche, sélectionnez l’écran FTP / SSH pour afficher les comptes FTP existants.

Cliquez sur le bouton  pour créer un nouveau compte, ce qui fait apparaître le dialogue suivant :

Si le dialogue a une apparence différente, vérifiez qu’il est en mode FTP et non FTP+SSH.

Sélectionnez le répertoire web dans la liste s’il n’est pas déjà sélectionné.

Votre serveur aura un autre intitulé que le “mtez” qui apparaît ici (c’est le mien), chacun aura un groupe de quatre lettres distinct que vous devez noter car il préfixe votre nom de compte (par exemple ici mon nom de compte est “mtez_benoit” avec un caractère “souligné” entre les deux), ainsi que votre nom de serveur FTP.

Indiquez dans le dialogue le nom de compte souhaité, en minuscules sans accents ni cédilles ni espaces ni ponctuations. Choisissez un mot de passe différent des autres par sécurité et notez toutes ces informations en lieu sûr. Enregistrez le nouveau compte.

À ce stade, si vous êtes déjà familier du FTP et que vous disposez d’une application cliente (Transmit, CyberDuck, FileZilla… il y en a plein), vous pouvez la paramétrer en utilisant le nom de serveur indiqué (votre préfixe suivi de “.vps.infomaniak.com”, par exemple pour moi “mtez.vps.infomaniak.com”), votre nom de compte (votre préfixe suivi d’un “souligné” puis votre nom d’utilisateur tel que vous l’avez saisi dans le dialogue ci-dessus, par exemple pour moi “mtez_benoit”), et votre mot de passe. Ces trois paramètres (serveur, login et mot de passe) suffisent pour se connecter en FTP.

Si au contraire vous ne disposez pas d’une application cliente, vous pouvez la remplacer par la connexion web proposée par Infomaniak. Pour cela, allez sur la page d’accueil d’Infomaniak et connectez-vous directement sur l’accès FTP :

Sur la page qui apparaît, saisissez votre nom de domaine (pour moi “widemann.net”), votre nom de compte (pour moi “mtez_benoit”) et votre mot de passe FTP tel que vous l’avez défini ci-dessus. (Le caractère “souligné” s’obtient sur Mac avec la combinaison [majuscule trait d’union], sur PC avec la touche “8” du clavier principal.)

Une fois la connexion FTP établie, vous devriez voir apparaître les fichiers constituant votre site WordPress. ATTENTION, à partir de là, soyez vigilant car vous avez tous les pouvoirs sur votre hébergement. Rien n’est jamais irrémédiable, (Infomaniak fait des sauvegardes pour vous tous les jours) mais une erreur peut rendre le site non fonctionnel et nécessiter ensuite une maintenance que vous ne serez peut-être pas capable d’opérer vous-même… autant l’éviter et faire attention.

Sélectionnez le répertoire “web” s’il n’est pas déjà sélectionné.  (Il est possible qu’il n’apparaisse pas, si votre point d’entrée sur le serveur est déjà ce même répertoire web, auquel cas vous n’avez rien à faire.)

Sélectionnez le répertoire “wp-content”, puis “themes”. La liste des thèmes installés doit apparaître dans la partie droite de la fenêtre.

Cliquez sur le bouton  au-dessus du champ de recherche, pour créer un nouveau répertoire. Le répertoire apparaît dans la sidebar à gauche, nommez-le exactement comme le répertoire du thème parent en ajoutant “-child”, par exemple “twentysixteen-child”. Respectez bien la saisie tout en minuscules et sans espaces car toute erreur de frappe empêchera le fonctionnement.

Validez votre saisie avec “entrée” ou “retour” (la touche de retour à la ligne). Le nouveau répertoire doit apparaître dans la partie droite de la fenêtre.

Cliquez sur son nom pour le sélectionner. La liste des fichiers, à droite, doit être vide puisque le répertoire ne contient encore rien. Il y a juste un pseudo-élément représenté par une flèche verte, qui sert à remonter vers le répertoire parent, vous pouvez l’ignorer.

Cliquez sur “Envoyer des fichiers” et envoyez les trois éléments préparés au chapitre précédent : “functions.php”, “screenshot.png” et “style.css”. Vous pouvez alternativement utiliser la zone en bas de la fenêtre qui accepte un glisser-déposer des fichiers.

Voilà, votre thème-enfant est installé, mais il n’est pas encore actif. Tout le reste se fera dans WordPress, vous pouvez refermer la fenêtre sur Infomaniak et vous connecter sur le back-office de votre site WordPress.

Mise en service du thème-enfant

Sélectionnez “Apparence” puis “Thèmes”. Vous devriez voir votre thème-enfant dans la liste des thèmes installés.

En survolant son image, vous verrez apparaître un bouton “Activer” que vous devez cliquer pour mettre en service votre thème-enfant.

Revenez sur le site public : rien n’a changé, ce qui est normal puisque le thème-enfant hérite de toutes les caractéristiques de son parent, et qu’on n’y a encore rien fait.

Accès aux fichiers depuis WordPress

Sélectionnez “Apparence” puis “Éditeur”. Vous devriez voir le fichier “style.css” dans un éditeur de texte qui vous permet de le modifier.

Vérification des droits d’accès

La première fois, vérifiez la présence du bouton  sous l’éditeur de texte. S’il n’est pas présent, cela signifie que les attributs du fichier doivent être corrigés pour que WordPress puisse y accéder en lecture et en écriture. En l’état, WordPress peut lire le fichier, mais n’a pas le droit d’y écrire, ce qui vous interdira d’enregistrer vos modifications.

Si c’est nécessaire, donc, ouvrez une autre fenêtre de navigation et reconnectez-vous en FTP. Allez jusqu’au thème-enfant. Sur la ligne du fichier “style.css”, cliquez sur l’icône de roue dentée  pour accéder aux propriétés du fichier.

Dans le dialogue des propriétés, cochez toutes les cases “écrire”, puis cliquez sur “Valider”. Revenez ensuite sur l’éditeur dans WordPress et rechargez la page : le bouton  doit apparaître.

Notez que, selon la configuration, il est possible que le bouton apparaisse alors que seul le “propriétaire” du fichier dispose du droit d’écrire. C’est le cas si WordPress est paramétré pour utiliser le même nom d’utilisateur que vous sur le serveur. Dans ce cas, aucune correction n’est nécessaire.

Mais qu’est-ce qu’on peut y écrire ?

Le thème enfant fonctionne sur le principe de la surcharge. C’est un terme de programmation qui signifie que l’on injecte un élément qui vient remplacer, ou compléter, ou s’ajouter aux éléments existants.

Par exemple, imaginons que le texte d’un article est en Helvetica 12 points, avec une couleur gris foncé. Le thème parent contient un style qui ressemble à ceci :

p {
    font-family: Helvetica, sans-serif;
    font-size: 12px;
    color: darkgray;
}

“p” est un raccourci pour “paragraphe” et désigne le contexte sémantique où cette feuille de style doit s’appliquer. Les accolades marquent le début et la fin de la feuille de style, et sont souvent placées de cette façon pour bien faire ressortir leur contenu, où l’on trouve une propriété par ligne.

La propriété “font-family” contient presque toujours une liste de polices par ordre de préférence décroissante et se terminant par une indication générique “serif” ou “sans-serif”, autrement dit “police avec sérifs” (par exemple Times) ou “police bâton” (par exemple Helvetica), sur laquelle le navigateur se rabattra si aucune des polices demandées n’est présente.

Dans le thème enfant, vous pouvez changer la couleur du texte sans altérer le reste en insérant cette feuille de style :

p {
    color: violet;
}

La propriété “color” ainsi ajoutée viendra “surcharger” celle du thème parent et la remplacer. Mais les autres propriétés définies dans le parent restent actives.

Comment trouver la feuille de style à modifier

Les CSS s’appliquent également en fonction de leur contexte d’utilisation. Dans une page d’article, par exemple, on trouve une zone (appelée “division” et abrégée en “div”) qui contient l’intégralité de l’article, et une autre zone qui contient l’intégralité de la sidebar. Or, un paragraphe dans l’article n’est pas la même chose qu’un paragraphe dans un widget de la sidebar… même si les deux sont simplement identifiés par un “p” sémantique.

La cascade des styles permet de distinguer aisément les deux en définissant un contexte. La division “main” (anglais pour “principale”) contient l’article, et l’élément “aside” englobe la totalité de la sidebar.

div#main p {
    color: darkgray;
}

aside p {
    color: blue;
}

Le paragraphe dans le contexte de la division “main” aura son texte en gris foncé, alors que le même paragraphe placé dans la sidebar apparaîtra en bleu.

Ce mécanisme de “cascade” des styles s’appelle en anglais “Cascading Style Sheet”, ou CSS.

La vraie difficulté, lorsqu’on commence à bricoler dans les styles, est de trouver comment intituler la feuille de style pour qu’elle désigne le bon contexte, qu’elle devienne capable de surcharger la cascade déjà en service à cet endroit de la page. Heureusement, les navigateurs disposent de puissants outils destinés aux développeurs web.

Dans Safari sur Mac, allez dans les préférences, sélectionnez l’onglet des préférences “Avancées” et cochez l’option “Afficher le menu Développement dans la barre des menus”. Ceci fera apparaître un menu supplémentaire avec des outils divers, donc un qui vous intéresse en particulier. Sélectionnez dans ce menu “Afficher l’inspecteur web” pour faire apparaître cet inspecteur.

Il existe des outils équivalents, en standard ou sous forme d’extension, pour tous les navigateurs. Firefox comporte une extension “Web Developer” également très complète. Chrome comporte aussi des outils de développement. Je suis un peu démuni pour vous guider côté PC, n’en ayant pas sous la main, mais ici encore, Google (ou DuckDuckGo) est votre ami.

Avec Safari, trouver le style attaché à un élément sur la page est un jeu d’enfant. Affichez l’inspecteur web, puis cliquez sur le bouton  pour passer en mode “cible”. Survolez ensuite la page pour afficher les informations sur l’élément, par exemple :

La bulle indique directement le style, ici “h2.widget-title”, autrement dit “titre de niveau 2 (h2 = heading 2) appartenant à la classe widget-title”. Si l’on crée un style intitulé ainsi, tous les titres de widgets (qui partagent cette feuille de style) utiliseront les propriétés de ce style, en cascade avec celles déjà définies par le parent.

Safari affiche aussi, en orange, les marges de l’élément survolé, qui sont également définies par les CSS et donc faciles à modifier (margin-top, margin-left, etc.).

Si l’on veut “contextualiser” plus précisément, il suffit de revenir en mode “cible” et de désigner l’élément “conteneur” du précédent, en d’autres termes remonter d’un cran dans la cascade :

On voit ici apparaître un style “section#categories-3.widget.widget_categories”, qui manifestement identifie de façon explicite le widget des catégories. Du coup, si l’on veut cibler le titre de ce widget en particulier, le style à créer devra indiquer toute la cascade pour atteindre précisément son but :

section#categories-3.widget.widget_categories h2.widget-title {
    color: green;
}

Remarquez que les noms des styles ne comportent jamais d’espaces, ceux-ci permettent de séparer les différents “étages” de la cascade (ici juste avant “h2”). Cette longue incantation se lit donc ainsi : colorie en vert le texte des titres de niveau 2 de widgets, mais uniquement dans le widget dont la classe est “widget_categories”. On y trouve aussi des références à la section de sidebar dédiée aux catégories et située en 3e position parmi les sections.

Cet article ne vise pas à être un tutoriel sur les CSS, au-delà de ce rapide survol des concepts de base. Vous en trouverez facilement sur internet. Ici un article du codex en français qui résume un peu ce qui précède avec plus de détails. Et voilà une liste de quelques pages trouvée en cinq secondes :

Modifier la police du thème

Un usage courant du thème-enfant est de modifier la police du thème, ce qui permet de le personnaliser facilement. Mais il est important de bien comprendre comment ça marche.

Admettons que vous vouliez utiliser une police “bâton” (sans sérifs) nommée “MaPolice”. Si vous indiquez dans un style un attribut “font-family: MaPolice, sans-serif;”, il est probable que votre visiteur ne dispose pas de la police MaPolice sur son ordinateur (ou son téléphone ou sa tablette), du coup il verra votre page en Helvetica ou en Arial, qui sont les polices bâtons par défaut respectivement sur Mac/iOS et sur Windows. Ce n’est pas ce que vous voulez, donc il faut faire autrement.

Il serait possible d’installer votre police sur le serveur et de l’intégrer aux éléments envoyés vers le visiteur. Mais c’est un peu technique, et rapidement lourd si le site est très actif. Heureusement, Google met à la disposition des webmasters (c’est vous) une large bibliothèque de polices prêtes à l’emploi. Il n’y a pas besoin de les installer, il suffit de les référencer dans les styles, et c’est le navigateur du visiteur qui ira chercher la police manquante si besoin directement chez Google.

L’opération se fait en trois temps :

  1. Chercher dans la bibliothèque la police à utiliser (ou les polices, il est fréquent d’en utiliser deux, l’une pour le texte et l’autre pour les titres).
  2. Coller dans le fichier “style.css” un en-tête fourni par Google pour importer les références des polices.
  3. Utiliser les polices dans les feuilles de style désirées.

Chercher dans la bibliothèque

Allez visiter la bibliothèque sur https://fonts.google.com/ et cherchez une ou plusieurs polices qui vous plaisent, vous semblent coller avec le thème et marchent bien ensemble. Vous verrez que le site propose une sorte de panier qui permet de collecter les polices.

En bas de la fenêtre, le panier apparaît brièvement chaque fois qu’on y ajoute quelque chose. On peut le déployer en cliquant dessus, supprimer une police du panier ou le vider complètement. L’indicateur “Load Time” doit être surveillé, s’il n’est pas vert, c’est que le panier contient trop de polices et que cela risque de ralentir le chargement des pages.

Import de la référence des polices

Lorsque le panier vous convient, ouvrez-le complètement et cliquez sur  pour basculer dans ce mode. Copiez la ligne qui commence par “@import”, ne prenez pas les balises <style> :

Gardez la page Google ouverte pour la suite. Dans une autre fenêtre de votre navigateur, revenez sur votre site et allez sur “Apparence” puis “Éditeur”. Collez la ligne ci-dessus au début du fichier “style.css”, mais après l’en-tête, par exemple comme ceci :

/*
 Theme Name: Twenty Sixteen Child
 Theme URI: http://domaine.fr/wp-content/themes/twentysixteen-child/
 Description: Twenty Sixteen Child Theme
 Author: Simone Envoiture
 Author URI: http://domaine.fr/
 Template: twentysixteen
 Version: 1.3
 License: GNU General Public License v2 or later
 License URI: http://www.gnu.org/licenses/gpl-2.0.html
 Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain: twentysixteen-child
*/

@import url('https://fonts.googleapis.com/css?family=Anton|Yanone+Kaffeesatz');

Cette indication “@import” suffit pour créer la référence vers les Google fonts.

Utilisation des polices dans les styles

Si vous n’avez installé qu’une unique police et que vous voulez l’utiliser partout, vous pouvez passer par un style “joker” qui représentera tout à la fois. Autrement dit, le joker forcera l’utilisation de votre police dans toutes les feuilles de style, à l’exception d’un petit nombre où la police est indiquée par le parent avec un plus haut niveau de priorité (c’est le cas, par exemple, pour les titres des widgets dans certains thèmes).

Ajoutez simplement ceci au fichier de style :

* {
    font-family: 'Anton', sans-serif;
}

Si un élément de la page refuse obstinément de changer de police, identifiez le style concerné comme expliqué plus haut. Vous pouvez l’ajouter explicitement en séparant les styles par une virgule, comme ci-dessous où l’on ajoute le style “.entry-title” pour forcer la police à changer aussi sur le titre de l’article.

*, .entry-title {
    font-family: 'Anton', sans-serif;
}

Bien sûr, si vous avez installé plusieurs polices, c’est à vous d’ajouter d’autres styles pour indiquer à WordPress dans quels contextes utiliser chaque police. C’est un peu plus difficile mais ce n’est pas inabordable, et si besoin, cela peut se faire par étapes progressives.

Et voilà !

Expérimentez avec les styles, c’est tout l’intérêt du web sémantique ! Amusez-vous bien. 🙂