Come creare un modulo front-end con ACF

In questo tutorial ti mostrerò come creare un modulo front-end con Advanced Custom Fields (ACF). Entrerò nei dettagli su come funziona e su come puoi modificarlo per adattarlo alle tue esigenze.

Advanced Custom Fields (ACF) è un plug-in gratuito che ti aiuta ad aggiungere impostazioni sul campo di un sacco di tipi a quasi tutti i tipi di contenuto in WordPress. Puoi aggiungere campi a post, tassonomie, menu, widget, utenti e persino pagine di amministrazione personalizzate. Il suo utilizzo principale è per l’amministratore, ma puoi usarlo anche per generare i campi nel front-end.

Le applicazioni per aggiungere campi ACF al front-end sono molte; puoi aggiungere un modulo per creare e aggiornare post, categorie o utenti. Con del codice puoi persino creare un modulo di contatto generale in cui le risposte vengono salvate come post personalizzati di tipo post e il codice attiva notifiche e-mail sulle risposte del modulo. Proprio come un normale modulo di contatto. L’utilizzo della funzionalità dei moduli front-end di ACF per creare moduli e consentire ai visitatori di creare o modificare il contenuto del sito senza effettuare l’accesso sono gli usi comuni. Ma usalo con cautela. Questo si apre facilmente a spam e abusi e, nel peggiore dei casi, i visitatori possono distruggere il contenuto o le impostazioni del tuo sito. Dovresti almeno richiedere ai visitatori di accedere con utenti validi per accedere a moduli che possono alterare i contenuti critici di WordPress (profilo utente, post, ecc.).

Cosa faremo

Presumo che il sito WordPress abbia definito una serie di campi aggiuntivi sugli utenti di un ruolo personalizzato (‘ member‘) utilizzando ACF. Questi utenti non hanno affatto l’accesso come amministratore, ma vogliamo offrire loro la possibilità di modificare i loro campi personalizzati sul loro profilo. La soluzione che ho scelto è la creazione di un modello di pagina personalizzato per aggiornare il loro profilo, mostrando il modulo solo se sono loggati e di ruolo corretto.

Lo sto mantenendo abbastanza semplice in questo tutorial, quindi non includerò un esempio di aggiunta dei campi del profilo utente standard in WordPress (e-mail, password, ecc.). Questo esce un po’ dallo scopo di questo tutorial. Consentirò solo la modifica dei campi ACF su questa pagina di modifica del profilo.

Con ACF ho creato un gruppo di campi con una serie di impostazioni per gli utenti membri:

E ho un modello di pagina personalizzato nel mio tema che attualmente assomiglia a questo – al momento solo un semplice modello standard di pagina singola;

In linea #11controlliamo se l’utente corrente è loggato e ha il ruolo personalizzato member. Cambia il ruolo o la regola minima in qualsiasi cosa desideri consentire a questo modulo front-end. Ricorda solo che anche il ruolo più basso in WordPress, subscriber, ha accesso alla modifica del proprio profilo nel pannello di amministrazione.

Quindi, in breve, vogliamo aggiungere questi campi su ciascun membro a quella pagina front-end personalizzata:

Come funzionano i moduli front-end ACF

