Come creare un Custom Post Type con JetEngine

Video passo dopo passo

Che cos’è un Custom Post Type?

I Custom Post Type (tipo di contenuto personalizzato), chiamati anche CPT, in WordPress sono tipi di contenuto come articoli o pagine. Poiché WordPress si è evoluto da una semplice piattaforma di blogging a un CMS robusto, il termine Post (pubblicazione) è rimasto.

Tuttavia, un Post Type (tipo di contenuto) può essere qualsiasi tipo di contenuto. Per impostazione predefinita, WordPress include questi tipi di contenuto: Post (articolo), Pagina, Allegato, Revisione e Menu di navigazione. Altri esempi di tipi di contenuto sono Portfolio, Testimonianze, Prodotti, ecc.

Nell’immagine possiamo vedere i Post Types che WordPress include di default: Articoli, Media, Pagine e Commenti. E vediamo anche uno creato da noi: Film.

Con Post Type del plugin JetEngine incluso nella suite Crocoblock, puoi creare i tuoi Custom Post Types (tipi di contenuto personalizzati) e chiamarli come vuoi. Per esempio, se hai un sito di film, potresti voler creare un tipo di contenuto per aggiungere film. Questo tipo di contenuto può avere diversi campi personalizzati e persino una propria struttura di tassonomie personalizzate (per esempio: categorie e tag).

Che cosa sono le tassonomie?

La tassonomia in WordPress è una di quelle cose che tutti usano, ma non sanno di usarla. Le tassonomie di WordPress, derivate dal metodo di classificazione biologica linneano, si usano come modo per raggruppare articoli e tipi di contenuto personalizzati.

WordPress ha due tassonomie molto popolari che le persone usano regolarmente: Categorie e Tag, che ci permettono di classificare le pubblicazioni per poi ottenere elenchi filtrandole per categorie o tag.

Che cosa sono i terms o termini in WordPress?

In WordPress, i terms o termini si riferiscono ai diversi elementi inclusi in una tassonomia. Per esempio, gli articoli di un sito hanno la tassonomia categorie e, all’interno delle categorie, abbiamo creato diversi termini (terms) che ci aiutano a classificare le nostre pubblicazioni. Possiamo anche creare diversi tag da assegnare alle pubblicazioni: ognuno di questi tag è un termine (term).

Quindi possiamo dire che il Post Type Articoli ha due tassonomie (categorie e tag) e, in queste tassonomie, possiamo creare tutti i termini che vogliamo. Come possiamo vedere nell’immagine, Gestione del tempo, Produttività, Scrittura, … sono termini della tassonomia categoria. E Base è un termine della tassonomia tag. La differenza tra queste due tassonomie è che le categorie sono gerarchiche e i tag non sono gerarchici.

1. Come creare un nuovo Tipo di contenuto personalizzato o CPT

Prima di tutto devi installare e attivare il plugin JetEngine della suite Crocoblock. Se non l’hai ancora fatto, accedi al pannello di amministrazione di WordPress, vai alla sezione Crocoblock del menu e fai clic sulla voce Update & Installation. Da qui potrai installare e attivare qualsiasi plugin di questa suite.

Accedi al pannello di amministrazione di WordPress, vai alla sezione JetEngine nel menu laterale a sinistra e fai clic su Post Type.

Qui vedrai la Lista dei tipi di contenuto personalizzati, dove verranno mostrati tutti i tuoi CPT quando li avrai. Fai clic sul pulsante Add New (Aggiungi nuovo) per creare il tuo primo CPT.

2. Configura il tuo CPT

Ora devi completare le informazioni necessarie per creare il tuo nuovo tipo di contenuto personalizzato.

General Settings (Impostazioni generali)

