{"id":2925,"date":"2012-10-03T08:54:01","date_gmt":"2012-10-03T06:54:01","guid":{"rendered":"https:\/\/www.creativejuiz.fr\/blog\/?p=2925"},"modified":"2024-01-31T16:46:33","modified_gmt":"2024-01-31T15:46:33","slug":"wordpress-personnaliser-un-theme-avec-child-theme-enfant","status":"publish","type":"post","link":"https:\/\/www.creativejuiz.fr\/blog\/tutoriels\/wordpress-personnaliser-un-theme-avec-child-theme-enfant","title":{"rendered":"WordPress \u2013 Personnaliser un th\u00e8me ? Oui, avec un child theme"},"content":{"rendered":"

Les th\u00e8mes WordPress sont de plus en plus courus par tous : d\u00e9butants, blogueurs confirm\u00e9s ou professionnels du web. Il est possible d’en obtenir gratuitement un peu partout sur la toile, pas toujours de bonne qualit\u00e9, pas toujours tr\u00e8s s\u00e9curis\u00e9s, comme il est possible d’en obtenir de payants (je n’ai pas dit qu’ils \u00e9taient mieux). Dans tous les cas il est possible de les personnaliser.<\/p>\n

Plusieurs solutions<\/h2>\n

Wild tweaking<\/h3>\n

La premi\u00e8re, la moins propre, consiste \u00e0 modifier directement les fichiers du th\u00e8me, am\u00e9liorer les portions de code des articles, des commentaires, ou simplement de l’en-t\u00eate de votre document ou du fichier functions.php<\/code> pour ajouter quelques morceaux de code trouv\u00e9s sur la toile.
\n\"\"Soit. Mais sachez qu’en faisant cela, il ne vous sera plus possible de mettre \u00e0 jour votre th\u00e8me. (en tout cas pas automatiquement)<\/p>\n

En effet, \u00e0 l’instar des plugins, les th\u00e8mes sont versionn\u00e9s et peuvent subir des mises \u00e0 jour (am\u00e9lioration de fonctionnalit\u00e9, mise \u00e0 jour de s\u00e9curit\u00e9, etc.). S’il vous prenait l’envie de mettre \u00e0 jour un th\u00e8me modifi\u00e9 par vos soins, vos modifications seraient alors \u00e9cras\u00e9es.<\/p>\n

Cette solution de modification n’est donc possible que si vous \u00eates s\u00fbr de la s\u00e9curit\u00e9 du th\u00e8me et uniquement si vous ne souhaitez pas effectuer de mise \u00e0 jour. Autant vous dire que ce n’est donc pas la meilleure des solutions.<\/p>\n

Child Theme<\/h3>\n

La seconde solution, de loin ma pr\u00e9f\u00e9r\u00e9e : cr\u00e9er un th\u00e8me enfant.
\nLa cr\u00e9ation d’un th\u00e8me enfant n’est pas tr\u00e8s complexe et permet de b\u00e9n\u00e9ficier du th\u00e8me parent tout en autorisant la modification de certains fichiers \u00e0 partir du th\u00e8me enfant.
\nSa cr\u00e9ation se r\u00e9sume en quelques \u00e9tapes seulement :<\/p>\n

    \n
  1. Cr\u00e9er un dossier de th\u00e8me<\/li>\n
  2. D\u00e9finir le th\u00e8me de r\u00e9f\u00e9rence<\/li>\n
  3. Modifier le th\u00e8me \u00e0 partir du th\u00e8me enfant<\/li>\n<\/ol>\n

    Voyons cela en d\u00e9tail avec des exemples concrets.<\/p>\n

    Child theme \u00ab\u00a0Little Twenty\u00a0\u00bb<\/em><\/h2>\n

    Nous allons cr\u00e9er un th\u00e8me enfant \u00e0 partir du th\u00e8me Twenty Eleven, nous l’appellerons Little Twenty<\/em> (ou LT<\/abbr>)<\/p>\n

    Cr\u00e9ation du dossier de th\u00e8me<\/h3>\n

    Le dossier du th\u00e8me enfant se met avec les autres dossiers dans wp-content\/themes\/<\/code>. Cr\u00e9ez un dossier nomm\u00e9 little-twenty<\/code>.
    \nDans ce dossier, cr\u00e9ez un fichier style.css<\/code> avec comme contenu de base :<\/p>\n

    \/*\r\nTheme Name: Little Twenty\r\nDescription: Th\u00e8me enfant de Twenty Eleven\r\nAuthor: Geoffrey Crofte\r\nAuthor URI: https:\/\/geoffreycrofte.com\r\nVersion: 1.0.0\r\nTemplate: twentyeleven\r\n*\/<\/code><\/pre>\n
    Ce morceau est relativement clair, la premi\u00e8re ligne d\u00e9finit le nom visible de votre th\u00e8me, la seconde une description, la troisi\u00e8me le nom de l’auteur, la quatri\u00e8me son URL et la cinqui\u00e8me le num\u00e9ro de version de votre th\u00e8me enfant. Toutes ces lignes servent de descriptif qui s’affichera dans l’espace d’administration (Apparence > Th\u00e8mes<\/code>), vous \u00eates relativement libres sur le contenu \u00e0 renseigner.
    \nLe morceau le plus important est le dernier qui est le \u00ab\u00a0slug\u00a0\u00bb du th\u00e8me de r\u00e9f\u00e9rence, le th\u00e8me parent. Ce slug correspond au nom du dossier du th\u00e8me que l’on souhaite modifier, ici Twenty Eleven, qui porte comme nom de dossier \u00ab\u00a0twentyeleven\u00a0\u00bb.<\/p>\n
    Une fois que vous avez cela, vous avez cr\u00e9\u00e9 votre Child Theme<\/em> qui apparait d\u00e9j\u00e0 dans la liste des th\u00e8mes disponibles depuis votre back-office.<\/p>\n
    \"\"
    Apparition du th\u00e8me enfant dans Apparance > Th\u00e8mes de l’espace d’admin<\/figcaption><\/figure>\n
    Vous pouvez d’ores et d\u00e9j\u00e0 l’activer<\/strong>, celui-ci va simplement adopter le comportement de son th\u00e8me parent, puisque nous n’avons encore aucun fichier \u00ab\u00a0template\u00a0\u00bb dans notre dossier de th\u00e8me.
    \nPetit hic cependant, la feuille de styles du th\u00e8me enfant remplace d\u00e9j\u00e0 celle du th\u00e8me parent. Deux solutions s’offrent ici \u00e0 vous : copier le contenu de style.css<\/code> de TwentyEleven pour le coller dans votre CSS du th\u00e8me LT, ou cr\u00e9er un import en CSS avec la r\u00e8gle suivante :<\/p>\n
    @import url(\"..\/twentyeleven\/style.css\");<\/code><\/pre>\n
    \u00c0 placer \u00e0 la suite des quelques lignes vues pr\u00e9c\u00e9demment.
    \nPour des raisons de performance je conseillerais plut\u00f4t la premi\u00e8re solution (c’est \u00e0 dire la copie du contenu de la feuille de styles du th\u00e8me parent), qui vous permettra m\u00eame de modifier la CSS en cas de besoin.<\/p>\n
    Modification des templates<\/h3>\n
    Il vous est d\u00e9sormais possible d’\u00e9diter les portions du templates parent comme bon vous semble. Comment\u00a0? Simplement en copiant le fichier \u00e0 modifier depuis le th\u00e8me parent, et en le collant dans votre th\u00e8me enfant.
    \nD\u00e9sormais les modifications \u00e0 apporter se feront sur les fichiers que vous copierez depuis le th\u00e8me parent.
    \nPrenons un exemple.<\/p>\n
    Copiez le fichier header.php<\/code> du th\u00e8me parent (TwentyEleven, pour rappel), puis collez-le dans votre th\u00e8me enfant.
    \nVous avez maintenant dans votre dossier la feuille de style, et ce fichier header.php<\/code>.
    \nOuvrez le fichier header.php<\/code> pour \u00e9dition et remplacez<\/p>\n
    <h2 id=\"site-description\"><?php bloginfo( 'description' ); ?><\/h2><\/code><\/pre>\n
    par<\/p>\n
    <p id=\"site-description\"><?php bloginfo( 'description' ); ?><\/p><\/code><\/pre>\n
    Le remplacement de h2<\/code> par p<\/code> n’aura aucune incidence visuelle, par contre vous constaterez que le code a bel et bien chang\u00e9.<\/p>\n
    Modifications des autres fichiers (images, JS, CSS, etc.)<\/h3>\n
    \"\"Vous en avez fait l’exp\u00e9rience avec le fichier style.css<\/code> : cr\u00e9er un fichier dans votre th\u00e8me enfant qui porte le m\u00eame nom qu’un fichier pr\u00e9sent dans le th\u00e8me parent vous permet de remplacer ce dernier.<\/p>\n
    Par exemple, vous souhaitez modifier le fichier images\/search.png<\/code> qui repr\u00e9sente la loupe pr\u00e9sente dans les champs de recherche du th\u00e8me parent. Cr\u00e9ez le dossier images<\/code> dans LT<\/abbr>, puis placez-y une image search.png<\/code>. (prenez une ic\u00f4ne sur le web pour effectuer le test, si \u00e7a vous dit)
    \nL’autre possibilit\u00e9 aurait \u00e9t\u00e9 d’\u00e9craser le style CSS appliqu\u00e9 \u00e0 ce type de champ de formulaire, puisque cette image est plac\u00e9e en background-image<\/code>.<\/p>\n
    Chacun des fichiers du th\u00e8me parent est donc \u00e9ditable de la sorte.<\/p>\n
    Ajout de templates, d’images, styles, etc.<\/h3>\n
    L’ajout de template<\/strong> est possible : comme vous le feriez pour un th\u00e8me parent, cr\u00e9er simplement votre template dans le th\u00e8me enfant. En respectant la hi\u00e9rarchie des templates de WordPress<\/a>, vous pouvez par exemple cr\u00e9er une page sp\u00e9cifique pour l’auteur dont l’identifiant est 2 en cr\u00e9ant le fichier author-2.php<\/code> \u00e0 la racine de votre th\u00e8me.<\/p>\n
    L’ajout d’image<\/strong> se fait comme vous le feriez pour n’importe quel projet, cr\u00e9ez votre image, dans n’importe quel dossier, puis appelez l\u00e0 dans votre th\u00e8me (via CSS) ou dans votre code HTML.<\/p>\n
    Attention\u00a0!<\/strong> Lorsque vous cherchez \u00e0 ins\u00e9rer une nouvelle image, le code suivant ne fonctionne plus :<\/p>\n
    <img src=\"<?php bloginfo('template_directory'); ?>\/img\/mon-image.jpg\" \/><\/code><\/pre>\n
    En effet, la valeur \u00ab\u00a0template_directory<\/code>\u00a0\u00bb de bloginfo()<\/code> retourne le dossier du th\u00e8me parent : http:\/\/domain.tld\/wp-content\/themes\/twentyeleven<\/code>
    \n\u00c0 la place, utilisez la fonction :     get_stylesheet_directory_uri();<\/a><\/code>
    \nCette fonction retourne le dossier du th\u00e8me enfant : http:\/\/domain.tld\/wp-content\/themes\/little-twenty<\/code>.<\/p>\n
    L’ajout de feuille de styles ou JavaScript se fait de la m\u00eame mani\u00e8re que les images : nommez vos fichiers de la m\u00eame mani\u00e8re que ceux du th\u00e8me parent pour les \u00e9craser, ou chargez-en de nouveaux dans vos templates avec les fonctions wp_register_style()<\/code><\/a> et wp_register_script()<\/code><\/a>. Je vous laisse consulter la documentation pour plus de d\u00e9tails.<\/p>\n
    Les fichiers sp\u00e9ciaux<\/h3>\n
    \"\"J’entends par fichiers sp\u00e9ciaux, les fichiers qui n’ont pas tout \u00e0 fait le m\u00eame comportement que les pr\u00e9c\u00e9dents.<\/p>\n
    Le fichier screenshot.png<\/code><\/h4>\n
    Ce fichier permet d’afficher un aper\u00e7u du th\u00e8me dans l’administration. C’est un fichier PNG de 300 pixels de large et 225 de hauteur.
    \nCe fichier n’est pas charg\u00e9 depuis le th\u00e8me parent, il vous faudra donc le cr\u00e9er pour votre th\u00e8me enfant.<\/p>\n
    Le fichier functions.php<\/code><\/h4>\n
    Le fichier functions.php<\/code> ne fonctionne pas sur le principe des templates. En effet lorsque vous cr\u00e9ez un fichier functions.php<\/code> pour votre th\u00e8me enfant, celui est charg\u00e9 en premier, puis le m\u00eame fichier du th\u00e8me parent est charg\u00e9 par la suite.
    \nLes deux fichiers functions.php<\/code> sont donc charg\u00e9s l’un apr\u00e8s l’autre, th\u00e8me enfant, puis th\u00e8me parent.<\/p>\n
    De cette logique d\u00e9coule une probl\u00e9matique que vous finirez par rencontrer : \u00ab\u00a0Cannot redeclare function_name() (previously declared in [\u2026])\u00a0\u00bb.
    \nEn effet, PHP ne permet pas de d\u00e9clarer deux fois une fonction portant le m\u00eame nom, ce qui provoque une erreur.<\/p>\n
    Faisons un essai et analysons-le (attention, faites \u00e7a en local, on va cr\u00e9er un conflit) :<\/p>\n