Créer un thème original pour WordPress

WordPress est un célèbre système de gestion de contenu Open Source, principalement connu et utilisé à travers le monde comme moteur de blog. Il est l'un des principaux CMS Open Source choisis par LEKTUM. Créer un thème unique et original pour WordPress nécessite de connaître quelques notions de base qui, si elles peuvent être infiniment complétées et approfondies, n'en sont pas moins suffisantes pour réaliser un travail propre et professionnel.

Le but de cet article est de faire le point de manière pragmatique, en allant directement à l'essentiel, sur les étapes à suivre et les informations à connaître pour créer un thème WordPress original. Il s'adresse avant tout aux professionnels de la conception Web souhaitant s'initier à WordPress et suppose déjà un bon niveau de familiarisation avec la création de sites Internet. En l'occurrence, les recommandations de cet article sont à suivre après la conception de la maquette graphique de votre thème et après avoir réalisé son intégration XHTML / CSS.

Comprendre le principe

Un thème WordPress se compose d'un ensemble de fichiers rassemblés dans un dossier unique portant le nom de votre choix et contenu dans le répertoire ../wp-content/themes/. L'activation d'un thème se fait directement depuis l'interface d'administration (Apparence > Thèmes), ce qui -- soulignons-le au passage -- est bien pratique et permet ainsi de "switcher" aisément d'un thème à l'autre. Un thème se compose de plusieurs fichiers PHP (ou fichiers templates), d'au moins un fichier CSS, et de fichiers images plus ou moins nombreux selon le design du site. La spécificité de la création de thèmes sous WordPress se trouve donc dans les fichiers PHP. Il en existe un certain nombre, qui permettent d'aller assez loin dans la personnalisation de la mise en page globale du site, comme home.php, single.php, yourname.php, page.php, category.php, category-X.php (où X est le n° ID de la catégorie de votre choix), author.php, date.php, search.php, 404.php, archive.php ou index.php. Cependant, puisque cet article se veut pragmatique, autant dire tout de suite qu'il conviendra et suffira la plupart du temps -- c'est-à-dire dans le cas d'un projet de blog -- de ne s'intéresser qu'à 4 fichiers jouant un rôle essentiel :

  • index.php
  • header.php
  • sidebar.php
  • footer.php

Chacun de ces 4 fichiers, comme il est aisé de le deviner, contrôle l'apparence des pages dans une zone bien précise (header.php contrôle l'en-tête ou partie supérieure de chaque page, footer.php le pied de page, etc.). Toutefois, il convient de noter la place singulière et essentielle du fichier index.php : c'est lui qui joue le rôle de chef d'orchestre de l'ensemble (lorsque le fichier template demandé n'existe pas, c'est lui que WordPress affiche), si bien que l'on pourrait très bien ne coder que ce fichier-là pour contrôler l'apparence du site. Mais ce serait évidemment inconfortable.

Créer les fichiers de base

Avant de commencer, assurez-vous d'avoir réalisé l'intégration XHTML / CSS de votre thème. Une fois que c'est fait, commencez par créer un nouveau dossier dans ../wp-content/themes/ et donnez-lui le nom que vous voulez (de préférence un seul mot en minuscules). Pour les besoins de ce tutoriel, appelons-le lektum. À l'intérieur du dossier /lektum, créez maintenant 4 fichiers PHP vides portant les noms suivants : index.php, header.php, sidebar.php, footer.php. À cela, ajoutez un fichier CSS nommé style.css, et placez-le au même endroit. La base de votre thème est prête. Elle pourra être enrichie plus tard d'autres fichiers template.

Dans le fichier style.css, copiez-collez le contenu de votre fichier CSS perso, celui que vous avez réalisé pour l'intégration CSS de votre thème. Dans le fichier index.php, copiez-collez le contenu de votre fichier HTML perso, celui que vous avez réalisé pour l'intégration XHTML de votre thème. Pour que votre fichier index.php utilise bien les feuilles de style du fichier style.css, il faut vérifier que le chemin d'accès à ce fichier est correct dans le <head> de index.php : tapez ce chemin à la main ou bien allez voir dans le thème par défaut de WordPress l'instruction dynamique qui permet de le générer automatiquement. 

Allez maintenant dans l'espace d'administration de WordPress et activez votre thème. Attention, pour que WordPress puisse le reconnaître correctement et afficher les infos de base du thème, il faut que le fichier style.css contienne les premières lignes suivantes (à adapter selon votre cas) :

