Dans cette leçon, vous commencerez à apprendre comment WordPress charge le contenu en fonction de la page sur laquelle vous vous trouvez et de la hiérarchie des fichiers de modèle de thème. Vous apprendrez également ce qui est nécessaire pour un thème valide. Et à la fin nous allons enfin créer notre thème et l’activer.
Fichiers de modèle de thème
Derrière le capot, WordPress détermine quel modèle charger en fonction de l’URL sur laquelle vous vous trouvez. Si votre WordPress est installé sur le domaine "example.com/wordpress/", vous devriez voir le modèle de page d’accueil. Aller à "example.com/wordpress/category/news/" vous donnera par défaut une liste des publications affectées à la catégorie News à l’aide d’un modèle de catégorie.
WordPress suit une hiérarchie du modèle à charger, et celui qu’il choisit dépend des modèles dont vous disposez dans votre thème. Par exemple «example.com/wordpress/category/news» WordPress cherchera d’abord un template spécifique pour la catégorie «news ». S’il n’a pas été trouvé, WordPress recherchera un modèle spécifique pour l’ID de catégorie. Encore une fois, si cela n’a pas été trouvé, WordPress recherche le modèle de catégorie générale. Si cela n’a pas été trouvé, WordPress recherchera un modèle encore plus général pour les archives. Et ainsi de suite.
WordPress Codex, qui est le site de documentation de WordPress, conserve une image utile et mise à jour illustrant la hiérarchie des fichiers de modèles de thème ; https://codex.wordpress.org/File:Template_Hierarchy.png#file
Ne vous inquiétez pas si l’image semble trop déroutante au premier abord! Au fur et à mesure que nous progressons dans le didacticiel, vous vous retrouverez à vous référer à cette image afin de trouver les modèles que vous souhaitez implémenter dans votre thème.
La façon dont vous lisez l’image est en allant de gauche vers la droite. En fonction de la page sur laquelle vous vous trouvez, les modèles sont très spécifiques, et plus vous progressez vers la droite, plus les modèles deviennent généraux. La solution de repli finale est la plus à droite ; index.php, qui sera chargé si aucun autre modèle de raccord n’a été trouvé.
Tous les fichiers de modèle répertoriés dans l’image ci-dessus doivent résider dans le dossier racine de votre thème et être nommés précisément comme indiqué. Vous ne pouvez pas placer vos modèles dans des sous-dossiers à des fins d’organisation car WordPress ne pourra pas les trouver !
On va commencer simple! Aujourd’hui, nous allons créer les seuls quelques fichiers requis pour que WordPress le reconnaisse en tant que thème, puis nous développerons à partir de là.
Anatomie d’un thème WordPress
Vous n’avez besoin que de deux fichiers pour créer un thème WordPress valide.
Dans l’illustration de la hiérarchie des modèles, avez-vous remarqué celui qui se trouve tout à droite ; appelé index.php? Il s’agit du dernier modèle de secours si WordPress ne trouve aucun modèle. C’est l’un des fichiers requis. L’autre fichier est un fichier de feuille de style (.css). Il ne doit pas nécessairement contenir de CSS, mais il doit contenir un bloc de commentaires qui fournit des informations WordPress sur votre thème. Ces deux choses sont tout ce dont vous avez besoin pour un thème WordPress valide.
Créons notre thème en créant ces deux fichiers !
Création de votre premier thème
Tous les thèmes doivent être dans chacun leurs dossiers séparés à l’intérieur du sous-dossier /wp-content/themes/. Si vous accédez à ce dossier dans votre navigateur de fichiers, vous verrez probablement déjà quelques dossiers de thèmes ici ; vingt-neuf, vingt-sept, etc. Ce sont des thèmes fournis par défaut avec WordPress.
Dans /wp-content/themes/, créez un nouveau dossier. Nommez-le de manière appropriée (minuscules, sans espaces, différent des autres dossiers). Habituellement, le nom du dossier est une version slug du nom de votre thème. Pour ce tutoriel, je nommerai mon dossier de thème «wptutorial».
Entrez votre dossier de thème et créez un nouveau fichier vide nommé index.php. J’ai édité le fichier et j’ai juste ajouté du texte aléatoire, afin que nous puissions voir plus facilement quand il est utilisé :
Nous sommes déjà à mi-chemin ! Créons le deuxième fichier requis. Dans votre dossier de thème, créez un nouveau fichier vide nommé style.css.
Ouvrez le style.cssfichier et démarrez immédiatement un bloc de commentaires (/*et fermez-le avec */). Dans ce bloc de commentaires, nous devons suivre certaines règles WordPress pour définir notre thème. Au minimum, nous devons définir le nom de notre thème. Mais nous pouvons également ajouter des informations sur l’auteur, la page d’accueil, le numéro de version, les informations de licence et bien plus encore. Consultez la documentation de WordPress sur ce que vous pouvez ajouter.
Dans ce didacticiel, nous allons rester simple ; nous ajouterons le nom du thème et vous écrirez votre propre nom en tant qu’auteur. Vous pouvez continuer et utiliser le(s) nom(s) que vous souhaitez, c’est ce que j’ai entré dans mon style.css:
/*
Theme Name: A White Pixel Theme
Author: Alex White
*/Enregistrez et fermez le fichier (ce tutoriel ne touchera plus à ce fichier), sauf si vous souhaitez écrire du CSS pour votre thème au fur et à mesure.
Toutes nos félicitations! Vous avez maintenant créé un thème WordPress valide !
Activation de votre thème
Allons dans le panneau d’administration de WordPress et naviguons vers "Apparence> Thèmes", et voyons si nous pouvons y trouver notre thème.
Cliquez sur le bouton Activer et visitez votre site. Vous devriez voir ce que vous avez écrit index.php!
Ce index.phpmodèle sera utilisé quelle que soit la page sur laquelle vous vous trouvez. Essayez d’afficher un seul message et vous verrez la même chose. Un thème doit avoir au minimum 5 à 10 modèles pour gérer différents contenus. Ne vous inquiétez pas, nous y arriverons.
Génial, nous avons un thème! Dans la prochaine leçon, nous commencerons à coder et à lui faire faire des choses.