• Post Type Name (Nome del tipo di contenuto). Questo è il titolo del CPT che sarà visibile nell’elenco dei tipi di contenuto.
• Post Type Slug (Slug del tipo di contenuto). Viene generato automaticamente a partire dal nome inserito in precedenza. Lo slug verrà usato per il permalink dell’archivio di questo CPT, per esempio https://dominio.com/film.
• “Edit post type / meta box” link (Link “Modifica tipo di contenuto / meta box”). Questa opzione crea un collegamento rapido da ogni pagina di modifica delle pubblicazioni di questo tipo personalizzato alla pagina in cui ti trovi ora. Se è abilitata, appare una piccola icona a forma di ingranaggio nell’angolo in alto a destra del blocco dei metacampi in una pagina di modifica. Quando l’utente ci fa clic, accederà alla pagina di modifica del Tipo di contenuto personalizzato.

Labels (Etichette)

Poiché il Custom Post Type è visibile nel pannello di amministrazione di WordPress, il suo nome verrà usato per varie opzioni. Nel blocco Labels (Etichette) puoi tradurre tutte queste etichette. Per esempio, invece dell’opzione Add New Post, puoi cambiarla in Aggiungi nuovo film. Controlla l’elenco delle etichette e aggiorna la traduzione. Nell’immagine seguente puoi vedere un esempio di tutte le traduzioni.

Advanced Settings (Impostazioni avanzate)

Nel blocco di Configurazione avanzata c’è un insieme di funzioni collegate al CPT mostrato nella bacheca di WordPress.

Se per te queste opzioni sono difficili da interpretare, lasciale come sono di default e basta.

• Is Public (È pubblico). Finché questa opzione è abilitata, il CPT sarà visibile e accessibile nella bacheca e potrà essere visto sia dagli amministratori sia dagli utenti.
• Exclude From Search (Escludi dalla ricerca). Puoi creare un CPT che verrà usato solo dagli amministratori. In questo caso, puoi abilitare questa opzione e le pubblicazioni di questo tipo personalizzato non saranno disponibili per gli strumenti di ricerca del front-end (la parte visibile all’utente).
• Publicly Queryable (Interrogabile pubblicamente). Questo interruttore è collegato a Is Public (È pubblico). Se è abilitato, le query di questo CPT possono essere eseguite nel front-end (la parte visibile all’utente).
• Show Admin UI (Mostra l’interfaccia di amministrazione). Se disattivi questa opzione, la scheda o il link per modificare le pubblicazioni di questo tipo personalizzato scomparirà dal pannello di controllo. Potrai vedere l’elenco delle pubblicazioni ma non modificarle.
• Show in Admin Menu, Show in Naw Menu, Show in Rest API (Mostra nel menu di amministrazione, Mostra nel menu di navigazione, Mostra nella API Rest). Questi tre interruttori permettono di configurare la visibilità del CPT in modo più specifico. Puoi decidere di nascondere il CPT dal menu di amministrazione, dal menu di navigazione o dalla REST API.

• Register Query Var (Registra Query Var). Se attivi questo interruttore, verrà registrata una query_var per questo CPT.
• Rewrite (Riscrittura). Attiva la possibilità di riscrivere lo slug dell’archivio di questo tipo di contenuto.
• Rewrite Slug (Riscrivi slug). Per poter usare questo campo è necessario che il precedente (Rewrite) sia attivo. Da qui puoi riscrivere lo slug di questo tipo di contenuto e sostituirlo con un altro.
• Rewrite With Front. Simile al precedente, ma tramite la $front property.
• Capability Type (Tipo di capacità). In questo campo definisci quale stringa userà WP per sviluppare le capacità di questo CPT; di default post.

• Has Archive (Ha un archivio). Attiva questo interruttore se vuoi che il CPT abbia un archivio delle pubblicazioni. L’archivio è la pagina in cui viene mostrato l’elenco di tutte le pubblicazioni.
• Hierarchial (Gerarchico). Se vuoi che questo tipo di contenuto sia gerarchico, attiva questa opzione. Significa che le pubblicazioni possono avere una pubblicazione superiore, come le pagine.

