JetEngine pour Elementor : types de publication, taxonomies et relations

Une carte de cours affiche son titre, son image, son thème et sa durée. Le profil d’un formateur présente uniquement les cours qu’il enseigne. Modifiez une fiche de cours une seule fois : les cartes dynamiques reprennent les nouvelles informations partout où elles apparaissent. Voilà le résultat que nous allons construire avec JetEngine et Elementor.

Cet exemple, fondé sur la documentation officielle, permet de créer un catalogue de cours. Les inscriptions, les quiz et le paiement demanderaient une mise en œuvre distincte. Courses et Instructors possèdent leurs propres fiches ; Design et Development organisent le catalogue ; une relation enregistrée associe chaque cours à son formateur. La même méthode convient à des biens et leurs agents, des projets et leurs clients, ou des événements et leurs intervenants.

JetEngine fournit la structure du contenu et les widgets dynamiques. Elementor assure la mise en page. Leur liaison demande de l’attention : même une carte bien conçue affiche les mauvais cours si sa requête part du mauvais objet.

Ce guide suit un même modèle depuis son enregistrement jusqu’à son affichage public, puis explique comment inverser la relation et diagnostiquer les listes vides ou incorrectes. Les noms anglais des fiches, listes et réglages sont conservés dans les étapes pour faciliter leur identification.

Choisir entre un type de publication, un champ, une taxonomie et une relation

Avant d’ouvrir le constructeur, notez les informations à enregistrer. Dans cet exemple, un cours possède un titre, une description, une image mise en avant, une durée et un thème. Un formateur possède un nom, une biographie et un portrait. Il existe indépendamment des cours et peut en enseigner plusieurs.

Ce tableau permet d’attribuer une place à chaque information :

WordPress distingue une taxonomie de ses termes : Topic est la taxonomie ; Design et Development sont les termes qu’elle contient. Sa documentation sur les taxonomies explique ce modèle de classement.

Le nom d’un formateur pourrait être un simple champ texte, mais chaque cours en conserverait alors sa propre copie. Un profil réutilisable centralise la biographie et le portrait ; la relation indique les cours auxquels il est associé. À l’inverse, un thème n’a pas besoin d’une fiche de contenu autonome s’il sert uniquement à classer les cours.

Pour ce tutoriel, chaque cours a un seul formateur, et chaque formateur peut enseigner plusieurs cours. La relation est donc de type un-à-plusieurs. Si plusieurs formateurs peuvent enseigner le même cours, choisissez plutôt plusieurs-à-plusieurs. Déterminez cette règle éditoriale avant de créer les associations.

Préparer le contenu dynamique WordPress avec Elementor

Installez et activez JetEngine et Elementor. Le tutoriel de création de listes avec Elementor de Crocoblock utilise Elementor Free avec JetEngine pour construire une carte réutilisable et la répéter dans Listing Grid.

Les modèles personnalisés de pages individuelles et d’archives constituent une dépendance distincte. Utilisez le Theme Builder d’Elementor Pro, ou un système de modèles compatible comme l’extension séparée JetThemeCore. Crocoblock documente les modèles individuels JetThemeCore avec Elementor Free et JetEngine. Pour la voie Elementor, notre avis sur Elementor Pro présente les possibilités plus générales du constructeur.

Distinguez ces responsabilités. Une liste définit la présentation d’une carte répétée ; un modèle individuel définit la page de détail. Enregistrer Courses ne crée automatiquement ni l’une ni l’autre.

Si le catalogue existe déjà, travaillez sur un site de préproduction. Notez les identifiants techniques choisis : les champs, les listes et les requêtes les utiliseront. Choisissez d’autres identifiants si ceux proposés existent déjà dans votre installation.

Créer les types de publication personnalisés JetEngine et les champs des cours

Ouvrez JetEngine → Post Types → Add New. Créez Courses, puis répétez l’opération pour Instructors. Le guide de création des CPT de Crocoblock décrit cet écran d’enregistrement.

Utilisez les identifiants suivants pour l’exemple :

Ces identifiants diffèrent des libellés lisibles affichés aux personnes qui éditent le contenu. WordPress limite les identifiants de types de publication à 20 caractères ; un préfixe propre au projet aide à éviter les collisions. Consultez les consignes d’enregistrement de WordPress.

