Formation « Développer un thème WordPress sur mesure »

Créer la base de son thème WordPress

Lecture : 4 minutes • 0

On va maintenant créer la structure de code minimale qui va nous permettre de déclarer notre thème afin de l’activer dans l’interface d’administration de WordPress.

Minimum pour déclarer son thème

Allez c’est parti ! C’est le moment de s’équiper de son éditeur de code favori. Comme je disais dans le cours sur les outils, j’aime beaucoup VSC, mais pour coder PHP Storm est pas mal non plus.

Information

Si vous avez opté pour la formule « premium » de cette formation, vous allez pouvoir télécharger dans quelques cours un thème tout prêt à l’emploi.

En tout premier lieu, on va se rendre dans le dossier wp-content/themes de notre site WordPress et créer un nouveau dossier qui va accueillir les fichiers de notre thème.

Je l’appelle capitaine puis je l’ouvre avec mon éditeur de code. On va créer quelques fichiers :

  • index.php, requis, qui contiendra pour l’instant l’unique page de notre thème ;
  • style.css , requis, qui va contenir nos styles mais aussi à déclarer notre thème à WordPress ;
  • functions.php, dans lequel on va pouvoir activer et ajouter des fonctionnalités ;
  • screenshot.png qui permet d’afficher un aperçu du thème dans l’interface d’administration de WordPress et qui doit faire 880×660 pixels. Téléchargez la mienne ici.
le dossier de notre premier thème et les deux fichiers obligatoires
Le dossier contenant les bases de notre thème

Oui vous avez bien lu : c’est style.css qui permet à WordPress de savoir que c’est un thème, grâce aux quelques commentaires que l’on va insérer dedans.

En fait WordPress considère qu’un thème aura toujours à minima une feuille de style, d’où le fait qu’il ait choisi le fichier CSS pour déclarer les informations du thème.

Dans le fichier Style.css

Dans la feuille de style j’ajoute :

CSS
styles.css

On indique le nom du thème, son auteur, une description et le numéro de version.

Attention

Ne mettez pas d’espace avant les deux points « : », sinon ça ne fonctionnera pas !

Dans le fichier index.php

Puis, dans le fichier index.php on va se contenter du minimum syndical :

PHP
index.php

Pour l’instant on reste simple, on va juste afficher « Coucou ».

Dans le fichier functions.php

Ce fichier est essentiel puisque c’est ici que l’on va activer toutes les fonctionnalités nécessaires de WordPress, mais également ajouter nos propres fonctions sur mesure.

Pour le moment, on va simplement demander à WordPress 2 choses :

PHP
functions.php

Attention

Dans les fichiers qui contiennent exclusivement du PHP, comme functions.php, on ne referme pas la balise PHP à la fin du fichier.

En effet, cela pourrait laisser trainer un espace à la fin, ce qui enclencherait prématurément le rendu de la page alors que WordPress n’est pas encore totalement initialisé, générant ainsi des erreurs PHP comme Headers already sent.

Activer la gestion des images mises en avant

La première est d’activer la prise en charge des images mise en avant pour le blog, les visuels qui accompagnent l’article et son résumé, anciennement appelés image à la une et en anglais les post thumbnails.

Cela aura pour rôle d’ajouter la metabox suivante dans votre éditeur de contenu :

l'interface d'ajout d'une image mise en avant dans WordPress
Vous pourrez alors choisir une image mise en avant pour chacun de vos articles

Activer la gestion automatique du titre de la page

On lui demande également de créer automatiquement la balise <title> dans l’en-tête. C’est le titre qui apparait dans l’onglet du navigateur, et important pour le référencement naturel.

Conseil

En laissant la gestion du titre à WordPress, il pourra être dynamique et différent pour chaque page. Une extension SEO comme Yoast pourra du coup venir écrire des titres optimisés pour le référencement.

Par défaut WordPress va simplement afficher à la suite les valeurs Titre du site et Slogan définies dans Réglages > Général. À terme on aura ça :

Le titre du site ainsi que le slogan s'affichent dans l'onglet du navigateur.
Le titre et le slogan, affichés dans l’onglet via la balise <title>

Tous les préparatifs sont terminés, il ne nous reste plus qu’à…

Activer le thème

On a fait le minimum syndical pour notre thème, mais cela suffira amplement pour le moment. On va donc aller l’activer. Pour cela rendez-vous dans la rubrique Apparence / Thèmes de votre interface d’administration :

Notre thème apparait dans l'interface d'administration de WordPress
Votre nouveau thème devrait apparaitre dans la liste

Si vous n’avez pas fait d’erreur, le thème devrait être listé. Cliquez sur Activer.

En cas d’erreur

Si le thème n’apparait pas dans la liste, vérifiez :
– que vous avez bien enregistré vos fichiers ;
– dans le bon dossier ;
– dans style.css, il ne faut pas mettre d’espace avant les deux points « : » ;
– que vous avez correctement écrit les commentaires « /* */ ».

Si tout est bon, rendez-vous sur le site afin de voir le résultat :

Le thème est activé mais pour l'instant, il n'affiche pas grand chose, à part Coucou !
Que c’est beau !

Ohlala ! Un truc de fou ! Bon déçu(e) ? Je vous comprend, pour l’instant notre thème ne fait pas grand chose… En plus il n’affiche même pas le titre du site, pour l’instant. Mais patience, ça prendra forme dès le prochain cours !

Conseil

Afin d’éviter des aller-retours incessants entre l’admin WordPress et le site, je vous propose d’ouvrir en permanence 2 onglets dans votre navigateur : un pour l’interface d’administration, et l’autre pour afficher la partie publique.


Et voilà, les bases sont posées ! Dans les prochains cours on va ajouter de l’interactivité et du design à ce thème qui fait pour le moment pâle figure.

0

Questions, réponses et commentaires

    Laisser un commentaire