Allez plus loin avec WordPress

Découvrez la documentation de WordPress

Découvrez la structure d’un thème WordPress

Un thème WordPress classique suit une logique fondamentale dans son arborescence. Les fichiers qui composent un thème ont un impact sur les templates de votre site WordPress, c'est-à-dire sur la manière dont doit s’afficher le contenu de notre site WordPress.

Un template est un modèle de conception permettant de créer et de définir comment doit s’afficher une page. Sur WordPress, il prend la forme d’un fichier PHP avec un nom spécifique.

Dans ce cours, nous faisons une introduction sur le fonctionnement de chaque fichier. Il y a beaucoup de choses à dire en complément, et je vous invite à creuser par vous-même cette partie à la suite de ce cours. Regardons maintenant une structure complète de thème :

Les fichiers obligatoires pour chaque thème sont :

• index.php  : le template principal d’un thème. Si aucun autre template n’existe, c’est lui qui sera pris en compte ;

• style.css  : la feuille de style principale d’un thème. Ce fichier contient les informations d’en-tête de votre thème, c'est-à-dire les informations principales qui définissent votre thème (nom, auteur, version, etc.) ;

• functions.php  : le cœur des fonctionnalités de votre thème. Il permettra d’ajouter, modifier ou supprimer des possibilités offertes par WordPress. On travaillera principalement dans ce fichier.

Après, vous trouverez les fichiers suivants qui nous permettront de personnaliser notre thème :

• header.php  :  permet de coder la partie haute d’un template, à partir de l’ouverture de la balise html  jusqu’à l’ouverture de la balise body  , et parfois un peu plus. Ce fichier est en général importé dans les différents fichiers de template ;

• footer.php  : permet de coder la partie basse d’un template à partir de la balise footer jusqu’à la fermeture de la balise html  . Ce fichier est en général importé dans les différents fichiers de template.

Si vous souhaitez faire des templates avancés pour les pages d’archive, il y a certains fichiers plus spécialisés. Nous n’entrerons pas en détail sur ces fichiers dans ce cours, mais vous saurez qu’ils existent. Les fichiers les plus utiles sont :

• single.php  : affiche la page d’un article ;

• single-{post-type}.php  : affiche un article d’un type précis. Cette notion de post-type  est avancée ;

• archive.php  : affiche la liste des articles, que ce soit selon la catégorie, l’auteur, la date, etc. Ce fichier peut être surclassé par d’autres fichiers de template plus précis. Si aucun surclassement n’existe, ce fichier est appelé en dernier lieu ;

• archive-{post-type}.php  : utilisé quand on veut afficher la liste des articles d’un type précis. Cette notion de post-type  est avancée ;

• category.php  : affiche la liste des articles d’une catégorie ;

• taxonomy.php  : affiche la liste des articles d’une taxonomie ;

• search.php: affiche les résultats d’une recherche.

WordPress suit un plan de chargement parfaitement défini. La documentation présente cette hiérarchie sous forme d’un schéma que je vous montre ci-dessous. On n’aborde ici ces notions qu’à titre de compréhension globale, et nous n’entrerons pas en détail dans ce schéma.

Vous constaterez, en analysant différents thèmes, que l’organisation et les fichiers peuvent varier. Rien n’empêche d’ajouter d’autres fichiers PHP, CSS et JS dans notre projet. Il est également d’usage de regrouper les fichiers dans des dossiers pour mieux structurer la logique.

Il est commun, par exemple, de regrouper les fichiers statiques (c’est-à-dire les fichiers chargés par le navigateur, comme images  ,  css  , js  ) dans un dossier assets  et dans des sous-dossiers css  , js  et img  .

Eh bien non. Selon le développeur qui a créé le thème, sa structure peut être différente et plus ou moins complexe, car WordPress permet d’ajouter, modifier et supprimer des fonctionnalités avancées grâce au fichier functions.php  . À partir de ce fichier, on peut être amené à coder de plein de manières différentes. C’est la flexibilité du PHP qui permet cela.

Créez et activez un thème enfant

D’abord, qu’est-ce qu’un thème enfant ? Un thème enfant est un thème qui hérite d’un autre thème. C'est-à-dire qu’il fera tout ce que le thème parent fait. On pourra ainsi modifier le thème enfant pour ajouter, modifier ou supprimer des comportements de ce thème !

C’est une très bonne question. La problématique principale, c’est le fait que le thème que vous avez choisi est développé par une tierce personne ou société. Elle mettra très certainement à jour ce thème pour améliorer la sécurité, adapter le thème aux évolutions de WordPress et apporter de nouvelles fonctionnalités.

Si jamais vous modifiez un fichier dans ce thème et que ce dernier est mis à jour, votre modification sera tout bonnement écrasée.

Donc, la bonne pratique est de créer un thème enfant qui hérite du thème que vous avez choisi ; et si le thème parent est mis à jour, vos modifications ne seront pas écrasées.

Nous verrons dans la suite du cours comment modifier un fichier du thème parent dans notre thème enfant.

Créons ensemble le thème enfant de BricoTips

Nous souhaitons créer un thème enfant pour notre site BricoTips à partir du thème TwentyTwenty – voyons cela en vidéo. Pour reproduire ce que je vais vous expliquer en vidéo, je vous invite à télécharger cette image que nous allons utiliser.

En résumé

• La documentation développeur nous permettra de trouver toutes les informations détaillées sur le développement WordPress.

• Un thème WordPress est basé sur des fichiers PHP qui définissent le template des différentes pages de notre thème. Ces templates suivent une hiérarchie qui permet de savoir quel fichier est appelé.

• Si l’on souhaite modifier un thème, il est recommandé de créer un thème enfant qui héritera de ce thème, pour éviter de perdre le travail effectué lors d’une mise à jour de ce thème parent.

• Un thème enfant a besoin au minimum de 2 fichiers : style.css  et functions.php  .

Maintenant que nous avons créé notre propre thème, nous allons commencer à remplir notre site et le personnaliser. On se retrouve au prochain chapitre.