La guida essenziale ai campi personalizzati di WordPress

Se c'è una caratteristica di WordPress che lo distingue dagli altri sistemi di gestione dei contenuti (CMS) là fuori, è la personalizzazione. I campi personalizzati in WordPress sono una parte integrata del CMS che ti consente di espandere non solo i metadati e le informazioni che visualizzi, ma anche di modificare completamente la funzionalità e l'utilità di un articolo o di una pagina. Vogliamo aiutarti a capire i fondamenti. Discuteremo cos'è un campo personalizzato, perché sono utili e forniremo alcuni esempi reali di come vengono utilizzati.

Iscriviti al nostro canale Youtube

Cosa sono i campi personalizzati di WordPress?

In breve, i campi personalizzati di WordPress ti offrono un modo per aggiungere elementi specifici alle pagine. Potrebbe essere un tipo specifico di immagine o sottotitolo o biografia dell'autore, forse una valutazione o anche qualcosa di simile, come dice la voce del Codex sui campi personalizzati, umore, lettura in corso, ascolto o caselle meteorologiche.

Questi campi costituiscono i cosiddetti metadati per il tuo post (fondamentalmente tutto ciò che non è incluso nel contenuto principale del tuo articolo). Per impostazione predefinita, WordPress ha meta-box per informazioni generiche, come tag, categorie, permalink, immagini in primo piano, ecc. Se vuoi aggiungerne altre, utilizzerai campi personalizzati.

Potresti anche voler aggiungere informazioni che ciascuno degli scrittori del tuo team deve completare per pubblicare un post.

Puoi creare un campo obbligatorio che non consentirà la pubblicazione del post fino a quando non vengono selezionati determinati criteri. Quindi tieni presente che questi campi personalizzati non sono solo per informazioni sul front-end. Possono essere utili anche per il back-end.

Aggiunta di campi personalizzati a un articolo di WordPress

Per impostazione predefinita, i campi personalizzati di WordPress sono disabilitati nella pagina e nell'editor dei post. Se stai utilizzando l'editor blocchi, è facile abilitarli. Basta fare clic sull'icona a forma di ingranaggio nell'angolo in alto a destra dello schermo. Seleziona Opzioni .

Quindi scegli di abilitare i campi personalizzati nella parte inferiore dello schermo che si apre. Dovrai ricaricare la pagina, quindi assicurati di salvare prima il tuo lavoro.

Dopo aver abilitato e ricaricato, i meta-box dei campi personalizzati appariranno nella parte inferiore dello schermo. Sotto la parte dello schermo dell'editor di contenuti.

Sebbene i campi personalizzati di WordPress siano incredibilmente potenti, quelli predefiniti sono limitati a un valore di testo. Ci vogliono PHP e sviluppo per renderli più robusti. Fortunatamente, ci sono plugin che funzionano per te e ti spiegheremo come farli funzionare. Se tutto ciò di cui hai bisogno è un campo di testo su alcuni post e non vuoi un plug-in, sentiti libero di saltare di seguito sull'aggiunta dei campi personalizzati di WordPress al front-end del tuo tema. Questo vale sia per i campi predefiniti che per quelli generati da plugin come Advanced Custom Fields.

Utilizzo del plug-in per campi personalizzati avanzati

Come con la maggior parte delle cose in WordPress, hai due opzioni per l'implementazione. Puoi modificare manualmente i file PHP per aggiungere funzionalità di campo personalizzato oppure puoi utilizzare un plug-in. In questo caso, consigliamo vivamente di seguire il percorso del plug-in. Se, tuttavia, senti la necessità di modificare il PHP e entrare nel codice, puoi farlo in Aspetto – Editor di temi . Ecco la pagina WP Codex sui campi personalizzati per iniziare. Si collega ai vari tag e hook del modello di cui avrai bisogno per farlo funzionare.

