Come creare un modulo front-end ACF [nessun codice!]

Pubblicato: 2022-12-14

Stai cercando di utilizzare moduli personalizzati avanzati sul tuo sito WordPress ma non sai come programmare? Questa guida ti aiuterà a creare un modulo front-end ACF in pochissimo tempo!

Come creare un modulo frontend ACF

Tempo di lettura approssimativo: 6 minuti

Advanced Custom Fields (ACF) è uno strumento potente.

Con la possibilità di personalizzare i tuoi campi e costruire i tuoi moduli esattamente come vuoi, le tue possibilità sono quasi infinite.

Ma c'è un problema. Devi sapere come codificare per ottenere i tuoi moduli ACF sul front-end del tuo sito web.

Formidable Forms è il miglior plugin per WordPress Form Builder. Ottienilo gratis!

O tu?

Questo post ti mostrerà come creare un modulo frontend ACF in WordPress senza codice senza sforzo! Ed è tutto fatto usando Formidable Forms , il perfetto generatore di moduli ACF.

Entriamo in esso.

Cosa c'è di sbagliato nell'usare il modulo front-end Campi personalizzati avanzati?

In realtà, non c'è niente di sbagliato nell'usare ACF per creare il tuo modulo frontend Advanced Custom Fields!

ACF è uno strumento potente; se sai programmare in PHP, puoi creare rapidamente moduli unici.

Ma, se non sai come programmare, rimani a grattarti la testa davanti alla lingua straniera di fronte a te.

Dai un'occhiata a questo codice di esempio del modulo ACF di seguito:

I moduli front-end di ACF richiedono conoscenze di programmazione

Quindi, hai due opzioni:

  1. Impara a programmare e crea i tuoi moduli frontend con ACF
  2. Lascia che Formidable Forms faccia tutto il duro lavoro per te

Anche se qui a Formidable abbiamo un team di eccellenti sviluppatori, immaginiamo che tu non lo abbia.

Quindi, oggi ci concentreremo sull'opzione n. 2 per il nostro tutorial sul modulo frontend Advanced Custom Fields.

Come visualizzare il modulo frontend ACF con Formidable

Iscriviti su YouTube

Per iniziare, avrai bisogno di alcune cose:

  1. Formidabile Forme Piano aziendale
  2. Plugin ACF (gratuito o professionale)

Ottieni forme formidabili ora!

Per utilizzare alcuni dei campi più avanzati con il frontend ACF, è necessaria la versione pro. Tuttavia, per i campi di base, puoi utilizzare la versione gratuita.

Se desideri maggiori informazioni, assicurati di consultare i nostri documenti della Knowledge Base ACF!

Quindi, una volta installato e attivato Formidable Forms, vai su Formidable → Componenti aggiuntivi e fai clic sul pulsante Installa per il plug-in ACF Form WordPress .

