Configurer un template pour un custom post type WordPress
Pour ce tout premier article de blog, je souhaite vous parler d’une fonctionnalité importante du contenu personnalisé WordPress, le paramètre template
. Lorsqu’on veut ajouter un contenu personnalisé ou un custom post type via du code, on peut pré configurer un template ou un gabarit pour le custom post type. Cela peut être assez flou pour le néophyte, mais je vais expliquer comment implémenter cette option lors de la déclaration d’un contenu personnalisé.
Configuration d’un template gutenberg pour un site d’une école de surf
Pour l’exemple, on va partir d’un use case simple. Imaginons, qu’une école de surf souhaite mettre en avant les plus beaux spots de sa région. Sur leur nouveau site WordPress, un contenu personnalisé dédié est paramétré via du code. Ce nouveau contenu personnalisé se nomme Spot surfschool.
L’utilisateur souhaite ajouter des informations génériques sur chaque spot de surf comme :
- Le nom du spot
- Une description du spot de surf
- Un contenu spécifique sur le meilleur itinéraire pour accéder au spot
- Un lien vers une map
Maintenant nous allons paramétrer tout cela avec notre code personnalisé 🙂
Un nouveau paramètre disponible depuis la version 5.0 de WordPress
Tout d’abord, ce paramètre template
est disponible depuis la version 5.0 de WordPress. En effet, c’est à partir de cette version que les blocs gutenbergs sont apparus dans l’espace d’édition d’articles et de pages WordPress. Donc avant cette version vous ne pouvez pas ajouter ce paramètre dans la déclaration de votre custom post type.
Pour ajouter un nouveau contenu dans le menu de l’administration WordPress avec du code personnalisé, il faut utiliser la fonction suivante register_post_type
. Cette fonction doit être ajoutée dans le fichier functions.php
de votre thème et appelée via le hook WordPress init
.
Avec le paramètre template on peut pré configurer un gabarit pour chaque nouveau contenu d’un custom post type. Pour notre use case, on aura la même mise en page pour tous les contenus présents sur spot surfschool. C’est un gain de temps énorme pour l’utilisateur car la mise en page et les blocs sont déjà présents. Il reste plus qu’à ajouter du contenu sur les blocs pré configurés. Par exemple, dans l’administration WordPress, l’utilisateur pourra voir cette mise en page lorsqu’il voudra rajouter un nouveau spot de surf


Le design est plutôt simple mais on peut avoir une idée de ce qu’on peut faire avec ces templates.
La configuration du paramètre template dans le custom post type WordPress
Au niveau du paramètre template
on peut voir les blocs utilisés ainsi que les attributs pour ajouter du contenu par défaut à la création du contenu. Pour cet exemple j’ai utilisé les blocs suivants :
- core/heading
- core/paragraph
- core/button
Pour chaque bloc, je possède des attributs que je peux renseigner pour afficher ou non tel contenu. Par exemple, pour le bloc core/heading
, j’ai un attribut content
qui permet d’ajouter un contenu spécifique sur ce bloc.
Pour le bloc core/paragraph
, j’ai l’attribut placeholder
à ma disposition. Très pratique pour ajouter une phrase descriptive du bloc.
Verrouillage de la mise en page
Via le paramètre template, vous pouvez également configurer un verrouillage de la mise en page des blocs pour le custom post type. Avec le paramètre 'template_lock'
vous pouvez donner la possibilité à l’utilisateur de ce contenu personnalisé de modifier uniquement les blocs pré configurés ou bien en ajouter d’autres.
Selon le degré de maturité technique du client cela peut être intéressant de proposer un template verrouillé afin qu’il ne casse pas le design de votre contenu avec des blocs inappropriés.
Ce paramètre peut avoir deux valeurs possibles :
all
: l’utilisateur ne pourra pas insérer de nouveaux blocs, déplacer et supprimer les blocs existantsinsert
: avec ce paramètre, l’utilisateur pourra déplacer les blocs existants mais il ne pourra pas insérer de nouveaux blocs
Quelques difficultés dans le paramétrage des attributs des blocs gutenberg
Pour faire ce gabarit, j’ai rencontré une difficulté sur les attributs textColor
et backgroundColor
. Pour renseigner les couleurs pour le bouton, il a fallu chercher le nom des couleurs. En effet, la première fois que j’ai tenté l’expérience, j’ai utilisé le code hexadécimal (#4D4D4D par exemple) pour les attributs et cela n’a pas fonctionné. Pour que cela fonctionne il faut mettre la couleur avec un format bien particulier soit le nom comme vivid-cyan-blue
ou foreground
pour mon cas.
Pour trouver les noms disponibles pour ces attributs il a fallu chercher dans l’inspecteur de l’élément

Pour que la couleur soit correctement prise en compte, j’ai utilisé les noms avec le prefix --wp-preset--color
. On peut voir des noms de couleurs exploitables comme black, pale-pink ou luminous-vivid-orange. C’est assez étrange. J’ai peut être mal compris le fonctionnement de ces attributs. Si un développeur peut m’éclairer sur ce point, j’en serais ravi. En tout cas c’est une fonctionnalité des dernières versions de WordPress très plaisantes.