Ma ancora una volta, ti consigliamo vivamente di utilizzare il plug-in Advanced Custom Fields rispetto al codice di tweaking. Il plug-in consente tutto ciò che desideri dai campi personalizzati (e poi alcuni), quindi non sentiamo il bisogno di reinventare la ruota. Quando funziona, funziona. Usalo.

Una volta che ACF è stato installato e attivato, noterai una voce Campi personalizzati nella barra laterale sinistra del pannello di amministrazione di WordPress. Viene fornito con tre opzioni: Gruppi di campi , Aggiungi nuovo e Strumenti .

I gruppi di campi possono essere pensati come insiemi. Tutto ciò che vuoi mostrare nella stessa casella, lo includerai nello stesso gruppo. Aggiungi nuovo ti consente di aggiungere sia un nuovo gruppo che un nuovo campo personalizzato. Mentre Strumenti è dove vai per importare ed esportare diversi set esistenti di campi personalizzati da altri siti WordPress.

Le basi di ACF

La creazione dei campi stessi è piuttosto semplice. Spostati nella finestra Aggiungi nuovo .

In ogni caso, i campi personalizzati ACF verranno inclusi in un gruppo di campi . Questo significa solo i campi specifici contenuti nella stessa casella. Quindi puoi chiamarlo come vuoi che appaia come nell'editor dei post. Ogni volta che desideri aggiungere una singola voce al gruppo, fai clic sul pulsante Aggiungi campo . Fallo ogni volta che vuoi un campo diverso nella stessa meta-box. Le regole di posizione determinano dove e quando apparirà la casella. In questo esempio, poiché il tipo di post è uguale a post , ciò significa che verrà visualizzato solo sui post. Non Pages o altri tipi di post personalizzati.

Successivamente, puoi effettivamente scegliere le Impostazioni per il campo stesso. Cosa farà e la funzione che svolgerà sul sito.

