JetEngine per Elementor: tipi di post personalizzati, tassonomie e relazioni

Una scheda corso mostra titolo, immagine, argomento e durata. Il profilo di un docente elenca soltanto i suoi corsi. Basta modificare il record di un corso perché le schede dinamiche leggano i dati aggiornati ovunque vengano visualizzate. È il risultato che costruiremo con JetEngine per Elementor.

Questo esempio si basa sulla documentazione ufficiale e serve a creare un catalogo di corsi. Iscrizioni, quiz e pagamenti richiederebbero un'implementazione dedicata. Courses e Instructors, cioè corsi e docenti, hanno record indipendenti; Design e Development organizzano il catalogo; una relazione salvata collega ogni corso al suo docente. Lo stesso modello si può applicare a immobili e agenti, progetti e clienti, eventi e relatori.

JetEngine fornisce la struttura dei contenuti e i widget dinamici. Elementor gestisce il layout. Il collegamento tra i due richiede attenzione: anche una scheda ben progettata mostra i corsi sbagliati se la query parte dall'oggetto sbagliato.

Seguiremo un unico modello dalla registrazione alla visualizzazione sul sito, per poi invertire la relazione e individuare le cause degli elenchi vuoti o errati.

Scegli cosa rappresentare con post, campi, tassonomie e relazioni

Prima di aprire il builder, elenca le informazioni da memorizzare. Nel nostro esempio un corso ha titolo, descrizione, immagine in evidenza, durata e argomento. Un docente ha nome, biografia e ritratto. Il docente esiste indipendentemente dal singolo corso e può insegnare in più corsi.

Questa tabella aiuta a scegliere il posto giusto per ogni informazione:

WordPress distingue la tassonomia dai suoi termini: Topic è la tassonomia; Design e Development sono termini al suo interno. La documentazione sulle tassonomie spiega questo modello di classificazione.

Potresti memorizzare il nome del docente in un campo di testo, ma ogni corso ne avrebbe una copia. Un profilo riutilizzabile offre invece un solo punto in cui aggiornare biografia e ritratto; la relazione stabilisce quali corsi lo utilizzano. Allo stesso modo, un argomento non richiede necessariamente un record autonomo se serve soltanto a classificare i corsi.

In questa guida ogni corso ha un solo docente e ogni docente può avere più corsi. La relazione è quindi uno-a-molti, o one-to-many. Se un corso può essere tenuto da più docenti, scegli many-to-many. Definisci questa regola editoriale prima di creare i collegamenti.

Cosa serve per i contenuti dinamici in WordPress con Elementor

Installa e attiva JetEngine ed Elementor. Il tutorial di Crocoblock sugli elenchi in Elementor utilizza Elementor Free insieme a JetEngine per creare la scheda riutilizzabile e Listing Grid.

I template personalizzati per singoli contenuti e archivi richiedono uno strumento dedicato. Puoi usare il Theme Builder di Elementor Pro oppure un sistema compatibile, come il plugin separato JetThemeCore. Crocoblock documenta i template singoli di JetThemeCore con Elementor Free e JetEngine. Se scegli Elementor Pro, la nostra recensione di Elementor Pro ne illustra le capacità più ampie.

Mantieni distinte queste responsabilità. Un listing definisce una scheda da ripetere; un template singolo organizza la pagina di dettaglio che la contiene. Registrare Courses non crea automaticamente nessuno dei due layout.

Se lavori su un catalogo esistente, usa un ambiente di staging. Annota gli identificatori tecnici scelti: campi, listing e query faranno riferimento a questi valori. Se quelli proposti sono già presenti nell'installazione, scegline altri senza conflitti.

Crea i tipi di post personalizzati con JetEngine e i campi del corso

Apri JetEngine → Post Types → Add New. Crea Courses, quindi ripeti la procedura per Instructors. La guida alla creazione dei CPT descrive questa schermata di registrazione.

Usa questi identificatori di esempio:

