Introdotti sin dalla versione 2.9 i Custom Post Type sono una delle funzionalità più interessanti di WordPress. Grazie a questo articolo scoprirai come crearli e visualizzarli senza problemi.
In molti dicono che WordPress è una semplice piattaforma di blogging e non è mio interesse rispondere a questa affermazione in questo articolo (anche perché l’ho già fatto).
È dal 2009, proprio grazie all’introduzione dei Custom Post Type, che WordPress non è più solo una piattaforma di blogging.
I Custom Post Type hanno permesso agli sviluppatori di semplificare l’inserimento di qualsiasi tipo di contenuto all’interno di questo CMS, siano questi libri, clienti o prodotti che vogliamo vendere con il nostro ecommerce.
WordPress ha già una serie di Custom Post Type (CPT per gli amici) con i quali permette la gestione del contenuto. Tra questi troviamo il classico Post così come le Pagine ma in questo articolo non parleremo di questi ma ti spiegherò come creare i tuoi!
Vuoi scoprire gli altri CPT presenti in WordPress?
Se vuoi scoprire tutti i CPT che WordPress mette a disposizione ti consiglio di leggere l’articolo di supporto pubblicato sul sito ufficiale.
Quando e perché usare un Custom Post Type?
Usare i CPT non è l’unico modo per offrire la possibilità di aggiungere del contenuto all’utente finale ma sicuramente è quella che può offrire un’esperienza migliore!
Voglio trattare questo argomento prima di addentrarci nel codice perché è bene che tu sappia fin da ora che i Custom Post Type hanno i suoi pro e contro.
Uno dei più grandi punti a favore dell’utilizzo dei CPT è che grazie a questi elementi possiamo delegare a WordPress gran parte del lavoro sporco.
Infatti, come vedremo a breve, noi sviluppatori non dobbiamo fare altro che utilizzare la funzione register_post_type()
per far gestire a WordPress:
- l’aggiunta delle pagine dedicate alla creazione e gestione di questi contenuti nella bacheca,
- la creazione di una User Interface che permetta all’utente finale di aggiungere i propri contenuti attraverso l’editor WordPress,
- la gestione della creazione e aggiornamento dei contenuti che l’utente finale inserisce al suo interno.
Insomma con l’uso di una semplice funzione deleghiamo a WordPress gran parte del nostro lavoro, ma allora quali sarebbero i contro?
Utilizzando i CPT dobbiamo utilizzare le tabelle wp_posts
e wp_postmeta
.
Per la natura di WordPress queste due tabelle sono molto popolate e alcuni grossi plugin che utilizzano i CPT hanno riscontrato dei rallentamenti.
Un caso eclatante è quello di WooCommerce che sta modificando il proprio codice per utilizzare delle tabelle personalizzate con le quali è in grado di migliorare fino al 30% il caricamento delle pagine.
Come creare il tuo primo CPT
Dopo aver scoperto i principali pro e contro dei Custom Post Type è giunto il momento di scoprire come creare il tuo primo CPT.
Ci sono molti temi venduti online che includono nel functions.php
codice per la creazione di un Custom Post Type ma (come dichiarato nell’handbook di WordPress) non è il luogo adatto per posizionarli, almeno se desideri pubblicare il tuo tema sul repository.
A parte mescolare il codice di presentazione con quello delle funzionalità, il danno più grande che si ha usando temi del genere lo subirebbe l’utente finale che non potrebbe cambiare tema perché così facendo perderebbe il contenuto all’interno dei Custom Post Type.
Per questo motivo in questo articolo ti spiegherò come creare il tuo primo CPT attraverso un plugin.
In questo modo consentirai ai tuoi clienti di cambiare liberamente il tema e tu potrai portare il tuo codice all’interno di altri progetti installando un plugin.
Non sei abbonato!
All’interno di questo articolo è presente un video dettagliato e tutto il codice sorgente che abbiamo trattato reso disponibile esclusivamente agli abbonati di SkillsAndMore. Entra o attiva un abbonamento con il pulsante che trovi qua sotto.
Struttura del plugin
Il plugin che andremo a creare sarà molto semplice ma ho intenzione di estenderlo in futuri articoli quindi per prepararci al futuro la struttura che ritengo migliore sarà la seguente:
mio-primo-cpt.php
– il file principale del plugin dove andremo a creare il nostro Custom Post Type,index.php
– un file che lasceremo intenzionalmente vuoto per impedire il browsing della directory che contiene il nostro plugin,admin/
– una cartella che conterrà tutti i file necessari alla personalizzazione delle view utilizzate dal Custom Post Type,public/
– in questa cartella inseriremo invece il codice che verrà utilizzato nel frontend e visualizzato dai visitatori del sito.
Raccogli questi file all’interno della cartella mio-primo-cpt/
che sarà presente in wp-content/plugins/
dell’installazione WordPress che utilizzeremo per lo sviluppo.
Come ogni plugin che si rispetti è necessario che il suo file principale, nel nostro caso mio-primo-cpt.php
, contenga al suo interno un commento PHP che permette di specificare le informazioni di base:
/** * Plugin Name: Il mio primo CPT */
Queste sono le informazioni minime che sono richieste come header del nostro plugin ma in genere tendiamo ad aggiungere qualche informazione in più.
/** * Plugin Name: Il mio primo CPT * Plugin URI: https://skillsandmore.org * Description: Con questo plugin creo il mio primo Custom Post Type. * Version: 0.0.1 * Author: Andrea Barghigiani * Author URI: https://skillsandmore.org * License: GPL v2 or later * License URI: https://www.gnu.org/licenses/gpl-2.0.html */
Anche se credo tu lo sappia già, queste sono informazioni molto importanti da aggiungere perché verranno mostrate nella bacheca WordPress durante l’installazione e la gestione dei plugin.
Ci sono molte altre informazioni che potremmo aggiungere, come per esempio la versione di WordPress e del PHP richieste ma ti lascio alla documentazione ufficiale per questo perché adesso è giunto il momento di creare il nostro CPT.
La funzione register_post_type()
Come ti ho anticipato nell’introduzione di questo articolo (e dallo stesso titolo di questa sezione) la funzione che ci permette di creare i nostri CPT è register_post_type()
.
Ovviamente non basta scrivere questa funzione in mio-primo-cpt.php
perché WordPress ha un complesso sistema di Hook che ci permette di agganciare le nostre funzioni nel momento più idoneo e inserire funzioni a caso nei nostri file non è la soluzione migliore.
Non conosci ancora gli Hook WordPress?
Tranquillo nessun problema, abbiamo già scritto un articolo dettagliato a riguardo che ti consiglio di leggere tutto d’un fiato.
Come dichiarato nel Codex, il miglior Hook da usare per la funzione che creerà il Custom Post Type è init
, quindi ecco il codice che inseriremo sotto al commento precedente:
/** * Con questa funzione creo il Custom Post Type */ function sam_register_first_cpt() { register_post_type( ... ); }
Ora che hai conosciuto l’hook nel quale agganciare la nostra funzione è necessario comprendere meglio i parametri che vengono accettati, sono solo due ma il secondo può diventare molto complesso a seconda delle nostre necessità.
register_post_type( $post_type_name, $args )
Il primo parametro, $post_type_name
, non è altro che una semplice stringa per impostare un nome unico al nuovo CPT mentre il secondo, $args
, è un array che contiene molte opzioni che personalizzano il comportamento e le funzionalità di un CPT.
Prima di andare a scoprire tutti i dettagli di $args
creiamo la versione più semplice del nostro Custom Post Type:
function sam_register_first_cpt() { register_post_type( 'sam_portfolio', [ 'label' => __( 'Portfolio', 'sam-text'), 'public' => true, ] ); }
Già con questo poco codice abbiamo tutto il necessario per lasciare che WordPress crei per noi l’interfaccia necessaria per aggiungere i nostri contenuti.
Però come puoi vedere tu stesso c’è un piccolo problema, se vogliamo aggiungere un nuovo contenuto all’interno del nostro Custom Post Type WordPress utilizza la voce standard Aggiungi articolo che magari non si adatta nel migliore dei modi alle nostre esigenze.
Ecco quindi che entra in gioco il complesso parametro $args
.
Come personalizzare un CPT con $args
Per mantenere le dimensioni di questo articolo non posso trattare tutte le opzioni dell’array $args
, quindi andrò a trattare le più importanti e utilizzate.
Se sei interessato a scoprirle tutte puoi consultare la pagina del Codex o il nostro corso dedicato ai CPT.
Ecco invece le opzioni più comuni che andremo a utilizzare all’interno di questo articolo:
'labels'
– un array contenente tutte le stringhe del CPT usate all’interno della bacheca,'public'
– un valore booleano che funziona come scorciatoia che consente di impostare in un colpo solo diverse opzioni (exclude_from_search
,publicly_queryable
,show_ui
eshow_in_nav_menus
) che rendono il nostro CPT modificabile in bacheca e visibile,'supports'
– (dalla 5.3) un array che indica il supporto per le funzionalità di base offerte da WordPress per i Post Type di default,'taxonomies'
– un array che indica le tassonomie che il CPT supporta (possono essere anche tassonomie di base come categorie o tag),'show_in_rest'
– valore booleano che ci permette di esporre il CPT nelle REST API di WordPress (fondamentale se vogliamo che l’utente finale crei del contenuto con il nuovo editor).
Adesso che abbiamo elencato le opzioni che andremo a utilizzare, ricordo che non sono tutte, andiamo a vedere come creare l’array di configurazione:
function sam_register_first_cpt() { $args = [ $labels, // Array di stringhe che configureremo a breve 'public' => true, 'supports' => [ 'title', 'editor', 'excerpt', 'thumbnail'], 'taxonomies' => [ 'category' ], 'has_archive' => true, 'show_in_rest' => true, ]; register_post_type( 'sam_portfolio', $args ); }
Ecco qua l’array di configurazione che potrai usare per creare il tuo primo Custom Post Type.
Attento però, il codice non è completo!
Se hai letto con attenzione il codice che ti ho presentato avrai scoperto che al rigo 3 ho richiamato la variabile $labels
che non è stata ancora dichiarata.
Come dichiarato nel commento, $labels
non è altro che un array (associativo) che ci permette di dichiarare una serie di etichette che vengono utilizzate all’interno della bacheca.
Prima di andare a conoscere questo array però conosciamo le opzioni che abbiamo impostato in $args
:
'public'
– come detto prima, questa opzione mi permette di rendere visibile il CPT sia nella bachecha che nel frontend della nostra installazione WordPress,'supports'
– il CPT che stiamo creando avrà il supporto per il titolo ('title'
), l’editor, l’immagine in evidenza ('thumbnail'
) e il riassunto ('excerpt'
),'taxonomies'
– in questo caso ho deciso di aggiungere le classiche categorie che utilizziamo anche per gli articoli (con'categories'
) ma niente ti avrebbe vietato di utilizzare lo slug di una tassonomia custom che andrai a creare conregister_taxonomy()
,'has_archive'
– ho deciso di aggiungere questo parametro per creare un archivio del CPT che ci sarà comodo più avanti,'show_in_rest'
– ho impostato il suo valore atrue
perché così facendo posso permettere al mio utente di utilizzare il nuovo editor WordPress.
Con queste impostazioni abbiamo creato il nostro primo Custom Post Type e detto a WordPress di creare automaticamente nella bacheca la voce menu, la pagina di archivio per i nostri CPT, la pagina dove gestire le categorie (ricorda che sono le stesse dei tuoi articoli) e quella che ci permette di creare del contenuto da salvare al suo interno.
Ecco qua le pagine e i menu che WordPress ha creato per noi:
Ora è giunto il momento di conoscere alcuni dei parametri che ci permetteranno di personalizzare ulteriormente la bacheca dei nostri CPT.
Se hai osservato con attenzione le immagini precedenti ti sarai accorto che ci sono frasi come Aggiungi un nuovo articolo e Nessun articolo trovato che non rispecchiano assolutamente il tipo di contenuto che viene ospitato dal nostro CPT, che nell’esempio è chiamato Portfolio.
All’interno di un Portfolio dovrebbero essere inseriti dei lavori, di certo non degli articoli!
Ecco che l’opzione 'labels'
arriva in nostro soccorso.
Io ho l’abitudine di dichiarare queste etichette come un array associativo separato ma niente ti vieta di dichiararlo all’interno dello stesso $args
.
$labels = [ 'name' => __( 'Portfolio', 'sam-text' ), 'singular_name' => __( 'Lavoro', 'sam-text' ), 'add_new_item' => __( 'Aggiungi lavoro', 'sam-text' ), 'edit_item' => __( 'Modifica lavoro', 'sam-text' ), 'view_item' => __( 'Visualizza lavoro', 'sam-text' ), 'not_found' => __( 'Nessun lavoro trovato', 'sam-text' ), ];
Come successo per le opzioni in $args
anche in questo caso non ho inserito tutte le voci che ci mette a disposizione WordPress per personalizzare la bacheca, puoi consultare il Codex se vuoi approfondire.
Fai visualizzare il CPT nelle pagine del tuo tema
Adesso qualsiasi utente che può creare del contenuto sarà in grado di caricare dei nuovi lavori da inserire nel portfolio ma come faranno i visitatori del sito a scoprire questi contenuti?
Ci sono molti modi per visualizzare i contenuti di un Custom Post Type, primo tra tutti è possibile consultare il loro archivio utilizzando nei link del nostro sito lo slug con il quale lo abbiamo registrato, sempre che l’opzione 'has_archive'
sia stata impostata a true
.
Se per esempio il tuo sito ha il dominio webagency.it
e WordPress è stato configurato per generare i permalink, una volta che le avrai “flushate” tutti i contenuti che inserirai all’interno del portfolio saranno disponibili in webagency.it/sam_portfolio/
.
Lo slug di un Custom Post Type
WordPress ci permette di creare automaticamente un’abbreviazione per i CPT utilizzando la funzione register_post_type()
, grazie al primo parametro che inseriamo.
Ovviamente esistono molti altri modi per visualizzare un CPT.
Puoi creare loop personalizzati, shortcode, sfruttare la gerarchia dei temi e molti altri che andremo a scoprire nel corso dedicato.
Prima di salutarti però voglio anticipare alcuni concetti che troverai nel corso.
Una cosa che non ti ho detto in precedenza è che utilizzando la funzione register_post_type()
WordPress non modificherà soltanto la bacheca per inserire le pagine per la gestione di questo contenuto ma quando i contenuti dei CPT vengono mostrati nel frontend la nostra piattaforma cercherà anche di caricare i file single_<slug_cpt>.php
o archive_<slug_cpt>.php
.
Nel nostro caso i file template che WordPress caricherà sono single_sam_portfolio.php
e archive_sam_portfolio.php
.
Ovviamente se non trovati WordPress seguirà la classica gerarchia e andrà a caricare single.php
e archive.php
ma è utile sapere che possiamo crearli e che grazie a loro potremmo caricare informazioni aggiuntive presenti nei nostri CPT.
Per esempio nel caso dei lavori potremmo creare un meta field per specificare il nome del cliente.
Oltre a questo, nel caso in cui tu debba creare dei loop personalizzati, il parametro che dovrai passare a WP_Query per andare a selezionare il tuo nuovo Custom Post Type è post_type
impostando il suo valore allo slug dello stesso CPT, ecco un esempio:
$args = [ 'post_type' => 'sam_portfolio' ]; $portfolio_loop = new WP_Query( $args );
Conclusioni
Siamo giunti alla fine di questo articolo e anche se adesso sei in grado di creare i tuoi Custom Post Type c’è ancora molto che dovrai scoprire per padroneggiare al meglio le sue funzionalità.
Basta analizzare plugin come WooCommerce per scoprire quanto potenti possono diventare questi elementi.
Possiamo collegare CPT tra loro, fornire strumenti per aggiungere voci nel menu di navigazione, aggiungere meta box per salvare e mostrare dati specifici, limitare l’accesso nella bacheca in base all’utente loggato e molto altro.
Se sei curioso di conoscere come poter fare tutto questo scopri il corso dedicato alla creazione e gestione dei Custom Post Type, non avrai niente di cui pentirti!
Alessandro dice
Ciao, ho seguito tutto passo passo ma non mi funziona, non riesco a vedere il nuovo blocco… 🙁 mi aiuti?
Andrea Barghigiani dice
Forse un pò in ritardo, ma ti invio comunque una mail per sapere se hai ancora bisogno!
Mirco dice
Anche a me non funziona
Andrea Barghigiani dice
Cavoli Mirco,
scusa dell’assenza nella risposta ma il tuo commento proprio non l’avevo visto. Come ho risposto precedentemente ad Alessandra, che cosa intendete per “non funziona”?
Ho fatto adesso le prove e nel mio backend tutto funziona correttamente…
Alessandra dice
non funziona
Andrea Barghigiani dice
Ciao Alessandra,
io ho provato adesso a fare copia/incolla dei codici presenti nell’articolo e a me funziona tutto perfettamente. La sezione Portfolio viene creata nel mio backend, i dati per il cliente sn presenti e vengono salvati quindi non riesco a capire a cosa tu faccia riferimento…
Abbi pazienza ma con un commento come “non funziona” non ho molti punti di riferimento per darti una mano, se provi ad essere più specifica sn più che contento di darti una mano.
Alessio dice
Ciao Andrea, ottimo articolo era proprio ciò di cui avevo bisogno.. Non c’è la continuazione dell’articolo vero?
Volevo sapere per mostrare i lavori nel front end il modo migliore quale può essere? Loop personalizzato? Con wp_query? In una pagina custom questo è ovvio..grazie
Andrea Barghigiani dice
Ciao Alessio, mi fa piacere che tu abbia trovato utile questo articolo. Ti devo confessare che per molto tempo non era presente il seguito di questo articolo ma Lunedì pubblicherò appunto l’articolo che spiega come creare sie le singole pagine che come andare a creare un loop personalizzato.
Se te lo stai chiedendo, io preferisco usare le WP_Query che trovo molto più semplici da configurare e da usare, in fin dei conti è una classe che viene usata dagli stessi sviluppatori WordPress 😀