Dans les réglages avancés de chaque CPT, configurez Supports pour le titre, l’éditeur et l’image mise en avant. Pour ce catalogue public, activez Is Public, Publicly Queryable et Show Admin UI, afin que les fiches disposent de pages publiques et d’un menu d’édition. Activez Has Archive pour Courses si vous souhaitez une archive native des cours. La référence des réglages CPT distingue ces options.

L’image mise en avant dépend également de sa prise en charge par le thème, comme l’explique la référence WordPress des fonctionnalités prises en charge par les publications.

Pour modifier un cours ou un formateur directement dans Elementor, activez ce type de publication dans Elementor → Settings. Ce réglage contrôle l’option « Edit with Elementor » ; il est distinct de la création d’une liste réutilisable ou de l’application d’un modèle individuel. Consultez la configuration de l’éditeur pour les CPT publiée par Crocoblock.

Donner aux attributs des cours des identifiants stables

Dans la section des champs méta de Courses, ajoutez un champ Duration de type Number. Utilisez un identifiant comme wpperk_duration_minutes et précisez dans sa description que la valeur se saisit en minutes, sans unité. Enregistrez 90, puis ajoutez « min » dans le modèle d’affichage.

Si le catalogue demande un programme distinct de la description principale, ajoutez un champ WYSIWYG facultatif nommé wpperk_syllabus. Sinon, utilisez l’éditeur habituel pour la description du cours et passez ce champ supplémentaire.

JetEngine distingue le libellé visible d’un champ de son Name/ID enregistré. Vérifiez cet identifiant avant d’enregistrer, sans vous fier aveuglément au nom généré automatiquement. La référence des types de champs décrit Number, WYSIWYG et les réglages disponibles.

Utilisez les minutes pour toutes les fiches de cet exemple. Une durée saisie dans une autre unité rendrait le libellé de la carte trompeur et les comparaisons peu fiables. Indiquez « Durée en minutes » dans les instructions d’édition pour que toute autre personne puisse respecter cette convention sans devoir la deviner.

Associer la taxonomie Topic et ajouter les fiches

Ouvrez JetEngine → Taxonomies → Add New. Nommez la taxonomie Topic, donnez-lui un identifiant unique comme wpperk_topic et associez-la à Courses. Enregistrez-la, puis ajoutez les termes Design et Development depuis le menu de la taxonomie situé sous Courses.

Attribuez un terme à chaque cours, puis enregistrez le cours. Créer une taxonomie enregistre le système de classement ; cela n’attribue pas ses termes aux fiches existantes. Le guide de configuration des taxonomies de Crocoblock montre ces deux opérations.

Une taxonomie sans hiérarchie convient à ces deux thèmes. Si vous avez ensuite besoin de Design → Interface Design et Design → Graphic Design, une taxonomie hiérarchique peut représenter cette structure. Cette hiérarchie de termes est distincte de la relation entre un formateur et ses cours.

Créez maintenant trois fiches de formateurs et trois fiches de cours. Les noms et valeurs ci-dessous servent uniquement à vérifier la configuration :

Ajoutez Maya Chen, Omar Ali et Lena Ortiz dans Instructors. Donnez aux cours une description et une image mise en avant, saisissez leur durée numérique et publiez les fiches d’exemple que vous souhaitez rendre visibles dans le catalogue. N’associez aucun cours à Lena : elle servira à vérifier le résultat vide plus loin.

Un champ défini sans valeur enregistrée ne permet pas d’afficher une durée utile. Un modèle de liste sans fiches n’a rien à répéter. Renseignez ce petit jeu de données avant de travailler la présentation du catalogue.

Configurer les relations JetEngine et associer les fiches

Ouvrez JetEngine → Relations → Add New. Créez une relation appelée Instructor Courses, avec Instructors comme objet parent, Courses comme objet enfant et un-à-plusieurs comme type.

Activez les contrôles d’édition pour les deux objets afin de gérer les associations depuis les écrans des formateurs et des cours. La référence des réglages Relations décrit les contrôles disponibles et les types de relations.

« Parent » et « enfant » indiquent ici le sens de la liaison. Ils ne transforment pas les publications de cours en enfants natifs WordPress des publications de formateurs. Gardez cette distinction à l’esprit lorsque vous construisez la requête.

