{"id":135,"date":"2015-03-08T22:45:00","date_gmt":"2015-03-08T21:45:00","guid":{"rendered":"http:\/\/lamartinieredesign.fr\/?page_id=135"},"modified":"2018-04-10T18:50:05","modified_gmt":"2018-04-10T16:50:05","slug":"135-2","status":"publish","type":"page","link":"https:\/\/lamartinieredesign.fr\/?page_id=135","title":{"rendered":"Cr\u00e9er un th\u00e8me enfant"},"content":{"rendered":"<p>Pour adapter un th\u00e8me WordPress \u00e0 vos besoins et le personnaliser, n&rsquo;allez surtout pas en modifier directement le contenu. \u00c0 chaque mise \u00e0 jour du th\u00e8me, qu&rsquo;il faut absolument faire pour des raisons de s\u00e9curit\u00e9, vous perdriez toutes vos modifications. En effet, les mises \u00e0 jour \u00e9crasent les anciens fichiers du th\u00e8me et donc d\u00e9truisent tout votre travail.<\/p>\n<p>Pour \u00e9viter ce probl\u00e8me, il faut faire un th\u00e8me enfant (Child Theme).<\/p>\n<h4>Les fichiers du th\u00e8me enfant<\/h4>\n<p>Il faut commencer par cr\u00e9er le dossier et les fichiers du th\u00e8me enfant. Dans le dossier \u00ab\u00a0wp-content &gt; themes\u00a0\u00bb,\u00a0 cr\u00e9er un nouveau dossier et le nommer du nom du th\u00e8me parent, auquel on ajoute \u00ab\u00a0-child\u00a0\u00bb. Ce n&rsquo;est pas obligatoire et il serait possible de choisir un autre nom, mais c&rsquo;est une convention tr\u00e8s courante.<br \/>\nDans l&rsquo;exemple ci-dessous, le th\u00e8me parent s&rsquo;appelle \u00ab\u00a0fukasawa\u00a0\u00bb. Il faut cr\u00e9er au m\u00eame niveau un dossier nomm\u00e9 \u00ab\u00a0fukasawa-child\u00a0\u00bb.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-651\" src=\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2016\/03\/child01.png\" alt=\"child01\" width=\"418\" height=\"288\" srcset=\"https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2016\/03\/child01.png 418w, https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2016\/03\/child01-300x207.png 300w\" sizes=\"(max-width: 418px) 100vw, 418px\" \/><\/p>\n<p>Ensuite, dans le dossier enfant, \u00e0 partir de votre \u00e9diteur de texte, il faut cr\u00e9er les fichiers \u00ab\u00a0style.css\u00a0\u00bb et \u00ab\u00a0functions.php\u00a0\u00bb. Il faut obligatoirement respecter les noms et les formats de fichier (un fichier CSS et un fichier PHP).<br \/>\nEnfin, une copie d&rsquo;\u00e9cran du r\u00e9sultat du th\u00e8me doit \u00eatre pr\u00e9par\u00e9e et ajout\u00e9e au dossier sous le nom obligatoire \u00ab\u00a0screenshot.png\u00a0\u00bb. L&rsquo;image doit \u00eatre au format PNG et mesurer 650 x 400 pixels.<br \/>\nCes trois fichiers constituent le strict minimum pour faire fonctionner un th\u00e8me enfant.<\/p>\n<p><img decoding=\"async\" loading=\"lazy\" class=\"alignnone size-full wp-image-650\" src=\"http:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2016\/03\/child02.png\" alt=\"child02\" width=\"424\" height=\"247\" srcset=\"https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2016\/03\/child02.png 424w, https:\/\/lamartinieredesign.fr\/wp-content\/uploads\/2016\/03\/child02-300x175.png 300w\" sizes=\"(max-width: 424px) 100vw, 424px\" \/><\/p>\n<h4>Le fichier style.css<\/h4>\n<p>Dans le fichier CSS, il faut commencer par indiquer en commentaire les informations essentielles du th\u00e8me enfant comme ci-dessous (surtout ne pas mettre d&rsquo;espace avant les deux points).<\/p>\n<p>Les deux premi\u00e8res lignes sont obligatoires :<br \/>\n&#8211; le nom du th\u00e8me enfant (Theme Name:). Le nom est libre et vous pouvez choisir de l&rsquo;appeler comme vous voulez,<br \/>\n&#8211; le nom du th\u00e8me parent (Template:). Il faut absolument utiliser le nom du dossier du th\u00e8me parent, \u00e9crit exactement \u00e0 l&rsquo;identique, en respectant les capitales.<\/p>\n<p>Les lignes suivantes sont facultatives, mais l&rsquo;ensemble des informations saisies seront affich\u00e9es dans le Dashboard.<\/p>\n<p>[pcsh lang=\u00a0\u00bbcss\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>\/*\r\nTheme Name: Fukasawa Child\r\nTemplate: fukasawa \r\n\r\nDescription: Theme enfant de Fukasawa, cr\u00e9\u00e9 pour la session WordPress avanc\u00e9\r\nAuthor: Gilles\r\nAuthor URI: https:\/\/www.monsite.fr\r\nVersion: 0.1\r\n*\/\r\n\r\nh1 {color:red;}<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<p>Afin qu&rsquo;elles soient reconnues, il faut importer les r\u00e8gles CSS du th\u00e8me parent. Initialement, cela se faisait par une r\u00e8gle CSS \u00ab\u00a0@import\u00a0\u00bb situ\u00e9e juste apr\u00e8s le bloc de commentaire initial. Vous trouverez cette m\u00e9thode dans de nombreux liens sur internet. Depuis peu, il faut utiliser une autre m\u00e9thode et importer les CSS du th\u00e8me parent par une fonction PHP (voir chapitre suivant) plac\u00e9e dans le fichier \u00ab\u00a0functions.php\u00a0\u00bb. C&rsquo;est ce que pr\u00e9conise le codex WordPress (voir lien en fin de page).<\/p>\n<p>Il ne reste plus qu&rsquo;\u00e0 rajouter au fichier \u00ab\u00a0style.css\u00a0\u00bb du th\u00e8me enfant, de nouvelles r\u00e8gles CSS pour modifier l&rsquo;aspect du site. Elles seront lues apr\u00e8s celles du th\u00e8me parent et les remplaceront automatiquement. Ici, en tant qu&rsquo;exemple, une r\u00e8gle pour colorer les titres H1 en rouge a \u00e9t\u00e9 rajout\u00e9e, apr\u00e8s le commentaire initial.<\/p>\n<h4>Le fichier functions.php<\/h4>\n<p>Commen\u00e7ons par cr\u00e9er une fonction pour importer les CSS du th\u00e8me parent. Pour cela, taper la balise PHP <code>&lt;?php\u00a0 ?&gt;<\/code> mais contrairement \u00e0 l&rsquo;habitude, il est recommand\u00e9 de ne placer que le d\u00e9but de la balise, soit <code>&lt;?php<\/code> , au tout d\u00e9but du fichier \u00ab\u00a0functions.php\u00a0\u00bb. Il ne doit absolument rien y avoir avant, m\u00eame pas un espace ou un commentaire. Si on laisse la fin de la balise php, soit <code>?&gt;<\/code>\u00a0 apr\u00e8s tout le code, il arrive que cela g\u00e9n\u00e8re une erreur et que le site ne s&rsquo;affiche pas correctement.<br \/>\nPuis copier \u00e0 la suite le code ci-dessous :<\/p>\n<p>[pcsh lang=\u00a0\u00bbphp\u00a0\u00bb tab_size=\u00a0\u00bb4&Prime; message=\u00a0\u00bb\u00a0\u00bb hl_lines=\u00a0\u00bb\u00a0\u00bb provider=\u00a0\u00bbmanual\u00a0\u00bb]<\/p>\n<pre><code>\/**\r\n\t** activation theme\r\n**\/\r\nadd_action( &#039;wp_enqueue_scripts&#039;, &#039;theme_enqueue_styles&#039; );\r\nfunction theme_enqueue_styles() {\r\n\twp_enqueue_style( &#039;parent-style&#039;, get_template_directory_uri() . &#039;\/style.css&#039; );\r\n}<\/code><\/pre>\n<p>[\/pcsh]<\/p>\n<p>Ce fichier n&rsquo;\u00e9crase pas celui du th\u00e8me parent, mais les fonctions qui s&rsquo;y trouvent s&rsquo;ajoutent \u00e0 celles du th\u00e8me parent. Le plus gros risque est qu&rsquo;une fonction qui existe d\u00e9j\u00e0 dans le th\u00e8me parent y soit d\u00e9finie, ce qui g\u00e9n\u00e8re une erreur PHP. Il faut absolument ajouter \u00e0 toute nouvelle fonction du th\u00e8me enfant une ligne de code permettant de pr\u00e9venir ce probl\u00e8me.<\/p>\n<p>Bien \u00e9videmment, dans le Dashboard, il faut activer le th\u00e8me enfant pour en b\u00e9n\u00e9ficier. Vous pouvez alors faire toutes les modifications que vous souhaitez. Attention cependant, si vous \u00eates amen\u00e9s \u00e0 faire trop de modifications, il vaut sans doute mieux cr\u00e9er un th\u00e8me complet de A \u00e0 Z.<\/p>\n<p>Pour aller plus loin, le codex relatif aux th\u00e8mes enfants :<br \/>\n<a href=\"https:\/\/codex.wordpress.org\/fr:Th%C3%A8mes_Enfant\" target=\"_blank\" rel=\"noopener\">https:\/\/codex.wordpress.org\/fr:Th%C3%A8mes_Enfant<\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Pour adapter un th\u00e8me WordPress \u00e0 vos besoins et le personnaliser, n&rsquo;allez surtout pas en modifier directement le contenu. \u00c0 chaque mise \u00e0 jour du th\u00e8me, qu&rsquo;il faut absolument faire pour des raisons de s\u00e9curit\u00e9, vous perdriez toutes vos modifications. En effet, les mises \u00e0 jour \u00e9crasent les anciens fichiers du th\u00e8me et donc d\u00e9truisent &hellip; <a href=\"https:\/\/lamartinieredesign.fr\/?page_id=135\" class=\"more-link\">Continuer la lecture de <span class=\"screen-reader-text\">Cr\u00e9er un th\u00e8me enfant<\/span>  <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":635,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"page-templates\/full-width.php","meta":{"_lmt_disableupdate":"","_lmt_disable":"","footnotes":""},"_links":{"self":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/135"}],"collection":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=135"}],"version-history":[{"count":13,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/135\/revisions"}],"predecessor-version":[{"id":1175,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/135\/revisions\/1175"}],"up":[{"embeddable":true,"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=\/wp\/v2\/pages\/635"}],"wp:attachment":[{"href":"https:\/\/lamartinieredesign.fr\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=135"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}