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
Les fichiers et dossiers d’une 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é
Voilà à quoi ressemble notre thème pour l’instant, avec le contenu du prototype hardcodé.

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 !

Laisser un commentaire

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


405c75317eb7fba76ad3b5a24f43201bPPPPPP
%d blogueurs aiment cette page :