La hiérarchie des templates

Tutoriel publié en novembre 2011 par Galdon dans la catégorie Wordpress

Comme, je vous le rappelle, le sujet de ce cours est "Comment créer un thème Wordpress", on va donc... créer un thème (renversant n'est-ce pas ?).

Les thèmes Wordpress sont composés de Templates. Un template est simplement un fichier PHP qui sera utilisé par le moteur wordpress pour afficher la page web demandée.

Les thèmes sont rangés dans le dossier wp-content/themes. Première étape, et non des moindres, trouver un nom pour notre futur thème, moi je vais prendre "Finalclap".

Donc on créé un dossier finalclap dans wp-content/themes.

Deux fichiers sont absolument indispensables à un thème, c'est le minimum obligatoire :

style.css
Il contient non seulement du code CSS pour la mise en forme des pages web, mais aussi les métadonnées du thème (son nom, sa version, le site de son auteur...) sous forme de commentaire au début du fichier :
```
/*
Theme Name:  Finalclap
Theme URI:   http://www.finalclap.com/
Description: Un thème bidon pour apprendre Wordpress
Author:      finalclap.com
Version:     1.0
*/
```
index.php
C'est le template qui sera appelé par défaut par Wordpress pour n'importe quelle page (affichage d'un post, listing des posts, affichage d'une catégorie...).

Créez donc ces 2 fichiers dans le dossier de votre thème (wp-content/themes/finalclap/ si vous suivez bien), dans style.css vous mettez les métadonnées en vous inspirant du bout de code ci-dessus, et dans index.php vous ne mettez rien.

La boucle

On l'appelle aussi "The Loop". C'est une portion de code PHP qui est appellée sur tous les templates pour afficher les posts.

Et devinez quoi ? on va l'utiliser tout de suite dans notre template index.php :

<?php
/**
 * Fichier principal.
 *
 * @package WordPress
 * @subpackage Finalclap
**/
?>
<html>
<head>
<title>Thème Wordpress</title>
</head>

<body>
<?php while ( have_posts() ) : the_post(); ?>
	
	<pre><?php print_r( $post ); ?></pre>
	
<?php endwhile; // Fin de la boucle ?>
</body>
</html>

La boucle Wordpress est simplement une boucle while (tant que) qui utilise 2 fonctions wordpress :

have_posts()
Cette fonction va chercher une liste de posts dans la base de données.
Par défaut elle retourne la liste des 10 posts les plus récents, classés par ordre antéchronologique (du plus récent au plus ancien).
the_post()
Elle charge les données du post courant dans la variable $post.

Dans mon exemple, je fais simplement un print_r($post) pour afficher tout ce que cet objet contient, et voici ce qu'on obtient :

stdClass Object
(
    [ID] => 1
    [post_author] => 1
    [post_date] => 2011-04-27 12:22:28
    [post_date_gmt] => 2011-04-27 12:22:28
    [post_content] => Bienvenue dans WordPress. Ceci est votre premier article. Modifiez-le ou supprimez-le, puis lancez-vous !
    [post_title] => Bonjour tout le monde !
    [post_excerpt] => 
    [post_status] => publish
    [comment_status] => open
    [ping_status] => open
    [post_password] => 
    [post_name] => bonjour-tout-le-monde
    [to_ping] => 
    [pinged] => 
    [post_modified] => 2011-04-27 12:22:28
    [post_modified_gmt] => 2011-04-27 12:22:28
    [post_content_filtered] => 
    [post_parent] => 0
    [guid] => http://localhost/wordpress/?p=1
    [menu_order] => 0
    [post_type] => post
    [post_mime_type] => 
    [comment_count] => 1
    [filter] => raw
)

Alors ce qu'on serait tenté de faire quand on connait PHP, c'est utiliser directement cet objet post pour lister les posts :

<?php
echo $post->post_title;
echo $post->post_content;
?>

Sauf que wordpress propose des fonctions à utiliser dans les templates pour afficher ces informations :

the_title() : affiche le titre du post
the_permalink() : affiche l'URL du post
the_content() : affiche le contenu du post

On appelle ces fonctions des Template Tags, et vous en trouverez la liste sur le codex (c'est comme ça que se nomme la documentation de Wordpress) : Liste des Template Tags.

Remplacez la boucle par ce code dans index.php :

<?php while ( have_posts() ) : the_post(); ?>
	
	<div>
		<!-- titre du post -->
		<h1>
			<a href="<?php the_permalink(); ?>">
				<?php the_title(); ?>
			</a>
		</h1>
		
		<!-- Informations sur le post (auteur, date de publication) -->
		<p>Article écrit par <b><?php the_author(); ?></b> le <?php the_date(); ?></p>
		
		<!-- Contenu -->
		<div style="background: whitesmoke;">
			<?php the_content(); ?>
		</div>
	</div>
	
<?php endwhile; // Fin de la boucle ?>

Maintenant si vous vous rendez sur la page d'accueil de wordpress, vous verrez une liste des posts avec le titre cliquable.

Bon ok, en l'état ça ne casse pas des briques, mais le principe est là : un template utilise la boucle pour afficher la liste des posts.

Header, Footer, Sidebar

Pour le moment notre ébauche de thème est très rudimentaire. Dans la pratique, on ne met pas tout dans un seul fichier.

En règle général, une page web est constituée d'un header (en-tête) et d'un footer (pied de page), mais également d'une sidebar (barre latérale). La sidebar est d'ailleurs utilisée dans la majorité des thèmes wordpress, pour afficher la liste des catégories, un champ de recherche, un nuage de tags, enfin pleins de trucs cool en rapport avec le contenu.

Donc nous allons créer deux nouveaux templates dans le répertoire de notre thème : wp-content/themes/finalclap :

header.php
footer.php

Dans le header on va mettre le code commun à tous les templates qui sera placé au début de ceux-ci :

<?php
/**
 * @package WordPress
 * @subpackage Finalclap
**/
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><?php wp_title(); bloginfo( 'name' ); ?></title>
</head>

<body>

Et dans le footer... tout le code commun qui sera placé à la fin :

<?php
/**
 * @package WordPress
 * @subpackage Finalclap
**/
?>
</body>
</html>

Retournons maintenant dans index.php pour appeler le header et le footer à l'aide des Template Tags get_header() et get_footer() :

<?php
/**
 * Fichier principal.
 *
 * @package WordPress
 * @subpackage Finalclap
**/
get_header();
?>

<?php while ( have_posts() ) : the_post(); ?>
	
	<div>
		<!-- titre du post -->
		<h1>
			<a href="<?php the_permalink(); ?>">
				<?php the_title(); ?>
			</a>
		</h1>
		
		<!-- Informations sur le post (auteur, date de publication) -->
		<p>Article écrit par <b><?php the_author(); ?></b> le <?php the_date(); ?></p>
		
		<!-- Contenu -->
		<div style="background: whitesmoke;">
			<?php the_content(); ?>
		</div>
	</div>
	
<?php endwhile; // Fin de la boucle ?>

<?php get_footer(); ?>

Récapitulons, notre thème est maintenant composé de :

`style.css`	Métadonnées + feuille de style CSS
`index.php`	Template par défaut, qui appelle header et footer
`header.php`	Code commun, appelé par les autres templates
`footer.php`	Code commun, appelé par les autres templates

Il ne reste plus qu'une chose à voir sur les templates : la hiérarchie des templates.

Installons un thème d'exemple

Avant d'attaquer cette dernière partie, on ne va pas rester avec un thème aussi basique, j'ai réalisé un thème très simple avec des commentaires dans le code source, au look conventionnel (header footer sidebar content), que vous pouvez télécharger sur stockmotion :

Thème Wordpress de démonstration Télécharger le thème Wordpress de démonstration

Télécharger

Téléchargez le et installez-le (pour installer un thème, il suffit de le placer dans le dossier themes : wp-content/themes, puis l'activer dans la partie administration).

Hiérarchie des templates

Actuellement dans notre thème, seul le fichier index.php est vraiment utile, c'est ce template que wordpress utilise pour afficher les pages du blog, TOUTES les pages.

Et sous wordpress il existe un certain nombre de types de page :

La page d'accueil
Les posts
Les pages
Les catégories
Les tags

Pour gérer tout ça, wordpress permet de créer un template spécifique pour chacune de ces pages. Mais ça n'est pas obligatoire, en fait le moteur de wordpress détermine automatiquement le template à utiliser pour afficher une URL donnée, en suivant des règles bien définies qu'on appelle justement la hiérarchie des templates.

Et c'est le moment de dégainer le diagramme magique qui explique en détail quel template sera choisi par wordpress :

Comme vous pouvez le constater, lorsque le template prévu pour afficher la page demandée n'existe pas, wordpress retombe toujours sur ses pattes en utilisant index.php, le template par défaut.

Jetez un oeil dans le thème d'exemple que vous avez téléchargé, vous verrez que j'utilise le template single.php pour afficher les posts individuels (hors du listing).

Voilà, vous connaissez les bases de la création de templates Wordpress.

Le principe est toujours le même : la boucle, inclusion d'autres templates (header/footer/sidebar)... le tout avec des Templates Tags.

Allez donc jeter un oeil sur cette page : redonner de la couleur à une photo noir et blanc.

Ce tutoriel fait partie d'un cours : aller au sommaire pour voir les autres chapitres.

Retourner au sommaire

Tags

wordpress