DĂ©couvrir les fichiers nĂ©cessaires au bon fonctionnement d’un thème

En rĂ©alitĂ©, pour dĂ©clarer l’existence d’un nouveau thème aux yeux de WordPress, nous avons uniquement besoin de deux fichiers :


Pour ĂŞtre reconnu par le CMS ces deux fichiers suivent une nomenclature bien prĂ©cise. Le 1er s’appelle index.php et le 2nd style.css. Je vous propose dès maintenant de vous diriger dans le dossier /wp-content depuis la racine de votre WordPress, puis allez dans le dossier /themes puis crĂ©er un nouveau dossier /mon-theme. Il sera vide pour le moment.

Je vous invite Ă  crĂ©er vos deux fichiers index.php et style.css Ă  l’intĂ©rieur du dossier /mon-theme. Sauvegardez vos deux fichiers en l’Ă©tat, vides… Promis c’est pas une blague.


Je peux d’ores et dĂ©jĂ  vous fĂ©licitez, vous venez de crĂ©er votre 1er thème WordPress 🎉


Si, si, promis ! Allez dans l’administration de votre site WordPress, dans l’onglet Apparence > Thèmes, vous voyez votre thème existe, il est bien lĂ . Activez-le.

C’était rapide non ? Ah merde… vous ne voyez une page blanche quand vous retournez sur votre site en front ? Pas de soucis, on continue.

Comprendre la feuille de Style de WordPress dans les moindres détails

Avant de personnaliser le thème, récupérer et afficher les données, il faut bien l’initialiser. Créer des fichiers vides n’est pas suffisant, nous allons utiliser les différents standards de WordPress pour le fichier style.css. Ces champs là seront utiles pour indiquer à WordPress les différentes spécificités de votre thème.

/*
Theme Name: Theme sur mesure
Theme URI: https://learn.fantassin.fr
Author: Fantassin
Author URI: https://learn.fantassin.fr
Description: Un thème sur mesure
Tags: blog, one-column, custom-background, custom-colors, custom-logo, custom-menu
Version: 1.0
Requires at least: 5.0
Tested up to: 5.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-sur-mesure
This theme, like WordPress, is licensed under the GPL.
Votre premier thème
*/

Champs accessibles et visibles via le “Theme Details”

  • Theme Name : Le nom de votre thème ! Celui qui sera affichĂ© dans le menu « Apparence »
  • Theme URI : C’est le lien vers l’endroit oĂą l’on peut trouver le thème (une boutique de thème, un site web qui l’utilise, …)
  • Author : C’est votre nom ou celui de votre organisation
  • Author URI : Le lien original vers le thème (si on peut l’acheter, tĂ©lĂ©charger, contacter, …)
  • Description : La description de votre thème
  • Tags : La liste des tags utiles, par exemple, si vous utilisez des tags conformes avec WordPress et que vous le mettez sur le Thème Store, votre thème pourra ĂŞtre filtrĂ© avec les tags.
  • Version: La version actuelle de votre thème, pratique en cas de mise Ă  jours
  • Requires at least: La version minimum requise de WordPress pour utiliser votre thème, si la version de votre WordPress est infĂ©rieure, le thème ne pourra pas ĂŞtre activĂ©.
  • Tested up to : Le thème a Ă©tĂ© testĂ© jusqu’Ă  la version X de WordPress (il est possible de l’utiliser tout de mĂŞme)
  • Requires PHP : Le thème a besoin de la version PHP X minimum, sinon il ne pourra pas ĂŞtre activĂ©
  • Licence & Licence URI : La licence GNU est obligatoire pour tous les produits crĂ©Ă©s pour WordPress
  • Text-domain : Très utile pour la traduction, pour que WordPress rĂ©cupère les fichiers de traductions en fonction de votre txt-domain

A la fin du fichier vous pouvez ajouter vos propres commentaires et textes, pratique si vous voulez cacher des easter-eggs dans votre code !

Back Theme

Une fois ces diffĂ©rents Ă©lĂ©ments ajoutĂ©s, si nous allons dans le menu « Apparence », nous pouvons voir qu’en rajoutent ces petits commentaires, de grandes choses ont dĂ©jĂ  eu lieu ! Vous pouvez ĂŞtre fier de vous.

index.php en détail

L’importance de la sĂ©mantique

L’une des choses les plus délaissées et pourtant importantes c’est la sémantique. Il faut que votre site soit bien compréhensible par votre navigateur, les robots de Google et encore les outils utilisés par les personnes déficientes. C’est pour cela qu’il faut bien créer votre sémantique. C’est le pilier et la fondation de votre site.

La sémantique, concrètement c’est du HTML. Vous pouvez regarder les différents éléments utilisables sur la documentation MDN.

Et pourquoi avez-vous besoin de ça maintenant ? Tout simplement car si vous vous rendez sur le front de votre site, vous avez actuellement une page blanche. La sémantique vous permettra de transformer cette page blanche en page avec du contenu bien formaté !

Afficher du contenu sur votre site

Pour commencer, nous allons afficher un. Faites donc un test en ajoutant ce code dans le fichier index.php

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mon thème sur mesure</title>
</head>
<body>
    <h1>Hello World!</h1>
</body>
</html>

Enregistrez-le, et retourner sur votre site. TA-DAM ! Vous avez maintenant du contenu sur votre, mĂŞme si c’est tout le temps le mĂŞme, nous allons voir comment le changer plus tard, ne vous en faites pas.

Index Theme Sur Mesure