Quindi, sono solo pochi semplici passaggi:

  1. Crea campi modulo ACF
  2. Crea il tuo modulo frontend ACF in Formidable
  3. Mappa i tuoi campi

    Iniziamo.

    Piani Formidable Forms pro

    Passaggio 1: creare campi modulo ACF

    Per il nostro esempio, abbiamo un blog di birdwatching chiamato Here Birdie Birdie .

    Qui Birdie Birdie Esempio di sito web

    Vogliamo un modo per gli utenti di avere i loro invii di birdwatching che verranno visualizzati automaticamente come tipo di post personalizzato sul blog.

    Quindi, vogliamo creare alcuni campi in cui gli utenti possono inserire informazioni:

    1. Nome
    2. Data
    3. Volta
    4. Elenco degli uccelli visto
    5. Commenti aggiuntivi

    Quindi, la prima cosa che vogliamo fare è entrare in ACF per personalizzare i campi. Fortunatamente, Formidable supporta la mappatura per 19 diversi tipi di campo ACF. Quindi, hai un sacco di opzioni.

    Per fare ciò, vai su Campi personalizzati → Gruppi di campi e fai clic su Aggiungi nuovo .

    Fare clic sul pulsante Aggiungi nuovo per creare i campi ACF

    Successivamente, puoi aggiungere i tuoi campi facendo clic sul pulsante Aggiungi campo .

    Quindi, creeremo i campi sopra elencati e li personalizzeremo in base alle nostre esigenze.

    Campi di esempio ACF

    Useremo un campo Ripetitore ACF per facilitare ai visitatori la visualizzazione di tutti gli uccelli che hanno visto. Il campo ripetitore consente agli utenti di aggiungere o rimuovere tutte le voci che desiderano.

    Useremo un campo Dropdown ( Seleziona in ACF) in questi campi in modo che il visitatore possa scegliere da un elenco di uccelli. Aggiungeremo anche un campo numerico per inserire per quanto tempo hanno visto ogni uccello.

    Esempi di menu di selezione ACF

    Sentiti libero di personalizzarlo in base alle tue esigenze. Tuttavia, per ottenere funzionalità più avanzate (come i ripetitori , è necessario acquistare ACF Pro).

    Al termine, fai clic su Salva modifiche .

    Passaggio 2: crea il tuo modulo frontend ACF in Formidable

    Ora creeremo il modulo che verrà visualizzato sul front-end del tuo sito web.

    Quindi, vai su Formidable → Moduli nel tuo pannello di amministrazione di WordPress.

    Successivamente, fai clic su Aggiungi nuovo nella parte superiore della pagina, quindi scegli di iniziare da un modulo vuoto o da uno dei modelli di Formidable.

    Fare clic su Aggiungi nuovo per creare un nuovo modulo

    Sentiti libero di selezionare l'opzione migliore per la tua situazione. Inizieremo con un modulo vuoto per personalizzarlo a nostro piacimento.

    Successivamente, assegna un nome al modulo, quindi fai clic su Crea .

    Il plug-in ti porterà al generatore di moduli drag-and-drop di Formidable, dove puoi aggiungere qualsiasi elemento del modulo. Nome, e-mail, numero, indirizzo: lo chiami, è qui.

    Il generatore di moduli drag and drop di Formidable

    Poiché abbiamo già creato i nostri campi modulo in ACF, dobbiamo solo aggiungere campi corrispondenti per semplificare la connessione.

    Esempio di modulo per il birdwatching

    Abbiamo aggiunto un campo in alto in modo che gli utenti possano nominare i post del proprio blog per renderli unici!

    Una volta terminata la creazione del modulo, fai clic su Aggiorna per salvare le modifiche.

    Niente ti ricorda gli anni '90 più che perdere tutto ciò che hai creato perché non hai salvato.

    Passaggio 3: mappa i tuoi campi

    Ora che abbiamo creato il nostro modulo, dobbiamo abilitare la mappatura dei campi ACF.

    Quindi, fai clic sulla scheda Impostazioni nella parte superiore della pagina e vai su Azioni e notifiche .

    Successivamente, scegli l'azione Crea post per personalizzare la modalità di visualizzazione dei campi del modulo.

    Fare clic sull'azione del modulo Crea post

    Nell'azione del modulo Crea messaggio , scorri verso il basso fino alla sezione Campi personalizzati e fai clic sull'interruttore Associa campi modulo a campi personalizzati avanzati .

    Attiva la funzionalità del modulo ACF

    Scegli il tuo gruppo di campi ACF dal menu a discesa e inizia a mappare i tuoi campi personalizzati con i campi Formidable facendo clic su Aggiungi .

    Associa i tuoi campi ACF ai tuoi campi Formidable

    Inoltre, se utilizzi un campo ripetitore, dovrai abbinare correttamente i ripetitori e i sottocampi.

    Dopo aver mappato i campi, fai clic su Aggiorna per salvare le modifiche.

    E questo è tutto! Gli utenti possono ora inviare le loro voci al modulo frontend ACF di WordPress e i campi ACF e Formidable Forms mapperanno e invieranno le informazioni.

    Da qui, puoi visualizzare le informazioni sul frontend con una vista o utilizzare un tema che supporti ACF, quindi modificare il post, il titolo del post, il contenuto e altro!

    Cos'altro può fare questo plug-in del modulo frontend ACF?

    Stendardo Formidable Forms

    Formidable può sembrare un semplice generatore di moduli per ACF, ma è molto di più.

    Con dozzine di funzioni del modulo ACF, file modello e compatibilità con tutti i temi principali (incluso Elementor), Formidable fa tutto.

    E ha molte funzionalità e opzioni aggiuntive per potenziare il tuo modulo:

    • Moduli in più passaggi, quiz e moduli conversazionali
    • Molteplici opzioni di protezione antispam
    • Visual Form Styler integrato
    • Oltre 100 modelli di moduli
    • Viste formidabili

    Queste sono solo alcune delle funzionalità che ottieni. E sono davvero fantastici se lo diciamo noi stessi.

    Quindi, con quanto è facile inserire un modulo ACF sul frontend e la ricchezza di funzionalità che ottieni, cosa stai aspettando?

    Formidable è pronto a migliorare il tuo sito web oggi stesso .

    Pronto a realizzare il tuo modulo frontale ACF?

    Se ti stavi chiedendo, "Come aggiungo un campo ACF al frontend?" Ora hai la tua risposta.

    Con la semplice soluzione senza codice di Formidable, puoi essere operativo in pochi minuti. E questo post ti ha mostrato esattamente come farlo.

    Sia che utilizzi WordPress ACF pro o la versione gratuita, Formidable è il plug-in partner perfetto.

    Quindi, se sei pronto per iniziare, prendi subito Formidable Forms e caricalo sul tuo sito web.

    Ottieni ora i moduli front-end ACF!

    E seguici su Facebook, Twitter e YouTube per suggerimenti e trucchi incredibili su WordPress.

    Maggiori informazioni sui moduli WordPress!