Les formats d’article et les Custom Post Types

WordPress propose des formats d'article, et des types d'articles personnalisés. De quoi s'agit-il, et comment les utiliser ?

Cet article prend 8 minutes à lire et comporte 1898 mots.

J’ai récem­ment pub­lié un arti­cle con­cer­nant les dif­férences entre page et arti­cle. J’y évo­quais les types d’ar­ti­cles per­son­nal­isés (Cus­tom Post Types) et les for­mats d’ar­ti­cle (Post for­mats).

De quoi s’ag­it-il, et com­ment utilis­er les uns et les autres à bon escient ? C’est ce que nous allons voir.

Les formats d’article

Les for­mats d’ar­ti­cle ne sont pas un type de pub­li­ca­tion par­ti­c­ulière, mais un type de con­tenu spé­ci­fique, nor­mal­isé, gérés native­ment par Word­Press.

Il existe neuf for­mats dif­férents (en plus du for­mat stan­dard), cha­cun des­tiné à pub­li­er un type de con­tenu par­ti­c­uli­er :

  • aside : générale­ment traduit par en pas­sant, il s’ag­it d’un aparté, habituelle­ment sans titre.
  • gallery : pour présen­ter une galerie, tout sim­ple­ment.
  • link : un lien vers un autre site
  • image : une image sim­ple (par oppo­si­tion à la galerie)
  • quote : une cita­tion
  • sta­tus : l’équiv­a­lent d’un tweet, un mes­sage court et (si pos­si­ble) per­cu­tant
  • video : une vidéo, sur une plate­forme telle que Vimeo ou Youtube, ou auto-hébergée
  • audio : un doc­u­ment audio, auto-hébergé ou non
  • chat : la retran­scrip­tion d’une dis­cus­sion

Cer­tains thèmes créent un mod­èle par for­mat d’ar­ti­cle, d’autres ne pro­posent que le for­mat stan­dard, ou unique­ment cer­tains for­mats utiles en fonc­tion de l’ori­en­ta­tion du thème. Un thème ori­en­té musique par exem­ple aura tout intérêt à implé­menter des mod­èles a min­i­ma pour l’au­dio, et éventuelle­ment pour la vidéo.

formats d'articles
for­mats d’ar­ti­cles

Pour implé­menter les for­mats d’ar­ti­cles dans un thème enfant, il suf­fit de les déclar­er ; ouvrez le fichi­er functions.php et cherchez add_theme_support. Si vous ne la trou­vez pas, ajoutez la ligne suiv­ante (en ne gar­dant que les for­mats dont vous avez besoin :

add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );

Si vous n’u­tilisez pas de thème enfant, passez par Code Snip­pets mais ne sur­chargez pas le fichi­er functions.php, les mod­i­fi­ca­tions seraient per­dues à la pre­mière mise à jour du thème.

Chaque for­mat implé­men­té peut dis­pos­er de son pro­pre mod­èle dans le thème, nom­mé d’après le nom du for­mat. Mais s’il n’ex­iste pas de mod­èle spé­ci­fique à un for­mat, c’est le mod­èle par défaut qui sera util­isé.

Vous trou­verez les for­mats disponibles pour le thème activé dans l’on­glet Doc­u­ment de Guten­berg.

Par con­tre, vous ne pou­vez pas créer votre pro­pre for­mat d’ar­ti­cle. Il vous fau­dra utilis­er un de ceux pro­posés par Word­Press, ou pass­er par…

Les Custom Post Types

Word­Press per­met en effet de créer des types de con­tenu per­son­nal­isés, et de nom­breuses exten­sions met­tent à prof­it cette fonc­tion­nal­ité : les pro­duits, les événe­ments, les port­fo­lios sont en fait des Cus­tom Post Types.

À l’in­star des arti­cles, ils peu­vent être classés par caté­gories, être éti­quetés, et inclus dans les flux RSS. Vous pou­vez leur assign­er une image mise en avant, un résumé… bref ils ont exacte­ment les mêmes pro­priétés que les arti­cles.

Créer ses pro­pres types d’ar­ti­cles présente plusieurs avan­tages :

  • on ne mêle pas des types de con­tenus qui n’ont rien en com­mun
  • il est pos­si­ble de per­son­nalis­er l’af­fichage en fonc­tion du type de con­tenu
  • les types d’ar­ti­cles per­son­nal­isés peu­vent être listés, exacte­ment comme les arti­cles, dans des pages d’archives dédiées
  • ils peu­vent être inclus ou exclus de fonc­tions de recherche glob­ale sur le site

