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 publié un article concer­nant les diffé­rences entre page et article. J’y évoquais les types d’ar­ticles person­na­li­sés (Custom Post Types) et les formats d’ar­ticle (Post formats).

De quoi s’agit-il, et comment utili­ser les uns et les autres à bon escient ? C’est ce que nous allons voir.

Les formats d’article

Les formats d’ar­ticle ne sont pas un type de publi­ca­tion parti­cu­lière, mais un type de contenu spéci­fique, norma­lisé, gérés nati­ve­ment par WordPress.

Il existe neuf formats diffé­rents (en plus du format stan­dard), chacun destiné à publier un type de contenu parti­cu­lier :

  • aside : géné­ra­le­ment traduit par en passant, il s’agit d’un aparté, habi­tuel­le­ment sans titre.
  • gallery : pour présen­ter une gale­rie, tout simple­ment.
  • link : un lien vers un autre site
  • image : une image simple (par oppo­si­tion à la gale­rie)
  • quote : une cita­tion
  • status : l’équi­valent d’un tweet, un message court et (si possible) percu­tant
  • video : une vidéo, sur une plate­forme telle que Vimeo ou Youtube, ou auto-hébergée
  • audio : un docu­ment audio, auto-hébergé ou non
  • chat : la retrans­crip­tion d’une discus­sion

Certains thèmes créent un modèle par format d’ar­ticle, d’autres ne proposent que le format stan­dard, ou unique­ment certains formats utiles en fonc­tion de l’orien­ta­tion du thème. Un thème orienté musique par exemple aura tout inté­rêt à implé­men­ter des modèles a minima pour l’au­dio, et éven­tuel­le­ment pour la vidéo.

formats d'articles
formats d’ar­ticles

