Modifier votre thème WordPress sans empêcher les mises à jour ? 6

Modification de thèmes WordPress

En matière de blogging, il n’y a pas matière à discuter, WordPress est le CMS le plus utilisé, autant à l’échelle mondiale qu’à l’échelle nationale. Une récente étude menée par le journal du net a d’ailleurs démontré que sur les 20 blogs les plus influents en France (snif snif, je ne fais pas parti du lot), il y en a tout de même 15 qui utilisent WordPress, soit la bagatelle de 75%, ou 3/4 pour les foufous de maths !

Bref, tout ça pour dire que vous êtes nous sommes nombreux à utiliser ce CMS, et pour cause :

  • Il s’installe très rapidement et très simplement
  • Il est pré optimisé pour le référencement naturel (j’ai bien dit pré optimisé hein !)
  • Il est d’une simplicité d’utilisation déconcertante
  • Il est prêt à l’emploi pour les utilisateurs n’ayant pas de besoins spécifiques
  • Il est très bien fourni en terme d’extensions (Terme WP pour plugins, ou modules)
  • Il est pas si mal codé finalement, du coup c’est un régal pour les développeurs (même si on est pas encore sur du Drupal)
  • Il est multi utilisateurs, parfait pour les blogs ou sites de communiqué de presse
  • Il gère le multi sites de manière vraiment très simple
  • Il existe des milliers thèmes gratuits et payants (probablement la plate-forme pour laquelle il en existe le plus)

Et c’est sur ce dernier point que nous allons faire une halte.

Principe d’un thème WordPress

Avant d’aborder le sujet des thèmes, il va falloir parler un peu technique : Le templating.

Qu’est-ce qu’un template ?

Dans le domaine du Web, un template défini le format d’affichage d’une page. C’est à dire qu’il va définir la disposition des éléments du site (logo, menu, blocs, contenu, etc.).

J’en profite pour faire une petite parenthèse sur un métier qui semble inconnu à beaucoup de sociétés : L’intégrateur. Son rôle est de découper la maquette réalisée par le graphiste pour l’intégrer sous forme de template, un rôle très important dans un projet de développement de site, bien que la plupart des graphistes ayant des notions d’HTML s’improvisent intégrateur (pourtant c’est un métier qui nécessite bien plus que cela, comme par exemple une maîtrise du CSS, des notions de PHP et des connaissances en Javascript/jQuery).

Bref, fermons la parenthèse et revenons à nos templates. Vous l’aurez compris, un template c’est un peu le squelette d’une page, on parle également de gabarit. Le gros avantage pour les utilisateurs de CMS, c’est qu’ils n’ont plus qu’à remplir le contenu de leur page via l’éditeur wysiwyg pour avoir une page complètement construite et identique aux autres pages du blog.

Un thème est un dossier constitué des fichiers de templating (généralement PHP/HTML), des feuilles de style (CSS) qui vont permettre de repositionner les éléments définis dans les templates ainsi qu’améliorer le design (gestion des couleurs, de la police, etc.),ainsi que divers autres fichiers utiles à l’affichage (comme les images, le Javascript pour gérer certains effets d’affichage, les fichiers de traductions pour les thèmes multilingues, etc.). Le tout permettent de définir l’affichage de votre site ou blog.

Par défaut, WordPress est livré avec 2 thèmes relativement basiques, il est possible d’en ajouter une infinité et malheureusement il en existe une infinité. D’ailleurs, on met souvent plus de temps à choisir son thème qu’à créer le site…

Bien souvent, le thème que vous avez choisi est celui qui correspond le mieux à vos besoins (nombre de colonnes, espaces publicitaires, emplacement du logo, du menu, de la sidebar, possibilité de modifier les templates via le backoffice, etc.), cependant il y a toujours quelques points que l’on aimerait améliorer, modifier ou supprimer, surtout lorsque le thème est gratuit et donc limité.

Il est tentant de modifier directement les fichiers du thème, mais on déchante très vite lorsqu’on voit qu’une mise à jour pour ledit thème est disponible, et qu’elle corrige une ignoble faille de sécurité ! Il ne vous reste alors plus qu’à faire une backup de vos modifications, si toutefois vous vous souvenez de ce que vous avez modifié, et les ré-intégrer dans les fichiers du thème une fois mis à jour. Le problème, en plus du fait que la manipulation n’est pas aisée, c’est qu’il faudra recommencer à la prochaine mise à jour…