Créer vos Custom Post Types

Il est pos­si­ble de créer ses pro­pres Cus­tom Post Types directe­ment, en PHP. Je vous recom­mande de les inclure via un bout de code, via Code Snip­pets.

Je me suis récem­ment servi des Cus­tom Post Types, lors de la refonte du site du restau­rant Les Mar­ronniers, pour la créa­tion de la carte. Chaque plat est un Cus­tom Post Type, regroupés au sein de tax­onomies par caté­gories de plats (entrées, vian­des, desserts, bois­sons…). Nous allons nous pren­dre ce Cus­tom Post Type comme exem­ple.

Voici le code :

function my_cpts_plat() {
	$labels = [
		"name" => __( "plats", "twentytwenty" ),
		"singular_name" => __( "Plat", "twentytwenty" ),
	];
	$args = [
		"label" => __( "plats", "twentytwenty" ),
		"labels" => $labels,
		"description" => "",
		"public" => true,
		"publicly_queryable" => true,
		"show_ui" => true,
		"delete_with_user" => false,
		"show_in_rest" => true,
		"rest_base" => "",
		"rest_controller_class" => "WP_REST_Posts_Controller",
		"has_archive" => false,
		"show_in_menu" => true,
		"show_in_nav_menus" => true,
		"delete_with_user" => false,
		"exclude_from_search" => false,
		"capability_type" => "post",
		"map_meta_cap" => true,
		"hierarchical" => false,
		"rewrite" => [ "slug" => "plat", "with_front" => true ],
		"query_var" => true,
		"supports" => [ "title", "editor", "thumbnail" ],
	];
	register_post_type( "plat", $args );
}

add_action( 'init', 'my_cpts_plat' );

Voila pour un Cus­tom Post Type basique, éditable via Guten­berg, avec un titre et une image pise en avant. Mais nous n’al­lons pas nous attarder sur le code en lui-même, parce qu’il existe une exten­sion qui va faire tout le tra­vail à notre place !

Cette exten­sion, c’est Cus­tom Post Type UI, que nous appellerons CPTUI. Son point fort ? L’ex­ten­sion génère le code PHP néces­saire à la déc­la­ra­tion du Cus­tom Post Type. Vous pou­vez donc l’u­tilis­er, récupér­er le code et la dés­ac­tiv­er.

Utilis­er cette exten­sion est qua­si intu­itif, son inter­face est vrai­ment sim­ple à appréhen­der. Lors de l’ac­ti­va­tion, vous arrivez sur la page À pro­pos de CPT UI :

À propos - CPT UI
À pro­pos — CPT UI

Vous noterez le menu CPT UI dans le menu latéral gauche de l’ad­min­is­tra­tion Word­Press.

Pour créer un Cus­tom Post Type ou en mod­i­fi­er un, direc­tion Ajouter/modifier des types de con­tenu. Le pre­mier encart est des­tiné à la con­fig­u­ra­tion par défaut. Vous pou­vez vous con­tenter de ren­seign­er les champs de cet encart pour avoir un Cus­tom Post Type pleine­ment fonc­tion­nel.

Ajout de Custom Post Types via CPTUI
Ajout d’un Cus­tom Post Type

Ou, vous pou­vez affin­er les réglages via les encar­ts suiv­ants, Libel­lés sup­plé­men­taires et Réglages. Le pre­mier per­met de gér­er les mes­sages de l’ad­min­is­tra­tion liés au type de con­tenu (pour la créa­tion, la mod­i­fi­ca­tion, la sup­pres­sion… d’un arti­cle de type per­son­nal­isé). Le sec­ond per­met de gér­er les options disponibles pour le type d’ar­ti­cle. Inutile de chang­er les réglages par défaut, à l’ex­cep­tion de l’icône du menu.

Options du Custom Post Type dans l'encart Réglages
Options du Cus­tom Post Type dans l’en­cart Réglages

Dans ce deux­ième encart, For­mats de pub­li­ca­tion, l’a­vant-dernière entrée du bloc Options du type de con­tenu, per­met d’u­tilis­er les for­mats d’ar­ti­cles que nous avons décou­vert dans la pre­mière par­tie de l’ar­ti­cle pour le Cus­tom Post Type en cours de créa­tion.

Le tout dernier encart, Options de tax­onomie, pro­pose de lier le nou­veau type d’ar­ti­cle per­son­nal­isé aux caté­gories et éti­quettes par défaut de Word­Press. Je vous décon­seille vive­ment de cocher les cas­es cor­re­spon­dantes avant d’avoir créé une tax­onomie dédiée, au risque de met­tre un joyeux bazar sur votre site. Nous ver­rons dans un deux­ième temps com­ment créer nos pro­pres tax­onomies per­son­nal­isées.

