Bien \u00e9videmment, c’est abominablement laborieux, potentiellement source d’erreurs et fort p\u00e9nible. On a \u00e9t\u00e9 longtemps condamn\u00e9 \u00e0 cette punition r\u00e9guli\u00e8re, puis les mises \u00e0 jour de WP sont devenues si fr\u00e9quentes qu’il a bien fallu que quelqu’un trouve une meilleure solution\u2026 le th\u00e8me-enfant<\/strong>.<\/p>\n Nota : l’auteur a choisi des solutions\u00a0simples \u00e0 mettre en \u0153uvre. L’article est destin\u00e9 \u00e0 ceux\u00a0dont l’int\u00e9r\u00eat pour la technique n’est pas la priorit\u00e9, mais qui souhaitent n\u00e9anmoins avoir la ma\u00eetrise de leur site WordPress. Le texte n’\u00e9voque pas SSH ni sFTP qui seraient hors-sujet, et les explications sur les CSS sont minimales. Le lecteur int\u00e9ress\u00e9 trouvera beaucoup de ressources sur ces points disponibles sur internet. Les \u00e9l\u00e9ments relatifs \u00e0 l’h\u00e9bergement ont \u00e9t\u00e9 r\u00e9alis\u00e9s sur Infomaniak, mais pourraient \u00eatre transpos\u00e9s facilement ailleurs.<\/em><\/p>\n Un th\u00e8me-enfant est une coquille o\u00f9 l’on trouve trois\u00a0\u00e9l\u00e9ments obligatoires :<\/p>\n \u2014 Un fichier de feuilles de style nomm\u00e9 \u201cstyle.css<\/strong>\u201d. Ce fichier, par convention, doit contenir un en-t\u00eate (d\u00e9taill\u00e9 plus loin) qui d\u00e9crit la relation entre le th\u00e8me-enfant et son \u201cparent\u201d, c’est cette convention qui le rend obligatoire. En-dehors de cela, il peut ne contenir aucun style particulier, tout le reste est facultatif.<\/p>\n \u2014 Un fichier \u201cscreenshot.png<\/strong>\u201d d’une taille standardis\u00e9e \u00e0 1200 x 900 pixels (toujours en 72 dpi). Cette image repr\u00e9sentera le th\u00e8me dans la galerie des th\u00e8mes vue depuis WP. Elle n’est pas obligatoire, mais la galerie sera assez inesth\u00e9tique\u00a0si elle est manquante. L’image peut repr\u00e9senter absolument n’importe quoi, m\u00eame si par convention elle est cens\u00e9e pr\u00e9senter le th\u00e8me (personnellement j’ai choisi une t\u00eate de girafe, la premi\u00e8re image qui me soit\u00a0tomb\u00e9e sous la main).<\/p>\n \u2014 Enfin, pour que le th\u00e8me-enfant puisse injecter ses styles modifi\u00e9s dans le th\u00e8me parent, il faut que WP ex\u00e9cute une fonction en langage PHP qui aura pour effet d’ajouter notre fichier \u201cstyle.css\u201d dans la liste des styles mis en service. Cette fonction PHP est plac\u00e9e dans un fichier \u201cfunctions.php<\/strong>\u201d qui est d\u00e9crit plus loin.<\/p>\n L’ensemble de ces trois \u00e9l\u00e9ments est group\u00e9 dans un r\u00e9pertoire (un dossier) dont le nom est, par convention, identique \u00e0 celui du th\u00e8me parent avec le suffixe \u201c-child\u201d, par exemple \u201ctwentysixteen-child\u201d si le th\u00e8me parent est \u201ctwentysixteen\u201d (le nom technique du th\u00e8me, en minuscules et sans espaces, est plus condens\u00e9 que le nom d’affichage \u201cTwenty Sixteen\u201d).<\/p>\n Ce r\u00e9pertoire doit \u00eatre cr\u00e9\u00e9 manuellement, au m\u00eame endroit que les th\u00e8mes existants sur l’espace d’h\u00e9bergement. Pour y acc\u00e9der et manipuler directement les fichiers, il faut utiliser un client FTP<\/strong> (file transfer protocol). Nous verrons cela un peu plus loin, nous allons d’abord pr\u00e9parer les \u00e9l\u00e9ments \u00e0 installer.<\/p>\n Voici une archive .zip<\/a> que vous pouvez t\u00e9l\u00e9charger pour gagner du temps. Mais elle ne vous dispensera pas de lire ce qui suit, car vous devrez modifier les fichiers<\/strong> qu’elle contient pour les adapter \u00e0 votre domaine.<\/p>\n Nous allons utiliser un \u00e9diteur 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.<\/p>\n Le fichier de style ne contiendra, pour l’instant, que son en-t\u00eate, que vous pouvez copier ci-dessous :<\/p>\n La premi\u00e8re et la derni\u00e8re ligne indiquent que l’ensemble est un \u201ccommentaire\u201d et ne doit pas \u00eatre interpr\u00e9t\u00e9 comme une feuille de style. \u201c\/*\u201d signifie \u201cd\u00e9but de commentaire\u201d, \u201c*\/\u201d le termine.<\/p>\n Certains des champs doivent \u00eatre adapt\u00e9s \u00e0 votre situation personnelle. La seconde ligne \u201cTheme URI\u201d contient l’adresse du th\u00e8me-enfant. Vous devez remplacer la partie \u201cdomaine.fr\u201d par votre nom de domaine<\/strong>, et si vous cr\u00e9ez un th\u00e8me-enfant pour un autre th\u00e8me que \u201ctwentysixteen\u201d, corriger la fin en cons\u00e9quence. Idem pour la description et pour la derni\u00e8re ligne \u201cText Domain\u201d qui doit contenir le nom du th\u00e8me parent<\/strong> suivi de \u201c-child<\/strong>\u201d.<\/p>\n Le champ Author doit contenir votre pr\u00e9nom et votre nom<\/strong>. Le champ Author URI doit contenir l’adresse de votre site WordPress.<\/strong><\/p>\n Le champ Template doit contenir le nom du th\u00e8me parent<\/strong>, et le champ Version, sa version<\/strong>. Si vous cr\u00e9ez un th\u00e8me-enfant pour un autre th\u00e8me que \u201ctwentysixteen\u201d, vous devrez v\u00e9rifier la version<\/strong> de votre th\u00e8me parent et la reporter correctement ici.<\/p>\n Le champ Tags n’est utilis\u00e9 que dans le contexte de la recherche de th\u00e8mes, inutile de vous en pr\u00e9occuper. Les champs relatifs \u00e0 la licence, en revanche, ne doivent pas \u00eatre modifi\u00e9s.<\/p>\n Une fois le texte saisi, vous devez vous assurer de l’enregistrer dans le format appropri\u00e9. Dans TextEdit sur Mac, d\u00e9roulez le menu Format et s\u00e9lectionnez \u201cConvertir au format Texte\u201d, puis enregistrez-le sous le nom de \u201cstyle.css\u201d. Si vous \u00eates sous Word, enregistrez imp\u00e9rativement au format \u201cText brut\u201d et v\u00e9rifiez bien l’encodage, qui doit \u00eatre \u201cUTF-8\u201d, et les fins de lignes, qui doivent utiliser \u201cLF\u201d seulement (et non \u201cCR\u201d ou \u201cCR\/LF\u201d). Dans tous les cas, \u00e0 l’arriv\u00e9e, le document doit s’appeler \u201cstyle.css<\/strong>\u201d.<\/p>\n L’image du th\u00e8me-enfant est optionnelle mais d\u00e9corera plus joliment votre liste de th\u00e8mes. 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 \u201cscreenshot.png<\/strong>\u201d. Et si vous \u00eates \u00e0 cours d’id\u00e9e, vous pouvez utilisez la girafe<\/a>.<\/p>\n Rien \u00e0 modifier par rapport au fichier fourni dans l’archive .zip. Si vous pr\u00e9f\u00e9rez le cr\u00e9er vous-m\u00eame, proc\u00e9dez exactement comme pour le fichier de style, avec un \u00e9diteur de texte en mode \u201ctexte brut\u201d. Copiez le texte ci-dessous sans rien y changer, puis enregistrez-le sous le nom de \u201cfunctions.php<\/strong>\u201d.<\/p>\n Nos trois fichiers sont maintenant pr\u00eats \u00e0 \u00eatre install\u00e9s sur l’espace d’h\u00e9bergement.<\/p>\n Avant de pouvoir acc\u00e9der \u00e0 votre h\u00e9bergement en FTP, vous devez cr\u00e9er un utilisateur FTP<\/strong>\u00a0pour vous-m\u00eame, et lui attribuer un mot de passe.<\/p>\n Allez\u00a0sur Infomaniak<\/a> et connectez-vous sur votre console d’administration.<\/p>\n S\u00e9lectionnez votre h\u00e9bergement web :<\/strong><\/p>\n Cliquez sur le bouton\u00a0 S\u00e9lectionnez le r\u00e9pertoire web<\/strong> dans la liste s’il n’est pas d\u00e9j\u00e0 s\u00e9lectionn\u00e9.<\/p>\n Votre serveur aura un autre intitul\u00e9 que le\u00a0\u201cmtez\u201d qui appara\u00eet ici (c’est le mien), chacun aura un groupe de quatre lettres distinct que vous devez noter car il pr\u00e9fixe votre nom de compte (par exemple ici mon nom de compte est \u201cmtez_benoit\u201d avec un caract\u00e8re \u201csoulign\u00e9\u201d entre les deux), ainsi que votre nom de serveur FTP.<\/p>\n Indiquez dans le dialogue le nom de compte souhait\u00e9, en minuscules sans accents ni c\u00e9dilles ni espaces ni ponctuations. Choisissez un mot de passe diff\u00e9rent des autres par s\u00e9curit\u00e9 et notez toutes ces informations en lieu s\u00fbr. Enregistrez le nouveau compte.<\/p>\n \u00c0 ce stade, si vous \u00eates d\u00e9j\u00e0 familier du FTP et que vous disposez d’une application cliente (Transmit, CyberDuck, FileZilla\u2026 il y en a plein), vous pouvez la param\u00e9trer en utilisant le nom de serveur indiqu\u00e9 (votre pr\u00e9fixe suivi de \u201c.vps.infomaniak.com\u201d, par exemple pour moi \u201cmtez.vps.infomaniak.com\u201d), votre nom de compte\u00a0(votre pr\u00e9fixe suivi d’un \u201csoulign\u00e9\u201d puis votre nom d’utilisateur tel que vous l’avez saisi dans le dialogue ci-dessus, par exemple pour moi \u201cmtez_benoit\u201d), et votre mot de passe. Ces trois param\u00e8tres (serveur, login et mot de passe) suffisent pour se connecter en FTP.<\/p>\n Si au contraire vous ne disposez pas d’une application cliente, vous pouvez la remplacer par la connexion web propos\u00e9e par Infomaniak. Pour cela, allez sur la page d’accueil d’Infomaniak<\/a>\u00a0et connectez-vous directement sur l’acc\u00e8s FTP :<\/p>\n Sur la page qui appara\u00eet, saisissez votre nom de domaine (pour moi \u201cwidemann.net\u201d), votre nom de compte (pour moi \u201cmtez_benoit\u201d) et votre mot de passe FTP tel que vous l’avez d\u00e9fini ci-dessus. (Le caract\u00e8re \u201csoulign\u00e9\u201d s’obtient sur Mac avec la combinaison [majuscule trait d’union], sur PC avec la touche \u201c8\u201d du clavier principal.)<\/em><\/p>\n Une fois la connexion FTP \u00e9tablie, vous devriez voir appara\u00eetre les fichiers constituant\u00a0votre site WordPress. ATTENTION,<\/span><\/strong> \u00e0 partir de l\u00e0, soyez vigilant car vous avez tous les pouvoirs sur votre h\u00e9bergement<\/strong>. Rien n’est jamais irr\u00e9m\u00e9diable, (Infomaniak fait des sauvegardes pour vous tous les jours) mais une erreur peut rendre le site non fonctionnel et n\u00e9cessiter ensuite une maintenance que vous ne serez peut-\u00eatre pas capable d’op\u00e9rer vous-m\u00eame… autant l’\u00e9viter et faire attention.<\/p>\n S\u00e9lectionnez le r\u00e9pertoire\u00a0\u201cweb\u201d s’il n’est pas d\u00e9j\u00e0 s\u00e9lectionn\u00e9.\u00a0 (Il est possible qu’il n’apparaisse pas, si votre point d’entr\u00e9e sur le serveur est d\u00e9j\u00e0 ce m\u00eame r\u00e9pertoire web, auquel cas vous n’avez rien \u00e0 faire.)<\/p>\n S\u00e9lectionnez le r\u00e9pertoire \u201cwp-content\u201d, puis \u201cthemes\u201d. La liste des th\u00e8mes install\u00e9s doit appara\u00eetre dans la partie droite de la fen\u00eatre.<\/p>\n Cliquez sur le bouton\u00a0 Validez votre saisie avec \u201centr\u00e9e\u201d ou \u201cretour\u201d (la touche de retour \u00e0 la ligne). Le nouveau r\u00e9pertoire doit appara\u00eetre dans la partie droite de la fen\u00eatre.<\/p>\n Cliquez sur son nom pour le s\u00e9lectionner. La liste des fichiers, \u00e0 droite, doit \u00eatre vide puisque le r\u00e9pertoire ne contient encore rien. Il y a juste un pseudo-\u00e9l\u00e9ment repr\u00e9sent\u00e9 par une fl\u00e8che verte, qui sert \u00e0 remonter vers le r\u00e9pertoire parent, vous pouvez l’ignorer.<\/p>\n Cliquez sur \u201cEnvoyer des fichiers\u201d et envoyez les trois \u00e9l\u00e9ments pr\u00e9par\u00e9s au chapitre pr\u00e9c\u00e9dent : \u201cfunctions.php<\/strong>\u201d, \u201cscreenshot.png<\/strong>\u201d et \u201cstyle.css<\/strong>\u201d. Vous pouvez alternativement utiliser la zone en bas de la fen\u00eatre qui accepte un glisser-d\u00e9poser des fichiers.<\/p>\n Voil\u00e0, votre th\u00e8me-enfant est install\u00e9, mais il n’est pas encore actif. Tout le reste se fera dans WordPress, vous pouvez refermer la fen\u00eatre sur Infomaniak et vous connecter sur le back-office de votre site WordPress.<\/p>\n S\u00e9lectionnez \u201cApparence\u201d puis \u201cTh\u00e8mes<\/strong>\u201d. Vous devriez voir votre th\u00e8me-enfant dans la liste des th\u00e8mes install\u00e9s.<\/p>\n En survolant son image, vous verrez appara\u00eetre un bouton \u201cActiver<\/strong>\u201d que vous devez cliquer pour mettre en service votre th\u00e8me-enfant.<\/p>\n Revenez sur le site public : rien n’a chang\u00e9, ce qui est normal puisque le th\u00e8me-enfant h\u00e9rite de toutes les caract\u00e9ristiques de son parent, et qu’on n’y a encore rien fait.<\/p>\n S\u00e9lectionnez \u201cApparence\u201d puis \u201c\u00c9diteur<\/strong>\u201d. Vous devriez voir le fichier \u201cstyle.css\u201d dans un \u00e9diteur de texte qui vous permet de le modifier.<\/p>\n La premi\u00e8re fois, v\u00e9rifiez la pr\u00e9sence du bouton\u00a0 Si c’est n\u00e9cessaire, donc, ouvrez une autre fen\u00eatre de navigation et reconnectez-vous en FTP. Allez jusqu’au th\u00e8me-enfant. Sur la ligne du fichier \u201cstyle.css\u201d, cliquez sur l’ic\u00f4ne de roue dent\u00e9e\u00a0 Dans le dialogue des propri\u00e9t\u00e9s, cochez toutes les cases \u201c\u00e9crire\u201d<\/strong>, puis cliquez sur \u201cValider\u201d.\u00a0Revenez ensuite sur l’\u00e9diteur dans WordPress et rechargez la page : le bouton\u00a0 Notez que, selon la configuration, il est possible que le bouton apparaisse alors que\u00a0seul le \u201cpropri\u00e9taire\u201d du fichier dispose du droit d’\u00e9crire. C’est le cas si WordPress est param\u00e9tr\u00e9 pour utiliser le m\u00eame nom d’utilisateur que vous sur le serveur. Dans ce cas, aucune correction n’est n\u00e9cessaire.<\/p>\n Le th\u00e8me enfant fonctionne sur le principe de la surcharge<\/strong>. C’est un terme de programmation qui signifie que l’on injecte un \u00e9l\u00e9ment qui vient remplacer, ou compl\u00e9ter, ou s’ajouter aux \u00e9l\u00e9ments existants.<\/p>\n Par exemple, imaginons que le texte d’un article est en Helvetica 12 points, avec une couleur gris fonc\u00e9. Le th\u00e8me parent contient un style qui ressemble \u00e0 ceci :<\/p>\n \u201cp\u201d est un raccourci pour \u201cparagraphe\u201d et d\u00e9signe le contexte s\u00e9mantique o\u00f9 cette feuille de style doit s’appliquer. Les accolades marquent le d\u00e9but et la fin de la feuille de style, et sont souvent plac\u00e9es de cette fa\u00e7on pour bien faire ressortir leur contenu, o\u00f9 l’on trouve une propri\u00e9t\u00e9 par ligne.<\/p>\n La propri\u00e9t\u00e9 \u201cfont-family\u201d contient presque toujours une liste de polices par ordre de pr\u00e9f\u00e9rence d\u00e9croissante et se terminant par une indication g\u00e9n\u00e9rique \u201cserif\u201d ou \u201csans-serif\u201d, autrement dit \u201cpolice avec s\u00e9rifs\u201d (par exemple Times) ou \u201cpolice b\u00e2ton\u201d (par exemple Helvetica), sur laquelle le navigateur se rabattra si aucune des polices demand\u00e9es n’est pr\u00e9sente.<\/p>\n Dans le th\u00e8me enfant, vous pouvez changer la couleur du texte sans alt\u00e9rer le reste en ins\u00e9rant cette feuille de style :<\/p>\n La propri\u00e9t\u00e9 \u201ccolor\u201d ainsi ajout\u00e9e viendra \u201csurcharger\u201d celle du th\u00e8me parent et la remplacer. Mais les autres propri\u00e9t\u00e9s d\u00e9finies dans le parent restent actives.<\/p>\n Les CSS s’appliquent \u00e9galement en fonction de leur contexte d’utilisation<\/strong>. Dans une page d’article, par exemple, on trouve une zone (appel\u00e9e \u201cdivision\u201d et abr\u00e9g\u00e9e en \u201cdiv\u201d) qui contient l’int\u00e9gralit\u00e9 de l’article, et une autre zone qui contient l’int\u00e9gralit\u00e9 de la sidebar. Or, un paragraphe dans l’article n’est pas la m\u00eame chose qu’un paragraphe dans un widget de la sidebar\u2026 m\u00eame si les deux sont simplement identifi\u00e9s par un \u201cp\u201d s\u00e9mantique.<\/p>\n La cascade des styles permet de distinguer ais\u00e9ment les deux en d\u00e9finissant un contexte. La division \u201cmain\u201d (anglais pour \u201cprincipale\u201d) contient l’article, et l’\u00e9l\u00e9ment \u201caside\u201d englobe la totalit\u00e9 de la sidebar.<\/p>\n Le paragraphe dans le contexte de la division \u201cmain\u201d aura son texte en gris fonc\u00e9, alors que le m\u00eame paragraphe plac\u00e9 dans la sidebar appara\u00eetra en bleu.<\/p>\n Ce m\u00e9canisme de \u201ccascade\u201d des styles\u00a0s’appelle en anglais \u201cCascading Style Sheet\u201d, ou CSS.<\/p>\n La vraie difficult\u00e9, lorsqu’on commence \u00e0 bricoler dans les styles, est de trouver comment intituler la feuille de style pour qu’elle d\u00e9signe le bon contexte, qu’elle devienne capable de surcharger la cascade d\u00e9j\u00e0 en service \u00e0 cet endroit de la page. Heureusement, les navigateurs disposent de puissants outils destin\u00e9s aux d\u00e9veloppeurs web.<\/p>\n Dans Safari sur Mac, allez dans les pr\u00e9f\u00e9rences, s\u00e9lectionnez l’onglet des pr\u00e9f\u00e9rences \u201cAvanc\u00e9es\u201d et cochez l’option \u201cAfficher le menu D\u00e9veloppement dans la barre des menus\u201d. Ceci fera appara\u00eetre un menu suppl\u00e9mentaire avec des outils divers, donc un qui vous int\u00e9resse en particulier. S\u00e9lectionnez dans ce menu \u201cAfficher l’inspecteur web<\/strong>\u201d pour faire appara\u00eetre cet inspecteur.<\/p>\n Il existe des outils \u00e9quivalents, en standard ou sous forme d’extension, pour tous les navigateurs. Firefox comporte une extension \u201cWeb Developer\u201d \u00e9galement tr\u00e8s compl\u00e8te. Chrome comporte aussi des outils de d\u00e9veloppement. Je suis un peu d\u00e9muni pour vous guider c\u00f4t\u00e9 PC, n’en ayant pas sous la main, mais ici encore, Google (ou DuckDuckGo) est votre ami.<\/p>\n Avec Safari, trouver le style attach\u00e9 \u00e0 un \u00e9l\u00e9ment sur\u00a0la page est un jeu d’enfant. Affichez l’inspecteur web, puis cliquez sur le bouton\u00a0 La bulle indique directement le style, ici \u201ch2.widget-title\u201d, autrement dit \u201ctitre de niveau 2 (h2 = heading 2<\/em>) appartenant \u00e0 la classe widget-title<\/em>\u201d. Si l’on cr\u00e9e un style intitul\u00e9 ainsi, tous les titres de widgets (qui partagent cette feuille de style) utiliseront les propri\u00e9t\u00e9s de ce style, en cascade avec celles d\u00e9j\u00e0 d\u00e9finies par le parent.<\/p>\n Safari affiche aussi, en orange, les marges de l’\u00e9l\u00e9ment survol\u00e9, qui sont \u00e9galement d\u00e9finies par les CSS et donc faciles \u00e0 modifier (margin-top, margin-left, etc.).<\/p>\n Si l’on veut \u201ccontextualiser\u201d plus pr\u00e9cis\u00e9ment, il suffit de revenir en mode \u201ccible\u201d et de d\u00e9signer l’\u00e9l\u00e9ment \u201cconteneur\u201d du pr\u00e9c\u00e9dent, en d’autres termes remonter d’un cran dans la cascade :<\/p>\n On voit ici appara\u00eetre un style \u201csection#categories-3.widget.widget_categories\u201d, qui manifestement identifie de fa\u00e7on explicite le widget des cat\u00e9gories. Du coup, si l’on veut cibler le titre de ce widget en particulier, le style \u00e0 cr\u00e9er devra indiquer toute la cascade pour atteindre pr\u00e9cis\u00e9ment son but :<\/p>\n Remarquez que les noms des styles ne comportent jamais d’espaces, ceux-ci permettent de s\u00e9parer les diff\u00e9rents \u201c\u00e9tages\u201d de la cascade (ici juste avant \u201ch2\u201d). Cette longue incantation se lit donc ainsi :\u00a0colorie en vert le texte des titres de niveau 2 de widgets, mais uniquement dans le widget dont la classe est \u201cwidget_categories\u201d<\/em>. On y trouve aussi des r\u00e9f\u00e9rences \u00e0 la section de sidebar d\u00e9di\u00e9e aux cat\u00e9gories et situ\u00e9e en 3e position parmi les sections.<\/p>\n Cet article ne vise pas \u00e0 \u00eatre un tutoriel sur les CSS, au-del\u00e0 de ce rapide survol des concepts de base. Vous en trouverez facilement sur internet. Ici\u00a0un article du codex<\/a> en fran\u00e7ais qui r\u00e9sume un peu ce qui pr\u00e9c\u00e8de avec plus de d\u00e9tails. Et voil\u00e0 une liste de quelques pages trouv\u00e9e en cinq secondes :<\/p>\n Un usage courant du th\u00e8me-enfant est de modifier la police du th\u00e8me, ce qui permet de le personnaliser facilement. Mais il est important de bien comprendre comment \u00e7a marche.<\/p>\n Admettons que vous vouliez utiliser une police \u201cb\u00e2ton\u201d (sans s\u00e9rifs) nomm\u00e9e \u201cMaPolice\u201d. Si vous indiquez dans un style un attribut \u201cfont-family: MaPolice, sans-serif;\u201d, il est probable que votre visiteur ne dispose pas de la police<\/strong> MaPolice sur son ordinateur (ou son t\u00e9l\u00e9phone ou sa tablette), du coup il verra votre page en Helvetica ou en Arial, qui sont les polices b\u00e2tons par d\u00e9faut respectivement sur Mac\/iOS et sur Windows. Ce n’est pas ce que vous voulez, donc il faut faire autrement.<\/p>\n Il serait possible d’installer votre\u00a0police sur le serveur et de l’int\u00e9grer aux \u00e9l\u00e9ments envoy\u00e9s vers le visiteur. Mais c’est un peu technique, et rapidement lourd si le site est tr\u00e8s actif. Heureusement, Google met \u00e0 la disposition des webmasters (c’est vous) une large biblioth\u00e8que de polices pr\u00eates \u00e0 l’emploi. Il n’y a pas besoin de les installer, il suffit de les r\u00e9f\u00e9rencer dans les styles<\/strong>, et c’est le navigateur du visiteur qui ira chercher la police manquante si besoin directement chez Google.<\/p>\n L’op\u00e9ration se fait en trois temps :<\/p>\n Allez visiter la biblioth\u00e8que sur https:\/\/fonts.google.com\/<\/a> et cherchez une ou plusieurs polices qui vous plaisent, vous semblent coller avec le th\u00e8me et marchent bien ensemble. Vous verrez que le site propose une sorte de panier qui permet de collecter les polices.<\/p>\n En bas de la fen\u00eatre, le panier appara\u00eet bri\u00e8vement chaque fois qu’on y ajoute quelque chose. On peut le d\u00e9ployer en cliquant dessus, supprimer une police du panier ou le vider compl\u00e8tement. L’indicateur \u201cLoad Time\u201d doit \u00eatre surveill\u00e9, 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.<\/p>\n Lorsque le panier vous convient, ouvrez-le compl\u00e8tement et cliquez sur\u00a0 Gardez la page Google ouverte pour la suite. Dans une autre fen\u00eatre de votre navigateur, revenez sur votre site et allez sur \u201cApparence\u201d puis \u201c\u00c9diteur\u201d. Collez la ligne ci-dessus au d\u00e9but du fichier \u201cstyle.css\u201d, mais apr\u00e8s l’en-t\u00eate, par exemple comme ceci :<\/p>\n Cette indication \u201c@import\u201d suffit pour\u00a0cr\u00e9er la r\u00e9f\u00e9rence vers les Google fonts.<\/p>\n Si vous n’avez install\u00e9 qu’une unique police et que vous voulez l’utiliser partout, vous pouvez passer par un style \u201cjoker\u201d qui repr\u00e9sentera tout \u00e0 la fois. Autrement dit, le joker forcera l’utilisation de votre police dans toutes les feuilles de style, \u00e0 l’exception d’un petit nombre o\u00f9 la police est indiqu\u00e9e par le parent avec un plus haut niveau de priorit\u00e9 (c’est le cas, par exemple, pour les titres des widgets dans certains th\u00e8mes).<\/p>\n Ajoutez simplement ceci au fichier de style :<\/p>\n Si un \u00e9l\u00e9ment de la page refuse obstin\u00e9ment de changer de police, identifiez le style concern\u00e9 comme expliqu\u00e9 plus haut. Vous pouvez l’ajouter explicitement en s\u00e9parant les styles par une virgule, comme ci-dessous o\u00f9 l’on ajoute le style \u201c.entry-title\u201d pour forcer la police \u00e0 changer aussi sur le titre de l’article.<\/p>\n Bien s\u00fbr, si vous avez install\u00e9 plusieurs polices, c’est \u00e0 vous d’ajouter d’autres styles pour indiquer \u00e0 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 \u00e9tapes progressives.<\/p>\n Exp\u00e9rimentez avec les styles, c’est tout l’int\u00e9r\u00eat du web s\u00e9mantique ! Amusez-vous bien. \ud83d\ude42<\/p>\n Mise \u00e0 jour :<\/strong> le site WP Marmite<\/a> propose maintenant un outil simplifiant la cr\u00e9ation d’un th\u00e8me-enfant, ainsi d’ailleurs que plein d’autres choses int\u00e9ressantes. N’h\u00e9sitez pas \u00e0 aller le visiter.<\/p>\n <\/p>\n","protected":false},"excerpt":{"rendered":" Il est\u00a0tentant de modifier un th\u00e8me \u201cpresque parfait\u201d pour le forcer exactement \u00e0 sa main, lui donner un caract\u00e8re plus personnel tout en conservant les atouts du th\u00e8me. Mais cette modification rend ensuite le th\u00e8me impropre \u00e0 la mise \u00e0 jour, puisque WordPress ne reconna\u00eetra plus les fichiers modifi\u00e9s et ne pourra plus appliquer automatiquement … Continue reading “WordPress : cr\u00e9ation d’un th\u00e8me-enfant”<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29,33],"tags":[56],"class_list":["post-1241","post","type-post","status-publish","format-standard","hentry","category-logiciels","category-site","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/posts\/1241","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/comments?post=1241"}],"version-history":[{"count":4,"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/posts\/1241\/revisions"}],"predecessor-version":[{"id":1486,"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/posts\/1241\/revisions\/1486"}],"wp:attachment":[{"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/media?parent=1241"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/categories?post=1241"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/widemann.net\/wp-fr\/wp-json\/wp\/v2\/tags?post=1241"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}Le\u00a0th\u00e8me-enfant<\/h2>\n
Pr\u00e9paration des fichiers<\/h2>\n
Style.css<\/h3>\n
\/*\r\n Theme Name: Twenty Sixteen Child\r\n Theme URI: http:\/\/domaine.fr\/wp-content\/themes\/twentysixteen-child\/\r\n Description: Twenty Sixteen Child Theme\r\n Author: Simone Envoiture\r\n Author URI: http:\/\/domaine.fr\/\r\n Template: twentysixteen\r\n Version: 1.3\r\n License: GNU General Public License v2 or later\r\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\r\n Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\r\n Text Domain: twentysixteen-child\r\n*\/<\/pre>\n
screenshot.png<\/h3>\n
functions.php<\/h3>\n
<?php\r\nfunction my_theme_enqueue_styles() {\r\n $parent_style = 'parent-style';\r\n wp_enqueue_style( $parent_style, get_template_directory_uri() . '\/style.css' );\r\n wp_enqueue_style( 'child-style',\r\n get_stylesheet_directory_uri() . '\/style.css',\r\n array( $parent_style ),\r\n wp_get_theme()->get('Version')\r\n );\r\n}\r\nadd_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );\r\n?><\/pre>\nAcc\u00e8s FTP \u00e0 l’h\u00e9bergement<\/h2>\n
![](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-12.56.03.png\")
<\/strong>Cliquez sur votre nom de domaine pour afficher les d\u00e9tails.<\/p>\n![](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-12.57.01-1.png\")
Dans l’\u00e9cran suivant, dans la marge gauche, s\u00e9lectionnez l’\u00e9cran FTP \/ SSH<\/strong>\u00a0pour afficher les comptes FTP existants.<\/p>\n![](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-13.02.36.png\")
<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-12.49.00.png\")
\u00a0pour cr\u00e9er un nouveau compte, ce qui fait appara\u00eetre le dialogue suivant :<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-12.52.14.png\")
Si le dialogue a une apparence diff\u00e9rente, v\u00e9rifiez qu’il est en mode FTP<\/strong> et non FTP+SSH.<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-14.55.36.png\")
<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-15.14.35.png\")
\u00a0au-dessus du champ de recherche, pour cr\u00e9er un nouveau r\u00e9pertoire. Le r\u00e9pertoire appara\u00eet dans la sidebar \u00e0 gauche, nommez-le exactement comme le r\u00e9pertoire du th\u00e8me parent en ajoutant \u201c-child\u201d, par exemple \u201ctwentysixteen-child\u201d. Respectez bien la saisie tout en minuscules et sans espaces car toute erreur\u00a0de frappe emp\u00eachera le fonctionnement.<\/p>\nMise en service\u00a0du th\u00e8me-enfant<\/h2>\n
Acc\u00e8s aux fichiers depuis WordPress<\/h2>\n
V\u00e9rification des droits d’acc\u00e8s<\/h3>\n
![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-17.09.40.png\")
\u00a0sous l’\u00e9diteur de texte. S’il n’est pas pr\u00e9sent, cela signifie que les attributs du fichier doivent \u00eatre corrig\u00e9s pour que WordPress puisse y acc\u00e9der en lecture et en \u00e9criture. En l’\u00e9tat, WordPress peut lire le fichier, mais n’a pas le droit d’y \u00e9crire, ce qui vous interdira d’enregistrer vos modifications.<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-17.17.13.png\")
\u00a0pour acc\u00e9der aux propri\u00e9t\u00e9s\u00a0du fichier<\/strong>.<\/p>\n\u00a0doit appara\u00eetre.<\/p>\nMais qu’est-ce qu’on peut y \u00e9crire ?<\/h3>\n
p {\r\n font-family: Helvetica, sans-serif;\r\n font-size: 12px;\r\n color: darkgray;\r\n}<\/pre>\np {\r\n color: violet;\r\n}<\/pre>\nComment trouver la feuille de style \u00e0 modifier<\/h3>\n
div#main p {\r\n color: darkgray;\r\n}\r\n\r\naside p {\r\n color: blue;\r\n}<\/pre>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-18.20.25.png\")
\u00a0pour passer en mode \u201ccible\u201d. Survolez ensuite la page pour afficher les informations sur l’\u00e9l\u00e9ment, par exemple :<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-18.23.31.png\")
<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-18.29.10.png\")
<\/p>\nsection#categories-3.widget.widget_categories h2.widget-title {\r\n color: green;\r\n}<\/pre>\n\n
Modifier la police du th\u00e8me<\/h2>\n
\n
Chercher dans la biblioth\u00e8que<\/h3>\n
![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-23.05.04.png\")
<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-23.07.08.png\")
<\/p>\nImport de la r\u00e9f\u00e9rence des polices<\/h3>\n
![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-23.15.18.png\")
\u00a0pour basculer dans ce mode. Copiez la ligne qui commence par \u201c@import\u201d, ne prenez pas les balises <style> :<\/p>\n![\"\"](\"https:\/\/widemann.net\/wp-fr\/wp-content\/uploads\/2017\/01\/Screen-Shot-2017-01-15-at-23.16.58.png\")
<\/p>\n\/*\r\n Theme Name: Twenty Sixteen Child\r\n Theme URI: http:\/\/domaine.fr\/wp-content\/themes\/twentysixteen-child\/\r\n Description: Twenty Sixteen Child Theme\r\n Author: Simone Envoiture\r\n Author URI: http:\/\/domaine.fr\/\r\n Template: twentysixteen\r\n Version: 1.3\r\n License: GNU General Public License v2 or later\r\n License URI: http:\/\/www.gnu.org\/licenses\/gpl-2.0.html\r\n Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready\r\n Text Domain: twentysixteen-child\r\n*\/\r\n\r\n@import url('https:\/\/fonts.googleapis.com\/css?family=Anton|Yanone+Kaffeesatz<\/span>');<\/pre>\nUtilisation des polices dans les styles<\/h3>\n
* {\r\n font-family: 'Anton', sans-serif;\r\n}<\/pre>\n*, .entry-title {\r\n font-family: 'Anton', sans-serif;\r\n}<\/pre>\nEt voil\u00e0 !<\/h2>\n
\n