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
We use cookies in order to give you the best possible experience on our website. By continuing to use this site, you agree to our use of cookies.
Accept