Alors, vous me direz, que faire ? Est-ce que je dois me passer des mises à jour pour mon thème ? Au risque de laisser des failles de sécurités béantes. Est-ce que je dois me contenter du thème en l’état, sans le modifier pour qu’il soit à mon goût ? Eh bien non, bande de petits veinards, il existe un moyen de concilier les deux 🙂

Comment modifier mon thème sans bloquer les mises à jour ?

Il existe un principe d’héritage, notion bien connue par tous les développeurs objet et les intégrateurs CSS, qui permet d’étendre un élément pour en récupérer les propriétés. Concrètement, cela signifie créer un thème enfant, ou child theme, dont le thème parent serait celui que l’on veut modifier, qui hériterait donc de tous les templates et styles de son thème parent, et que l’on va pouvoir modifier à souhait, sans toucher le thème initial (le parent donc) et ainsi pouvoir effectuer toutes les mises à jour sans écraser nos modifications. Est-ce que c’est pas merveilleux ? N’est-ce pas génial ? Mais plutôt que de nous emballer, voyons plutôt à quoi cela ressemble dans les faits :

Prenons le thème « Twenty Twelve », gratuit et fourni de base avec WordPress. Si on ouvre le dossier, on remarque qu’il contient plusieurs fichiers PHP (les fameux templates), des fichiers CSS (les styles) et des dossiers sur lesquels on va faire l’impasse aujourd’hui.

Pour étendre ce thème, et donc créer un thème enfant, il va nous falloir créer un nouveau dossier dans le répertoire « themes » de WordPress, que vous appelez comme vous voulez, pour l’exemple je vais l’appeler « whatizseo » parce que ce nom est plutôt classe je trouve :p

Dans ce répertoire, il va me falloir au minimum un fichier qui sera nommé « style.css » et dans lequel il faudra inscrire votre version de ce qui suit :

/*
Theme Name: WhatIzSEO
Theme URI: http://www.whatizseo.com/
Description: Ceci est un thème enfant, ou child theme, qui étend le thème Twenty Twelve.

Author: tonytroy
Template: twentytwelve
*/

Theme Name, c’est le nom du thème enfant que vous créez, vous l’appelez comme ça vous chante. Theme URI, c’est l’adresse à partir de laquelle on peut trouver votre thème, autant dire que dans notre cas ça ne sert à rien, à moins que vous souhaitiez mettre votre œuvre en téléchargement sur wordpress.org ? Description, c’est le petit descriptif qui apparaît à droite de la vignette de votre thème quand il est actif (et également en tant que description sur la plate-forme de téléchargement de WP). Author, c’est le nom de la personne qui a conçu le thème, ben là c’est vous ! Et Template, c’est le plus important, il s’agit du thème que vous étendez, c’est à dire le thème parent. Pour trouver le nom exact du thème que vous voulez étendre, c’est très simple, vous regardez le nom du dossier dans le répertoire « themes » (normalement en minuscule et sans espace).

A présent, si vous vous rendez dans le sous-menu « Thèmes » de votre interface d’administration, vous verrez votre thème apparaître, sauf qu’il n’a pas d’image et qu’il ne sert à rien pour l’instant. Alors changeons cela !

Comment mettre une image sur mon thème ?

Il suffit de déposer dans le dossier de votre thème un fichier image au format PNG et intitulé « screenshot.png ». Idéalement, votre image doit faire 300px de large pour 225 px de haut, après, vous mettez ce que vous voulez dessus, votre logo, une capture d’écran de votre thème (une fois qu’il ressemble à quelque chose), etc.

Lorsque c’est fait, retournez dans le sous-menu « Thèmes » ou rafraîchissez la page et vous verrez que votre thème comporte à présent une vignette.

Comment modifier mon thème personnalisé ?

En voilà une bonne question ! Partez du principe que votre thème enfant a hérité de tout ce qui compose son parent. Ça veut tout simplement dire que si vous activez votre thème en l’état, l’affichage sera identique à celui du thème parent (Twenty Twelve dans l’exemple).

