Come utilizzare i campi ACF per determinare la visibilità del contenuto

Pubblicato: 2022-04-20

I campi ACF possono essere aggiunti al tuo sito web con l'aiuto del plug-in Advanced Custom Fields (ACF). La visibilità dei contenuti, d'altra parte, può essere applicata con l'aiuto del plugin Visibility Logic For Elementor. Questi due plugin possono effettivamente lavorare di pari passo per implementare la visibilità dei contenuti. È tuttavia importante notare che il plug-in Visibility Logic deve essere utilizzato insieme al plug-in Elementor e quindi è necessario installare anche il plug-in Elementor. Per ampliare l'ambito in cui è possibile applicare le impostazioni di visibilità, si consiglia di installare anche il plug-in Visibility Logic Pro.

In questo articolo, esamineremo un esempio di come implementare la visibilità dei contenuti utilizzando i campi ACF aggiungendo un campo personalizzato ai post e applicando le impostazioni in un unico modello di post.

Questo articolo presuppone che tu abbia già installato il plug-in Visibility Logic (gratuito e professionale), nonché il plug-in Elementor.

Sommario

Installazione del plug-in ACF

Impostazione di un campo personalizzato per un post

  • Aggiunta di un campo personalizzato
  • Visualizzazione e aggiunta di contenuto al campo personalizzato

Creazione di un modello di post singolo

Configurazione delle impostazioni di visibilità

Anteprima del post

Conclusione

Installazione del plug-in ACF

Per installare il plug-in ACF, vai alla sezione Plugin > Aggiungi nuovo all'interno della dashboard di WordPress e cerca "Campi personalizzati avanzati".

Quindi, installa e attiva il plug-in Advanced Custom Fields di Delicious Brains.

Impostazione di un campo personalizzato per un post

Aggiunta di un campo personalizzato

Dopo l'attivazione del plug-in, vai alla sezione Campi personalizzati > Aggiungi nuovo all'interno della dashboard di WordPress.

Nella schermata successiva ti verrà presentato un numero di campi dati personalizzati da compilare come mostrato di seguito:

All'interno di "Aggiungi nuovo gruppo di campi", qui puoi compilare il titolo del gruppo di campi desiderato. Nel nostro caso qui, lo avremo come "Contenuto post aggiuntivo".

Quindi, fai clic su "Aggiungi campo" per iniziare ad aggiungere il tuo primo campo.

In questo modo verrà generata una sezione del campo in cui ora compilerai i dettagli del tuo campo.

Etichetta campo: compilare la dicitura da utilizzare per identificare il campo. Nel nostro caso qui, l'abbiamo impostato su "conclusione".

Campo: Nome Questo campo verrà compilato automaticamente dopo aver aggiunto l'etichetta del campo.

Tipo di campo: imposta il tipo di campo che desideri avere per il tuo campo personalizzato. Nel nostro caso, questo è impostato su "Area di testo".

Istruzioni: qui puoi impostare alcuni contenuti guida che gli autori del post vedranno quando invieranno i dati del campo.

Richiesto: impostalo su sì o no in base al fatto che questo campo sia sempre compilato o meno. Nel nostro caso, imposteremo questo su "No".

Valore predefinito: all'interno di questo campo è possibile impostare un valore preesistente che appare durante la creazione del post. Questo è facoltativo e quindi nel nostro caso qui lo abbiamo lasciato vuoto.

Testo segnaposto: qui puoi specificare il testo che viene visualizzato all'interno del campo di input.

Limite caratteri: qui puoi specificare il conteggio massimo f caratteri che il campo può contenere. Nel nostro caso, lo lasceremo vuoto poiché non intendiamo aggiungere alcuna limitazione di carattere.

Righe e nuove righe: la disponibilità di questi campi si basa sul tipo di campo selezionato. Ad esempio, nel nostro caso, abbiamo selezionato "area di testo", motivo per cui i campi vengono visualizzati. Al loro interno è possibile impostare il numero di righe che conterrà l'area di testo e la formattazione da applicare nelle nuove righe.