• Menu Position (Posizione nel menu). Il numero inserito qui sarà la posizione in cui verrà mostrata la scheda di questo CPT nel menu di navigazione del pannello di amministrazione di WordPress.
• Menu Icon (Icona del menu). Ogni scheda del menu di navigazione del pannello di amministrazione di WordPress ha un’icona. Qui puoi sceglierne una per la scheda del tuo CPT.
• Supports (Supporto). Da questo menu a tendina puoi scegliere i blocchi di supporto aggiuntivi che verranno mostrati nella pagina dell’editor del CPT. Puoi includere: Titolo (Title), Editor Gutenberg (Editor), Commenti (Comments), Revisioni (Revisions), Trackbacks, Autore (Author), Estratto (Excerpt), Attributi di pagina, Immagine in evidenza (Thumbnail (Featured Image)), Campi personalizzati e Formati di pubblicazione.

Meta Fields (Metacampi)

Ora vediamo come si configurano i metacampi personalizzati creati con il plugin JetEngine e analizziamo più da vicino i tipi di questi campi.

Che cos’è un Meta Field o metacampo?

I metacampi permettono di aggiungere informazioni aggiuntive alla tua pubblicazione personalizzata, che poi potrai mostrarle nel front-end (la parte visibile all’utente) con l’aiuto dei widget dinamici. Potrai anche usarli per applicare filtri all’elenco delle pubblicazioni.

Nel caso di pubblicazioni semplici come gli Articoli, hanno solo un titolo, il corpo che modifichiamo con l’editor Gutenberg e un’immagine in evidenza. Ma con JetEngine possiamo aggiungere metacampi a piacere di diversi tipi. Questi sono tutti i tipi di metacampi che Post Type di JetEngine ci permette di aggiungere:

• Text (Testo)
• Date (Data)
• Time (Ora)
• Datetime (Data e ora)
• Textarea (Area di testo)
• WYSIWYG (Editor di testo avanzato)
• Switcher (Interruttore)
• Checkbox (Casella di spunta)
• Iconpicker (Selettore di icone)
• Media (File multimediale)
• Gallery (Galleria media)
• Radio (Pulsante radio)
• Repeater (Ripetitore)
• Select (Selettore a tendina)
• Number (Numero)
• Colorpicker (Selettore colore)
• Posts (Pubblicazioni)
• HTML (Codice HTML)

Puoi trascinare e rilasciare i campi per ordinarli posizionando il puntatore del mouse su questa icona

Configurazione del metacampo

Per creare un metacampo, la prima cosa è fare clic sul pulsante New Meta Field (Nuovo metacampo). Poi dobbiamo compilare il modulo di questo nuovo metacampo.

• Label (Etichetta): scrivi qui il titolo del campo. È così che verrà mostrato a te e ad altri utenti in seguito.
• Name/ID (Nome/Identificatore): questo valore viene generato automaticamente in base al testo inserito nel campo Label (Etichetta). Se vuoi cambiarlo, tieni presente che questo ID non deve includere spazi e assicurati che contenga solo lettere e numeri. L’autocompletamento aggiungerà anche un numero casuale al nome se non è univoco. Campi con ID simili potrebbero confonderti e causarti problemi se vuoi usarli altrove. Per questo l’autocompletamento evita l’uso di ID simili.
• Object type (Tipo di oggetto): qui puoi scegliere il tipo di oggetto. L’opzione Campo significa che potrai aggiungere valori. Tab (Scheda), Accordion (Fisarmonica) e Endpoint (Endpoint) creeranno un layout specifico. Puoi raggruppare uno o più metacampi in una Scheda (usando Tab + Endpoint) o in una Fisarmonica (Accordion + Endpoint).

Ricorda che puoi trascinare e rilasciare i campi per posizionarli tra Scheda ed Endpoint o tra Accordion ed Endpoint: usa questa icona

Tipi di metacampo

Quando selezioni “Field” in Objet Type (Tipo di campo), ora dobbiamo selezionare che tipo di campo vogliamo usare: lo faremo nell’opzione Field Type (Tipo di campo). Di seguito vediamo ciascun tipo.

Text (Testo)

