Créer des templates personnalisés pour les Pages sous WordPress

Il y a plusieurs manières de créer des custom templates (modèles personnalisés en français) pour les pages sous WordPress. Il n’y a pas vraiment de meilleure façon pour procéder, donc libre à vous de choisir ce qui vous convient le mieux selon les choix que vous avez fait pour votre arborescence de fichiers.

Tout d’abord, nous allons créer une page dans l’administration de WordPress ou utiliser la page « Page d’exemple » si elle n’a pas été supprimée.

Cliquez ensuite sur le lien « voir » pour afficher l’aperçu de la page avec le design de votre site. Voyons maintenant comment personnaliser ce design de cette page.

1. Créer un template basé sur l’ID d’une page

Premièrement, pour surcharger le template d’une page via son ID, il faut le connaître. Deux méthodes rapides pour savoir quel est l’ID d’une page :

• Regardez l’URL quand vous êtes en mode édition dans l’administration ou quand vous visualisez la page en question. Cherchez les mots-clé post= ou page_id= dans cette URL et récupérez le numéro qui y est associé. Pour ma part, j’ai http://localhost/test/wp-admin/post.php?post=2&action=edit pour ma page d’exemple. L’ID de ma page est donc 2.
• Sur le listing des pages dans l’administration, survolez le lien menant à l’édition de votre page et regardez l’URL qui apparaît en bas à gauche de votre écran. Appliquez ensuite la même méthode que ci-dessus pour connaître l’ID.

Créez un fichier .php à la racine de votre thème. Appelez-le page-<VOTRE_ID_DE_PAGE>.php. Dans mon cas, c’est page-2.php.

Ouvrez le fichier avec votre logiciel d’édition de code et tapez :

Mon template par ID fonctionne !

Vous devriez avoir affiché « Mon template par ID fonctionner ! » sur un grand fond blanc.

Pas d’inquiétude, si vous avez perdu des éléments de design de votre site. Tout fonctionne parfaitement. Cela veut juste dire que ce template joue un peu le rôle de la page index.php, il va donc falloir récupérer une partie du code d’index.php (l’appel au header, l’appel au footer, et surement quelques autres divs qui forment habituellement le design de votre site) et le copier/coller ici.

2. Créer un template basé sur le slug d’une page

Le slug est la partie de l’URL d’une page qui a été généré via les réglages que vous avez choisi dans l’administration de WordPress.

Rendez-vous dans Réglages > Permaliens, puis cochez Titre de la publication et enregistrez les modifications. Retournez maintenant modifier votre page dans l’admin. Vous devriez avoir une nouvelle section dans votre colonne de droite appelée « Permalien ». Dans le champ « slug », pour ma part j’ai « page-d-exemple ».

Créez un nouveau fichier .php à la racine de votre thème et appelez-le page-<VOTRE_SLUG_DE_PAGE>.php. Pour ma part, ça sera : page-page-d-exemple.php.

Ouvrez ce fichier et tapez :

Mon template par slug fonctionne !

Si vous vous rendez sur la page, vous devriez maintenant avoir « Mon template par slug fonctionne ! ». Et cela, sans avoir à supprimer la page ciblant l’ID (page-2.php) que vous aviez créez précédemment.

3. Créer un custom template – ou modèle personnalisé

Créez un dossier appelé page-templates à la racine de votre thème, puis créez un nouveau fichier .php dans ce dossier. Vous pouvez l’appeler, par exemple, page_test.php. Notez au passage que la création du dossier n’est pas obligatoire, mais elle permet d’avoir une organisation des fichiers plus claire.

Ouvrez le fichier avec votre logiciel d’édition de code et tapez le code/commentaire suivant tout en haut du fichier :

<?php
/*
Template Name: Mon template exemple
Template Post Type: page
*/
?>
Mon template personnalisé fonctionne !

Ces commentaires sont parsés et reconnus par le système de compilation de WordPress. Nous avons :

• Template Name qui permet d’entrer un nom intelligible pour le template (qui sera affiché dans l’administration par exemple)
• Template Post Type qui permet de restreindre l’utilisation de ce template à seulement quelques types de contenu. Ici nous avons choisi de restreindre l’utilisation de ce template aux contenus de type « page ».

Pour activer ce template, rendez-vous dans l’administration et modifiez votre page. Vous devriez maintenant avoir un menu déroulant intitulé Modèle dans la colonne de droite. Il vous permet de sélectionner le template que vous venez de créer. Sélectionnez-le et enregistrez les modifications.

Vous devriez maintenant avoir « Mon template personnalisé fonctionne ! » quand vous vous rendez sur la page.

Hiérarchie de templates WordPress et conclusion

Nous avons donc vu 3 méthodes pour créer des templates spécifiques pour nos pages wordpress. Nous avons également constaté que la dernière méthode utilisée prenait le pas sur les deux autres méthodes que nous avons mis en place, et cela, sans avoir modifié ou supprimé quoi que ce soit. Pourquoi ? WordPress a un système de hiérarchie qui ressemble à ceci :

• 1. Custom template ou modèle personnalisé : s’il existe un custom template pour la page à afficher, WordPress va le trouver et s’en servir.
• 2. page-<SLUG>.php : S’il n’existe pas de custom template, WordPress va chercher un template qui correspond au slug de la page et s’en servir.
• 3. page-<ID>.php : S’il n’existe pas de template basé sur le slug, WordPress va chercher un template qui correspond à l’ID de la page et s’en servir.
• 4. page.php : S’il n’y a pas de template spécialisé comme ci-dessus, WordPress va chercher le template par défaut page.php et s’en servir.
• 5. singular.php : Si page.php est introuvable, WordPress va utiliser le fichier singular.php et s’en servir.
• 6. index.php : Si rien de ce qui est au dessus n’a été trouvé, c’est le fichier index.php qui sera utilisé pour l’affichage de la page.

Source : https://developer.wordpress.org/themes/template-files-section/page-template-files/

S’il n’existe aucun template spécifique pour notre page, il nous est donc tout à fait possible d’indiquer quel template utiliser pour x ou y page dans index.php grâce à du code php par exemple. L’avantage des templates personnalisés étant, par exemple, d’afficher un nombre différent de colonnes, afficher une liste avec un design spécifique, afficher un carrousel ou d’autres éléments de présentations liés à des champs personnalisés, etc.

Mais WordPress ne se limite pas aux pages et aux posts et nous permet également de créer nos propres types de contenu et d’y ajouter nos champs et règles spécifiques.

C’est ce que nous verrons dans un prochain article !

Copyright image : seekpng