Le chiavi tecniche sono distinte dalle etichette leggibili mostrate agli editor. WordPress limita gli identificatori dei tipi di post a 20 caratteri; un prefisso di progetto aiuta a evitare collisioni. Consulta le indicazioni di WordPress sulla registrazione.

Nelle impostazioni avanzate di ciascun CPT, configura Supports per titolo, editor e immagine in evidenza. Per questo catalogo pubblico attiva Is Public, Publicly Queryable e Show Admin UI, così i record possono avere pagine pubbliche e un menu di modifica. Attiva Has Archive per Courses se desideri un archivio nativo dei corsi. Il riferimento alle impostazioni dei CPT distingue questi controlli.

Le immagini in evidenza dipendono anche dal supporto del tema, come specifica la documentazione WordPress sulle funzionalità supportate.

Per modificare un singolo corso o docente direttamente in Elementor, abilita il relativo tipo di post in Elementor → Settings. Questa impostazione controlla l'opzione “Edit with Elementor”; è separata dalla creazione di un listing riutilizzabile o dall'applicazione di un template singolo. Vedi la configurazione dell'editor per i CPT.

Assegna nomi stabili ai campi dei corsi

Nella sezione dei campi meta di Courses, aggiungi un campo Duration di tipo Number. Usa un identificatore come wpperk_duration_minutes e specifica nella descrizione che l'editor deve inserire i minuti senza l'unità. Memorizza 90, poi aggiungi “min” nel template di visualizzazione.

Se il catalogo richiede un programma separato dalla descrizione principale, aggiungi un campo WYSIWYG facoltativo chiamato wpperk_syllabus. Altrimenti usa l'editor normale per la descrizione ed evita un campo aggiuntivo.

JetEngine distingue l'etichetta visibile dal Name/ID memorizzato. Controlla l'ID prima di salvare, senza affidarti automaticamente al nome generato. Il riferimento ai tipi di campo documenta Number, WYSIWYG e le relative impostazioni.

In questo esempio usa i minuti per tutti i record. Una durata inserita con un'altra unità renderebbe ingannevole l'etichetta della scheda e poco affidabile il confronto. Scrivi “Durata in minuti” nelle istruzioni di compilazione, così un altro editor potrà seguire la convenzione senza interpretazioni.

Collega la tassonomia Topic e aggiungi i contenuti

Apri JetEngine → Taxonomies → Add New. Chiama la tassonomia Topic, scegli una chiave univoca come wpperk_topic e collegala a Courses. Salvala, quindi aggiungi Design e Development dal menu della tassonomia sotto Courses.

Assegna un termine a ogni corso e salva il record. Creare una tassonomia registra il sistema di classificazione; non assegna termini ai contenuti esistenti. La guida alla configurazione delle tassonomie mostra entrambe le operazioni.

Per questi due argomenti usa una tassonomia piatta. Se in seguito ti serviranno Design → Interface Design e Design → Graphic Design, potrai rappresentarli con una tassonomia gerarchica. La gerarchia dei termini resta distinta dalla relazione docente-corso.

Ora crea tre docenti e tre corsi. Questi nomi e valori sono esempi per verificare la configurazione:

Aggiungi Maya Chen, Omar Ali e Lena Ortiz come Instructors. Inserisci descrizioni e immagini in evidenza dei corsi, compila i valori numerici della durata e pubblica i record di esempio che vuoi rendere visibili. Lascia Lena senza corsi per verificare più avanti il risultato vuoto.

La definizione di un campo senza un valore salvato non produce una durata utile. Un template di listing senza record non ha contenuti significativi da ripetere. Compila questo piccolo insieme di dati prima di curare lo stile del catalogo.

Configura le relazioni JetEngine e collega i record

Apri JetEngine → Relations → Add New. Crea la relazione Instructor Courses con Instructors come oggetto padre, Courses come oggetto figlio e one-to-many come tipo.

Abilita i controlli di modifica per entrambi gli oggetti, così i collegamenti possono essere gestiti dalle schermate dei docenti e dei corsi. Il riferimento alle relazioni descrive i controlli e i tipi disponibili.

