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.

Créer un thème Repo Ready - Installation de WordPress

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.

Créer un thème Repo Ready - dossier des thèmes

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. */

define( 'WP_DEBUG', true );
define( 'WP_DEBUG_DISPLAY', true );
Pour afficher les notices et messages d'erreur

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.

<h1>Hello !!</h1>
index.php

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 :

/**
 * Theme Name : Carbon
 * /
style.css

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.

Créer un thème Repo Ready - Screenshot - Contenu Hardcodé
Voila notre contenu, pur HTML

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 !

Continuer à lire "Créer un thème Repo Ready – Activer notre thème"

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

tempus porta. accumsan Curabitur efficitur. velit, diam eleifend consequat.