Comment créer un Custom Post Type avec JetEngine

Vidéo étape par étape

Qu’est-ce qu’un Custom Post Type ?

Les Custom Post Type (type de publication personnalisée), également appelés CPT, dans WordPress sont des types de contenu comme les articles ou les pages. Étant donné que WordPress a évolué d’une simple plateforme de blogs vers un CMS robuste, le terme Post (publication) a été conservé.

Cependant, un Post Type (type de publication) peut être n’importe quel type de contenu. Par défaut, WordPress inclut ces types de publications : Post (article), Page, Pièce jointe, Révision et Menu de navigation. D’autres exemples de types de publication sont Portfolio, Témoignages, Produits, etc.

Dans l’image, nous pouvons voir les Post Types inclus par défaut dans WordPress : Articles, Médias, Pages et Commentaires. Nous voyons également un type créé par nous : Films.

Avec Post Type du plugin JetEngine inclus dans la suite Crocoblock, vous pouvez créer vos propres Custom Post Types (types de publications personnalisées) et les nommer comme vous le souhaitez. Par exemple, si vous avez un site web de films, vous voudrez peut-être créer un type de publication pour ajouter des films. Ce type de publication peut avoir différents champs personnalisés et même sa propre structure de taxonomies (par exemple : catégories et étiquettes) personnalisées.

Que sont les taxonomies ?

La taxonomie dans WordPress est l’une de ces choses que tout le monde utilise, mais sans savoir qu’on l’utilise. Les taxonomies de WordPress, dérivées de la méthode de classification biologique taxonomie linnéenne, sont utilisées comme moyen de regrouper les publications et les types de publications personnalisées.

WordPress possède deux taxonomies très populaires que les utilisateurs emploient régulièrement : Catégories et Étiquettes, qui nous permettent de classer les publications pour ensuite obtenir des listes en les filtrant par catégories ou étiquettes.

Que sont les terms ou termes dans WordPress ?

Dans WordPress, les terms ou termes font référence aux différents éléments inclus dans une taxonomie. Par exemple, les articles d’un site web ont la taxonomie catégories, et dans les catégories nous avons créé différents termes (terms) qui nous aident à classer nos publications. Nous pouvons également créer différentes étiquettes à attribuer à nos publications, chacune de ces étiquettes est un terme (term).

Nous pouvons donc dire que le Post Type Articles possède deux taxonomies (catégories et étiquettes) et dans ces taxonomies nous pouvons créer autant de termes que nous le souhaitons. Comme nous pouvons le voir dans l’image, Gestion du temps, Productivité, Rédaction, … sont des termes de la taxonomie catégorie. Et Basique est un terme de la taxonomie étiquette. La différence entre ces deux taxonomies est que les catégories sont hiérarchiques et les étiquettes non hiérarchiques.

1. Comment créer un nouveau type de publication personnalisée ou CPT

Avant tout, vous devez installer et activer le plugin JetEngine de la suite Crocoblock. Si vous ne l’avez pas encore fait, accédez au panneau d’administration de WordPress, allez dans la section Crocoblock du menu et cliquez sur l’option de menu Update & Installation. Depuis cet emplacement, vous pourrez installer et activer n’importe quel plugin de cette suite.

Accédez au panneau d’administration de WordPress, allez dans la section JetEngine du menu latéral de gauche et cliquez sur Post Type.

Vous verrez ici la Liste des types de publications personnalisées, où tous vos CPT seront affichés lorsque vous en aurez. Cliquez sur le bouton Add New (Ajouter nouveau) pour créer votre premier CPT.

2. Configurez votre CPT

Vous devez maintenant compléter les informations nécessaires pour créer votre nouveau type de publication personnalisée.

General Settings (Configuration générale)

• Post Type Name (Nom du type de publication). Il s’agit du titre du CPT qui sera visible dans la liste des types de publications.
• Post Type Slug (Slug du type de publication). Il est généré automatiquement à partir du nom que vous avez saisi précédemment. Le slug sera utilisé pour le permalien de l’archive de ce CPT, par exemple https://domaine.com/films.
• «Edit post type / meta box» link (Lien « Modifier le type de publication / boîte méta »). Cette option crée un raccourci depuis chaque page d’édition de publications de ce type personnalisé vers la page où vous vous trouvez actuellement. Si elle est activée, une petite icône en forme d’engrenage apparaît dans le coin supérieur droit du bloc de métachamps d’une page d’édition de publications. Lorsque l’utilisateur clique dessus, il accède à la page d’édition du type de publication personnalisée.