/*
Theme Name: Lektum Theme
Theme URI: http://www.lektum.com/
Description: Le thème personnel et personnalisé de Lektum. Création originale de Stéphane Vial pour Lektum.info.
Version: 1.0
Author: Stéphane Vial
Author URI: http://www.lektum.com/profil.html
************************************************
* COPYRIGHT ou LICENCE (à personnaliser)
* Ce theme est une creation exclusive de Stephane Vial pour Lektum.info
* Tous droits reserves Copyright (C) 2008 LEKTUM Stephane Vial
* This theme was designed and built by Stephane Vial for Lektum.info,
* All rights reserved Copyright (C) 2008 LEKTUM Stephane Vial
************************************************
*/

Notez aussi que chaque thème est représenté par une image miniature. Pour associer votre thème à une miniature, créez une image de 300 x 240 px, nommez-la screenshot.png et placez-la à la racine de votre dossier de thème  (pour reprendre notre exemple, dans : ../wp-content/themes/lektum/).

En allant sur la page d'accueil de votre site WordPress, vous devez voir maintenant apparaître, après qu'elle a été générée dynamiquement par WordPress, votre mise en page personnelle telle que vous l'avez conçue et réalisée. Évidemment, pour l'instant, il n'y aucun contenu dynamique issu de WordPress. Pour cela, il faut réaliser maintenant l'intégration WordPress proprement dite.

Découper les fichiers templates

Pour cela, on va commencer par décomposer le fichier index.php en plusieurs fichiers, afin que la gestion globale du thème, notamment lors des évolutions et mises à jour, soit plus simple et plus aisée. C'est comme si on était sous SPIP et qu'on réalisait des <INCLURE> (ou <INCLUDE>) dans le squelette principal. Étant très habitué à SPIP, je ferai régulièrement ce genre de parallèles.

Prenez votre fichier index.php, isolez la portion de code correspondant à l'en-tête (généralement tout le <head>, mais éventuellement aussi le début du <body>), supprimez-la du fichier index.php et placez-la dans le fichier header.php (logique, non ?). Ensuite, dans le fichier index.php, écrivez l'instruction suivante sur la première ligne du fichier :

<?php get_header(); ?>

Cette instruction s'appelle un Template Tag. Intuitive et facile à comprendre même pour quelqu'un qui ne connaît pas PHP, celle-ci permet de relier 2 fichiers template en faisant une "INCLUDE". Ici, elle va indiquer à WordPress d'insérer le contenu du fichier header.php. Exactement comme si vous écriviez, dans un squelette SPIP, l'instruction : <INCLURE{fond=inc-en-tete}>.

Ce qui vaut ici pour header.php vaut également pour les autres fichiers templates (footer.php, sidebar.php, etc.), si bien que vous voyez maintenant comment découper proprement votre thème en plusieurs fichiers templates permettant de gérer finement, par parties et par zones précises, l'affichage des pages de votre site. Procédez donc de même pour tous les fichiers template nécessaires.

Pour être sûr d'utiliser le bon Template Tag, consultez le fichier index.php du thème par défaut de WordPress et vous repérerez très vite tous les Template Tags permettant de faire des INCLUDE de fichiers template. Vous pouvez aussi consulter la liste exhaustive et officielle des Template Tags disponibles pour WordPress. Vous constaterez alors qu'il y en a plusieurs dizaines et qu'ils permettent non seulement de relier les fichiers templates entre eux, mais aussi -- comme on va le voir plus bas -- de gérér et générer l'ensemble des contenus dynamiques de WordPress. En somme, c'est ce qui correspond aux critères, filtres et balises de SPIP.

Le découpage que l'on vient de décrire est l'occasion d'apporter ici une précision importante. À l'usage, il y a deux types de fichiers templates dans WordPress. Les fichiers qui constituent une inclusion dans un fichier principal (appelons-les "fichiers partiels"), comme header.php, footer.php, sidebar.php, searchform.php, etc., et les fichiers qui constituent en eux-mêmes un fichier principal (appelons-les "fichiers principaux"), comme index.php, single.php, page.php, category.php, archive.php, search.php, etc. Cette distinction est importante car, comme on va le voir maintenant, c'est seulement dans les fichiers principaux que l'on va rencontrer nécessairement le Loop Wordpress.

Utiliser la boucle WordPress ("The Loop")

Chaque page d'un site WordPress est générée par le fichier index.php qui, comme on l'a dit plus haut, est le chef d'orchestre de l'ensemble. Cependant, il y a des exceptions. Les principales structures de pages du site (page "article", page "catégorie", page "page", page "archive", etc.) sont générées par des fichiers principaux autres que index.php (respectivement single.php, category.php, page.php, archive.php, etc.), mais bâtis sur le même modèle que lui. Ce modèle est défini par la présence dans le fichier d'une boucle WordPress.