Devi aggiungere due chiamate di funzione nel modello che desideri il modulo front-end; [acf_form_head](https://www.advancedcustomfields.com/resources/acf_form_head/)()e [acf_form](https://www.advancedcustomfields.com/resources/acf_form/)().

La funzione acf_form_head()deve essere posizionata nella parte superiore del modello, prima di qualsiasi output. Di solito in un modello questo significa prima [get_header](https://developer.wordpress.org/reference/functions/get_header/)(). La chiamata alla funzione assicura che tutti gli script e gli stili vengano aggiunti in modo che i campi ACF vengano visualizzati correttamente, così come tutte le funzionalità per l’elaborazione, la convalida e l’invio del lavoro. Non è necessario aggiungere alcun parametro a questa funzione.

La acf_form()funzione è quella che esegue il rendering del modulo front-end e deve essere posizionata dove desideri che appaia il modulo. Accetta una serie di impostazioni. Abbiamo bisogno di informazioni minime su quali campi o gruppi mostrare e su dove salvarli.

Quando si tratta di decidere quali campi mostrare, di solito forniresti un gruppo di campi (proprietà field_groups). Ma la acf_form()funzione supporta anche la fornitura di campi singoli specifici (proprietà fields). Puoi anche fornire più campi o gruppi di campi per combinarli nello stesso modulo. Per questo motivo si field_groupsaspetta un array. Quindi, anche se vuoi mostrare solo un gruppo di campi, devi fornire quell’ID o slug all’interno di un array.

La seconda proprietà richiesta che devi fornire nel modulo acf_form()è da dove devono essere caricati i dati e dove devono essere salvati, nella proprietà post_id. Non lasciarti ingannare dal nome "post". Le regole per post_idsono le stesse quando usi get_field(), se hai familiarità con l’utilizzo di ACF da prima. Se i campi sono per un post (post, pagina, post di tipo post personalizzato) devi solo fornire l’ID qui. Ma se vuoi caricare e aggiornare i dati sugli utenti, segui questo formato: user_{user ID}. Allo stesso modo con i campi per una categoria: category_{category ID}. Controlla tutte le regole sotto il titolo "Ottieni un valore da oggetti diversi" nella documentazione di ACF suget_field().

Aggiunta del modulo front-end ACF al nostro modello

Per prima cosa aggiungiamo acf_form_head()in cima, subito prima get_header(), ma dopo la dichiarazione del modello di pagina (riga #3). Quindi nel punto in cui vogliamo rendere il modulo aggiungiamo acf_form()due proprietà.

Dobbiamo scoprire il nostro ID gruppo di campo. Se hai aggiunto il gruppo di campi per codice (ho un post che approfondisce come aggiungere campi ACF per codice) hai già fornito uno slug di gruppo di campi. Dovresti quindi fornire lo slug alla field_groupsproprietà, in un array. Se hai aggiunto il gruppo di campi nel pannello di amministrazione, devi aprire il gruppo nel browser e controllare l’URL. Siamo interessati all’ID che appare dopo ” ?post=“:

Nel mio esempio l’ID è 1145. Quindi questo è ciò che fornisco nell’array di field_groups.

PS: non consiglio di codificare un ID in quanto questo ID sarà diverso in ogni istanza di WordPress! Se stai lavorando su un’installazione locale e su un server di staging e produzione, ti consiglio vivamente di aggiungere i campi per codice. In questo modo puoi definire un nome di gruppo di campi e funzionerà ovunque.

Per quanto riguarda la post_idproprietà posso ottenere l’ID utente corrente utilizzando la funzione WordPress [get_current_user_id](https://developer.wordpress.org/reference/functions/get_current_user_id/)(). Concateno la stringa ‘ user_‘ e il ritorno di questa funzione come post_id.

E questo è fondamentalmente!

Se visito questa pagina effettuato l’accesso come utente membro, otterrei i valori correnti per quell’utente. Tutti i tipi di campo ACF funzionano e hanno un bell’aspetto. E posso aggiornare i valori usando il modulo front-end e vedere che vengono aggiornati anche in admin.

Ulteriore personalizzazione del modulo

Possiamo modificare ulteriormente le impostazioni passate a acf_form(). Fare riferimento alla documentazione di ACF su acf_form() per vedere tutte le possibili impostazioni.

Al momento il nostro modulo del profilo utente mostra "Post aggiornato" quando vengono inviate le impostazioni. Questo non ha senso per le impostazioni del profilo. Possiamo personalizzare il messaggio con la proprietà updated_message.

Se lo desideri, puoi definire un URL diverso a cui reindirizzare dopo che il modulo è stato inviato. Di default la stessa pagina si ricarica con il parametro GET ‘ ?updated=true‘. Puoi specificare un URL specifico per una pagina di ringraziamento o, se il modulo è per un post, potresti voler reindirizzare alla visualizzazione di quel post. Possiamo fornire l’URL nella proprietà return.

Se vogliamo un testo diverso sul pulsante di invio del modulo, possiamo specificarlo nella proprietà submit_value.

Puoi anche dire acf_form()di non eseguire il rendering del <form>tag. Se desideri combinare il modulo di ACF con il tuo modulo personalizzato, puoi impostare forme falsedigitare manualmente <form>e. <input type="submit"/>Se lo fai, ACF sarà comunque in grado di aggiornare i valori, ma devi occuparti dell’aggiornamento di tutti gli altri campi all’interno del tuo modulo personalizzato.

Attivazione di azioni all’invio di moduli

A volte potresti voler attivare alcune funzioni o eventi personalizzati quando viene aggiornato un modulo front-end. Un esempio comune è la scrittura di una funzione che invia una notifica e-mail ad ogni invio di un modulo.

Advanced Custom Fields offre due utili hook per quando i campi vengono aggiornati; l’azione [acf/save_post](https://www.advancedcustomfields.com/resources/acf-save_post/)e il filtro [acf/pre_save_post](https://www.advancedcustomfields.com/resources/acf-pre_save_post/). Ancora una volta, non lasciarti ingannare dal nome "post". Vengono attivati ​​per qualsiasi aggiornamento dei campi ACF, inclusi i campi per un utente, una categoria, un menu e così via.

Il filtro acf/pre_save_postviene eseguito solo sui moduli front-end che utilizzano acf_form(). Come parametro per questo filtro otteniamo post_id, lo stesso valore che abbiamo passato sopra. Il filtro si aspetta che tu ritorni. Ricorda che dobbiamo analizzare questo se non ci riferiamo a un ID post. Ad esempio per l’utente dovresti fare qualcosa del tipo:post_id``acf_form()``post_id

add_filter('acf/pre_save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    $user_id = intval(substr($post_id, 5));  // Extracts the user ID
 
    // Do your thing. You'll find the submitted values in $_POST
 
    return $post_id;
});

In alternativa puoi usare l’hook acf/save_post, ma ricorda che viene attivato anche in admin. Come parametro per questo hook otterrai post_id, come acf/pre_save_post. Una cosa importante da ricordare quando si utilizza acf/save_postè che è possibile utilizzare la priorità dell’hook per controllare se la funzione viene eseguita prima del salvataggio dei campi o dopo. Una funzione agganciata con priorità 10 o superiore verrà attivata dopo il salvataggio dei campi. E una priorità inferiore a 10 verrà attivata prima che ACF salvi i valori.

add_action('acf/save_post', function($post_id) {
    // You can fetch the values with standard get_field()
});
 
add_action('acf/save_post', function($post_id) {
    // You can access the submitted values in $_POST
}, 8);

Quando hai agganciato la funzione prima del salvataggio (priorità inferiore a 10) puoi confrontare i valori inviati con ciò che ACF salverà. Puoi fare get_field()per ottenere il valore corrente e confrontarli con il valore corrispondente in $_POST.

Se vuoi fare qualcosa solo quando i campi sono stati aggiornati nel front-end, puoi semplicemente controllare se siamo in admin con [is_admin](https://developer.wordpress.org/reference/functions/is_admin/)(). Di seguito è riportato un esempio di come si configurano le notifiche e-mail quando un utente aggiorna le proprie impostazioni nel front-end;

add_action('acf/save_post', function($post_id) {
    if (strpos($post_id, 'user_') === false) {
        return $post_id;
    }
 
    if (is_admin()) {
        return;  // Bail if we are updating in admin
    }
 
    $user_id = intval(substr($post_id, 5));
 
    // Use get_field() to get the saved/submitted values if needed
    // Then use wp_mail() to send an email
});