Se vuoi aggiungere un campo aggiuntivo con testo personalizzato al tipo di contenuto, questo tipo soddisfa perfettamente le tue esigenze. Puoi aggiungere informazioni aggiuntive sulle pubblicazioni usando questo campo. Inoltre, puoi specificare il numero massimo di caratteri disponibile nel campo.

Date (Data)

Questo metacampo è ideale per aggiungere date di eventi, riunioni, conferenze, ecc. Puoi anche salvare la data come timestamp attivando l’interruttore Save as timestamp: questo ti permetterà di fare query e filtri per data. Questo metacampo ti consente di aggiungere la data manualmente o tramite un calendario, come preferisci.

Il formato di input della data è yy-mm-dd, per esempio 22/12/30, ma non preoccuparti perché quando mostreremo questo campo nel front-end (la parte visibile all’utente) potremo formattare l’output come vogliamo.

Time (Ora)

Questo è un tipo adatto per aggiungere un orario nelle tue pubblicazioni. Aggiungi un’ora specifica per eventi, riunioni, conferenze o la durata in questo metacampo. Puoi usare la casella per selezionare ore e minuti con i cursori oppure modificare con la tastiera con questo formato hh:mm:ss; dalla tastiera puoi indicare ore, minuti e secondi, per esempio 01:25:15.

Datetime (Data e ora)

Permette di selezionare data e ora nello stesso punto. Puoi anche salvare data e ora come timestamp attivando l’interruttore Save as timestamp: questo ti darà la possibilità di fare query e filtri per data. Questo metacampo ti consente di aggiungere data e ora manualmente o tramite un calendario, come preferisci.

Il formato di input della data è yy-mm-ddThh:mm, per esempio 22-11-25T15:27, ma non preoccuparti perché quando mostreremo questo campo nel front-end (la parte visibile all’utente) potremo formattare l’output come vogliamo.

Textarea (Area di testo)

Puoi usare questo tipo per aggiungere un’area testuale alle pubblicazioni con il testo disposto riga per riga. Inoltre, puoi impostare il limite di caratteri per questo valore del campo.

WYSIWYG (Editor di testo avanzato)

Questo tipo di metacampo include un editor base di testo avanzato con cui potrai formattare il testo a piacere aggiungendo grassetto, corsivo, dimensione, colore, elenchi puntati, link, ecc.

Switcher (Interruttore)

Puoi aggiungere un interruttore come campo personalizzato alle tue pubblicazioni, prodotti, eventi, ecc., che ti permette di attivare/disattivare l’opzione appropriata nel blocco del metacampo. Puoi anche usare questo interruttore per impostare una logica condizionale di visualizzazione di un altro metacampo. Per esempio, se questo interruttore non è attivo, non vengono mostrati uno o più metacampi.

Checkbox (Casella di spunta)

Questo tipo ti dà la possibilità di aggiungere caselle di spunta con diverse opzioni. Puoi inserirne una o più e aggiungere queste opzioni manualmente o tramite un glossario che potrai creare dal menu JetEngine > JetEngine > Glossaries. Creare un glossario ti permette di usare lo stesso glossario in diversi metacampi, anche di altri Post Type.

Iconpicker (Selettore di icone)

Questo metacampo include un selettore di icone con cui potrai scegliere un’icona adatta per ogni pubblicazione.

Media (File multimediale)

Questo tipo aiuterà ad aggiungere un file multimediale, in particolare un’immagine, anche se non devi dimenticare che puoi usare anche l’immagine in evidenza per aggiungere un’immagine alla pubblicazione. Puoi anche aggiungere qualsiasi tipo di file che puoi caricare nella libreria media di WordPress (PDF, MP3, MP4, …).

Gallery (Galleria media)

Questo tipo aiuterà ad aggiungere uno o più file multimediali alla pubblicazione, soprattutto immagini, anche se puoi aggiungere qualsiasi tipo di file che puoi caricare nella libreria media di WordPress (PDF, MP3, MP4, …).

Radio