menu d'un type d'article personnalisé

Voici ci-con­tre com­ment votre Cus­tom Post Type appa­raî­tra une fois quand vous aurez cliqué sur Ajouter un type de pub­li­ca­tion. J’ai util­isé la classe dashicons-carrot pour le menu (la police dashicons est déjà util­isée par l’ad­min­is­tra­tion Word­Press pour toutes les icônes de menu), mais rien ne vous empêche d’u­tilis­er une image dif­férente (de préférence au for­mat PNG avec un fond trans­par­ent, et oblig­a­toire­ment en 20x20px).

Voila ce que donne le Cus­tom Post Type Plats une fois con­fig­uré via CPTUI :

function cptui_register_my_cpts_plat() {

	/**
	 * Post Type: plats.
	 */

	$labels = [
		"name" => __( "plats", "twentytwenty" ),
		"singular_name" => __( "Plat", "twentytwenty" ),
		"menu_name" => __( "La carte", "twentytwenty" ),
		"all_items" => __( "Tous les plats", "twentytwenty" ),
		"add_new" => __( "Ajouter un nouveau", "twentytwenty" ),
		"add_new_item" => __( "Ajouter un nouveau plat", "twentytwenty" ),
		"edit_item" => __( "Modifier le plat", "twentytwenty" ),
		"new_item" => __( "Nouveau plat", "twentytwenty" ),
		"view_item" => __( "Voir le plat", "twentytwenty" ),
		"view_items" => __( "Voir les plats", "twentytwenty" ),
		"search_items" => __( "Rechercher des plats", "twentytwenty" ),
		"not_found" => __( "Aucun plat trouvé", "twentytwenty" ),
		"not_found_in_trash" => __( "Aucun plat trouvé dans la corbeille", "twentytwenty" ),
		"parent" => __( "Plat parent", "twentytwenty" ),
		"featured_image" => __( "Image mise en avant pour ce plat", "twentytwenty" ),
		"set_featured_image" => __( "Définir l'image mise en avant pour ce plat", "twentytwenty" ),
		"remove_featured_image" => __( "Retirer l'image mise en avant pour ce plat", "twentytwenty" ),
		"use_featured_image" => __( "Utiliser l'image mise en avant pour ce plat", "twentytwenty" ),
		"archives" => __( "Archives de plats", "twentytwenty" ),
		"insert_into_item" => __( "Insérer dans le plat", "twentytwenty" ),
		"uploaded_to_this_item" => __( "Téléversé sur ce plat", "twentytwenty" ),
		"filter_items_list" => __( "Filtrer la liste des plats", "twentytwenty" ),
		"items_list_navigation" => __( "Navigation de liste de plats", "twentytwenty" ),
		"items_list" => __( "Liste des plats", "twentytwenty" ),
		"attributes" => __( "Attributs des plats", "twentytwenty" ),
		"name_admin_bar" => __( "Plat", "twentytwenty" ),
		"item_published" => __( "Plat publié", "twentytwenty" ),
		"item_published_privately" => __( "Plat publié en privé", "twentytwenty" ),
		"item_reverted_to_draft" => __( "Plat repassé en brouillon", "twentytwenty" ),
		"item_scheduled" => __( "Plat planifié", "twentytwenty" ),
		"item_updated" => __( "Plat mis à jour", "twentytwenty" ),
		"parent_item_colon" => __( "Plat parent", "twentytwenty" ),
	];

	$args = [
		"label" => __( "plats", "twentytwenty" ),
		"labels" => $labels,
		"description" => "",
		"public" => true,
		"publicly_queryable" => true,
		"show_ui" => true,
		"delete_with_user" => false,
		"show_in_rest" => true,
		"rest_base" => "",
		"rest_controller_class" => "WP_REST_Posts_Controller",
		"has_archive" => "plats",
		"show_in_menu" => true,
		"show_in_nav_menus" => true,
		"delete_with_user" => false,
		"exclude_from_search" => false,
		"capability_type" => "post",
		"map_meta_cap" => true,
		"hierarchical" => false,
		"rewrite" => [ "slug" => "plat", "with_front" => false ],
		"query_var" => true,
		"menu_icon" => "dashicons-carrot",
		"supports" => [ "title", "editor", "thumbnail", "revisions", "post-formats" ],
	];

	register_post_type( "plat", $args );
}

