Dans ce cours nous allons aborder un moyen pour créer des templates personnalisés que le rédacteur pourra manuellement assigner à ses pages. Cela permettra de créer des mises en page complètement différentes pour chaque page du site.
Sommaire du cours
Dans le cours sur le Template Hierarchy on a vu que l’on pouvait créer des templates spécialisés pour les pages en ciblant leur ID ou leur Slug :
Mais je vous ai également dit que ce n’était pas une bonne idée pour autant :
- L’ID peut changer si un rédacteur supprime puis recrée la page ;
- Le slug peut également changer si le rédacteur modifie l’URL de la page pour améliorer le référencement par exemple.
Du coup, on ne peut pas trop se fier à cette méthode. Comme vous vous en doutez, je vais vous proposer dans ce cours une alternative bien plus pérenne.
Déclarer un template personnalisé
Dans un site moderne, les pages principales (accueil, services…) sont bien différentes, et plus complexes que des pages standard comme les mentions légales ou la page contact.
C’est pour cela que l’on va créer des fichiers templates qui leur seront dédiés.
Pour cela il suffit de créer un nouveau fichier, par exemple services.php et d’y indiquer :
C’est le commentaire PHP Template Name qui permet à WordPress de détecter cette page comme un template !
Pour une meilleure organisation de vos fichiers, vous pouvez également mettre ce fichier dans un sous-dossier nommé templates par exemple. WordPress le trouvera tout aussi bien !
Ok super ! Maintenant rendez-vous dans l’administration WordPress, éditez une page et vous verrez apparaitre la metabox permettant de sélectionner votre template dans la barre latérale de l’éditeur visuel :
Et voilà le travail ! Le seul souci avec cette méthode c’est qu’il faut bien penser à assigner manuellement ce template.
Autoriser le template dans d’autres types de publication
On peut également autoriser la sélection de ces templates pour les articles ou autres types de publication (concept que l’on va aborder très bientôt).
On pourrait imaginer des mises en page différentes pour les articles. Prenons un blog de jeux vidéo : on pourrait se dire qu’un test d’un jeu pourrait avoir une apparence différente des actualités classiques.
Les thèmes premium utilisent cette technique pour proposer des articles standards, et des articles « full width » (pleine largeur).
Pour autoriser plusieurs types de publication, il faut ajouter une seconde ligne avec Template Post Type :
Pour cet exemple j’ai autorisé dans les articles (post), pages et même les produits (product) dans le cas où WooCommerce est installé.
Cette fonctionnalité est plus récente puisqu’elle a été introduite seulement dans WordPress 4.7.
Ces templates personnalisés vont nous être très utiles pour réaliser des sites dont chaque page peut avoir une apparence complètement différente.
Dans le prochain cours on va aborder cette fois les champs personnalisés afin d’ajouter des informations dans nos articles.
Olivier
Le 5 janvier 2021
Bonjour Maxime,
J’ai appris un truc intéressant dans cette leçon.
Cependant existe-t-il un moyen d’assigner un template directement, sans avoir à « désélectionner » le « modèle par défaut » ?
Je travaille avec des CPT, et j’aimerai que le template soit directement sélectionné.
Jusqu’ici j’utilisais « page-[CPT-name].php »…
Maxime BJ
Le 5 janvier 2021
Les templates sont plutôt pour les pages. En ce qui concerne les CPT, comme on l’a vu dans le cours sur le Template Hierarchy, il vaut mieux utiliser single-.php en effet. Et ça répond normalement à tous les besoins.
Loïc Antoniak
Le 5 août 2020
Bonjour Maxime,
Merci pour tes cours ! Ils sont très clairs.
Développeur depuis moins d’un an (Symfony, React), pour moi WordPress était seulement pour les non-développeurs qui ont juste besoin de télécharger en thème et faire de l’intégration.
Je comprends maintenant qu’il est possible de s’amuser avec WordPress !
Encore merci !
Maxime BJ
Le 5 août 2020
Eh bien écoute c’est tout le but de ce site, donc je suis très content si j’ai pu te montrer cet aspect de WP. Alors oui, la structure n’est pas parfaite, il y a du vieux code, mais franchement avec les hooks il y a moyen de faire de belles choses (personnellement, le code de mes plugins est en approche MVC, OOP, SOLID…)
Dimitri
Le 30 janvier 2020
Bonjour 🙂
Pour-certains d’entre vous qui aurait l’idée de modifier la page qui vous sert d’accueil avec un template, cela ne fonctionne pas. ( j’ai galère 3h00 avant de comprendre ::D ).
Vous devez modifiez directement le fichier front-page.php.
Kiss !
Maxime BJ
Le 30 janvier 2020
Tout à fait ! Je donne d’ailleurs l’explication un peu avant sur le cours du Template Hierarchy 😉
Ulysse
Le 3 janvier 2020
Bonsoir Capitaine WP
Dans la leçon « LES TEMPLATES DE PAGES PERSONNALISÉS »
je n’ai pas pu avoir le template « services ».
Je ne vois pas le template « Services » dans le menu déroulante Attribut.
J’ai mis mon fichier Services. php dans un répertoire « Template ».
Savez-vous pourquoi?
En vous remerciant
Laurent
Maxime BJ
Le 4 janvier 2020
Vérifie tout d’abord que la syntaxe est bonne. Par exemple le piège classique est de mettre une espace avant les « : ». Ca suffit à planter le template. Ensuite essaie de le mettre à la racine du thème plutôt que dans un dossier, pour voir si ça change quelque chose.
Ulysse
Le 5 janvier 2020
Merci, pour tes conseils, finalement j’ai trouvé d’ou venait le problème,
Encore bravo pour tes formations en lignes, elles sont de grande qualité.