Il tipo radio è perfetto per aggiungere opzioni radio. Si differenzia dalle caselle di spunta perché con i pulsanti radio possiamo selezionare solo una delle opzioni disponibili. Puoi aggiungere le opzioni disponibili manualmente o tramite un glossario che potrai creare dal menu JetEngine > JetEngine > Glossaries. Creare un glossario ti permette di usare lo stesso glossario in diversi metacampi, anche di altri Post Type.

Repeater (Ripetizione)

Questo tipo aiuterà ad aggiungere il blocco di contenuto con un numero di elementi indeterminato: potrai aggiungerne quanti te ne servono. Inoltre puoi selezionare il tipo di metacampo (Text, Date, Time, Datetime, …), e puoi includere più di un metacampo in ogni elemento.

Select (Selettore a tendina)

Usa questo tipo di contenuto per aggiungere un selettore a tendina per la pubblicazione. Nel caso in cui abiliti Permitir para seleccionar múltiples opzioni di valori, potrai selezionare più opzioni contemporaneamente. Questo valore può anche essere mostrato usando la callback specifica per un campo dinamico.

Number (Numero)

Se ti serve un campo che possa essere compilato solo con numeri, questo è perfetto.

Colorpicker (Selettore colore)

Con questo tipo di metacampo potrai selezionare un colore usando la palette colori o digitando il suo codice hex.

Posts (Pubblicazioni)

Questo tipo permette di selezionare una pubblicazione di un altro CPT o persino dello stesso CTP che stai creando.

HTML (Codice HTML)

Puoi aggiungere codice HTML personalizzato a questo metacampo. Sarà utile per inserire codice incorporato come video, audio, documenti, ecc. Questo codice non verrà mostrato nella pagina di modifica delle pubblicazioni: ciò che si vedrà è l’esecuzione del codice stesso; può servirci per aggiungere aiuto all’editor delle pubblicazioni. Questo metacampo in realtà non memorizza nulla: rappresenta solo il codice che inseriamo nella pagina di modifica.

Valori personalizzati nei tipi Checkbox e Radio

ATTENZIONE!
La seguente funzionalità può essere utilizzata per pubblicazioni personalizzate, tassonomie personalizzate e pagina delle opzioni.

Quando scegli i tipi di metacampo Checkbox (Casella di spunta) o Radio, compaiono due opzioni aggiuntive: Allow Custom (Permetti opzioni personalizzate) e Get options from the glossary (Ottieni da un glossario).

Allow Custom (Permetti valori personalizzati)

Questa opzione consente di aggiungere valori personalizzati a questi campi, salvandoli nel database della pubblicazione corrente ma senza salvarli nell’elenco dei valori predefiniti.

Se vuoi che questi valori personalizzati si applichino a tutte le pubblicazioni nel CPT, attiva l’opzione Save Custom (Salva personalizzato) e tutte le pubblicazioni conterranno questo nuovo valore.

ATTENZIONE!
Il metacampo di tipo Radio si configura per analogia con la casella di spunta descritta in precedenza.

Get options from the glossary (Ottieni opzioni da un glossario)

Se attivi questa opzione, ti permetterà di aggiungere le opzioni di un Glossario all’elenco. Potrai specificare il glossario specifico. Per creare un nuovo glossario vai su JetEngine > JetEngine> Glossaries e premi il pulsante +New Glossary (Nuovo glossario).

Save as array (Salva come array)

Quando questa opzione è attiva, i valori selezionati verranno memorizzati come un semplice array PHP. Devi usare questa opzione se andrai a modificare questo campo in un modulo nel front-end. Se non abiliti l’opzione Salva come array, il campo non verrà precompilato nel modulo.

NOTA!
Si consiglia di attivare questa opzione durante la creazione del metacampo. Se compili questo campo nel tuo CPT e poi abiliti l’opzione Save as array (Salva come array), allora il campo verrà reimpostato e dovrai inserire di nuovo i dati.

Altri parametri dei metacampi

Esistono i parametri Description (Descrizione) e Field width (Larghezza del campo), dove puoi aggiungere un testo informativo per l’editor e impostare la larghezza del metacampo.

Puoi specificare il Character limit (limite di caratteri) e impostare un Default value (Valore predefinito) per il campo corrente. Inoltre, è possibile abilitare l’opzione Is required (Obbligatorio) per rendere il campo obbligatorio.

