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

CPT, Template Hierarchy et Conditionnal tags

Lecture : 3 minutes • 19

Maintenant que l’on a vu comment créer des Custom Post Types et des Taxonomies, on va voir comment leur assigner un template sur mesure grâce au Template Hierarchy ainsi que quelques Conditionnal Tags qui leur sont dédiés.

CPT et Template Hierarchy

Vous vous souvenez du cours sur le Template Hierarchy ? J’avais volontairement passé sous silence les cas spécifiques des Custom Post Types, comme on ne les avait pas encore abordés. Eh bien le moment est venu ! Voici à nouveau le fameux schéma :

Le Template Hierarchy de WordPress
Le template hierarchy au complet. Cliquez pour agrandir.

On va maintenant voir ce que l’on peut faire avec notre CPT et nos taxonomies.

Templates pour les archives et le single

Dans les cours précédents, on a créé un type de publication personnalisé appelé Portfolio, qui se comportait comme des articles (avec des archives et des single donc).

En l’absence d’un template sur mesure, notre portfolio se basait sur archive.php et avait le même rendu que le blog :

L'affichage des archives disposé comme le blog
Pour le moment, le Portfolio se comporte comme le Blog

Or, ce n’est pas ce que nous voulons ! Là on a besoin d’un design complètement différent. En d’autres termes, on a besoin d’un nouveau fichier de template. Voici ce que l’on aimerait obtenir :

Une vue complètement différente et plus adaptée au Portfolio
L’affichage en grille est plus sympa pour afficher les projets d’un Portfolio

D’après le Template Hierarchy, on va justement pouvoir créer un template dédié. Voici le cheminement qui nous intéresse :

Cheminement du Template Hierarchy pour les Custom Post Types
Cheminement du Template Hierarchy pour les Custom Post Types

Il est donc possible de créer un fichier archive-<type>.php et single-<type>.php pour gérer notre Post Type.

Dans mon cas je créé donc archive-portfolio.php et single-portfolio.php ! Au niveau du code, on va conserver la boucle WordPress (le CMS sait ce qu’il doit afficher) et on va simplement modifier le HTML ainsi que les classes CSS :

PHP
archive-portfolio.php

Bien entendu, ce n’est qu’un exemple : adaptez le template selon vos besoins ! Notez la présence de la fonction post_type_archive_title() qui va afficher « PortFolio » en titre <h1>.

Mine de rien, grâce à ça, on vient grandement d’augmenter notre capacité de mise en page sur nos sites !

Templates pour les Taxonomies et termes

On peut aussi créer des templates spécifiques pour les taxonomies et leurs termes. Par exemple, on pourrait vouloir une mise en page différente lorsque je clique sur le type de projet “Photos”.

Le cheminement spécifique du Template Hierarchy pour les taxonomies personnalisées
Les Taxonomies personnalisées ont aussi le droit à leur templates

On peut donc avoir un template taxonomy-<taxo><term>.php ou plus simplement taxonomy-<taxo>.php.

Dans mon cas cela pourrait être taxonomy-type-projet-photo.php ou taxonomy-type-projet.php.

En pratique, ça n’arrive presque jamais ! La seule utilisation où je pourrais y voir un intérêt c’est si on souhaitait afficher des films, musiques… Dans ce cas on pourrait adapter le rendu en fonction des formats de pochettes, différentes entre les deux. Encore que, je pense qu’un Conditionnal Tag pourrait suffire pour cette mince différence. D’ailleurs en parlant de ça :

CPT et Conditionnal Tags

Comme vous pouvez vous en douter, il existe aussi des Conditionnal Tags adaptés à notre CPT et les Taxonomies.

Conditionnal Tags pour les Custom Post Types

is_post_type_archive()

Vous vous êtes peut-être dit qu’un is_archive('portfolio') fonctionnerait ? Eh bien non, pourquoi faire simple quand on peut faire compliqué ? En réalité vous devez utiliser le tag spécifique is_post_type_archive() :

PHP

is_singular()

Là ici, petit piège ! Pour tester si vous êtes dans la page single d’un Custom Post Type, il faut utiliser is_singular( 'portfolio' ) et non pas is_single().

PHP

Conditionnal Tags pour les Taxonomies

On peut également tester si on est dans une taxonomie en particulier, ou même si on a sélectionné un terme dans cette taxonomie.

PHP

Pour consulter tous les Conditionnal Tags qui existent, rendez-vous sur la documentation !