La boucle WordPress (ou "Loop") est une boucle PHP qui permet d'appeler n'importe quel contenu (titre d'article, texte de commentaire, liens, etc.) depuis la base de données, grâce à l'utilisation des fameux Template Tags évoqués plus haut. Le Loop est donc l'élément central des fichiers template principaux, grâce auquel on peut afficher exactement ce qu'on veut. C'est l'équivalent d'une boucle de SPIP, bien que je ne sois pas certain que ce Loop soit aussi puissant et souple que le système des boucles de SPIP qui, il faut bien le dire, est une vraie petite merveille pour le développeur.

Quoi qu'il en soit, la boucle WordPress est l'élément indispensable à n'importe quel fichier template principal. On va donc la trouver dans non seulement dans index.php (l'équivalent du squelette sommaire.html dans SPIP) mais aussi single.php (l'équivalent du squelette article.html dans SPIP), category.php (l'équivalent du squelette rubrique.html), page.php, archive.php, search.php, etc.

Vous vous demandez comment implémenter cette boucle ? Deux lignes de codes suffisent. Comme dans SPIP, une boucle WordPress doit d'abord être ouverte. Pour cela, on utilise la commande suivante :

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>

La syntaxe parle d'elle-même : après avoir vérifier s'il y a des articles, on cherche parmi les articles celui qui est demandé. Mais, comme dans SPIP, toute boucle ouverte doit être fermée. Pour cela, on utilisera :

<?php endwhile; ?>
<?php endif; ?>

Entre ces deux commandes, il ne reste plus qu'à ajouter les Template Tags que l'on veut pour afficher précisément ce que l'on veut. Bien sûr, pour les développeurs et autres acharnés qui ont besoin d'affiner les requêtes de cette boucle, sachez que ce Loop WordPress peut être poussé beaucoup plus loin et recevoir tout un tas de conditions et de règles (un peu comme avec les filtres de SPIP). Pour cela, reportez-vous à la page dédiée sur le Codex anglophone de WordPress. Si le PHP est votre langue maternelle, vous deviendrez vite tout puissant.

Ajouter et personnaliser les Template Tags

Une fois la boucle WordPress implémentée (enfin copiée/collée, quoi !), il ne reste plus qu'à ajouter les Template Tags de votre choix et à leur tailler un short en CSS. Voici quelques exemples pour vous mettre la puce à l'oreille :

Pour provoquer l'affichage du titre de l'article, il suffit d'utiliser le Template Tag :

<?php the_title(); ?>

Pour obtenir l'URL de l'article :

<?php the_permalink(); ?>

Et ainsi de suite. La liste exhaustive officielle des Template Tags est ici.

Les plus courants sont dans le fichier index.php du thème par défaut de WordPress. Après, il ne vous reste plus quà imbriquer où vous voulez dans votre (X)HTML les Template Tags retenus. Par exemple, pour afficher le titre de l'article sous la forme d'un lien qui renvoie vers l'URL de l'article, il suffira d'écrire :

<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>

Et ainsi de suite, selon votre génie.

Attention : les Template Tags sont des fonctions PHP prêtes à l'emploi et, la plupart du temps, il suffit de les réutiliser tel quel. Cependant, si vos besoins sont très spécifiques, sachez que les Template Tags, eux aussi, peuvent recevoir un ensemble de paramètres ou arguments et, ainsi, vous permettre d'affiner et préciser quantité d'éléments pour afficher exactement ce que vous voulez. Ces arguments et paramètres sont détaillés pour chaque Template Tag sur la liste exhaustive officielle (ici, je l'ai déjà dit).

Compléter votre jeu de fichiers template

Selon la nature éditoriale de votre site et l'organisation de ses contenus, il ne vous reste plus qu'à compléter votre jeu de fichiers template, qui peut être, le cas échéant, très important. Pour cela, aidez-vous du thème par défaut de WordPress, cela vous aidera à repérer et à réaliser ceux qui vous sont indispensables. S'ils ne permettent pas de répondre à tous vos besoins, il faudra alors faire un peu de développement WordPress pour créer des fichiers template plus adaptés. Pour cela, les slides du workshop des Designers interactifs (voir lien ci-dessous) pourront vous aiguiller. Sinon, il vous reste la doc officielle de WordPress. Quant à moi, je vous laisse ici.

Aller plus loin

Commentaires

Bonjour

il serait utile de parler sur les squelette de thème wordpress, plus pratique pour débuter la création d'un template wordpress.

Une idée d'article ?

Fredj de Webmasteo

Portrait de Stéphane Vial
Stéphane Vial