Labels (Étiquettes)

Comme le Custom Post Type est visible dans le panneau d’administration de WordPress, son nom sera utilisé pour diverses options. Dans le bloc Labels (Étiquettes), vous pouvez traduire toutes ces étiquettes. Par exemple, au lieu de l’option Add New Post, vous pouvez la remplacer par Ajouter un nouveau film. Consultez la liste des étiquettes et mettez à jour leur traduction. Dans l’image suivante, vous pouvez voir un exemple de toutes les traductions.

Advanced Settings (Paramètres avancés)

Dans le bloc de Configuration avancée, il existe un ensemble de fonctions liées au CPT qui s’affiche dans le tableau de bord de WordPress.

Si ces options sont difficiles à interpréter pour vous, laissez-les telles qu’elles sont par défaut.

• Is Public (Est public). Tant que cette option est activée, le CPT sera visible et accessible dans le tableau de bord et pourra être consulté par les administrateurs comme par les utilisateurs.
• Exclude From Search (Exclure de la recherche). Vous pouvez créer un CPT qui ne sera utilisé que par les administrateurs. Dans ce cas, vous pouvez activer cette option et les publications de ce type personnalisé ne seront pas disponibles pour les outils de recherche du front-end (partie visible par l’utilisateur).
• Publicly Queryable (Interrogeable publiquement). Ce commutateur est lié à celui de Is Public (Est public). S’il est activé, les requêtes de ce CPT peuvent être effectuées sur le front-end (partie visible par l’utilisateur).
• Show Admin UI (Afficher l’interface utilisateur d’administration). Si vous désactivez cette option, l’onglet ou le lien pour modifier les publications de type personnalisé disparaîtra du tableau de bord. Vous pourrez voir la liste des publications mais pas les modifier.
• Show in Admin Menu, Show in Nav Menu, Show in Rest API (Afficher dans le menu d’administration, Afficher dans le menu de navigation, Afficher dans l’API Rest). Ces trois commutateurs permettent de configurer la visibilité du CPT de manière plus spécifique. Vous pouvez décider de masquer le CPT du menu d’administration, du menu de navigation ou de l’API REST.

• Register Query Var (Enregistrer la variable de requête). Si vous activez ce commutateur, un query_var sera enregistré pour ce CPT.
• Rewrite (Réécrire). Active la possibilité de réécrire le slug de l’archive de ce type de publications.
• Rewrite Slug (Réécrire le slug). Pour pouvoir utiliser ce champ, il est nécessaire que le précédent (Rewrite) soit activé. Depuis cet emplacement, nous pouvons réécrire le slug de ce type de publications et le remplacer par un autre.
• Rewrite With Front. Similaire au précédent mais via $front property.
• Capability Type (Type de capacité). Dans ce champ, vous définissez quelle chaîne WP utilisera pour développer les capacités de ce CPT, par défaut post.

• Has Archive (Possède une archive). Activez ce commutateur si vous souhaitez que le CPT ait une archive de publications. L’archive de publications est cette page où s’affiche la liste de toutes les publications.
• Hierarchical (Hiérarchique). Si vous souhaitez que ce type de publication soit hiérarchique, activez cette option. Cela signifie que les publications peuvent avoir une publication supérieure, comme les pages par exemple.

• Menu Position (Position dans le menu). Le numéro que vous saisirez ici sera le numéro de position auquel l’onglet de ce CPT sera affiché dans le menu de navigation du panneau d’administration de WordPress.
• Menu Icon (Icône de menu). Chaque onglet du menu de navigation du panneau d’administration de WordPress possède une icône. Vous pouvez en choisir une pour l’onglet de votre CPT.
• Supports (Prend en charge). Depuis ce menu déroulant, vous pouvez choisir les blocs de support supplémentaires qui seront affichés sur la page de l’éditeur du CPT. Vous pouvez inclure : Titre (Title), Éditeur Gutenberg (Editor), Commentaires (Comments), Révisions (Revisions), Trackbacks, Auteur (Author), Extrait (Excerpt), Attributs de page, Image mise en avant (Thumbnail (Featured Image)), Champs personnalisés et Formats de publication.