Les Custom Post Types n’ont presque plus de secrets pour vous ! Dans le prochain cours on va voir comment déclarer une taxonomie et l’associer à notre type de publication.

19

Questions, réponses et commentaires

  1. kary

    Le 8 janvier 2020

    bonjour,
    merci pour ce tutoriel c’est super, cela dit j’ai une petite question( je précise aussi que je suis débutante ) après avoir créer le single-portfolio.php qu’est ce qu’on met dedans comme code je suis un peu perdu avec tous ces fichier, j’ai deja fais plusieurs tentative pour ajouter un Template personnalisé a mon custom post type sans succès merci d’avance pour votre réponses

    1. Maxime BJ

      Le 8 janvier 2020

      Bonjour !
      Ce sera le même code de base que dans single.php. Ensuite tu peux ajouter des choses (HTML, fonctions…). Mais tu pourrais très bien personnaliser ces pages avec un Page builder (Elementor pro) sans toucher au code, si tu n’es pas à l’aise avec PHP.

  2. Sami

    Le 1 mars 2021

    Bonjour, je pense que vous devriez peut-être inverser les cours 2c-3 et 2c-4. Actuellement on apprend à créer une taxonomie seulement après avoir appris à leur affecter un thème 🙂

    1. Maxime BJ

      Le 1 mars 2021

      Il y a de l’idée, je vais voir pourquoi j’avais mis dans ce sens initialement, et inverser ! Merci.

  3. fabien

    Le 15 avril 2021

    Comment on en arrive à la page portfolio ? si je fais une page portfolio c’est une page.php et non une archive.php

    1. Maxime BJ

      Le 15 avril 2021

      Il ne faut pas créer de page Portfolio pour que tu puisses accéder à archive.php (ou du coup, archive-portfolio.php pour faire un design différent), sinon il risque d’y avoir conflit d’URL. Pour ajouter le portfolio à ton menu, il faut ajouter l’accueil de portfolio qui se trouve dans l’interface des menus, rubrique portfolio. Il faut affiche “tout” pour voir l’élément apparaitre. Ce n’est pas super bien fait en terme d’UX je te l’accorde.

  4. Fred

    Le 25 mars 2022

    Bonjour,
    formation au top pour l’instant, clair et complète.

    Petite question sur ce ours en particulier, il n’est pas possible de mettre nos templates CPT (archive et single) dans des sous dossiers pour organiser son archi?

    Lorsque je fais ça, mes CPT retrouvent les templates archives et single basique.

    Je vais chercher ma réponse sur le Web, mais je pose la question afin que la réponse soit apportée à d’éventuels autres personnes ici qui se poseraient la même 😉

    1. Maxime BJ

      Le 25 mars 2022

      Hélas non : WordPress cherche toujours à la racine, donc tu n’as pas le choix. En utilisant Timber, tu pourras faire des fichiers twig pour les templates et tu pourras les ranger dans des sous-dossiers, mais ça ne changera rien au fait que les fichiers PHP doivent rester à la racine.

      1. Fred

        Le 25 mars 2022

        Ok merci, en effet, je ne trouvais pas de solutions sur le net. Dommage, moi qui suis habitué à de l’archi React, ça va vite me paraitre “le bordel” dans les fichiers 😀

        Mais je n’en suis qu’au début de la découverte WordPress, j’imagine que je verrais d’autre façons de faire par la suite.

        Je te remercie

        1. Maxime BJ

          Le 25 mars 2022

          Tu vas pouvoir par contre ranger les templates parts, et tes modèles personnalisés dans des sous-dossiers. Et au final ce sont eux les plus importants (et les plus personnalisés).

  5. Victoria

    Le 13 mai 2022

    Bonjour,

    Merci pour ce tutoriel en tout cas :). Etant débutante de WordPress, j’aimerais en savoir concernant le widget (sidebar), est-ce possible d’afficher la liste des categories via CPT ? Je n’arrive toujours pas d’afficher la liste des catégories via des custom type post via le sidebar widget ? (D’ialleurs, j’ai créée le domaine de catégories dans CPT”) Une fois installée le widjet, la liste est affiché toujours par défaut les catégories (générales) de “Articles” au lieu CPT.
    Comment puis-je le faire dans ce cas là ? Merci encore.

    1. Maxime BJ

      Le 13 mai 2022

      Le widget de base n’a pas connaissance des autres taxonomies en effet. Le plus simple est d’utiliser la fonction get_the_terms_list() que tu trouveras ici : https://developer.wordpress.org/reference/functions/get_the_term_list/. Tu peux la mettre directement dans ton template au lieu d’utiliser les widgets, ce sera plus simple.

      1. Victoria

        Le 13 mai 2022

        Merci beaucoup ! Vous etes top ! J’ai réussi grâce de vous avec la fonction get_the_terms_list() :).

  6. Abel Giraud

    Le 22 février 2023

    Bonjour,
    je vous avez déjà contacté par rapport à un site que je créer pour une asso d’adoption de chat.
    Je n’arrive pas avoir le même résultat que vous sur la présentation des “articles”, faut t’il avoir son propre thèmes comme vous le faites au début ?
    De plus j’aimerais que les personnes de l’asso puisse ajouter/supp/modif les chats (“articles”) depuis le site, cela est-t-il possible ou c’est forcément par l’admin de wp.
    De plus je suis censé faire une base de données pour les chats (nom, poids, age etc) peut-être que ce n’est pas le système de cpt que je dois utiliser ?

    Merci beaucoup de votre réponse.

    1. Maxime BJ

      Le 22 février 2023

      Il va falloir que tu écrives le HTML et le CSS correspondants pour ton nouveau template en effet. Surtout si la page des chats n’a pas le même design que celle des articles : par exemple si les articles sont affichés verticalement et les chats sous forme de grille.
      Tu peux ajouter des utilisateurs sur ton site et leur mettre le rôle d’auteur, ils pourront alors créer des articles / chats / pages sans pour autant pouvoir modifier les publications des autres auteurs. Par contre, l’éditeur ou l’administrateur pourront modifier les articles de tout le monde.
      Si tu veux ajouter des informations à ton CPT, tu vas devoir ajouter des champs additionnels (qui seront enregistrés avec tes publications). Pour cela, tu peux suivre la formation ACF de ce site. Ça répondra exactement à ton besoin.

      1. Abel Giraud

        Le 22 février 2023

        D’accord merci beaucoup je vais suivre la formation ACF.
        Sinon j’utilise un thème téléchargé (Kadence) est t-il de reproduire votre design portfolio pour les chats malgré que je n’ai pas fait le thème comme vous dans la formation ?
        Et est ce que faire la formation pour son propre thème est longue ? car ça l’ère utile pour le reste de votre formation mais si c’est très long ça ne vaux peut-être pas le coup, 1 mois pour faire le site et aucune idée du temps pour un site wp premiere fois pour moi (site assez simple pour asso)

        Merci encore pour votre réponse et pour le travail que vous avez consacré à cette formation.

        1. Maxime BJ

          Le 22 février 2023

          C’est possible, mais ce n’est pas du tout le but de ce site. Ici on est là pour apprendre à faire un thème sur mesure de A à Z. Toutefois, tu peux créer un thème enfant à partir de ton thème et créer tes propres templates. Il faudra consulter la documentation du thème. Mais je n’ai pas de cours à ce sujet.
          Chacun va à son rythme pour la formation. Ce que tu dois définir c’est si c’est utile pour toi de savoir faire du sur-mesure ou pas. Sachant qu’aujourd’hui plus de 80% des gens vont opter pour un constructeur de pages (Elementor, Divi, Kadence…)

  7. Julie P

    Le 26 février 2024

    Bonjour,

    Je suis en train de développer un thème pour une boutique en ligne. Je souhaite faire un affichage en grid également dans le même style que la formation.
    Comment fais-tu pour réussir à avoir des éléments de tailles différentes ? Utilises-tu les taxonomies pour dire que si ce poste là un telle taxonomie il doit s’afficher comme ça ? Ce qui me gène c’est que les taxonomies sont dynamiques…

    Dommage qu’il n’y est pas de fichier source du projet, ça pourrait aider.
    Merci pour cette formation gratuite vraiment complète.

    1. Maxime BJ

      Le 26 février 2024

      Je l’ai fait purement en CSS : c’est indépendant de la nature de la publication. Si tu veux pouvoir mettre en avant une publication ou un produit dans WooCommerce, tu pourrais ajouter une case à cocher grâce à ACF (j’ai une formation là dessus disponible aussi sur le site). À l’affichage, tu pourras vérifier si c’est un produit important ou pas et agir en conséquent en CSS (par exemple avec CSS Grid ou flex).
      Dans l’absolu tu pourrais le faire via une taxonomie mais ça va générer des URLs de pages correspondant à cette taxonomie. Selon le cas, ce n’est pas idéal.

Laisser un commentaire