Les modèles (templates)
Expérience…
On va commencer par une expérience, à partir des fichiers crées dans la page « Les bases »on crée dans le répertoire du thème un fichier nommé précisément « header.php », pour le moment laissons le vide et examinons le site.
On voit que le début de la page qui affichait le titre du site et sa description a disparu. En fait, c’est pire… En regardant le source de la page, on voit qu’elle débute avec l’élément « main » ! Il n’y a plus de « doctype », de , etc .
Si l’on se souvient que le fichier « index.php » débutait par <?php get_header(); ?>, on se rend compte que cette fonction chargeait bien un en-tête de page correct car le fichier « header.php » n’existait pas, dans le cas contraire c’est ce fichier qui est utilisé par cette fonction.
Ainsi on peut facilement personnaliser la structure.
Quelques autres modèles de base
On peut s’en douter, on trouvera un fonctionnement analogue en ce qui concerne les fonctions « get_sidebar() » et« get_footer() » qui utiliseront respectivement, s’ils existent, les fichiers « sidebar.php » et « footer.php ».
Pour ces fonctions, on peut aller plus loin dans la personnalisation en leur passant une chaine en paramètre. Par exemple, « get_header(‘toto’) » chargera le fichier « header-toto.php » (notez bien le tiret séparateur).
Et encore d’autres…
D’autres fichier modèles sont utilisés par WordPress sans être appelés par une fonction.
Par exemple, on a vu que si depuis la première page de notre essai on cliquait un un article, seul celui-ci était affiché. Dans notre cas, c’est encore le fichier « index.php » qui l’affichait, si l’on veut personnaliser l’affichage ce peut être compliqué car il faudra déterminer dans « index.php » si on a affaire à un groupe d’article ou un seul (mais c’est possible).
Un solution simple est de créer un fichier nommé « single.php ». Dans le cas où un article est sélectionné ce sera ce fichier qui l’affichera.
Il en est de même pour de nombreux autres types d’affichage tels que pages, catégories, archives… Et on peut aller encore plus loin avec des « sous(modèles) ».
Voir : https://developer.wordpress.org/themes/basics/template-hierarchy/
Et un exemple.
Comme j’aime bien des pages HTML qui ressemblent à des pages HTML, je propose de ré-écrire le fichier « index.php ».
<!DOCTYPE html>
<html lang="fr-FR">
<head>
<meta charset="<?php bloginfo('charset') ?>" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php bloginfo('title'); ?></title>
<?php wp_head(); ?>
<link rel="stylesheet" href="<?= get_stylesheet_uri() ?>" />
</head>
<body>
<?php get_header(); ?>
<main id="main">
<?php
if (have_posts()) :
while (have_posts()) : the_post(); ?>
<h1><?php the_title(); ?></h1>
<p>Créé le <?php the_time('d m Y à H:i:s') ?>
par <?php the_author() ?></p>
<div>
<?php the_content(__('(more...)')); ?>
</div>
<hr>
<?php
endwhile;
else: ?>
<p><?php _e('Désolé, rien à afficher'); ?></p>
<?php
endif; ?>
</main>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
</body>
</html>
Quelques explications
On débute comme une page classique HTML avec un DOCTYPE et l’élément « head ».
<head>
La fonction « bloginfo(‘charset’) » renvoie le codage caractères défini par WordPress. et la fonction « bloginfo(‘title’) » renvoi le titre du site tel que l’administrateur l’a défini dans le tableau de bord.
Ensuite, la fonction « wp_head() » va placer les autres informations d’en-tête utiles de WordPress (voir le source de la page).
On termine cette partie par l’insertion du lien vers la feuille de style, on verra plus tard que l’on peut faire cela différemment.
<body>
On a placé au début l’appel à « get_header() » qui va utiliser le fichier « header.php » afin d’afficher les informations d’en-tête de la page.
Puis l’élément « main » qui n’a pas changé depuis la version précédente.
On termine le corps avec les fonction d’insertion de la « sidebar »et du « footer »par les fichiers correspondants.
Enfin on termine en fermant le « body » et « html ».
Les autres fichiers
Pour être plus complet, voici ce que l’on pourrait trouver dans d’autres fichiers.
header.php
Très simple, il affiche le nom du site et sa description
<header>
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</header>
footer.php
<footer>
<p><?= date('d-m-Y')?></p>
</footer>
<?php wp_footer(); ?>
L’appel de la fonction « wp_footer() », comme son nom ne l’indique pas, provoquera l’affichage en haut de la page de la barre d’administration dans le cas où l’utilisateur est connecté.
Cette fonction est nécessaire car elle déclenche l’action « wp_footer » et certaines extensions lient leur fonctionnement à cette action.
sidebar.php
C’est un plus élaboré, on affiche les archives, les catégories et les pages. On notera que les fonctions de WordPress qui produisent des listes, comme c’est ici le cas, les génèrent dans des éléments « ul » / « li ».
<aside>
<ul>
<li>Archives</li>
<ul>
<?php wp_get_archives(); ?>
</ul>
</ul>
<ul>
<?php wp_list_categories(); ?>
</ul>
<ul>
<?php wp_list_pages(); ?>
</ul>
</aside>
Et, la feuille de style « style.css »
C’est, bien sûr, un exemple. On notera que l’élément « aside » est placé sur le bord droit. les propriétés « float » des élément « main » et « aside » produisent un contenu fluide. Dans ce cas il est nécessaire de donner la propriété « clear » à l’élément « footer » pour qu’il se place en dessous des flottants.
/*
Theme Name: Thème de démonstration
Author: Moi-même
Description: Version en développement
Version: 0.0
*/
html {
font-family: sans-serif;
font-size: 16px;
}
body {
}
header {
background: #ccc;
}
main {
float: left;
max-width: 30em;
}
aside {
float: right;
margin: 0 .5em 0 1em;
width: 15em;
border: 2px outset #000;
}
aside ul {
padding: 0 0 0 1em;
}
footer {
clear: both;
background: #ccc;
}
Modèles spécifiques
Il se peut que certaines pages méritent une présentation particulière. Pour cela on crée un fichier modèle au début duquel on indique en commentaire PHP un nom de modèle comme :
<?php /* Template Name: page speciale */ ?>
Où « page speciale » est à remplacer par le nom de votre choix. Le nom de ce fichier n’a pas d’importance mais il est judicieux de le faire commencer par « page » (non suivi du tiret).
Le reste du contenu suit les règles de construction de page.
Désormais, les rédacteurs verront, lors de l’écriture des pages, dans la case « Attributs de page », une zone de liste « Modèle ». Celle-ci proposera, outre le modèle par défaut, celui qui a été défini, dans notre exemple « page speciale ».
Si l’on souhaite rendre ce modèle aussi disponible pour les articles, on ajoute dans le commentaire du haut la ligne :
Template Post Type: post, page
Voir: https://developer.wordpress.org/themes/template-files-section/page-template-files/
Laissez un commentaire
You must be connecté pour laisser un commentaire.