Fondamentalmente scegli il tuo posizionamento (sotto il contenuto del post nell'editor, barra laterale, sopra il contenuto, ecc.), Così come il posizionamento per il testo e i campi stessi. L'area Nascondi sullo schermo è la più interessante. A seconda di come è necessario utilizzare i campi personalizzati, è possibile escludere qualsiasi altra meta-box dalle bozze. Seleziona le condizioni per l'aspetto di questo campo personalizzato, quindi determina quali altre caselle vengono visualizzate con esso, se presenti. Molte volte non ti preoccuperai nemmeno di questo.

Creazione di campi personalizzati con ACF

Dopo aver nominato il tuo gruppo di campi, puoi fare clic sul pulsante Aggiungi campo . Puoi avere un numero qualsiasi di campi all'interno dello stesso gruppo, ma assicurati di mantenerli tutti correlati tra loro. Con ACF puoi creare quasi ogni tipo di campo di immissione che puoi immaginare.

Per questo esempio, supponiamo di eseguire un sito WordPress di cultura pop che guarda i film e desidera che i campi personalizzati mostrino una valutazione, per elencare se il film è in streaming e, in tal caso, dove trovarlo.

Questi sarebbero tutti nello stesso gruppo di campi, ma in campi diversi. Come puoi vedere sopra, Is It Streaming? è impostato per essere un pulsante di opzione con un selettore sì/no richiesto prima della pubblicazione. Inoltre, vogliamo che venga visualizzato un campo condizionale se il campo è contrassegnato come Sì. Questo viene fatto semplicemente premendo di nuovo Aggiungi campo .

Con l'interruttore Logica condizionale abilitato, devi solo selezionare a quale campo è soggetto e quale deve essere il valore. In questo caso, è in streaming? deve essere uguale a Sì.

Nell'editor dei post, la voce dei campi personalizzati sarà simile a questa:

E quando pubblichi il tuo post, i metadati che hai inserito faranno parte del post. Ma c'è ancora un problema. Non puoi vederlo, né i tuoi visitatori.

Come visualizzare i campi personalizzati sul front-end di WordPress

Anche se hai fatto tutto questo perfettamente, i dati che hai inserito non verranno visualizzati sul front-end del tuo sito senza un piccolo ritocco. Dopotutto, dove si presenterebbe? Molte volte, il tuo tema avrà un modo per visualizzare metadati e campi personalizzati, ma questi differiscono tema per tema. Controlla le opzioni del tema per la documentazione.

Un altro modo per visualizzare i campi personalizzati sul front-end sono gli shortcode ACF integrati. Sebbene non sia presente alcun personalizzatore o builder integrato in ACF, puoi utilizzare il seguente shortcode solo per i campi di testo .

Ma poiché è limitato ai campi di testo, potrebbe avere un uso limitato per molte persone. Puoi anche entrare nel PHP e usare il codice ACF, come nei loro esempi di documentazione. Puoi anche eseguire l'aggiornamento ad ACF Pro e ottenere l'accesso al blocco Gutenberg integrato che visualizza il campo personalizzato esattamente come lo stile nel builder.

Ma come abbiamo detto, molti temi sono pieni di integrazione di campi personalizzati in questi giorni e ti mostreremo come viene gestito in Divi.

Come visualizzare i campi personalizzati sul front-end utilizzando Divi

Innanzitutto, ricorda che molti moduli Divi possono eseguire il rendering di shortcode. Tante volte i tuoi campi di testo personalizzati creati in ACF possono essere semplicemente inseriti usando i loro shortcode, come menzionato sopra.

Per il nostro esempio sopra che utilizza la logica condizionale e i pulsanti di opzione, utilizzeremo la funzione di contenuto dinamico di Divi. È anche super facile da usare. Ti mostreremo questo attraverso il Divi Theme Builder, ma puoi usarlo letteralmente in qualsiasi modulo che lo supporti nel normale Divi builder. Fare clic su Nero + e selezionare il modulo desiderato. Per questo, è il modulo di testo .

Quindi, trova la parte del modulo in cui desideri inserire il campo personalizzato. Cerca l'icona del contenuto dinamico sul lato destro di qualsiasi luogo che supporta la funzione.

Fare clic per selezionare dal menu a discesa tutti i tipi di contenuto dinamico disponibili, inclusi tutti i campi personalizzati. Potrebbero essere proprio in fondo.

Divi ti dà la possibilità di aggiungere sostanzialmente le etichette prima/dopo al contenuto del tuo campo. Vogliamo che il nostro si legga naturalmente come parte del post, quindi questo film è disponibile per lo streaming online? verrà posizionato prima del valore quando viene eseguito il rendering del campo. Inoltre, abbiamo aggiunto uno spazio finale alla fine per separare la nostra etichetta dal valore ACF.

Poiché puoi avere solo un contenuto dinamico per area del modulo, ripeti questo processo per altri campi. Nota, tuttavia, che anche se il campo personalizzato è condizionale, il modulo Divi non è . Quindi, se usi un'etichetta prima/dopo su un campo condizionale, vedrai comunque quell'etichetta. Se li lasci vuoti, non verrà visualizzato alcun valore.

Inoltre, l'opzione Enable Raw HTML consentirà il rendering di qualsiasi codice inserito nel campo ACF, come i collegamenti alle varie piattaforme, ecc.

Avvolgendo

Come puoi vedere, nonostante sembri piuttosto complicato, i campi personalizzati di WordPress sono una funzionalità che non richiede uno sviluppatore per avere ragione. Basta installare ACF e iniziare a personalizzare il modo in cui tu e il tuo team inserite le informazioni. Che si tratti di un sito di recensioni, di un mercato di e-commerce o anche solo di un blog amichevole in cui vuoi condividere cosa sta succedendo nella tua vita, essere in grado di modificare e perfezionare i metadati dei tuoi post e delle tue pagine può elevare il tuo sito web a nuovi livelli.

Per cosa utilizzi i campi personalizzati di WordPress?

Immagine in primo piano di SurfsUp / shutterstock.com