“Parent” e “child” indicano la direzione del collegamento. Non rendono i post dei corsi figli nativi dei post dei docenti in WordPress. Mantieni questa distinzione quando costruisci la query.

Apri il record di Maya, trova l'area dei figli collegati, seleziona i due corsi di Design già esistenti e salva. Collega Omar al corso di sviluppo WordPress. Puoi gestire il collegamento al padre anche dalla schermata di un corso, se i relativi controlli sono attivi. Crocoblock documenta la modifica degli elementi collegati separatamente dalla registrazione della relazione.

Apri poi un corso per confermare il collegamento al docente previsto. Nomi uguali, termini di tassonomia o autori WordPress non creano questa relazione: serve un collegamento salvato tra i due record.

Conserva la biografia sul docente e la durata sul corso. Se in futuro consentirai più docenti per corso e avrai bisogno di ruoli diversi per ciascun abbinamento, memorizza il ruolo sul collegamento. JetEngine supporta i metadati delle relazioni e la loro visualizzazione dinamica.

Crea una scheda corso e ripetila con Listing Grid

In JetEngine → Listings/Components, aggiungi un listing con Posts come fonte, Courses come tipo di post ed Elementor come vista. Chiamalo Course Card. Il riferimento ai template di listing spiega queste impostazioni.

Aggiungi Dynamic Image con Post thumbnail come fonte. Inserisci Dynamic Field con Post/Term/User/Object Data e Title come campo dell'oggetto, quindi Dynamic Link con Permalink. Questi widget devono leggere il record del corso corrente, anziché contenere testo copiato dal primo corso di esempio.

Per la durata aggiungi un altro Dynamic Field: scegli Meta Data come fonte e seleziona wpperk_duration_minutes. Abilita Customize field output e inserisci %s min: il segnaposto rappresenta il valore salvato. Per i campi facoltativi, decidi se nascondere il widget quando il valore è vuoto o mostrare un testo alternativo utile. Il riferimento a Dynamic Field descrive formattazione e controlli per i valori vuoti.

Mostra Topic tramite il widget Dynamic Terms, selezionando la tassonomia Topic. L'etichetta dell'argomento e quella della durata provengono da fonti diverse, anche se nella scheda hanno uno stile simile.

Mantieni la scheda essenziale: immagine, titolo, argomento, durata e un collegamento chiaro alla pagina di dettaglio. Inserisci descrizione completa e programma facoltativo nella pagina del corso. Scegli un livello di titolo coerente con la pagina e controlla i titoli lunghi su dispositivi mobili.

Salva il listing. In una normale pagina Elementor, aggiungi Listing Grid e seleziona Course Card per controllare il catalogo di base. Verifica che corsi diversi producano titoli, immagini e durate diversi prima di applicare una query di relazione. In questo modo distingui gli errori di lettura dei dati dagli errori nella selezione dei record.

Mostra soltanto i corsi del docente corrente

La scheda controlla l'aspetto. La query stabilisce quali record includere. Per un elenco basato soltanto sui collegamenti, crea una Relations Query in JetEngine → Query Builder → Add New e chiamala Courses for Current Instructor.

Imposta Relations Query come tipo, seleziona Instructor Courses, richiedi i figli di un padre fisso e usa l'oggetto corrente come punto di partenza. I controlli esatti sono:

Salva la query e crea il template Instructor Single con il sistema scelto. Con JetThemeCore apri Crocoblock → Theme Builder, crea un template di pagina e imposta Include → Singular → Instructors → All. Crea un template Elementor per il corpo della pagina. Con Elementor Pro crea un template Single Post e applica le condizioni di visualizzazione a Instructors.

Usa i widget dinamici per titolo del docente, ritratto in evidenza e biografia dal contenuto del post. Sotto il profilo aggiungi Listing Grid, scegli Course Card, abilita Use Custom Query nella sezione Custom Query e seleziona Courses for Current Instructor. Salva il template e verifica che le condizioni si applichino ai record dei docenti.

Aprendo l'URL di un docente, la query parte dal suo ID e recupera gli ID dei corsi collegati. Il riferimento a Relations Query documenta direzione e opzioni dell'oggetto iniziale.