Meta Fields (Métachamps)

Nous allons maintenant voir comment configurer les métachamps personnalisés créés avec le plugin JetEngine et analyser de plus près les types de ces champs.

Qu’est-ce qu’un Meta Field ou métachamp ?

Les métachamps permettent d’ajouter des informations supplémentaires à votre publication personnalisée, que vous pourrez ensuite afficher sur le front-end (partie visible par l’utilisateur) à l’aide des widgets dynamiques. Vous pourrez également les utiliser pour effectuer des filtres sur la liste des publications.

Dans le cas de publications simples comme les Articles, ils n’ont qu’un titre, le corps que nous éditons avec l’éditeur Gutenberg et une image mise en avant. Mais avec JetEngine, nous pouvons ajouter des métachamps à notre guise de différents types. Voici tous les types de métachamps que Post Type de JetEngine nous permet d’ajouter :

• Text (Texte)
• Date (Date)
• Time (Heure)
• Datetime (Date et heure)
• Textarea (Zone de texte)
• WYSIWYG (Éditeur de texte enrichi)
• Switcher (Commutateur)
• Checkbox (Case à cocher)
• Iconpicker (Sélecteur d’icônes)
• Media (Fichier média)
• Gallery (Galerie de médias)
• Radio (Bouton radio)
• Repeater (Répéteur)
• Select (Sélecteur déroulant)
• Number (Nombre)
• Colorpicker (Sélecteur de couleur)
• Posts (Publications)
• HTML (Code HTML)

Vous pouvez glisser-déposer les champs pour les ordonner en plaçant le pointeur de la souris sur cette icône

Configuration du métachamp

Pour créer un métachamp, la première étape consiste à cliquer sur le bouton New Meta Field (Nouveau métachamp). Ensuite, nous devons remplir le formulaire de ce nouveau métachamp.

• Label (Étiquette) : saisissez ici le titre du champ. C’est ainsi qu’il vous sera affiché ainsi qu’aux autres utilisateurs par la suite.
• Name/ID (Nom/Identifiant) : cette valeur est générée automatiquement, selon le texte que vous saisissez dans le champ Label (Étiquette). Si vous souhaitez la modifier, gardez à l’esprit que cet ID ne doit pas inclure d’espaces et assurez-vous qu’il ne contient que des lettres et des chiffres. L’autocomplétion ajoutera également un numéro aléatoire au nom s’il n’est pas unique. Les champs avec des ID similaires pourraient vous confondre et vous causer des problèmes si vous souhaitez les utiliser ailleurs. C’est pourquoi l’autocomplétion évite l’utilisation d’ID similaires.
• Object type (Type d’objet) : vous pouvez choisir ici le type d’objet. L’option Champ signifie que vous pourrez y ajouter des valeurs. Tab (Onglet), Accordion (Accordéon) et Endpoint (Point de terminaison) créeront une mise en page spécifique. Vous pouvez regrouper un ou plusieurs métachamps dans un onglet (en utilisant Tab + Endpoint) ou dans un accordéon (Accordion + Endpoint).

N’oubliez pas que vous pouvez glisser-déposer les champs pour les placer entre Onglet et Endpoint ou entre Accordion et Endpoint, utilisez pour cela cette icône

Types de métachamp

Lorsque vous sélectionnez « Field » dans Object Type (Type d’objet), nous devons maintenant sélectionner le type de champ que nous souhaitons utiliser, nous le ferons dans l’option Field Type (Type de champ). Nous allons maintenant voir chacun des types.

Text (Texte)

Si vous souhaitez ajouter un champ supplémentaire avec du texte personnalisé au type de publication, ce type répond parfaitement à vos besoins. Vous pouvez ajouter des informations supplémentaires sur les publications en utilisant ce champ. De plus, vous pouvez spécifier le nombre maximum de caractères disponible dans le champ.

Date (Date)