Il campo Conditional logic (Logica condizionale) ti permette di rendere i campi visibili solo se vengono soddisfatte le condizioni.

NOTA!
L’opzione Default value (Valore predefinito) è disponibile solo per i tipi di campo di testo.

Dopo aver aggiunto tutti i metacampi di cui hai bisogno, fai clic sul pulsante Update Post Type (Aggiorna Meta Box) per salvare le modifiche.

Puoi mostrare il contenuto che hai aggiunto nei metacampi personalizzati usando Elementor negli elenchi e nei template.

Creare tassonomie per un Custom Post Type di JetEngine

Nel menu del pannello di amministrazione di WordPress fai clic su JetEngine > Taxonomies (Tassonomie) e poi fai clic sul pulsante Add New (Aggiungi nuova) per continuare e creare una nuova tassonomia. Il processo è molto simile alla creazione di un CPT. Ci sono gli stessi blocchi: General Settings (Impostazioni generali), Labels (Etichette), Advanced Settings (Impostazioni avanzate) e Meta fields (metacampi).

Ricorda che all’inizio di questo argomento ho spiegato cosa sono le Tassonomie e i Termini.

1. General Settings (Impostazioni generali)

In Impostazioni generali ci sono campi come:

• Taxonomie Name (Nome tassonomia): imposta il nome della tassonomia, per esempio Progetti o Portfolio; dipende dal tipo di contenuto per cui si crea questa tassonomia.
• Slug della tassonomia (Taxonomy Slug): viene compilato automaticamente. Lo slug deve essere composto solo da lettere (senza accenti), numeri e ‘-‘ o ‘_’. Per esempio nome_tassonomia.
• Tipo di contenuto: dall’elenco, scegli per quale tipo di contenuto verrà creata questa tassonomia; può essere uno creato da noi o uno già esistente.
• ‘Edit taxonomy/meta box’ link (Link ‘Modifica tassonomia/metabox’): secondo me questa cosa non serve a nulla. Nella scheda Post Type ha una funzione, ma nel caso delle Tassonomie non ho visto che ne abbia una.

2. Labels (Etichette)

La tassonomia è visibile nel pannello di amministrazione di WordPress; il suo nome verrà usato per varie opzioni. Nel blocco Labels (Etichette) puoi tradurre tutte queste etichette. Per esempio, invece dell’opzione Add New Category, puoi cambiarla in Aggiungi nuova categoria. Controlla l’elenco delle etichette e aggiorna la traduzione.

Nell’immagine seguente puoi vedere un esempio di tutte le traduzioni per un tipo di categoria che ho chiamato Genere (pensata per creare generi di film).

3. Advanced Settings (Impostazioni avanzate)

Questo blocco ti permette di configurare la modalità di visualizzazione della tassonomia. Semplicemente decidi se vuoi che sia pubblica o che venga mostrata nel menu di amministrazione, ecc. L’unica opzione da evidenziare è Hierarchical (Gerarchica): se attiviamo questa casella verrà mostrata come vengono mostrate le Categorie negli Articoli; se la lasci disattivata si comporterà come si comportano i Tag negli Articoli.

Ha le stesse opzioni della scheda Post Type che puoi vedere qui.

4. Meta fields (Metacampi)

Usali per mostrare qualsiasi informazione aggiuntiva per la tassonomia, come media, opzioni radio, ripetitori, ecc. Puoi anche personalizzare la larghezza dei campi per far sì che occupino meno spazio e organizzarli uno accanto all’altro.

Funziona esattamente come nei Post Types che puoi vedere qui.

Aggiungere e modificare la tassonomia

Una volta creata la tassonomia, potrai aggiungere e modificare i termini dal menu di WordPress.

Potrai selezionare i termini per una pubblicazione personalizzata nella colonna di destra.

Se sei arrivato fin qui, spero che questo tutorial ti sia stato utile; se è così, sarebbe fantastico se mi lasciassi una valutazione.