Logica condizionale: qui puoi scegliere di impostare una logica di visualizzazione per il campo o meno. Nel nostro caso qui, non imposteremo alcuna logica di visualizzazione.

Attributi del wrapper: questo campo consente di aggiungere la larghezza al wrapper del campo. Nel nostro caso lo impostiamo al 50%. Puoi anche aggiungere la classe e l'ID al wrapper, per scopi CSS. L'aggiunta di questi è comunque facoltativa.

Quindi, all'interno del segmento di posizione, imposta una regola su dove deve apparire il gruppo di campi. Nel nostro caso, imposteremo questo sul tipo di post post.

All'interno del segmento "Impostazioni", assicurati di avere il gruppo di campi come "attivo". Puoi lasciare il resto delle impostazioni all'interno del segmento alle impostazioni predefinite o modificarle in base alle tue preferenze.

Una volta eseguito quanto sopra, puoi quindi pubblicare il gruppo di campi.

Visualizzazione e aggiunta di contenuto al campo personalizzato

Vai alla sezione Post all'interno della dashboard di WordPress e seleziona per modificare uno dei tuoi post.

All'interno della schermata di modifica del post, ora noterai un nuovo campo "Conclusione" nel nostro caso.

All'interno di questo campo, ora puoi aggiungere alcuni contenuti di conclusione e salvare le modifiche

Creazione di un modello di post singolo

Creeremo quindi un modello Elementor che possiamo utilizzare per tutti i post all'interno del nostro sito Web. Per farlo, vai alla sezione Modelli > Aggiungi nuovo all'interno della dashboard di WordPress.

All'interno del popup renderizzato, imposta il tipo di modello su "Post singolo", aggiungi il nome del modello e procedi alla sua creazione.

Successivamente, puoi aggiungere sezioni e singoli widget di post che desideri avere all'interno del tuo post.

Al termine, fai clic su Pubblica e imposta la condizione di visualizzazione su "post".

Di seguito è riportato uno screencast di esempio su questo:

Configurazione delle impostazioni di visibilità

Successivamente, dovremo impostare l'impostazione di visibilità in base al campo ACF che abbiamo creato. Nel nostro esempio qui, aggiungeremo un'impostazione per nascondere la "casella dell'autore" sui post con una conclusione.

Per fare ciò, seleziona per modificare il modello Single Post Elementor che avevamo creato in precedenza. Al suo interno, seleziona per modificare la "casella Autore".

Fare clic sulla scheda "Visibilità Stax" nel pannello di sinistra.

L'impostazione "Abilita la logica di visibilità" e dovresti quindi avere un numero di segmenti di visibilità in atto.

All'interno delle Impostazioni "Generali", specificare quanto segue:

  • Mostra/Nascondi: Nascondi
  • Tipo di condizioni: Tutti

Nel segmento Post/Pagina, abilita Post/Pagina e imposta quanto segue:

  • Tipo di post personalizzato: post
  • Meta: conclusione
  • Meta condizione: non vuota

La meta è "conclusione" è dal campo ACF che abbiamo creato.

Una volta fatto, aggiorna le modifiche.

Anteprima del post

Possiamo ora controllare il post di cui abbiamo aggiunto la conclusione e all'interno di questo post, non dovremmo avere una vista della casella dell'autore, rispetto ad altri post che non hanno una conclusione

Di seguito è riportato un esempio di illustrazione:

Conclusione

Durante la creazione di campi personalizzati all'interno del tuo sito, potresti voler applicare le impostazioni di visibilità alle sezioni o agli elementi che rappresentano i campi. La guida di cui sopra copre uno scenario di esempio su come puoi facilmente raggiungere questo obiettivo.

Queste configurazioni possono essere applicate anche a qualsiasi tipo di post che potresti avere all'interno del tuo sito. Ad esempio nei negozi di e-commerce, questo può essere utile se desideri nascondere o mostrare un dato campo personalizzato particolare per gli utenti che hanno acquistato un prodotto all'interno del negozio.