Tutoriel sur le thème WordPress pour les débutants – Partie 11 : Modèles de page personnalisés

Dans cette leçon de didacticiel sur le thème WordPress pour les débutants, nous apprenons les modèles de page, ce qu’ils sont, comment les créer et les meilleures pratiques. Nous allons créer un modèle pleine largeur à titre d’exemple. En cours de route, nous ajoutons également une classe au corps en demandant si la page utilise un modèle de page spécifique.

Que sont les modèles de page

Les modèles de page sont utiles dans les cas où vous souhaitez une mise en page ou une configuration différente pour une page spécifique. Des exemples courants d’utilisations de modèles de page répertorient les publications dans un type de publication personnalisé (par exemple, portfolio, livres ou services), ayant un contenu ou une mise en page complètement différent (par exemple, à l’intérieur de colonnes), ou même simplement en créant une page pleine largeur (pas de barre latérale).

La convivialité des modèles de page a diminué après la version 5.x de WordPress (Gutenberg). Le nouvel éditeur Gutenberg permet une grande flexibilité pour créer de telles pages sans avoir besoin de modèles de page. Quoi qu’il en soit, nous apprendrons comment ajouter un modèle de page personnalisé dans notre thème.

À l’intérieur de la métabox "Attributs de page" pour les pages se trouve le choix du modèle de page. Mais l’option de modèle n’apparaîtra que si le thème actif a au moins un modèle de page.

Les modèles de page peuvent également être utilisés pour les publications et les types de publication personnalisés. Après WordPress 4.7 et versions ultérieures, vous pouvez définir les types de publication pour lesquels vous souhaitez que le modèle soit disponible. WordPress ajoutera automatiquement la métabox « Attributs de page » requise à ces types de publication.

Dénomination et emplacement du modèle de page

Pour commencer, vous feriez généralement une copie du fichier de modèle le plus proche de ce que vous souhaitez obtenir avec le modèle de page. Dans la plupart des cas, c’est page.php. Quant à la dénomination de votre modèle de page, c’est à vous de décider. Mais il y a des règles et du bon sens.

Il est tentant de nommer simplement votre modèle de page, par exemple page-books.phppour un modèle répertoriant des livres de type publication personnalisée. Ne préfixez jamais votre modèle de page avec ‘ page-‘! Si vous vous souvenez de la hiérarchie des modèles de WordPress, WordPress recherchera page-<slug>.phpavant de tenter page.php, et les utilisateurs de votre thème pourraient rencontrer un comportement inattendu.

Une bonne pratique consiste à préfixer votre modèle de page avec quelque chose qui ne fait pas partie des noms de modèle de page de WordPress. Par exemple ‘ pagetemplate-', ‘ pt-‘ ou simplement le nom complet ‘ fullwidth-template.php‘. Il est également recommandé de les conserver dans un sous-dossier ; /page-templates/cependant, ce n’est pas bon si vous voulez que votre thème soit disponible pour s’étendre avec un thème enfant. Un thème enfant ne peut pas remplacer les modèles de page qui sont placés dans un sous-dossier du thème parent.

Une fois que vous avez décidé d’un modèle de nommage, continuons et créons un modèle de page.

Création d’un modèle de page

Faites une copie de page.phpet renommez-le en pagetemplate-fullwidth.php. Pour en faire un modèle de page, il vous suffit d’ajouter un commentaire au tout début qui indique à WordPress qu’il s’agit d’un modèle de page :

<?php 
/*
Template Name: Fullwidth 
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Tout ce dont vous avez besoin est un commentaire au tout début du fichier, avec « Nom du modèle : » suivi du nom de votre modèle. C’est ça! Allez dans l’administrateur, modifiez une page et vous devriez voir l’option de choisir "Fullwidth" comme modèle.

J’ai mentionné que dans WordPress 4.7, vous pouvez définir les types de publication pour lesquels vous souhaitez que le modèle de page soit disponible. Pour le moment, il n’est disponible que pour les pages, mais dites-vous que vous voulez également avoir la possibilité de créer des articles en pleine largeur ? Dans ce cas, ajoutez « Template Post Type : » dans le même bloc de commentaires et définissez vos types de publication séparés par une virgule. Par exemple, pour le rendre disponible à la fois pour les publications et les pages ;

<?php 
/*
Template Name: Fullwidth 
Template Post Type: post, page
*/
get_header(); ?>
<?php 
if (have_posts()) {
...

Modifiez une publication et vous devriez voir une nouvelle métabox "Attributs de publication" où vous pouvez choisir le modèle pleine largeur. Agréable!

Modification du code dans notre modèle de page

Modifions maintenant le modèle de page pour qu’il fasse quelque chose de différent de la vue d’une seule page. Supprimons le modèle de demande de barre latérale : (je l’ai commenté pour le rendre plus visible, mais vous pouvez simplement supprimer la ligne).

...
    ?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
}
//get_sidebar(); 
get_footer(); ?>

Faisons encore une chose pour rendre notre modèle de page plus facile à styliser. Lorsque vous ajoutez du CSS, vous avez souvent besoin de savoir si la page a une barre latérale ou non, afin d’ajuster les colonnes/la mise en page. Rappelez -vous body_classqui fournit tout un tas de classes utiles à l’élément body ? Et si nous ajoutions une classe personnalisée sur le corps qui nous indique si la page actuelle a une barre latérale ou non ?

Filtrer surbody_class

Remarque : Vous avez peut-être remarqué que toute page ou publication utilisant un modèle de page obtient déjà une classe de corps spécifique ; "page-template-" – dans notre exemple "page-template-pagetemplate-fullwidth". C’est une classe assez longue, et en plus, nous voulons rendre notre thème plus flexible – et autoriser la pleine largeur sur d’autres modèles en dehors de ceux utilisant le modèle de page. Par exemple, vous ne voulez généralement pas de barre latérale sur la page d’accueil, n’est-ce pas ?

Remarque: Cela ajoute uniquement une classe au corps afin que le style soit plus facile, cela ne désactive pas réellement la sortie de la barre latérale. Vous devez vous rappeler de supprimer le get_sidebar()partout où vous ne le voudrez pas.

Ajoutons un filtre pour body_classajouter une classe de barre latérale personnalisée dans notre functions.php, afin que vous puissiez en ajouter plus tard dans d’autres cas où vous ne voulez pas la barre latérale. WordPress a une belle balise conditionnelle pour vérifier si un modèle de page est utilisé ; is_page_template()où vous mettez le nom de votre modèle de page en paramètre. Nous voulons ajouter une classe si ce n’est pas vrai, nous ajoutons donc l’inverse avec "!" :

add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
    if (!is_page_template('pagetemplate-fullwidth.php')) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}

Très probablement, pendant que vous développez les modèles, vous rencontrerez parfois des modèles auxquels vous ne souhaitez pas ajouter la classe sidebar, et au fur et à mesure, ajoutez ces cas à l’intérieur de this if. Par exemple, si vous ne voulez pas que la classe sidebar soit sur la page d’accueil, vous pouvez ajouter !is_front_page(). Cela ajoutera la classe ‘has-sidebar’ à toutes les pages sauf frontpage et le modèle de page :

if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))

C’est à vous de décider combien de modèles de page vous voulez et ce qu’ils doivent contenir. Ce n’était qu’une simple introduction. Si vous souhaitez savoir comment interroger d’autres publications dans un modèle de page, consultez l’ étape suivante.