Les templates de pages personnalisés • Formation WordPress Capitaine WP

Formation « Développer un thème WordPress sur mesure »

Les templates de pages personnalisés

Lecture :2 minutes •16

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.

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 :

Créer un modèle de page spécifique en utilisant le slug ou l'ID de la page.
On pourrait créer un modèle page-contact.php ou page-16.php par exemple

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 :

PHP
services.php

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 !

Attention

Vérifiez qu’il n’y a pas d’espace entre Template Name et les deux points : sinon WordPress ne détectera pas votre modèle.

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 :

PHP
full-width.php

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.

16

Questions, réponses et commentaires

  1. Laurent

    Le4 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 ?

    1. Maxime BJ

      Le7 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.

    2. Tony

      Le13 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

  2. Davy

    Le17 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 !

    1. Maxime BJ

      Le17 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.

  3. Léa DE AMORIN

    Le20 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.

    1. Maxime BJ

      Le20 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 dans woocommerce/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.

  4. Olivier

    Le5 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 »…

    1. Maxime BJ

      Le5 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.

  5. Loïc Antoniak

    Le5 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 !

    1. Maxime BJ

      Le5 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…)

  6. Dimitri

    Le30 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 !

    1. Maxime BJ

      Le30 janvier 2020

      Tout à fait ! Je donne d’ailleurs l’explication un peu avant sur le cours du Template Hierarchy 😉

  7. Ulysse

    Le3 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

    1. Maxime BJ

      Le4 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.

      1. Ulysse

        Le5 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é.

Laisser un commentaire