On va maintenant voir comment déclarer de nouveaux types de publication dans notre thème WordPress afin de ne pas être limités aux articles et pages. Et c’est dans le fichier functions.php que ça se passe !
Sommaire du cours
Déclarer un Custom Post Type
On va maintenant déclarer un Custom Post Type qui ne sera ni une page, ni un article. Et pour ce faire on va aller ajouter une déclaration dans le fichier functions.php de notre thème.
On va imaginer que nous voulons présenter les travaux d’un designer. Les articles du blog sont déjà pris pour publier des tutoriels. On va donc créer un type de publication Portfolio.
D’abord, le Hook
Mais avant cela, il va falloir placer le code dans un Hook WordPress. Le hook init
fera l’affaire :
CPT, version simple
La déclaration d’un type de publication s’effectue via la fonction register_post_type()
. Elle possède de nombreux paramètres. Afin de nous simplifier la tâche, on va simplement définir le strict minimum pour l’instant :
On va d’abord vérifier que ça fonctionne : rendez-vous dans votre interface d’administration WordPress, et normalement vous devriez voir apparaître votre type de publication dans le menu de gauche :
On va maintenant passer en revue les différents paramètres utilisés :
Les libellés
Dans le tableau $labels
vous allez pouvoir définir les phrases qui apparaissent dans l’administration de WordPress. Si vous ne mettez rien, le CMS utilisera les intitulés par défaut comme « Ajouter une publication, modifier la publication, supprimer la publication… ».
On va donc renseigner un minimum de choses pour donner du contexte. On doit entre autres définir les version du pluriel et du singulier de notre CPT. Si j’avais fait un CPT Recettes, le singulier aurait été recette.
Mais dans notre cas c’est un Portfolio, et un Portfolio contient des projets. Le nom du menu sera bien « Portfolio » mais mes intitulés seront plutôt « ajouter un projet, modifier le projet…
Public ou non
Lorsque vous créez un Custom Post Type, vous pouvez dire s’il est public ou non. Dans le cas d’un thème, il le sera forcément : on veut qu’il puisse être affiché sur le site. C’est dans le cadre de la création d’extensions que l’on peut vouloir un CPT caché (un peu comme les révisions dans WordPress) : on ne le voit pas dans l’interface car il sert seulement à stocker des informations. On met donc public
à true
.
Comportement : comme des pages ou des articles ?
Ce réglage est important. C’est là où vous dites si vous voulez que le CPT se comporte comme des articles, c’est à dire avec une archive et des singles, ou comme des pages (hiérarchique). Mais comme je le disais dans le cours précédent, c’est très rare qu’on l’utilise (si on veut faire une documentation par exemple). J’ai donc passé has_archive
à true
.
Les fonctionnalités supportées
Vous allez pouvoir choisir les champs affichés dans l’interface d’administration de vos publications :
title
: le champ Titre (il vaut mieux le laisser) ;editor
: l’éditeur visuel (classique ou Gutenberg) ;author
: le champ pour choisir/changer l’auteur ;thumbnail
: l’image mise en avant ;excerpt
: le champ extrait ;comments
: la prise en charge des commentaires ;revisions
: la sauvegarde automatique de révisions (je conseille de le mettre) ;custom-fields
: la prise en charge des champs additionnels (on verra mieux avec ACF) ;page-attributes
: utile si vous voulez donner la possibilité de choisir un template personnalisé ;post-formats
: les Posts Formats à la tumblr.
Comme vous le voyez vous n’êtes pas obligés de tout activer, afin d’alléger au maximum l’interface. Il m’est déjà arrivé de créer des CPT sans l’éditeur visuel (car j’y ajoutais mes propres champs). On verra ça un peu plus tard.
Concernant l’éditeur, par défaut il vous affichera l’éditeur classique Tiny MCE et pas Gutenberg.
Pourtant show_in_rest
permet à la base d’afficher le type de publication dans l’API Rest. Mais en réalité Gutenberg a besoin de cette prise en charge de l’API pour fonctionner.
La position dans le menu WordPress
Vous pouvez également choisir l’endroit où apparaitra votre CPT dans le menu WordPress :
- 5 : Le CPT apparait juste après Articles ;
- 10 : Sous Médias ;
- 20 : Sous Pages ;
- 65 : Sous Extensions ;
- 70 : Sous Utilisateurs ;
- 80 : Sous Réglages ;
- 100 : Tout en bas.
En général on laisse à 5 lorsque c’est un type de publication standard visant à afficher du contenu.
L’icône du CPT
Afin de distinguer visuellement notre CPT, on peut lui assigner une icône et pour cela, il y a 3 façons de procéder :
- Soit choisir une Dashicons, la police de pictogrammes de WordPress ;
- Appeler un PNG dans votre thème ;
- Embarquer un SVG encodé en base64.
Voici les 3 exemples :
Pour les Dashicons, il suffit de reporter le nom du pictogramme voulu, par exemple dashicons-portfolio
:
Pour aller chercher un PNG dans votre thème, utilisez la fonction get_template_directory_uri()
, et enfin vous pouvez embarquer un SVG en le passant dans la fonction base64_encode()
qui permet de transformer le code de l’image qui sera interprété directement en CSS (eh oui, CSS a pleins de possibilités souvent méconnues).
Le nom du Custom Post Type
Et pour terminer, il ne nous reste plus qu’à déclarer ce CPT. On a $labels
qui est passé dans $args
, que l’on va passer à son tour dans la fonction :
Le premier paramètre, c’est le nom unique, le slug donc, de votre type de publication.
C’est également cette valeur qui va servir pour générer l’URL de l’archive qui sera donc du type : https://wp.local/portfolio
.
Donc je vous déconseille de changer son nom. À la place on va pouvoir changer plutôt son URL grâce à rewrite
, que l’on va voir un peu plus tard.
CPT, version complète
Si on veut absolument utiliser tous les paramètres, il va y a voir pas mal de lignes. Je ne les mets pas toutes là, mais à la place je vous renvoie sur la documentation officielle :
Dans les exemples en bas de page vous pouvez constater qu’il y a plus de 30 libellés différents pour chaque Custom Post Type, et presque autant de paramètres possibles.
Bien sûr, on a rarement besoin de tout cela, c’est pour ça que la version simple suffit amplement à déclarer votre type de publication personnalisé.
Afficher votre Custom Post Type
On va maintenant voir comment rend notre nouveau CPT sur le site. En premier lieu, on va déjà créer des articles dans notre Portfolio. D’ailleurs, ce sont des « projets » et non pas des « articles ».
Et puis on affiche notre CPT en tapant l’URL du site suivi du nom de notre CPT, dans mon cas ça donne : http://wp.local/portfolio/
.
Rafraîchir la structure des Permaliens
Laissez-moi deviner. Vous êtes tombés sur une erreur 404 c’est bien ça ? C’est dû au fait que l’on utilise la réécriture des URL (afin qu’elles soient sexy) et que l’on n’a pas demandé à WordPress de prendre en compte le nouveau CPT et sa nouvelle URL.
Afin de corriger ce problème il va falloir réenregistrer la structure des permaliens.
Pour cela allez dans Réglages > Permaliens, et cliquez simplement sur Enregistrer sans rien changer à vos réglages actuels.
C’est traitre car on a vite tendance à l’oublier, donc permettez-moi d’insister :
Afficher votre Custom Post Type
Maintenant, ça devrait marcher ! On retourne sur : http://wp.local/portfolio/
et vos projets devraient apparaître :
Le problème, c’est que pour le moment on a exactement le même rendu que nos articles et même le titre « Le blog », puisque le CPT utilise par défaut archive.php.
Heureusement, on va voir dans les prochains cours comment créer son propre template archive-portfolio.php à partir du Template Hierarchy !
Ajouter votre CPT dans un menu WordPress
Je pense qu’à ce niveau vous avez peut-être envie d’ajouter un lien vers votre CPT dans un de vos menus WP non ?
Allez dans Apparence > Menus et vous verrez un nouveau niveau Portfolio dans l’accordéon de gauche.
- Cliquez sur l’onglet Afficher tout ;
- Vous devriez maintenant voir Tous les Projets, sélectionnez-le et cliquez sur Ajouter au menu ;
- Dans votre menu, positionnez l’entrée où vous le souhaitez puis changez l’intitulé pour Portfolio.
Et voilà ! La rubrique est maintenant accessible à vos visiteurs !
Le saviez-vous ?
Auparavant, on n’avait pas cette possibilité. Il fallait donc ajouter l’URL du CPT à la main grâce à un lien personnalisé.
Custom Post Type et base de données
Pour terminer, on va aller voir dans la base de données comment sont gérés les Custom Post Types.
Rappel : vous pouvez accéder à votre base depuis Local By Flywheel depuis votre site, onglet Database, puis Adminer (sur Windows/Mac) ou Sequel Pro (uniquement Mac).
Comme on peut le voir, les publications de votre CPT sont bien enregistrées dans la table wp_posts
et portent le slug de celui-ci dans la colonne post_type
.
Que se passe-t-il si je supprime la déclaration du CPT dans mon thème ?
Alors du coup, si vous retirez cette déclaration, les publications de votre CPT existeront toujours dans la base, mais seront ignorées. Si vous remettez votre déclaration plus tard, vous aurez accès à nouveau à vos publications. Elles ne seront donc pas supprimées.
Pareil si vous changez de thème : le functions.php étant différent, votre déclaration sera perdue, mais pas les publications.
Avec les types de publication personnalisés, ou custom post types, vous ajoutez encore des possibilités à votre thème ! Dans le prochain cours, on va voir comment créer un template sur mesure pour nos CPT et taxonomies.
Philippe
Le 14 octobre 2019
Petite erreur dans la déclaration du nom du CPT, au niveau du slug :
<?php register_post_type( 'porfolio', $args );
… Il manque le T ! 😉
Maxime BJ
Le 14 octobre 2019
Eh bien merci ! C’est corrigé 🙂
steph
Le 24 février 2020
J’ai bien relu toute la page, pourtant, je n’arrive pas à voir dans « menu » le CPT Portfolio. Par contre, quand je vais dans la personnalisation du thème et que je vais dans « menu », je le vois.
Il y a t’il un argument à ajouter dans la déclaration ?
Lucas Resalt
Le 17 mars 2020
Bonjour Steph,
Sur ton WP dans apparence/menu il te faut cliquer dans « options de l’écran » en haut à droite et dans la rubrique « sections » cocher portfolio.
Portfolio apparaitra dans ton menu
Nicolas
Le 4 juin 2021
Une autre erreur dans le code de création du CPT. La variable pour l’icône du menu est suivi d’une virgule avant la fermeture du tableau array.
Maxime BJ
Le 7 juin 2021
Il n’y a pas d’erreur, c’est au contraire une bonne pratique de terminer par une virgule afin de ne pas l’oublier le jour où tu ajoutes une nouvelle entrée. Et PHP L’interprète très bien.
Xavier
Le 5 novembre 2021
Merci Capitaine !
D’une aide précieuse !