Guida introduttiva ai campi personalizzati di WordPress

I campi personalizzati di WordPress sono una funzionalità davvero eccezionale che viene spesso trascurata. Ti consentono di aggiungere "metadati" a un'area della tua pagina o post che viene ripetuta su tutte le pagine o post. Questo può farti risparmiare un sacco di tempo se hai un sito Web in cui desideri pubblicare lo stesso tipo di informazioni su più pagine.

Ad esempio, dai un'occhiata a un normale post di blog sul tuo sito Web WordPress. Le probabilità sono che, da qualche parte nella pagina, vedrai il nome dell'autore e una data che mostra quando l'articolo è stato pubblicato. Questi sono metadati e appariranno su ogni post sul tuo sito web.

Quindi, come puoi aggiungere i tuoi metadati ai tuoi post o alle tue pagine? Facile... usando un campo personalizzato di WordPress!

Ovviamente puoi aggiungere queste informazioni in ogni post manualmente tramite l'editor di pagine/post, ma questo richiede tempo e in genere richiede un'attenta formattazione se vuoi assicurarti che tutti i post abbiano lo stesso aspetto. Se pubblichi molti contenuti, può diventare noioso doverlo fare ogni volta.

Gli editor di pagine e post di WordPress offrono molte funzionalità e flessibilità immediatamente quando si tratta del contenuto principale che appare su una pagina o un post. Ma lo sapevi che WordPress fornisce anche agli utenti un modo per aggiungere contenuti che si trovano "fuori" dal post principale o dal contenuto della pagina? In questo articolo accelereremo come utilizzare i campi personalizzati di WordPress che ti aiuteranno a organizzare meglio i tuoi post e anche ad aggiungere informazioni utili per i tuoi lettori in un formato accattivante.

Iniziamo!

Cosa sono i campi e i metadati personalizzati?

Contenuti come post, pagine, utenti, commenti e tipi di post personalizzati includono metadati archiviati nel database sotto la tabella postmeta in una coppia chiave/valore.

Le informazioni che di solito vedi sotto un post o il titolo di una pagina come il nome dell'amministratore, la data o il contatore dei commenti sono incluse nei metadati del post.

Il campo personalizzato è un campo aggiuntivo in cui puoi aggiungere ulteriori informazioni per il tuo post e fa anche parte dei metadati del post.

I campi personalizzati si applicano a pagine, post o tipi di post personalizzati e sono costituiti anche da coppie chiave/valore. La chiave è il "nome" dell'elemento dei metadati e il valore sono i dati associati alla chiave e possono differire per ogni post.

In WordPress, puoi aggiungere campi personalizzati utilizzando la funzione di campo personalizzato integrata oppure puoi fare un ulteriore passo avanti utilizzando un plug-in di campo personalizzato che migliorerà ulteriormente il controllo disponibile su un campo personalizzato. Vedremo entrambe le opzioni in questo articolo.

Aggiungi campi personalizzati utilizzando i campi personalizzati di WordPress

Le impostazioni integrate dei campi personalizzati di WordPress sono nascoste per impostazione predefinita, il che spiega perché potresti non essere a conoscenza dell'esistenza di questa funzione. Per usarlo dovremo prima abilitarlo.

Se stai usando l'editor di WordPress classico (cioè non Gutenberg), apri un nuovo post e vai all'inizio di questo post. Vedrai una casella sul lato destro che dice "Opzioni schermo". Fare clic su questo e apparirà un menu a discesa con le caselle di controllo. In questo dovresti vederne uno che dice "Campi personalizzati". Spunta questo per abilitarli.

Se stai usando Gutenberg, fai clic sull'icona "tre punti" che appare in alto a destra in un post. Apparirà un menu e nella parte inferiore di questo menu dovrebbe dire "Opzioni". Fare clic su questo e apparirà un nuovo menu a comparsa con caselle di controllo. In questo elenco dovresti vederne uno che dice "Campi personalizzati". Spunta questa casella e poi chiudi il menu a comparsa.

Passaggi successivi: aggiungere i campi personalizzati

Aggiungere i tuoi campi personalizzati è in realtà abbastanza semplice. Dopo averli abilitati come descritto sopra, vai in fondo al tuo post e dovresti vedere una nuova sezione chiamata (hai indovinato) "Campi personalizzati".

Vedrai due caselle nella sezione Campi personalizzati, "Nome" e "Valore". Il campo Nome ha alcune impostazioni predefinite precompilate che si riferiscono a campi esistenti che sono stati aggiunti al tuo sito Web WordPress. Nel nostro caso, vogliamo aggiungere il nostro nuovo campo. Per fare ciò, fai clic sul testo "Inserisci nuovo" che si trova sotto il campo Nome.

Ospita il tuo sito web con Pressidium

GARANZIA DI RIMBORSO DI 60 GIORNI

GUARDA I NOSTRI PIANI

