Bienvenue dans Créer un thème Repo-Ready ! Dans les articles précédents, on a parlé de l’approche que l’on va utiliser pour créer notre thème WordPress, on a mis en place notre environnement de travail, on a passé en revue le template que je vous propose de transformer en thème et on a vu où trouver de la documentation.
Ouf ! Maintenant, est prêt à coder notre thème. C’est parti !
Faire apparaître le thème dans l’admin
La première chose à faire est de rendre notre thème disponible dans l’admin. Pour qu’un thème soit enregistré dans WordPress, c’est ultra-simple. Il suffit que dans le dossier réservé aux thèmes dans l’installation de WordPress, il y ait un dossier pour notre thème, avec un fichier index.php, et un fichier style.css.
On peut trouver le dossier du site en allant dans nos paramètres de Local et ensuite on peut simplement naviguer dans ce dossier.
Dans le dossier de l’installation de WordPress, les thèmes, plugins et medias uploadés sont situés dans /wp-content/. Dans ce dossier, on va donc aller dans themes/ et créer un dossier nommé carbon, mais vous pouvez le nommer comme bon vous semble. Aussi, pour plus de simplicité, je vais copier-coller le prototype dans ce dossier et on va l’ouvrir dans notre éditeur de texte.
Avant de commencer, on va éditer le fichier de configuration de WordPress nommé wp-config.php situé à la racine de l’installation et on va simplement ajouter deux petites constantes très utiles juste avant la ligne /* That's all, stop editing! Happy blogging. */
[pastacode lang=”php” manual=”define(%20’WP_DEBUG’%2C%20true%20)%3B%0Adefine(%20’WP_DEBUG_DISPLAY’%2C%20true%20)%3B” message=”Pour afficher les notices et messages d’erreur” highlight=”” provider=”manual”/]
Ensuite, on va simplement créer un fichier index.php et un fichier style.css dans le dossier de notre thème.
Dans index.php, on va mettre une bête balise h1 pour vérifier si tout fonctionne.
[pastacode lang=”php” manual=”%3Ch1%3EHello%20!!%3C%2Fh1%3E” message=”index.php” highlight=”” provider=”manual”/]
Dans style.css, il faut une entête spéciale que WordPress va lire. C’est grâce à cette entête que WordPress va reconnaître le thème et va donc pouvoir utiliser les fichiers situés dans ce dossier. On va donc simplement mettre :
[pastacode lang=”css” manual=”%2F**%0A%20*%20Theme%20Name%20%3A%20Carbon%0A%20*%20%2F” message=”style.css” highlight=”” provider=”manual”/]
Maintenant WordPress sait que dans ce dossier, il y a un thème qui s’appelle Carbon. On peut l’activer et aller sur notre site. C’est beau, hein ?
Importer notre contenu statique
Maintenant que notre thème est actif, on va aller tout salement copier-coller le contenu de notre prototype. Ne vous inquiétez pas c’est provisoire.
Dans index.php, on va copier-coller le contenu de index.html et dans style.css on va copier-coller le contenu du fichier du même nom de notre prototype.
Au passage, on va parler un peu de l’entête. L’entête contient les informations que WordPress va afficher dans l’administration. En remplissant les différents champs de cette entête, on va actualiser les informations disponibles dans l’admin. Mais le seul élément requis pour que WordPress prenne en compte le thème est Theme Name. Tous les autres éléments sont optionnels, mais le mieux est d’être exhaustif quand même.
En retournant sur notre site, on peut voir le contenu apparaît bien comme il faut, mais les styles ne s’appliquent pas.
Bon, c’est pas super, mais pas de soucis, on va corriger ça dans les prochains articles.
Dans le suivant, on va réorganiser nos fichiers proprement et ensuite corriger ce souci de styles.
N’oubliez pas de vous inscrire pour recevoir la suite ! Et partagez si ça vous plait !
PS: Si vous avez aimé ce article et êtes intéressé pour apprendre à développer pour WordPress en utilisant les meilleures pratiques, jetez-un oeil à WPCookBook ! C’est un vrai livre de recettes WordPress pour apprendre à développer pour WordPress proprement et exploiter au maximum tous les outils et APIs mis à notre disposition. Inscrivez-vous pour être notifié de sa publication !