Pour modifier une partie du site, par exemple l’en-tête, il vous faudra copier, à partir du thème parent, le fichier qui génère l’affichage de l’en-tête, c’est à dire « header.php » et le coller dans le dossier de votre thème enfant. Il ne vous reste plus qu’à le modifier à votre guise  et enregistrer les modifications pour qu’elles soient prises en compte (on est d’accord que votre thème enfant est actif hein, sinon vous ne verrez aucune modification).

Vous allez ainsi pouvoir modifier à votre guise, tout ou partie des fichiers en les récupérant au préalable du dossier thème parent pour les déposer dans le dossier de votre thème. Vous allez me dire, mais pourquoi je duplique pas tout simplement le thème ?

Avant de vous répondre, on va voir un autre concept tout simple : Quand vous étendez un fichier, c’est à dire que vous le copiez dans le dossier du thème parent et que vous le collez dans le dossier du thème enfant, si votre thème enfant est actif, c’est le fichier du thème enfant qui appelé (c’est un peu tout l’intérêt de la manip en même).

Vous vous souvenez du problème de mise à jour ? Eh bien si vous copiez l’intégralité des fichiers du thème parent dans le dossier du thème enfant, quand vous mettrez à jour le thème parent, votre thème enfant lui ne sera pas mis à jour et donc, tous les fichiers ayant été copiés/collés, ce sont les fichiers du thème enfant qui seront appelés. Cela signifie que vous aurez mis à jour le thème pour rien puisque vous ne bénéficiez d’aucune mise à jour ! Autant modifier directement le thème et ne jamais le mettre à jour 🙂

Mais alors, si je modifie juste le « header.php » dans le thème enfant, que je mets à jour le thème parent et que dans la mise à jour le fichier « header.php » est modifié, le fichier dans mon thème ne sera pas mis à jour ? C’est exact, mais vos modifications ne seront pas écrasées non plus, il ne vous restera alors plus qu’à fusionner vos fichiers (en somme, faire un merge ^^) afin de bénéficier de la mise à jour tout en conservant vos modifications.

Et hop, le tour est joué !

A propos de Tony (34 Posts)

Développeur Web et consultant SEO, je vous invite à venir échanger et partager sur ce vaste sujet. Je vous propose également mes services en référencement naturel, afin d'améliorer la visibilité de votre site Internet.


6 thoughts on “Modifier votre thème WordPress sans empêcher les mises à jour ?

  1. Reply Arnaud Juil 31,2015 16 h 31 min

    Bonjour,

    Concernant les mises à jour de thème (le dernier paragraphe) , il n’y a aucun autre moyen que de faire un merge entre le fichier du thème parent et celui du thème enfant ?

    • Reply Tony Avr 15,2016 11 h 42 min

      Salut Arnaud,

      Non il n’y a pas vraiment de solution miracle à ma connaissance, le fichier ayant été mis à jour par le développeur du thème qui n’a pas connaissance de tes modifs, c’est à toi qu’il appartient de récupérer son travail et d’y intégrer tes changements.

      Mais si tu trouves une solution automatisée, je suis preneur 🙂

  2. Reply f4b1 Mai 23,2017 11 h 46 min

    Merci pour ces conseils, je cherchais justement un moyen de garder mes modifications de manière pas trop compliqué et j’ai pu trouver un compromis

  3. Reply dzqdzqd Nov 15,2017 19 h 19 min

    Pas toujours clair le tuto, c’est dommage que vous n’avez pas mis d’exemple vidéo ou des suites de screens. Plus précisément, la dernière partie n’est pas vraiment clair.

    • Reply Tony Nov 16,2017 9 h 47 min

      Merci pour votre retour, je vais essayer de modifier le dernier bloc pour le rendre plus compréhensible (je ne suis pas fan des vidéos, mais pour les screens j’y songerai).

  4. Reply Didier Sarrazit Nov 20,2017 15 h 58 min

    Précision !
    Les scripts du thème enfant ne remplacent pas ceux du thème parent, ils sont complémentaires, pour le CSS la dernière instruction est observée.
    Concernant le fichier functions.php il ne faut pas le copier dans le thème enfant, il faut l’utiliser pour ajouter du code différent et complémentaire (add_action, wp_enqueue_style…) Le thème enfant peut contenir tout et n’importe quoi, css, template etc.

Leave a Reply