Come creare un modulo front-end ACF [nessun codice!]
Pubblicato: 2022-12-14Stai 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!
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.
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:
Quindi, hai due opzioni:
- Impara a programmare e crea i tuoi moduli frontend con ACF
- 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
Per iniziare, avrai bisogno di alcune cose:
- Formidabile Forme Piano aziendale
- 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:
- Crea campi modulo ACF
- Crea il tuo modulo frontend ACF in Formidable
- Mappa i tuoi campi
Iniziamo.
Passaggio 1: creare campi modulo ACF
Per il nostro esempio, abbiamo un blog di birdwatching chiamato Here Birdie Birdie .
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:
- Nome
- Data
- Volta
- Elenco degli uccelli visto
- 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 .
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.
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.
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.
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.
Poiché abbiamo già creato i nostri campi modulo in ACF, dobbiamo solo aggiungere campi corrispondenti per semplificare la connessione.
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.
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 .
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 .
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?
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.