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 section Modèle 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é.
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.
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é.
Vivi
Le 3 mai 2022
Bonjour, j’ai le même problème.. Je ne vois toujours pas le template dans le menu déroulant « Attribut ». J’ai bien mis le fichier à la racine de thème, rien n’apparait. Et j’ai bien vérifiée la syntaxe : Template Name: Services. Je me demande si la mise à jour de WordPress pourrait impacter à ce bug ? Que puis-je faire ? Merci beaucoup. Sinon vos cours sont geniaux 🙂
Maxime BJ
Le 3 mai 2022
Est-ce que tu as bien rechargé la page de l’éditeur, et vérifié que le modèle se trouve bien à la racine du thème actuellement actif ? Je te confirme que ce n’est pas un souci dû à une mise à jour de WordPress, sinon ça aurait impacté des millions de sites et ça se serait vu.
Victoria
Le 3 mai 2022
C’est bon, j’ai trouvé 🙂 Au fait, je n’avais pas vu en haut « Modele » au lieu de « Attributs de pages » (en dessous). Merci beaucoup encore 🙂
Maxime BJ
Le 3 mai 2022
Ok je comprends mieux ! En effet le champ a changé de place depuis que j’ai écrit le cours. J’ai donc mis à jour la capture d’écran et le texte correspondant pour éviter les confusions à l’avenir. Merci pour ta contribution !
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 😉
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…)
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.
Léa DE AMORIN
Le 20 janvier 2021
Je crée un site e-commerce avec WooCommerce, et j’ai vu avec cet article. qu’on pouvait créer des modèles de page produit, ce que j’ai fait mais lorsque je choisis le modèle que je veux dans ma page produit, l’affichage ne bouge pas et reste l’affichage par défaut de woocommerce.
Maxime BJ
Le 20 janvier 2021
Le modèle de page pour créer ta page est
single-product.php, conformément au template Hierarchy. Tu peux te baser sur le modèle de base fourni par WooCommerce présent danswoocommerce/templates/que tu peux copier dans ton thème ou thème enfant). Dans ce cas, tu n’as pas besoin de sélectionner le modèle de page. Ce sera fait automatiquement. Le modèle de page va plutôt servir dans le cas de pages spécifiques (voir uniques) où pour ceux qui font des sites en se basant sur des thèmes préconçus.Davy
Le 17 février 2021
Bonjour, j’utilise un thème qui met par défaut la page d’accueil du site en modèle « modèle d’entreprise » ce qui me pose problème car la page d’accueil que j’ai créée est en modèle « élémentor pleine largeur », ça me défonce toute ma mise en page…
Sauriez-vous m’aider et me dire comment je peux modifier le modèle utilisé par défaut pour la page d’accueil ?
Merci par avance !
Maxime BJ
Le 17 février 2021
Salut Davy, ici on parle uniquement de thèmes créés sur mesure, sans l’aide de constructeurs. Je ne peux donc pas t’aider hélas.
Laurent
Le 4 juin 2021
Bonjour,
Le code full-witdth et de services.php ne s’affichent pas.
Je les ai récupérés en affichant la source.
dans full-width.php je ne vois que get-header, tout le reste est en commentaire est-ce normal ?
Tony
Le 13 juillet 2021
J’ai eu le même problème sur une autre page, je suis passé de google chrome à Mozilla Firefox pour lire le tuto et je n’ai plus ce problème
Maxime BJ
Le 7 juin 2021
Je ne suis pas sûr d’avoir compris ta manipulation, mais ça devrait fonctionner. Attention : dans ce cours je n’ai pas mis le code de la page en entier, je me suis seulement focalisé sur l’objet du cours.
En apprentissage
Le 7 novembre 2023
Bonjour,
Merci beaucoup pour les leçons!
J’ai pas compris
Pour cet exemple j’ai autorisé dans les articles (post), pages et même les produits (product) dans le cas où WooCommerce est installé.
Pourriez vous donner un exemple?
Merci
Maxime BJ
Le 7 novembre 2023
Je ne suis pas sûr de comprendre ce que tu souhaites faire. Tu peux me reformuler ta question ?