Pour implé­men­ter les formats d’ar­ticles dans un thème enfant, il suffit de les décla­rer ; ouvrez le fichier functions.php et cher­chez add_theme_support. Si vous ne la trou­vez pas, ajou­tez la ligne suivante (en ne gardant que les formats dont vous avez besoin :

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

Si vous n’uti­li­sez pas de thème enfant, passez par Code Snippets mais ne surchar­gez pas le fichier functions.php, les modi­fi­ca­tions seraient perdues à la première mise à jour du thème.

Chaque format implé­menté peut dispo­ser de son propre modèle dans le thème, nommé d’après le nom du format. Mais s’il n’existe pas de modèle spéci­fique à un format, c’est le modèle par défaut qui sera utilisé.

Vous trou­ve­rez les formats dispo­nibles pour le thème activé dans l’on­glet Document de Gutenberg.

Par contre, vous ne pouvez pas créer votre propre format d’ar­ticle. Il vous faudra utili­ser un de ceux propo­sés par WordPress, ou passer par…

Les Custom Post Types

WordPress permet en effet de créer des types de contenu person­na­li­sés, et de nombreuses exten­sions mettent à profit cette fonc­tion­na­lité : les produits, les événe­ments, les port­fo­lios sont en fait des Custom Post Types.

À l’ins­tar des articles, ils peuvent être clas­sés par caté­go­ries, être étique­tés, et inclus dans les flux RSS. Vous pouvez leur assi­gner une image mise en avant, un résumé… bref ils ont exac­te­ment les mêmes proprié­tés que les articles.

Créer ses propres types d’ar­ticles présente plusieurs avan­tages :

  • on ne mêle pas des types de conte­nus qui n’ont rien en commun
  • il est possible de person­na­li­ser l’af­fi­chage en fonc­tion du type de contenu
  • les types d’ar­ticles person­na­li­sés peuvent être listés, exac­te­ment comme les articles, dans des pages d’ar­chives dédiées
  • ils peuvent être inclus ou exclus de fonc­tions de recherche globale sur le site

Créer vos Custom Post Types

Il est possible de créer ses propres Custom Post Types direc­te­ment, en PHP. Je vous recom­mande de les inclure via un bout de code, via Code Snippets.

Je me suis récem­ment servi des Custom Post Types, lors de la refonte du site du restau­rant Les Marronniers, pour la créa­tion de la carte. Chaque plat est un Custom Post Type, regrou­pés au sein de taxo­no­mies par caté­go­ries de plats (entrées, viandes, desserts, bois­sons…). Nous allons nous prendre ce Custom Post Type comme exemple.

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 Custom Post Type basique, éditable via Gutenberg, avec un titre et une image pise en avant. Mais nous n’al­lons pas nous attar­der sur le code en lui-même, parce qu’il existe une exten­sion qui va faire tout le travail à notre place !

Cette exten­sion, c’est Custom Post Type UI, que nous appel­le­rons CPTUI. Son point fort ? L’extension génère le code PHP néces­saire à la décla­ra­tion du Custom Post Type. Vous pouvez donc l’uti­li­ser, récu­pé­rer le code et la désac­ti­ver.

Utiliser cette exten­sion est quasi intui­tif, son inter­face est vrai­ment simple à appré­hen­der. Lors de l’ac­ti­va­tion, vous arri­vez sur la page À propos de CPT UI :

À propos - CPT UI
À propos – CPT UI

Vous note­rez le menu CPT UI dans le menu laté­ral gauche de l’ad­mi­nis­tra­tion WordPress.

Pour créer un Custom Post Type ou en modi­fier un, direc­tion Ajouter/modifier des types de contenu. Le premier encart est destiné à la confi­gu­ra­tion par défaut. Vous pouvez vous conten­ter de rensei­gner les champs de cet encart pour avoir un Custom Post Type plei­ne­ment fonc­tion­nel.

Ajout de Custom Post Types via CPTUI
Ajout d’un Custom Post Type

Ou, vous pouvez affi­ner les réglages via les encarts suivants, Libellés supplé­men­taires et Réglages. Le premier permet de gérer les messages de l’ad­mi­nis­tra­tion liés au type de contenu (pour la créa­tion, la modi­fi­ca­tion, la suppres­sion… d’un article de type person­na­lisé). Le second permet de gérer les options dispo­nibles pour le type d’ar­ticle. Inutile de chan­ger 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 Custom Post Type dans l’en­cart Réglages

Dans ce deuxième encart, Formats de publi­ca­tion, l’avant-dernière entrée du bloc Options du type de contenu, permet d’uti­li­ser les formats d’ar­ticles que nous avons décou­vert dans la première partie de l’ar­ticle pour le Custom Post Type en cours de créa­tion.

Le tout dernier encart, Options de taxo­no­mie, propose de lier le nouveau type d’ar­ticle person­na­lisé aux caté­go­ries et étiquettes par défaut de WordPress. Je vous décon­seille vive­ment de cocher les cases corres­pon­dantes avant d’avoir créé une taxo­no­mie dédiée, au risque de mettre un joyeux bazar sur votre site. Nous verrons dans un deuxième temps comment créer nos propres taxo­no­mies person­na­li­sées.

menu d'un type d'article personnalisé

Voici ci-contre comment votre Custom Post Type appa­raî­tra une fois quand vous aurez cliqué sur Ajouter un type de publi­ca­tion. J’ai utilisé la classe dashicons-carrot pour le menu (la police dashi­cons est déjà utili­sée par l’ad­mi­nis­tra­tion WordPress pour toutes les icônes de menu), mais rien ne vous empêche d’uti­li­ser une image diffé­rente (de préfé­rence au format PNG avec un fond trans­pa­rent, et obli­ga­toi­re­ment en 20x20px).

Voila ce que donne le Custom Post Type Plats une fois confi­guré 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 note­rez le format des noms de fonc­tions : cptui_register_my_cpts_plat par exemple. Je vous recom­mande de ne pas modi­fier ce nommage si vous désac­ti­vez l’ex­ten­sion après avoir créé vos Custom Post Types. En effet, si vous souhai­tez les modi­fier ulté­rieu­re­ment, il vous suffira de réac­ti­ver l’ex­ten­sion et d’im­por­ter le code précé­dem­ment créé pour pouvoir en modi­fier les réglages et géné­rer un code mis à jour.

Voila pour le Custom Post Type. Une fois confi­guré, nous allons créer une taxo­no­mie spéci­fique, toujours via CPTUI.

Pour cela, rendez-vous dans Ajouter/modifier des taxo­no­mies. À nouveau, nous nous trou­vons devant un encart pour confi­gu­rer rapi­de­ment une nouvelle taxo­no­mie.

CPTUI - Taxonomies personnalisées
CPTUI – Taxonomies person­na­li­sées

Vous remar­que­rez que le nouveau Custom Post Type (plats) est listé, et c’est lui que nous allons cocher pour l’as­so­cier à notre nouvelle taxo­no­mie.

Par défaut, la nouvelle taxo­no­mie est de type étiquette, sans rela­tion hiérar­chique de type Parent / Enfant. Pour créer des caté­go­ries, il faut aller dans l’en­cart Réglages et sélec­tion­ner Vrai pour Hiérarchique.

Le code est auto­ma­ti­que­ment créé, comme pour les Custom Post Types. Nous verrons plus loin comment récu­pé­rer le code généré par l’ex­ten­sion et comment l’uti­li­ser.

Vous pouvez main­te­nant retour­ner dans Ajouter/modifier des types de contenu pour lier votre type de contenu à la nouvelle taxo­no­mie.

Voila pour l’es­sen­tiel, vous pouvez utili­ser vos types de conte­nus person­na­li­sés sans effec­tuer d’opé­ra­tion supplé­men­taire.

Ou, vous pouvez déci­der de…

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

En tout premier lieu, rendez-vous dans le menu CPT UI > Outils. Cliquez sur l’on­glet Obtenir le code. Vous allez trou­ver les bouts de code dans des zones sélec­tion­nable via un simple clic. Un clic gauche, un clic droit pour copier, tout d’abord Tous les types de publi­ca­tion Custom Post Type UI, puis Toutes les taxo­no­mies de Custom Post Type UI.

Contrairement à ce que vous conseille l’ex­ten­sion, ne rajou­tez pas le code généré à votre fichier functions.php : à la première mise à jour du thème, tout votre code serait perdu ! Ou, dans le meilleur des cas, si vous utili­sez un thème enfant, vous auriez à récu­pé­rer ce code si vous déci­dez de chan­ger de thème.

Je vous ai déjà expli­qué comment utili­ser des bouts de codes via l’ex­ten­sion Code Snippets. Nous allons donc créer un nouvel extrait de code, que nous nomme­rons Custom Post Types & Taxonomies.

En 1, vous saisis­sez le titre, puis vous insé­rez le code copié en 2. Vous aurez besoin de 2 passages, un pour le(s) Custom 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 Enregistrer et acti­ver (4). C’est terminé, vous êtes rendus.

Vous pouvez désac­ti­ver l’ex­ten­sion CPT UI sans perdre le béné­fice des actions menées, votre Custom Post Type est toujours dispo­nible.

Et voila ! Vous avez créé votre propre type de contenu person­na­lisé, ajouté une taxo­no­mie, et après avoir récu­péré le code, vous avez supprimé l’ex­ten­sion utili­sée.

Et vous, utilisez-vous les Custom Post Types et les formats d’ar­ticles ?
Si vous avez une ques­tion, ou si vous voulez parta­ger votre propre expé­rience, direc­tion les commen­taires !

Si vous avez trouvé une faute d’orthographe, veuillez nous en infor­mer en sélec­tion­nant le texte en ques­tion et en appuyant sur Ctrl + Entrée .

À quel point cet article était-il inté­res­sant ?

Cliquez sur une étoile pour évaluer !

Note moyenne / 5. Nombre de notes :

Pas encore de note… Soyez le premier à évaluer cet article !

Vous avez trouvé cet article inté­res­sant…

Suivez-moi sur les réseaux sociaux !

Cet article ne vous a pas inté­ressé, J’en suis désolé.

Dites-moi comment amélio­rer cet article

Aidez-moi à amélio­rer cet article !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Abonnez-vous à la
newsletter

Pour être informé à chaque fois qu'un nouvel article est publié.

Merci !

Quelque chose s'est mal passé…

Retour haut de page

Rapport de faute d’orthographe

Le texte suivant sera envoyé à nos rédacteurs :