Ce métachamp est idéal pour ajouter des dates d’événements, de réunions, de conférences, etc. Vous pouvez également enregistrer la date sous forme d’horodatage en activant le commutateur Save as timestamp, ce qui vous permettra d’effectuer des requêtes et des filtres par date. Ce métachamp vous permet d’ajouter la date manuellement ou via un calendrier, comme vous préférez.

Le format de saisie de date est yy-mm-dd, par exemple 22/12/30, mais ne vous inquiétez pas car lorsque nous représenterons ce champ sur le front-end (partie visible par l’utilisateur), nous pourrons formater la sortie à notre guise.

Time (Heure)

Il s’agit d’un type approprié pour ajouter un horodatage dans vos publications. Ajoutez une heure précise pour des événements, des réunions, des conférences ou la durée dans ce métachamp. Vous pouvez utiliser la boîte pour sélectionner les heures et les minutes avec les curseurs ou modifier au clavier avec ce format hh:mm:ss. Depuis le clavier, vous pouvez indiquer les heures, les minutes et les secondes, par exemple 01:25:15.

Datetime (Date et heure)

Permet de sélectionner la date et l’heure au même endroit. Vous pouvez également enregistrer la date et l’heure sous forme d’horodatage en activant le commutateur Save as timestamp, ce qui vous donnera la possibilité d’effectuer des requêtes et des filtres par date. Ce métachamp vous permet d’ajouter la date et l’heure manuellement ou via un calendrier, comme vous préférez.

Le format de saisie de date est yy-mm-ddThh:mm, par exemple 22-11-25T15:27, mais ne vous inquiétez pas car lorsque nous représenterons ce champ sur le front-end (partie visible par l’utilisateur), nous pourrons formater la sortie à notre guise.

Textarea (Zone de texte)

Vous pouvez utiliser ce type pour ajouter une zone de texte aux publications avec la disposition du texte ligne par ligne. De plus, vous pouvez définir la limite de caractères pour cette valeur de champ.

WYSIWYG (Éditeur avec texte enrichi)

Ce type de métachamp inclut un éditeur de texte enrichi de base avec lequel vous pourrez formater le texte à votre guise en ajoutant au texte le format gras, italique, taille, couleur, puces, liens, etc.

Switcher (Commutateur ou interrupteur)

Vous pouvez ajouter un commutateur comme champ personnalisé à vos publications, produits, événements, etc., ce qui vous permet d’activer/désactiver l’option appropriée dans le bloc de métachamp. Vous pouvez également utiliser ce commutateur pour établir une logique conditionnelle d’affichage d’un autre métachamp. Par exemple, si ce commutateur n’est pas activé, un ou plusieurs autres métachamps ne s’affichent pas.

Checkbox (Case à cocher)

Ce type vous donne la possibilité d’ajouter des cases à cocher avec différentes options. Vous pouvez en mettre une ou plusieurs et ajouter ces options manuellement ou via un glossaire que vous pourrez créer depuis le menu JetEngine > JetEngine > Glossaries. Créer un glossaire vous permet d’utiliser ce même glossaire et différents métachamps même d’autres Post Type.

Iconpicker (Sélecteur d’icônes)

Ce métachamp inclut un sélecteur d’icônes avec lequel vous pourrez choisir une icône appropriée pour chaque publication.

Media (Fichier média)

Ce type aidera à ajouter un fichier multimédia, une image en particulier, bien que vous ne deviez pas oublier que vous pouvez également utiliser l’image mise en avant pour ajouter une image à la publication. Vous pouvez également ajouter tout type de fichier que vous pouvez télécharger dans la bibliothèque de médias de WordPress (PDF, MP3, MP4, …).

Gallery (Galerie de médias)

Ce type aidera à ajouter un ou plusieurs fichiers multimédias à la publication, en particulier des images, bien que vous puissiez également ajouter tout type de fichier que vous pouvez télécharger dans la bibliothèque de médias de WordPress (PDF, MP3, MP4, …).

Radio