Ouvrez la fiche de Maya, repérez la zone des enfants associés, sélectionnez les deux cours Design existants et enregistrez. Associez Omar à WordPress Development Basics. Vous pouvez aussi gérer le lien vers le parent depuis une fiche de cours lorsque ses contrôles de relation sont activés. Crocoblock documente la modification des éléments effectivement associés séparément de l’enregistrement de la relation.

Vérifiez ensuite un cours pour confirmer qu’il est lié au formateur prévu. Des noms identiques, des termes de taxonomie communs ou l’auteur WordPress d’une publication ne créent pas cette relation. C’est l’association enregistrée entre les deux fiches qui la crée.

Conservez la biographie sur le formateur et la durée sur le cours. Si vous autorisez plus tard l’enseignement à plusieurs et souhaitez préciser un rôle différent pour chaque association formateur-cours, ce rôle appartient à la liaison. JetEngine prend en charge les métadonnées de relation et leur affichage dynamique.

Créer une carte de cours et la répéter avec Listing Grid

Dans JetEngine → Listings/Components, ajoutez une liste avec Posts comme source, Courses comme type de publication et Elementor comme vue. Nommez-la Course Card. La référence des modèles de liste décrit ces réglages de source.

Ajoutez un widget Dynamic Image avec Post thumbnail comme source. Ajoutez un Dynamic Field utilisant Post/Term/User/Object Data et le champ d’objet Title, puis un Dynamic Link utilisant Permalink. Ces widgets JetEngine doivent lire la fiche du cours actif, sans reprendre un texte copié depuis le premier cours d’exemple.

Ajoutez un autre Dynamic Field pour la durée : choisissez les métadonnées comme source et sélectionnez wpperk_duration_minutes. Activez Customize field output et saisissez %s min, où le paramètre représente la valeur enregistrée. Pour les valeurs facultatives, décidez si le widget doit disparaître ou afficher une valeur de remplacement utile. La référence Dynamic Field explique la mise en forme et les réglages pour les valeurs vides.

Affichez Topic avec le widget Dynamic Terms de JetEngine, en sélectionnant votre taxonomie Topic. Le badge du thème et le libellé de durée proviennent désormais de sources différentes, même s’ils se ressemblent sur la carte.

Gardez une carte concise : image, titre, thème, durée et lien de détail clairement identifiable. Placez la description complète et le programme facultatif sur la page individuelle du cours. Choisissez un niveau de titre adapté à la page qui accueille la carte et vérifiez les titres longs sur mobile.

Enregistrez la liste. Sur une page Elementor classique, ajoutez Listing Grid et sélectionnez Course Card pour examiner le catalogue de base. Vérifiez que les cours affichent des titres, images et durées différents avant d’appliquer une requête de relation. Vous séparez ainsi les erreurs de liaison des champs des erreurs de sélection des fiches.

Afficher uniquement les cours du formateur courant

La carte définit la présentation. La requête détermine les fiches qui apparaissent. Pour une liste fondée uniquement sur la relation, créez une Relations Query directe dans JetEngine → Query Builder → Add New et nommez-la Courses for Current Instructor.

Choisissez Relations Query comme type de requête, sélectionnez Instructor Courses, demandez les enfants d’un parent déterminé et utilisez l’objet courant comme point de départ. Les contrôles exacts sont les suivants :

Enregistrez la requête, puis créez le modèle Instructor Single avec le système de modèles choisi. Avec JetThemeCore, ouvrez Crocoblock → Theme Builder, créez un modèle de page et définissez la condition Include → Singular → Instructors → All. Créez un modèle Elementor pour son contenu principal. Avec Elementor Pro, créez un modèle Single Post et définissez ses conditions d’affichage sur Instructors.

Utilisez des widgets dynamiques pour le titre du formateur, son portrait mis en avant et sa biographie tirée du contenu de la publication. Sous le profil, ajoutez Listing Grid, sélectionnez Course Card, activez Use Custom Query dans sa section Custom Query, puis sélectionnez Courses for Current Instructor. Enregistrez le modèle et confirmez que ses conditions s’appliquent aux fiches de formateurs.

Sur l’URL réelle d’un formateur, la requête part de son identifiant et récupère les identifiants des cours associés. La référence Relations Query de Crocoblock décrit le sens de la requête et les options d’objet de départ.

