WordPress è la piattaforma che permette di gestire diversi contenuti. Come abbiamo già visto negli articoli che trattano questo software, è possibile gestire articoli di un blog, landing pages per la vendita di servizi fino a gestire un e-commerce. Mediante diversi plugin possiamo aggiungere le funzionalità che il nostro sito dovrà avere.
Poiché WordPress è nato per la creazione di blog, il suo sistema si basa su poche tabelle che gestiscono il contenuto dei posts e le varie opzioni. Per integrare nuove funzionalità senza stravolgere la struttura del database di partenza si sono aggiunti i custom field (o campi personalizzati). Questi campi permettono di salvare informazioni aggiuntive legate agli oggetti gestiti da WordPress (post, pagine e media). Vi ricordo infatti che anche un prodotto di un e-commerce viene “visto” da WordPress come un post!
In questo articolo vedremo come crearli in modo semplice e veloce e infine come integrarli all’interno del nostro plugin.
Perché i campi personalizzati sono utili?
Prima di vedere come utilizzarli dobbiamo capire l’importanza di questi campi.
La maggior parte dei plugin utilizzano i campi personalizzati per tracciare le informazioni che sono alla base del loro funzionamento. Ad esempio, Woocommerce sfrutta questi campi per salvare le caratteristiche del prodotto quali colore, peso e le informazioni per gestire la vendita come il prezzo e il numero di prodotti disponibili.
Quindi, il loro utilizzo permette di strutturare le informazioni che vogliamo tracciare. La loro gestione, inserimento e aggiornamento, diventa semplice e coerente. In questo modo tutti gli oggetti avranno la possibilità di avere associate queste informazioni che poi potranno essere visualizzate nei template.
Come inserire campi personalizzati in WordPress?
Diversamente a quanto abbiamo visto in altri articoli, la gestione dei campi personalizzati non necessariamente richiede conoscenze di programmazione. In questo articolo tratteremo la funzionalità base di WordPress e l’utilizzo del plugin Advanced Custom Fields. Infine, vedremo come integrare quest’ultimo nel nostro plugin.
Partiamo dalla funzionalità di base di WordPress. Per abilitare l’inserimento di campi personalizzati è sufficiente selezionare la voce corrispondente nel menù delle Opzioni del nuovo edito a blocchi.
Una volta abilitato comparirà sotto il contenuto dell’articolo un editor per aggiungere i campi personalizzati.
Come si può notare la loro gestione è una semplice associazione chiave valore. Non c’è la possibilità di gestire in modo opportuno le tipologie di valori che possono essere salvate. Richiede pertanto una certa accuratezza da parte di colui che inserirà i dati. Per questo motivo, e non solo, molti utilizzano il plugin Advanced Custom Fields. Scopriamo le sue caratteristiche per capire il segreto del suo successo.
Il plugin Advanced Custom Fields
Per prima cosa specifichiamo che questo plugin è del tipo fremium. Ciò significa che esiste una versione gratuita ed una a pagamento. Noi utilizzeremo la versione gratuita in questo tutorial perché è più che sufficiente. La versione a pagamento offre funzionalità in più orientate a chi deve sviluppare siti complessi.
La versione a pagamento permette oltre alle funzionalità di base:
- la ripetizione dei campi
- la creazione di blocchi basati sui campi personalizzati da integrare nei template
- la personalizzazione della visualizzazione dei campi
- la gestione delle gallerie di immagini
- la clonazione dei campi
Potete trovare i prezzi qui. Attualmente i prezzi partono da un costo di 49 $ all’anno per un singolo sito fino a 249 $ all’anno per le web agencies.
Ma perché dovremmo utilizzare questo plugin rispetto alla versione base fornita da WordPress?La risposta è semplice: questo plugin semplifica l’interfaccia per l’aggiunta e la gestione di campi personalizzati nella dashboard di WordPress, ma anche la visualizzazione delle informazioni dai campi personalizzati nel frontend.
La sua utilità, e di conseguenza il suo successo, si può constatare con una valutazione media di 4,9 stelle su 5 derivante da oltre 1000 recensioni e più di 1 milione di installazioni attive. Vediamo come utilizzarlo su un caso reale.
Il nostro caso di studio è la gestione di un blog di viaggi. Vogliamo creare alcuni campi per tracciare alcune informazioni da condividere negli articoli.
I dati che vogliamo salvare sono i seguenti:
- Destinazione: il luogo visitato.
- Scopo: supponiamo di avere due diversi tipi di viaggio: “lavoro” e “divertimento”.
- Data di inizio: quando siete partiti.
- Data di fine: quando siete rientrati dal viaggio.
- Numero di viaggiatori: quante persone che sono partite con noi.
In questo tutorial inseriremo quindi 5 campi personalizzati mediante questo plugin. Seguendo i passi mostrati in questo esempio sarete in grado di repricarli nei vostri siti. Vedremo quindi come creare i campi e come inserirli nel frontend. Ma non ci fermerò qui. Vedremo anche come integrarli nel nostro plugin che abbiamo sviluppato negli articoli Sviluppare un plugin WordPress – creare la struttura iniziale e Creare una pagina di settings per un plugin WordPress.
Aggiungere un gruppo di campi personalizzati
Una volta installato e attivato il plugin selezionate Custom Fields > Field Groups nel menù laterale. Per aggiungere un nuovo gruppo cliccate su Add New. I campi che apparterranno a questo gruppo verrano visualizzati insieme nella dashboard di WordPress.
Nel nostro esempio creeremo un solo gruppo contente i 5 capi descritti in precedenza. Assegnamo il nome Travel details al gruppo. Nella sezione Location definiamo dove questo gruppo verrà visualizzato. Potete decidere di visualizzarlo solo nelle pagine relative agli elementi di tipo post e/o articoli. Se avete installato Woocommerce potete associarli anche ai prodotti, agli ordini e/o ai coupon. Nel nostro esempio lo visualizzeremo solamente nei posts.
Nella sezione dei Settings potete invece decidere le opzioni di visualizzazione. Nell’esempio lasciamo quelli di default, ma potete giocare con le impostazioni per migliorare la user experience della vostra dashboard.
Aggiungere i campi personalizzati
Una volta impostate le opzioni del gruppo possiamo aggiungere i campi di nostro interesse cliccando sul pulsante + Add Field. Comparirà un form con diversi campi. Nella figura qui sotto vedete il form compilato per il campo Destinazione (Location).
Il campo delle destinazione è solo testo quindi molto semplice. Vediamo un esempio di un campo più articolato come quello dello Scopo del viaggio. In questo caso vogliamo che ci siano solo 2 opzioni disponibili e che l’utente non possa inserire dei valori arbitrari. Avremo quindi bisogno di un radio button per la lista delle opzioni disponibili.
Selezioniamo nel campo Field Type la voce Choice > Radio Button. La scheda del campo cambierà rispetto a quella precedente permettendoci di inserire le scelte disponibili. Potremo anche impostare, ad esempio, il layout, se il campo è obbligatorio e il valore di default.
La scheda del campo cambia in base alla tipologia di dato che si vuole tracciare. Ad esempio per il campo data possiamo scegliere il formato di visualizzazione e quello ritornato, oltre al giorno in cui la settimana inizia.
Diversamente se inseriamo un campo di tipo numerico potremo definire il valore minimo e massimo e gli incrementi possibili.
Ripetendo la procedura per ciascun campo del nostro esempio la situazione finale sarà quella riportata qui sotto. Potete notare che i campi obbligatori sono contrassegnati dal simbolo * in rosso.
Logica condizionale
Una funzionalità molto utile fornita da questa plugin è la possibilità di visualizzare un campo se avvengono determinate condizioni.
Tornando al nostro esempio, pensate di voler salvare il numero di viaggiatori se e solo se il viaggio non era per lavoro. Basterà pertanto selezionare il bottone Conditional Logic per far apparire una sezione per definire le condizioni di visualizzazione.
Inseriremo una condizione che se il valore del campo Purpose è diverso da Business allora il campo verrà visualizzato.
Visualizzazione dei campi personalizzati nel frontend
A questo punto abbiamo definito i campi che servono per il nostro sito. La domanda che sorge spontanea è la seguente: Come faccio a visualizzarli nelle mie pagine?
Infatti se provate a scrivere un post ed inserite tutti i campi, questi non verranno mostrati da nessuna parte ad eccezione della dashboard di WordPress.
Esistono principalmente 3 alternative per risolvere questo aspetto.
- Aggiornare il template del vostro tema
- Utilizzare uno shortcode
- Usare Elementor Pro
La prima opzione richiede conoscenze tecniche ed è più invasiva. Dovete infatti intervenire nei file php del vostro tema. C’è il rischio concreto di inserire errori che potrebbero inficiare sul rendering e sul funzionamento del sito. Inoltre, dovete stare attenti durante gli aggiornamenti del tema. Infatti se non create un tema figlio potreste perdere le vostre modifiche durante l’installazione della nuova versione del tema. Infine, se per qualche motivo volete cambiare il tema, dovreste ripetere tutto il lavoro fatto.
La seconda opzione è semplicissima e, a mio avviso, molto conveniente se volete semplicemente inserire i dati dei campi personalizzati volta per volta. Tuttavia, richiede molto più lavoro perché dovrete ricordarvi di aggiungere gli shortcodes in ogni post. Gli shortcodes vengono forniti direttamente dal plugin e possono essere richiamati all’interno delle vostre pagine semplicemente con la seguente sintassi
[acf field="FIELD_NAME"] L’ultima opzione permette di non lavorare con il php ma solamente con i template di Elementor Pro. Purtroppo sarete vincolati ad usare Elementor come editor per il vostro sito e pagare la licenza.
Integrazione degli Advanced Custom Field in un plugin
Come abbiamo visto, questo plugin gestisce molto bene i campi personalizzati che possiamo associare a qualsiasi risorsa del nostro sito. Il loro utilizzo però non è solo limitato al salvataggio di alcune dati in maniera strutturata e alla loro visualizzazione. Possiamo, infatti, utilizzarli anche nei nostri plugin per aggiungere, ad esempio delle caratteristiche ai prodotti di un sito di e-commerce o informazioni ai nostri post. In base a questi dati, che saranno forniti dall’utente, il nostro plugin effettuerà delle operazioni. Vediamo come integrarlo!
Per includere Advanced Custom Field nel nostro plugin, bisogna scaricare lo zip contente il codice sorgente. Ti consigliamo di estrarre lo zip nella cartella includes e chiamarla acf.
A questo punto bisogna inserire il seguente codice nel file principale del plugin. Riprendendo la struttura descritta nell’articolo Sviluppare un plugin WordPress – creare la struttura iniziale, andremo ad inserire queste linee di codice nel file flowygo.php.
// Define path and URL to the ACF plugin.
define( 'MY_ACF_PATH', get_stylesheet_directory() . '/includes/acf/' );
define( 'MY_ACF_URL', get_stylesheet_directory_uri() . '/includes/acf/' );
// Include the ACF plugin.
include_once( MY_ACF_PATH . 'acf.php' );
// Customize the url setting to fix incorrect asset URLs.
add_filter('acf/settings/url', 'my_acf_settings_url');
function my_acf_settings_url( $url ) {
return MY_ACF_URL;
}
// (Optional) Hide the ACF admin menu item.
add_filter('acf/settings/show_admin', 'my_acf_settings_show_admin');
function my_acf_settings_show_admin( $show_admin ) {
return false;
} Per visualizzare la parte di amministrazione dei campi personalizzati basta modificare la funzione my_acf_settings_show_admin ritornando il valore true.
Per includere i campi che abbiamo generato precedentemente possiamo utilizzare i tools di esportazione che il plugin Advanced Custom Fields mette a disposizione. Andando nella sezione Tools possiamo esportare un file json o direttamente il codice php che li genera.
Se scegliamo l’opzione generazione php possiamo copiare il codice direttamente in una funzione che andremo ad inserire nel file class-flowygo-admin.php. Chiameremo questa funzione flowygo_acf_add_local_field_groups.
Per attivarli sarà necessario richiamare l’azione init di acf nellla funzione define_admin_hooks definita all’interno del file class-flowygo.php nella cartella admin. Il codice da inserire è il seguente.
$this->loader->add_action( 'acf/init', $plugin_admin, 'flowygo_acf_add_local_field_groups'); In questo modo all’attivazione del plugin verrà aggiunti i campi personalizzati in base alle regole definite. Potremo, ad esempio, recuperare i campi associati a un post semplicemente usando la funzione get_post_meta di WordPress. In base al loro valore la logica del nostro plugin effettuerà determinate operazioni.