In questo esempio, vogliamo creare un collegamento a un sito Web esterno che è stato utilizzato come fonte per un articolo che abbiamo scritto. Chiameremo questo campo 'Sorgente'. Fai clic sul testo "Inserisci nuovo" e quindi digita "Sorgente" seguito da un URL a un sito Web di tua scelta nella sezione Valore. Questo sarà simile a questo:

La prossima volta non sarà necessario fare clic sul testo "Inserisci nuovo" e digitare manualmente "Sorgente. Ora apparirà nell'elenco a discesa dei valori.

Se hai accesso al tuo database (es: tramite phpMyAdmin) puoi aprire la tabella postmeta, filtrare la tabella in base al post id che hai modificato e dovresti vedere il nuovo campo personalizzato con il suo valore.

Ora che abbiamo confermato che il campo personalizzato è archiviato correttamente per il post, vediamo come possiamo visualizzarlo sul front-end del nostro post dove i visitatori del nostro sito Web potranno vederlo!

Visualizzazione dei valori dei campi personalizzati

Per visualizzare il nostro nuovo valore del campo personalizzato sul nostro post, dobbiamo aggiungere del codice al nostro file modello di post singolo. Di solito, questo può essere trovato nel file singular.php che si trova nella cartella principale del tema. Nel nostro caso (tema Twenty Twenty) si trova nel file /wp-content/themes/twentytwenty/template-parts/content.php .

Utilizzeremo la funzione principale get_post_meta da WordPress per recuperare il meta campo di un post dal database. La struttura della funzione è la seguente:

 get_post_meta( $post_id, $key, $single )

L'unico argomento richiesto è $post_id . L'argomento $key è la meta chiave da recuperare e l'argomento $single definisce se viene restituito un singolo valore ed è inutile se la $key non è affatto definita.

Se viene dichiarato solo $post_id , il risultato sarà un array con tutte le chiavi relative al particolare post. Quindi, se inserisci semplicemente get_post_meta( $post_id ) otterrai qualcosa del genere:

 Array ( [field1_key] => Array ( [0] => value1 ) [field2_key] => Array ( [0] => value2 ) [field3_key] => Array ( [0] => value3 ) )

Se usi get_post_meta( $post_id, 'filed1_key' ) otterrai qualcosa come Array ( [0] => value1 ) e se usi get_post_meta( $post_id, 'filed1_key', true ) come facevamo prima otterrai solo value1 .

Inoltre, in alcuni post potresti non voler definire il campo sorgente, quindi dobbiamo includere nel codice un controllo per vedere se il campo esiste per il post.

Quindi, con tutto questo in mente, il codice che dobbiamo usare sarebbe il seguente:

 $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?>

Inseriamo il codice subito dopo il contenuto del post in modo che all'interno del div HTML con la classe “entry-content”, il codice assomiglierà a questo:

 <div class="entry-content"> <?php if ( is_search() || ! is_singular() && 'summary' === get_theme_mod( 'blog_content', 'full' ) ) { the_excerpt(); } else { the_content( __( 'Continue reading', 'twentytwenty' ) ); } $source = get_post_meta( get_the_ID(), 'source', true); if( !empty( $source ) ) { echo '<h3>Source: ' . $source . '<h3>'; } ?> </div><!-- .entry-content -->

Ora vediamo cosa abbiamo ottenuto aprendo un nuovo post e dando un'occhiata a come apparirebbe questo contenuto sul front-end.

Ti ricordiamo che se hai difficoltà a localizzare il file template corrispondente alla tua visualizzazione del singolo post, puoi consultare il diagramma della gerarchia dei template di WordPress.

Chiaramente ci sarà del lavoro da fare per dare uno stile a questo output. Questo va oltre lo scopo di questo articolo, ma tratteremo qualcosa in un post futuro.

Aggiunta di campi personalizzati utilizzando un plug-in

Il plug-in Advanced Custom Fields è uno dei migliori plug-in disponibili che ti consente di aggiungere rapidamente campi personalizzati al tuo sito Web WordPress e fornisce un ulteriore controllo dei dati dei campi personalizzati. Usando il suo builder puoi facilmente creare campi personalizzati che possono quindi essere aggiunti ai tuoi post, utenti, tassonomie, media, commenti e persino pagine di opzioni personalizzate.

Crea i tuoi campi personalizzati utilizzando ACF

Dopo aver installato e attivato il plug-in ACF, vai su "Campi personalizzati > Gruppi di campi" dove vengono visualizzati i campi registrati.

Premi il pulsante "Aggiungi nuovo" per iniziare a creare i tuoi campi. Questi possono quindi essere aggiunti anche in gruppi.

Ci sono un sacco di opzioni fornite per te che miglioreranno il comportamento dei tuoi campi personalizzati. Oltre alla configurazione di base che include l'etichetta e il nome del campo, puoi anche definire il tipo di campo, definire se il campo è obbligatorio, modificare il valore predefinito, il testo segnaposto e ovviamente scegliere i tipi di post in cui verrà incluso usando l'argomento logico.