add_action( 'init', 'cptui_register_my_cpts_plat' );

Vous noterez le for­mat des noms de fonc­tions : cptui_register_my_cpts_plat par exem­ple. Je vous recom­mande de ne pas mod­i­fi­er ce nom­mage si vous dés­ac­tivez l’ex­ten­sion après avoir créé vos Cus­tom Post Types. En effet, si vous souhaitez les mod­i­fi­er ultérieure­ment, il vous suf­fi­ra de réac­tiv­er l’ex­ten­sion et d’im­porter le code précédem­ment créé pour pou­voir en mod­i­fi­er les réglages et génér­er un code mis à jour.

Voila pour le Cus­tom Post Type. Une fois con­fig­uré, nous allons créer une tax­onomie spé­ci­fique, tou­jours via CPTUI.

Pour cela, ren­dez-vous dans Ajouter/modifier des tax­onomies. À nou­veau, nous nous trou­vons devant un encart pour con­fig­ur­er rapi­de­ment une nou­velle tax­onomie.

CPTUI - Taxonomies personnalisées
CPTUI — Tax­onomies per­son­nal­isées

Vous remar­querez que le nou­veau Cus­tom Post Type (plats) est listé, et c’est lui que nous allons cocher pour l’as­soci­er à notre nou­velle tax­onomie.

Par défaut, la nou­velle tax­onomie est de type éti­quette, sans rela­tion hiérar­chique de type Par­ent / Enfant. Pour créer des caté­gories, il faut aller dans l’en­cart Réglages et sélec­tion­ner Vrai pour Hiérar­chique.

Le code est automa­tique­ment créé, comme pour les Cus­tom Post Types. Nous ver­rons plus loin com­ment récupér­er le code généré par l’ex­ten­sion et com­ment l’u­tilis­er.

Vous pou­vez main­tenant retourn­er dans Ajouter/modifier des types de con­tenu pour lier votre type de con­tenu à la nou­velle tax­onomie.

Voila pour l’essen­tiel, vous pou­vez utilis­er vos types de con­tenus per­son­nal­isés sans effectuer d’opéra­tion sup­plé­men­taire.

Ou, vous pou­vez décider de…

Récupérer le code, et désactiver l’extension

En tout pre­mier lieu, ren­dez-vous dans le menu CPT UI > Out­ils. Cliquez sur l’on­glet Obtenir le code. Vous allez trou­ver les bouts de code dans des zones sélec­tionnable via un sim­ple clic. Un clic gauche, un clic droit pour copi­er, tout d’abord Tous les types de pub­li­ca­tion Cus­tom Post Type UI, puis Toutes les tax­onomies de Cus­tom Post Type UI.

Con­traire­ment à ce que vous con­seille l’ex­ten­sion, ne rajoutez pas le code généré à votre fichi­er functions.php : à la pre­mière mise à jour du thème, tout votre code serait per­du ! Ou, dans le meilleur des cas, si vous utilisez un thème enfant, vous auriez à récupér­er ce code si vous décidez de chang­er de thème.

Je vous ai déjà expliqué com­ment utilis­er des bouts de codes via l’ex­ten­sion Code Snip­pets. Nous allons donc créer un nou­v­el extrait de code, que nous nom­merons Cus­tom Post Types & Tax­onomies.

En 1, vous sai­sis­sez le titre, puis vous insérez le code copié en 2. Vous aurez besoin de 2 pas­sages, un pour le(s) Cus­tom Post Type(s), un pour la/les taxonomie(s). Vous sélec­tion­nez Exé­cuter l’ex­trait partout (3) et vous cliquez sur Enreg­istr­er et activ­er (4). C’est ter­miné, vous êtes ren­dus.

Vous pou­vez dés­ac­tiv­er l’ex­ten­sion CPT UI sans per­dre le béné­fice des actions menées, votre Cus­tom Post Type est tou­jours disponible.

Et voila ! Vous avez créé votre pro­pre type de con­tenu per­son­nal­isé, ajouté une tax­onomie, et après avoir récupéré le code, vous avez sup­primé l’ex­ten­sion util­isée.

Et vous, utilisez-vous les Cus­tom Post Types et les for­mats d’ar­ti­cles ?
Si vous avez une ques­tion, ou si vous voulez partager votre pro­pre expéri­ence, direc­tion les com­men­taires !

Retour en haut
Les cookies que nous utilisons sont indispensables au bon fonctionnement de ce site. Il n'y a aucun pistage publicitaire et les données statistiques recueillies sont anonymisées.
J'ai compris