Apri i profili pubblici di Maya, Omar e Lena. Maya dovrebbe mostrare due schede, Omar una e Lena nessuna. Cura lo stato vuoto affinché il visitatore capisca che per quel docente non sono ancora stati elencati corsi.

Usa Posts Query per condizioni esplicite sui post

Una Relations Query diretta è comoda per recuperare i collegamenti. Se vuoi includere esplicitamente solo post pubblicati, ordinare i risultati o aggiungere condizioni su tassonomie e metadati, crea invece una Posts Query separata.

Seleziona Courses come tipo di post e Published come stato. In Post & Page → Post In, usa la macro Related Items. Scegli Instructor Courses, richiedi Child Object e recupera l'ID iniziale da Current Object ID. Salva la query e selezionala come query personalizzata di Listing Grid. Il tutorial sulle relazioni tra post illustra questo percorso.

Apri le impostazioni avanzate della macro e imposta un fallback con un ID di post che hai verificato non esistere nell'installazione. Una macro di inclusione vuota può altrimenti lasciare la query libera di restituire tutti i record, come spiega la guida alle macro di Query Builder. Non dare per scontato che un numero di esempio sia inutilizzato nel tuo sito.

Controlla nuovamente Lena, poi collega un corso in bozza e verifica che la query riservata ai post pubblicati lo escluda. Sono verifiche da eseguire: l'anteprima dell'editor, da sola, non dimostra il comportamento della pagina pubblica.

Inverti la direzione sulla pagina di un corso

Crea un listing Instructor Card basato su Instructors. Nel template Course Single usa una seconda Relations Query che richieda gli oggetti padre associati a un oggetto figlio fisso. Il corso diventa l'oggetto iniziale.

Nel nostro modello one-to-many un corso ha un solo docente collegato. Con many-to-many può averne diversi. Invertire la direzione di visualizzazione non cambia la regola del modello.

Scegli consapevolmente il contesto dell'oggetto corrente

Dentro un listing di docenti, l'oggetto corrente può essere il docente della scheda in fase di visualizzazione. Dentro un listing di corsi annidato, può diventare il corso. Usa Default WordPress Object (for current page) quando vuoi mantenere l'oggetto della pagina singola esterna, indipendentemente dall'elemento corrente del listing.

Per una query dei suoi corsi, quell'oggetto globale deve comunque essere un docente. In una normale landing page è la pagina stessa. La guida al contesto delle relazioni chiarisce la differenza. Evita di inserire l'ID di Maya come valore fisso in un template destinato a tutti i docenti.

Controlla i dati prima di modificare il design

Se il listing mostra risultati errati, parti dai record salvati e dalla query di selezione:

Non sostituire la relazione JetEngine con Post Parent ID. Quel controllo riguarda la gerarchia nativa di WordPress; nel percorso con la macro, gli ID dei post collegati appartengono a Post In. Consulta le impostazioni di Posts Query.

Scollega un corso da Maya e verifica che scompaia dalla sua griglia, pur rimanendo un record del catalogo. Aggiorna la durata e controlla il nuovo valore ovunque venga mostrata la scheda. Verifica anche la pagina del corso con la query inversa, il layout mobile e i link di dettaglio.

Dopo questi controlli aggiungi filtri per i visitatori solo se il catalogo ne ha bisogno. Il procedimento di filtraggio di Listing Grid utilizza il plugin separato JetSmartFilters. Per l'invio di contenuti dal sito pubblico, JetFormBuilder può associare i campi di un modulo ai post e usare l'azione Connect Relation Items con JetEngine. Serve una configurazione del modulo dedicata: una relazione nel backend non crea da sola il flusso editoriale.

Parti dai tre corsi di esempio e verifica modello, collegamenti ed entrambe le direzioni della query. Poi amplia il catalogo attraverso gli stessi campi. Per il corso successivo dovrebbero bastare un nuovo record, il suo argomento e il collegamento al docente: il layout Elementor riutilizzabile sarà già pronto a mostrarlo.