Le type radio est parfait pour ajouter des options radio. Ils se différencient des cases à cocher en ce que les boutons radio ne permettent de sélectionner qu’une seule des options disponibles. Vous pouvez ajouter les options disponibles manuellement ou via un glossaire que vous pourrez créer depuis le menu JetEngine > JetEngine > Glossaries. Créer un glossaire vous permet d’utiliser ce même glossaire et différents métachamps même d’autres Post Type.

Repeater (Répétition)

Ce type aidera à ajouter le bloc de contenu avec un nombre d’éléments indéterminé, vous pourrez en ajouter autant que nécessaire. De plus, vous pouvez sélectionner le type de métachamp (Text, Date, Time, Datetime, …), et vous pouvez inclure plus d’un métachamp dans chaque élément.

Select (Sélecteur déroulant)

Utilisez ce type de contenu pour ajouter un sélecteur déroulant pour la publication. Si vous activez Autoriser la sélection de plusieurs options de valeurs, vous pourrez sélectionner plusieurs options à la fois. Cette valeur peut également être affichée en utilisant le callback propre pour un champ dynamique.

Number (Nombre)

Si vous avez besoin d’un champ qui ne peut être rempli qu’avec des nombres, celui-ci sera parfait.

Colorpicker (Sélecteur de couleur)

Avec ce type de métachamp, vous pourrez sélectionner une couleur en utilisant la palette de couleurs ou en saisissant son code hexadécimal.

Posts (Publications)

Ce type permet de sélectionner une publication d’un autre CPT ou même du même CPT que vous êtes en train de créer.

HTML (Code HTML)

Vous pouvez ajouter du code HTML personnalisé à ce métachamp. Il sera utile pour insérer du code intégré comme des vidéos, des audios, des documents, etc. Ce code ne sera pas affiché sur la page d’édition des publications, ce qui sera visible est l’exécution du code lui-même, il peut nous servir à ajouter de l’aide pour l’éditeur de publications. Ce métachamp ne stocke réellement rien, il ne fait que représenter le code que nous introduisons dans la page d’édition.

Valeurs personnalisées dans les types Checkbox et Radio

ATTENTION !
La fonctionnalité suivante peut être utilisée pour les publications personnalisées, les taxonomies personnalisées et la page d’options.

Lorsque vous choisissez les types de métachamp Checkbox (Case à cocher) ou Radio, deux options supplémentaires apparaissent : Allow Custom (Autoriser les options personnalisées) et Get options from the glossary (Obtenir depuis un glossaire).

Allow Custom (Autoriser les valeurs personnalisées)

Cette option permet d’ajouter des valeurs personnalisées à ces champs, en les enregistrant dans une base de données de la publication actuelle mais sans les enregistrer dans la liste des valeurs par défaut.

Si vous souhaitez que ces valeurs personnalisées s’appliquent à toutes les publications du CPT, activez l’option Save Custom (Enregistrer personnalisé) et toutes vos publications contiendront cette nouvelle valeur.

ATTENTION !
Le métachamp de type Radio se configure par analogie avec la case à cocher décrite précédemment.

Get options from the glossary (Obtenir les options depuis un glossaire)

Si vous activez cette option, elle vous permettra d’ajouter les options d’un glossaire à la liste. Vous pourrez spécifier le glossaire concret. Pour créer un nouveau glossaire, allez dans JetEngine > JetEngine> Glossaries et appuyez sur le bouton +New Glossary (Nouveau glossaire).

Save as array (Enregistrer comme tableau)

Lorsque cette option est activée, les valeurs cochées seront stockées sous forme de tableau PHP simple. Vous devez utiliser cette option si vous allez modifier ce champ dans un formulaire sur le front-end. Si vous n’activez pas l’option Enregistrer comme tableau, le champ ne sera pas pré-rempli dans le formulaire.

NOTE !
Il est recommandé d’activer cette option lors de la création du métachamp. Si vous remplissez ce champ dans votre CPT puis activez l’option Save as array (Enregistrer comme tableau), alors le champ sera réinitialisé et vous devrez ajouter les données à nouveau.

Autres paramètres des métachamps

Il existe les paramètres Description (Description) et Field width (Largeur du champ), où vous pouvez ajouter un texte informatif pour l’éditeur et définir la largeur du métachamp.

