Pour l’instant, nous avons vu des templates qui sont des pages complètes. Un header, une liste de billets, un footer.
Mais certaines parties du code étant généralement les mêmes à travers les fichiers, il est préférable de regrouper ces parties en des fichiers séparés que l’on va inclure aux pages complètes.
Les includes principalement utilisés sont :
header.php: le début du code, avec la doctype, le <head>, le début du <body>footer.php: la fin du code, avec le pied de page et la fermeture des balises </body> et </html>sidebar.php: une colonne qui contient souvent le formulaire de recherche, un bouton RSS, la liste des catégories, un nuage de tags…searchform.php: le formulaire de recherche, tout seulcomments.php: le module de commentaires, présent danssingle.phploop.php: la boucle utilisée pour afficher les Posts
header.php : là où tout commence
Le fichier header.php est celui, avec footer.php, que l’on place dans tous les templates. L’un ouvre le code HTML, l’autre le ferme. Entre les deux, c’est le template qui gère.
On va créer ce fichier étape par étape parce qu’on va le garder jusqu’à la fin.
Il sera le 1er d’un ensemble de fichiers qui constituera un thème complet que l’on va créer au fur et à mesure de ce tutoriel.
Partons d’un bout de HTML5 :
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>bbxpress : un blog de Guru</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <div class="wrap"> <header> <h1><a>bbxpress</a></h1> <h2>Un blog de Guru</h2> </header>
Le code est volontairement réduit à son strict nécessaire. On va établir des bases simples et solides pour ensuite construire un site plus riche.
Première chose à noter : j’ouvre la div « wrap » mais ne la ferme pas. En effet, on va la fermer plus tard dans footer.php pour que le site entier soit inclus dans cette div.
Deuxième chose à noter : il n’y a pas de PHP dans ce code… pour l’instant. On y va petit à petit. J’ai mis uniquement du code HTML en prenant néanmoins soin de placer du contenu statique (le titre, la description).
On pourrait laisser le code ainsi, ça ne poserait pas de problème… mais ce ne serait pas pratique à modifier. Il faudrait ouvrir directement le fichier PHP pour l’éditer en ligne ou bien l’uploader par FTP.
On va donc remplacer ce contenu statique par du contenu dynamique :
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<title><?php the_title(); ?></title>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css">
<?php wp_head(); ?>
</head>
<body>
<div class="wrap">
<header>
<h1><a><?php bloginfo('name'); ?></a></h1>
<h2><?php bloginfo('description'); ?></h2>
</header>
Revoilà la fonction bloginfo() que l’on avait déjà vue.
J’ai aussi rajouté the_title(), une fonction très pratique de WordPress. Selon la page où l’on se trouve, elle génèrera un titre adéquat.
La fonction wp_head() est quasiment indispensable. En fait, elle permet aux plugins d’insérer du code dans le <head>. Vous pouvez vous en passer mais je ne vous le conseille pas.
Sauvegardons ce header dynamique et passons à la suite.
footer.php : là où tout prend fin
Toute balise ouverte doit être refermée à un moment ou à un autre…
<footer>
<?php bloginfo('name'); ?> est propulsé par <a href="https://wordpress.org">WordPress</a>.
</footer>
</div>
<?php wp_footer(); ?>
</body>
</html>
Un simple footer qui reprend le nom du blog et fait un peu de pub pour WordPress.
Ici, la fonction wp_footer() joue le même rôle que wp_head(), à savoir définir un lieu où un plugin peut insérer du code, notamment des appels JavaScript pour le footer.
sidebar.php : une colonne bien pratique
On va définir une colonne latérale que l’on pourra appeler dans tous les templates. Elle aura du contenu général, non spécifique à une page précisément.
La sidebar a un rôle particulier dans WordPress : elle permet d’insérer des Widgets.
Il s’agit de petits modules (un bloc de texte, une liste de catégories, un formulaire de recherche, un calendrier) que l’on peut insérer, ordonner et administrer dans le backend de WordPress.
Leur avantage : ils sont très simples à utiliser. Un novice peut s’en occuper.
Leur désavantage : ils ne sont pas vraiment customizables.
Pour nous, créateurs de thème, on peut s’en passer parce qu’on sait mettre du code directement dans le fichier sidebar.php.
Mais si votre thème est destiné à des novices, il faut rendre votre thème « widget-ready« , c’est-à-dire le rendre capable d’accepter des Widgets.
On verra ça dans une leçon prochaine.
Restons simples pour cette sidebar :
<div class="side">
<!-- Bouton RSS -->
<a href="<?php bloginfo('rss2_url'); ?>">S'abonner au flux RSS</a>
<!-- Formulaire de recherche -->
<?php get_search_form(); ?>
<!-- Archives -->
<ul class="list">
<?php wp_get_archives('type=monthly'); ?>
</ul>
</div>
Un lien vers le flux RSS, le formulaire de recherche (qui est lui-même un include), ainsi qu’une simple liste des archives par mois.
searchform.php : un formulaire avec des règles
Le formulaire de recherche est parfois utilisé à plusieurs endroits dans une page. C’est pourquoi WordPress le place par défaut dans un fichier à part : searchform.php. Ce n’est pas du tout obligatoire et j’avoue ne pas le faire systématiquement.
Par contre, le code du formulaire, lui, doit répondre aux règles suivantes :
- la balise <form> doit avoir comme paramètres action= »/ » (ou la racine du site) et method= »GET »
- l’input texte de recherche doit avoir paramètre id= »s »
Voici un formulaire de recherche simplifié mais qui fonctionne :
<form method="get" id="form" action="<?php bloginfo('url'); ?>/">
<input type="text" value="<?php the_search_query(); ?>" name="s" id="s">
<input type="submit" id="submit">
</form>
En validant le formulaire, la page affichée sera du type blog.fr/?s=requete et le template utilisé sera search.php.
comments.php : l’usine à gaz des commentaires
Le fichier comments.php ne peut être inclus uniquement dans single.php, et plus précisément dans la boucle de single.php (boucle que nous verrons dans la leçon suivante).
Il a 2 rôles :
- Afficher les commentaires avec pour chacun l’auteur, l’avatar, la date et le contenu. Les commentaires peuvent être imbriqués, c’est-à-dire avoir plusieurs niveaux de réponse.
- Afficher le formulaire de nouveau commentaire avec le nom, l’email et le message.
Il faut savoir que depuis WordPress 3, le fichier comments.php n’est plus indispensable. En effet, il suffit d’appeler la fonction comments_template() dans le fichier single.php pour afficher ce qu’il faut (les commentaires et le formulaire) parce qu’il s’agit d’une fonction intégrée à WordPress.
Mais il se peut que vous vouliez modifier le code des commentaires, et dans ce cas, il faut créer un fichier comments.php et le modifier. Ce fichier est le plus dur à modifier dans un thème WordPress. C’est pourquoi, si je dois le modifier, je pars toujours du fichier présent dans le thème par défaut (Twenty Ten par exemple), le duplique, et le modifie à partir de là. C’est le seul auquel j’applique ce processus.
La première difficulté réside dans les possibilités d’affichage des commentaires :
- Si le Post est protégé par mot de passe, il n’affiche pas de commentaire, ni de formulaire.
- S’il n’est pas protégé, il regarde si les commentaires sont autorisés.
- Si oui, il regarde si il y a des commentaires à afficher.
- Si leur nombre dépasse le nombre / page autorisé, il affiche la pagination.
- Enfin, il affiche le formulaire de nouveau commentaire si les commentaires sont ouverts.
Avec toutes ces conditions, il est facile de se perdre dans les méandres de comments.php…
Une deuxième difficulté, c’est la customisation du code. En effet, depuis WordPress 3, l’affichage des commentaires se fait en appelant uniquement la fonction wp_list_comments(). Du coup, le code HTML généré n’est pas modifiable… enfin, pas facilement. Je l’ai déjà fait, et je ne le conseille pas. Pareil pour le formulaire de nouveau commentaire, qui se réduit à la fonction comment_form().
Après avoir parcouru tous ces includes, attaquons-nous au plus important d’entre eux : loop.php.