Inoltre, sono disponibili altre impostazioni che ti consentono di modificare l'aspetto del campo (super utile) e un elenco di caselle di controllo per definire cosa dovrebbe essere nascosto nelle schermate di modifica corrispondenti.

Fantastico, vero?

Inoltre, nel menu Strumenti ACF puoi esportare o importare gruppi di campi in un formato JSON per velocizzare le cose se questi sono già stati creati altrove.

Un esempio funzionante utilizzando i campi personalizzati avanzati

Diciamo che abbiamo creato un tipo di post personalizzato chiamato "Libri" e vorremmo aggiungere alcuni campi personalizzati su ciascun post del libro come Genere, Autore del libro e Anno di pubblicazione. La prima cosa che dovremmo fare è creare il gruppo di campi e i campi che li contengono in questo modo:

Come puoi vedere non tutti i campi usano lo stesso tipo.

• Il campo Autore è un semplice campo di testo in cui inseriremo il nome completo dell'autore.
• Il campo Genere è un campo di selezione e deve accettare più valori. Un libro può essere correlato a più di un genere.
• Le scelte predefinite per il genere vanno inserite nella casella Scelte ognuna in una propria riga.

Il campo di copertura dovrebbe essere un campo di selezione a valore singolo con anche le scelte predefinite.

Ora andiamo a modificare un post del libro. I campi appariranno ben raggruppati nella barra laterale.

Se desideri modificare la posizione del gruppo di campi, vai alle impostazioni corrispondenti:

Compila i campi e alcuni contenuti di prova per l'articolo e aggiorna il post. A questo punto se visiti la vista frontale del Book Post noterai che ancora non viene visualizzato nulla riguardo ai nostri campi personalizzati.

Visualizza i tuoi campi personalizzati ACF

Puoi facilmente mostrare i campi personalizzati nel modello del tuo tema utilizzando le funzioni amichevoli fornite dal plug-in ACF. Due di questi sono:

• get_field() – Restituisce il valore di un campo specifico.
• the_field() – Visualizza il valore di un campo specifico.

Queste sono le funzioni più comunemente utilizzate con il plugin ACF. Se vuoi vedere l'elenco completo delle funzioni del plugin puoi visitare la documentazione ufficiale per saperne di più.

Quindi, per generare il tuo campo personalizzato nel modello di visualizzazione post, dovrai aggiungere del codice proprio come abbiamo fatto quando abbiamo utilizzato i campi personalizzati di WordPress predefiniti. Invece, questa volta utilizzeremo le funzioni del plugin ACF. Dato che stiamo usando il tema Twenty Twenty, dobbiamo modificare il file content.php nella cartella twentytwenty/template-parts/ . Subito dopo la chiusura della sezione interna abbiamo aggiunto le seguenti righe:

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . get_field( 'genre' ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Nella vista frontale ora possiamo vedere i campi personalizzati.

Tuttavia il campo del genere non viene visualizzato correttamente. Questo perché contiene più valori, quindi la funzione get_field restituisce un array. Per risolvere questo problema, dovremo convertire l'array in una serie dei suoi valori. Questo è facile in PHP usando la funzione implode() .

 <div class="entry-content"> <?php if( get_field( 'author' ) ) { echo '<p><b>Author:</b> ' . get_field( 'author' ) . '<p>'; } if( get_field( 'genre' ) ) { echo '<p><b>Genre:</b> ' . implode( ", ", get_field( 'genre' ) ) . '<p>'; } if( get_field( 'cover' ) ) { echo '<p><b>Cover:</b> ' . get_field( 'cover' ) . '<p>'; } ?> </div>

Se desideri visualizzare selettivamente alcuni campi ma non tutti in determinati post, puoi farlo utilizzando alcuni shortcode ACF. Per fare ciò, apri il tuo post e quindi aggiungi un blocco Gutenberg shortcode per ogni campo e inserisci uno shortcode come questo:

 [acf field="MY_CUSTOM_FIELD"/]

Sostituisci MY_CUSTOM_FIELD con il nome del campo e dovrebbe funzionare perfettamente.

Come possiamo vedere, l'utilizzo del plug-in Advanced Custom Fields ci offre una fantastica flessibilità per creare campi personalizzati e visualizzarli dove vogliamo.

Conclusione

La funzione Campi personalizzati in WordPress è utilizzata dagli sviluppatori di tutto il settore per fornire una migliore struttura e leggibilità ai loro siti web. È un'altra straordinaria funzione di WordPress che ancora una volta aiuta a spiegare perché WordPress è così popolare. Speriamo che questo articolo ti abbia fornito le informazioni necessarie per aggiungere i tuoi campi personalizzati al tuo sito web. Buon sviluppo!

Guarda anche

Tabelle dell'elenco degli amministratori di WordPress: aggiungi filtri personalizzati
Aggiunta di campi personalizzati alle voci di menu di WordPress