Vous pouvez spécifier le Character limit (limite de caractères) et définir une Default value (valeur par défaut) pour le champ actuel. De plus, il est possible d’activer l’option Is required (Est requis) pour rendre le champ obligatoire.

Le champ Conditional logic (Logique conditionnelle) vous permet de rendre les champs visibles uniquement si les conditions sont remplies.

NOTE !
L’option Default value (Valeur par défaut) n’est disponible que pour les types de champs de texte.

Après avoir ajouté autant de métachamps que nécessaire, cliquez sur le bouton Update Post Type (Actualiser Meta Box) pour enregistrer les modifications.

Vous pouvez afficher le contenu que vous avez ajouté dans les métachamps personnalisés en utilisant Elementor dans les listes et les modèles.

Créer des taxonomies pour un Custom Post Type de JetEngine

Dans le menu du panneau d’administration de WordPress, cliquez sur JetEngine > Taxonomies (Taxonomies) puis cliquez sur le bouton Add New (Ajouter nouvelle) pour continuer et créer une nouvelle taxonomie. Le processus est très similaire à la création d’un CPT. Il y a les mêmes blocs : General Settings (Configuration générale), Labels (Étiquettes), Advanced Settings (Configuration avancée) et Meta fields (métachamps).

N’oubliez pas qu’au début de ce thème, j’explique ce que sont les Taxonomies et les Termes.

1. General Settings (Configuration générale)

Dans Configuration générale, il y a des champs comme :

• Taxonomy Name (Nom de taxonomie) : définissez le nom de la taxonomie, par exemple Projets ou Portfolio, cela dépend du type de publication pour lequel cette taxonomie est créée.
• Slug de la taxonomie (Taxonomy Slug) : il est rempli automatiquement. Le slug doit être composé uniquement des caractères lettres (sans signes d’accentuation), chiffres et « – » ou « _ ». Par exemple nom_de_taxonomie.
• Type de publication : dans la liste, choisissez pour quel type de publication cette taxonomie sera créée, cela peut être pour un type que nous avons créé nous-mêmes ou pour un type déjà existant.
• ‘Edit taxonomy/meta box’ link (Lien « Modifier la taxonomie/metabox ») : À mon avis, cela ne sert à rien. Dans la fiche Post Type, cela a une fonction, mais dans le cas des taxonomies, je n’ai pas vu que cela en ait.

2. Labels (Étiquettes)

La taxonomie est visible dans le panneau d’administration de WordPress, son nom sera utilisé pour diverses options. Dans le bloc Labels (Étiquettes), vous pouvez traduire toutes ces étiquettes. Par exemple, au lieu de l’option Add New Category, vous pouvez la remplacer par Ajouter une nouvelle catégorie. Consultez la liste des étiquettes et mettez à jour leur traduction.

Dans l’image suivante, vous pouvez voir un exemple de toutes les traductions pour un type de catégorie que j’ai appelé Genre (conçu pour créer des genres de films).

3. Advanced Settings (Configuration avancée)

Ce bloc vous permet de configurer le mode d’affichage de la taxonomie. Décidez simplement si vous souhaitez qu’elle soit publique ou qu’elle s’affiche dans le menu d’administration, etc. La seule option à noter est Hiérarchique, si vous activez cette case, elle s’affichera comme les Catégories dans les Articles, si vous la laissez désactivée, elle se comportera comme les Étiquettes dans les Articles.

Il/Elle a les mêmes options que dans la fiche du Type de publication que vous pouvez voir ici.

4. Champs personnalisés (Meta fields)

Utilisez-les pour afficher toute information supplémentaire pour la taxonomie, comme des médias, des options radio, des répéteurs, etc. Vous pouvez également personnaliser la largeur des champs pour qu’ils occupent moins d’espace et les organiser côte à côte.

Cela fonctionne exactement comme pour les Types de publication que vous pouvez voir ici.

Ajouter et modifier une taxonomie

Une fois la taxonomie créée, vous pourrez ajouter et modifier les termes depuis le menu de WordPress.

Vous pourrez sélectionner les termes pour une publication personnalisée dans la colonne de droite.

Si vous êtes arrivé jusqu’ici, j’espère que ce tutoriel vous a été utile. Si c’est le cas, ce serait formidable si vous me laissiez une évaluation.