Ouvrez les profils publics de Maya, Omar et Lena. Maya doit afficher deux cartes de cours, Omar une et Lena aucune. Prévoyez un affichage compréhensible pour l’état vide afin que les visiteurs sachent qu’aucun cours n’est encore présenté.

Utiliser une Posts Query pour des conditions explicites sur les publications

Une Relations Query directe convient à la sélection des éléments associés. Pour afficher explicitement les seules publications publiées, les trier ou ajouter des conditions de taxonomie et de métadonnées, construisez plutôt une Posts Query distincte.

Sélectionnez Courses comme type de publication et Published comme statut. Dans Post & Page → Post In, utilisez la macro Related Items. Choisissez Instructor Courses, demandez Child Object et récupérez l’identifiant initial depuis Current Object ID. Enregistrez cette requête et sélectionnez-la comme requête personnalisée de Listing Grid. Le tutoriel sur les relations entre publications de Crocoblock montre cette méthode.

Pour cette macro, ouvrez les réglages avancés et définissez le champ Fallback sur un identifiant de publication dont vous avez vérifié l’absence dans votre installation. Une macro d’inclusion vide peut sinon laisser la requête renvoyer tous les éléments, comme l’explique le guide des macros Query Builder. Ne supposez pas qu’un nombre donné en exemple est inutilisé sur votre site.

Vérifiez à nouveau Lena, puis associez un cours en brouillon et confirmez que la requête limitée aux publications publiées l’exclut. Ce sont des vérifications à effectuer ; l’aperçu de l’éditeur ne suffit pas à établir le comportement public final.

Inverser le sens sur la page d’un cours

Créez une liste Instructor Card à partir d’Instructors. Sur un modèle Course Single, utilisez une deuxième Relations Query qui demande les parents d’un enfant déterminé. Le cours devient alors l’objet de départ.

Dans notre modèle un-à-plusieurs, un cours possède un seul formateur associé. Un modèle plusieurs-à-plusieurs peut en renvoyer plusieurs. Inverser le sens de l’affichage ne modifie pas cette règle de fond.

Choisir délibérément le contexte de l’objet courant

Dans une liste de formateurs, l’objet courant peut être la carte du formateur en cours d’affichage. Dans une liste de cours imbriquée, il peut devenir le cours. Utilisez Default WordPress Object (for current page) lorsque vous voulez expressément récupérer l’objet de la page individuelle extérieure, quel que soit l’élément actif de la liste.

Cet objet global doit toujours être un formateur pour que la requête récupère ses cours. Sur une page d’atterrissage classique, il correspond à cette page. Le guide du contexte des relations explique cette distinction. Ne fixez pas l’identifiant de Maya dans un modèle destiné à tous les formateurs.

Diagnostiquer les données avant de modifier la présentation

Si la liste affiche un résultat incorrect, suivez d’abord les fiches enregistrées et la requête de sélection :

N’utilisez pas Post Parent ID à la place de la relation JetEngine. Ce contrôle concerne la parenté native de WordPress ; pour la méthode utilisant la macro, les identifiants des publications associées appartiennent à Post In. Consultez les réglages Posts Query.

Retirez l’association d’un cours avec Maya et vérifiez qu’il disparaît de sa grille tout en restant une fiche de cours. Modifiez sa durée et confirmez que la nouvelle valeur apparaît partout où sa carte est affichée. Vérifiez également la page du cours dans le sens inverse, la mise en page mobile et les liens de détail.

Une fois ces vérifications réussies, ajoutez des filtres destinés aux visiteurs seulement si le catalogue en a besoin. Le parcours de filtrage de Listing Grid de Crocoblock utilise l’extension séparée JetSmartFilters. Pour une saisie depuis l’interface publique, JetFormBuilder peut associer les champs d’un formulaire aux publications et utiliser son action Connect Relation Items avec JetEngine. Il s’agit d’une configuration de formulaire distincte ; une relation créée dans l’administration ne met pas à elle seule en place le parcours éditorial.

Commencez par les trois cours d’exemple et confirmez le modèle, les associations et les deux sens de requête. Développez ensuite le catalogue avec les mêmes champs d’édition. Le prochain cours doit seulement demander une nouvelle fiche, son thème et une association avec un formateur : la mise en page Elementor réutilisable sera déjà prête à l’afficher.