Ce tutoriel WordPress est entièrement gratuit.
Merci de désactiver votre bloqueur de pub ! =)

Anatomie d’un thème

1 thème, c'est 1 feuille de style, 1 screenshot, et des templates.

Style.css : la feuille de style

Ce fichier doit s’appeler style.css et il est indispensable. Pourquoi ? Il contient les informations relatives au thème. Elles sont écrites sous forme de commentaire CSS en haut de la feuille de style :

/*
Theme Name: Le Guide WordPress
Theme URI: https://wordpress.bbxdesign.com
Author: bbx
Author URI: https://bbxdesign.com
Description: Le thème du Guide WordPress.
Version: 1.0
Tags: blue, orange, light, three-columns, left-sidebar, responsive-layout, editor-style, featured-images, full-width-template, sticky-post, theme-options, translation-ready, accessibility-ready
*/

Screenshot.png : 880×660

Le screenshot s’affiche dans l’administration. Il n’est pas indispensable mais pratique pour activer le bon thème.

screenshot

Les templates

C’est quoi un template ?

Un template, c’est un fichier PHP est appelé par WordPress pour générer du HTML.
Créons par exemple, un fichier index.php qui mélange du PHP et du HTML :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Mon premier tutoriel</title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
  </head>
  <body>
    <h1>Bienvenue sur le site <?php bloginfo('name'); ?></h1>
    <p><?php bloginfo('description'); ?></p>
  </body>
</html>

Le code est principalement du HTML dans lequel on a ajouté 3 zones de PHP pour insérer du contenu variable.
Il s’agit en l’occurence de la fonction <?php bloginfo(); ?> avec 3 paramètres différents :

Cet exemple de index.php est très pauvre en code, certes, mais il est suffisant. C’est surtout pour vous montrer ce qu’est un template.

Par souci d’espace horizontal, j’utiliserai des double-espace en lieu et place des tabulations habituelles pour indenter le code. Même si je préfère les tabulations car elles sont plus pratiques en HTML, la lisibilité du code prévaut ici.

Plan d’un blog

Pour comprendre le système de templates, il faut avoir en tête le plan d’un site, et particulièrement celui d’un blog en premier abord. Voici par exemple le plan fictif d’un blog basique, avec le type d’url correspondante.

Ce qu’il faut comprendre c’est qu’il y a une hiérarchie dans le site : on commence par la page d’accueil, on peut aller directement vers un billet ou bien passer par les archives mensuelles, faire une recherche, tomber sur une page qui n’existe pas…

Selon la page sur laquelle vous souhaitez aller, WordPress va utiliser un template correspondant :

Page appelée URL Template utilisé
Accueil blog.fr home.php
Archive
(annuelle,mensuelle ou journalière)
blog.fr/2011
blog.fr/2011/12
blog.fr/2011/12/25
date.php
Catégorie blog.fr/category/geek category.php
Mot-clef blog.fr/tag/iphone tag.php
Résultat de recherche blog.fr/?s=cadeau search.php
Post blog.fr/2011/12/25/un-iphone-pour-noel single.php
Page blog.fr/a-propos page.php
404 blog.fr/fjeqoisjfmoqsijfmoeqisj 404.php

Sachez qu’il existe bien plus de templates que ça, mais l’essentiel est là. Ce système permet de différencier le contenu des pages HTML générées selon l’url visitée par l’internaute.

Aussi, le nom de ces templates est très important : WordPress s’en sert pour appeler le bon fichier.