{"id":233643,"date":"2023-02-18T20:35:00","date_gmt":"2023-02-18T17:35:00","guid":{"rendered":"https:\/\/wordpress.mediadoma.com\/?p=233643"},"modified":"2023-02-23T17:55:52","modified_gmt":"2023-02-23T14:55:52","slug":"come-creare-un-modulo-front-end-con-acf","status":"publish","type":"post","link":"https:\/\/wordpress.mediadoma.com\/it\/come-creare-un-modulo-front-end-con-acf\/","title":{"rendered":"Come creare un modulo front-end con ACF"},"content":{"rendered":"\n

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

Advanced Custom Fields<\/a> (ACF) \u00e8 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 \u00e8 per l’amministratore, ma puoi usarlo anche per generare i campi nel front-end.<\/p>\n

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\u00e0 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.).<\/p>\n

Cosa faremo<\/h2>\n

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

Lo sto mantenendo abbastanza semplice in questo tutorial, quindi non includer\u00f2 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\u00f2 solo la modifica dei campi ACF su questa pagina di modifica del profilo.<\/p>\n

Con ACF ho creato un gruppo di campi con una serie di impostazioni per gli utenti membri:<\/p>\n

\"Come<\/a><\/p>\n

E ho un modello di pagina personalizzato nel mio tema che attualmente assomiglia a questo \u2013 al momento solo un semplice modello standard di pagina singola;<\/p>\n

<?php \n\/* Template Name: ACF Profile Page *\/\nget_header(); ?>\n<main class=\"content\">\n    <?php if (have_posts()) { \n        while (have_posts()): the_post(); ?>\n        <article id=\"post-<?php the_ID() ?>\" <?php post_class(); ?>>\n            <h2 class=\"page-title\"><?php the_title(); ?><\/h2>\n            <?php the_content(''); ?>\n            <?php \n            if (is_user_logged_in() && current_user_can('member')) {\n                \/\/ Profile settings here\n            }\n            ?>\n        <\/article>\n    <?php endwhile;\n    } ?>\n<\/main>\n<?php \nget_sidebar();\nget_footer();<\/code><\/pre>\n
In linea #11<\/code>controlliamo se l’utente corrente \u00e8 loggato e ha il ruolo personalizzato member<\/code>. Cambia il ruolo o la regola minima in qualsiasi cosa desideri consentire a questo modulo front-end. Ricorda solo che anche il ruolo pi\u00f9 basso in WordPress, subscriber<\/code>, ha accesso alla modifica del proprio profilo nel pannello di amministrazione.<\/p>\n
Quindi, in breve, vogliamo aggiungere questi campi su ciascun membro a quella pagina front-end personalizzata:<\/p>\n
\"Come<\/a><\/p>\n
Come funzionano i moduli front-end ACF<\/h2>\n
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\/)()<\/code>e [acf_form](https:\/\/www.advancedcustomfields.com\/resources\/acf_form\/)()<\/code>.<\/p>\n
La funzione acf_form_head()<\/code>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\/)()<\/code>. La chiamata alla funzione assicura che tutti gli script e gli stili vengano aggiunti in modo che i campi ACF vengano visualizzati correttamente, cos\u00ec come tutte le funzionalit\u00e0 per l’elaborazione, la convalida e l’invio del lavoro. Non \u00e8 necessario aggiungere alcun parametro a questa funzione.<\/p>\n
La acf_form()<\/code>funzione \u00e8 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.<\/p>\n
Quando si tratta di decidere quali campi mostrare, di solito forniresti un gruppo di campi (propriet\u00e0 field_groups<\/code>). Ma la acf_form()<\/code>funzione supporta anche la fornitura di campi singoli specifici (propriet\u00e0 fields<\/code>). Puoi anche fornire pi\u00f9 campi o gruppi di campi per combinarli nello stesso modulo. Per questo motivo si field_groups<\/code>aspetta un array. Quindi, anche se vuoi mostrare solo un gruppo di campi, devi fornire quell’ID o slug all’interno di un array.<\/p>\n
La seconda propriet\u00e0 richiesta che devi fornire nel modulo acf_form()<\/code>\u00e8 da dove devono essere caricati i dati e dove devono essere salvati, nella propriet\u00e0 post_id<\/code>. Non lasciarti ingannare dal nome "post". Le regole per post_id<\/code>sono le stesse quando usi get_field()<\/code>, se hai familiarit\u00e0 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}<\/code>. Allo stesso modo con i campi per una categoria: category_{category ID}<\/code>. Controlla tutte le regole sotto il titolo "Ottieni un valore da oggetti diversi" nella documentazione di ACF suget_field()<\/code><\/a>.<\/p>\n
Aggiunta del modulo front-end ACF al nostro modello<\/h2>\n
Per prima cosa aggiungiamo acf_form_head()<\/code>in cima, subito prima get_header()<\/code>, ma dopo la dichiarazione del modello di pagina (riga #3<\/code>). Quindi nel punto in cui vogliamo rendere il modulo aggiungiamo acf_form()<\/code>due propriet\u00e0.<\/p>\n
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<\/a>) hai gi\u00e0 fornito uno slug di gruppo di campi. Dovresti quindi fornire lo slug alla field_groups<\/code>propriet\u00e0, 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=<\/code>“:<\/p>\n
\"Come<\/a><\/p>\n
Nel mio esempio l’ID \u00e8 1145<\/code>. Quindi questo \u00e8 ci\u00f2 che fornisco nell’array di field_groups<\/code>.<\/p>\n
PS: non consiglio di codificare un ID in quanto questo ID sar\u00e0 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\u00e0 ovunque.<\/p>\n
Per quanto riguarda la post_id<\/code>propriet\u00e0 posso ottenere l’ID utente corrente utilizzando la funzione WordPress [get_current_user_id](https:\/\/developer.wordpress.org\/reference\/functions\/get_current_user_id\/)()<\/code>. Concateno la stringa ‘ user_<\/code>‘ e il ritorno di questa funzione come post_id<\/code>.<\/p>\n
<?php \n\/* Template Name: ACF Profile Page *\/\nacf_form_head();\nget_header(); ?>\n<main class=\"content\">\n    <?php if (have_posts()) { \n        while (have_posts()): the_post(); ?>\n        <article id=\"post-<?php the_ID() ?>\" <?php post_class(); ?>>\n            <h2 class=\"page-title\"><?php the_title(); ?><\/h2>\n            <?php the_content(''); ?>\n            <?php \n            if (is_user_logged_in() && current_user_can('member')) {\n                $current_user_id = get_current_user_id();\n                acf_form([\n                    'field_groups' => [1145],\n                    'post_id' => 'user_'. $current_user_id\n                ]);\n            }\n            ?>\n        <\/article>\n    <?php endwhile;\n    } ?>\n<\/main>\n<?php \nget_sidebar();\nget_footer();<\/code><\/pre>\n
E questo \u00e8 fondamentalmente!<\/p>\n
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.<\/p>\n
Ulteriore personalizzazione del modulo<\/h2>\n
Possiamo modificare ulteriormente le impostazioni passate a acf_form()<\/code>. Fare riferimento alla documentazione di ACF su acf_form()<\/a> per vedere tutte le possibili impostazioni.<\/p>\n
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\u00e0 updated_message<\/code>.<\/p>\n
acf_form([\n    'field_groups' => [1145],\n    'post_id' => 'user_'. $current_user_id,\n    'updated_message' => __('User profile updated.', 'txtdomain')\n]);<\/code><\/pre>\n
Se lo desideri, puoi definire un URL diverso a cui reindirizzare dopo che il modulo \u00e8 stato inviato. Di default la stessa pagina si ricarica con il parametro GET ‘ ?updated=true<\/code>‘. Puoi specificare un URL specifico per una pagina di ringraziamento o, se il modulo \u00e8 per un post, potresti voler reindirizzare alla visualizzazione di quel post. Possiamo fornire l’URL nella propriet\u00e0 return<\/code>.<\/p>\n
acf_form([\n    'field_groups' => [1145],\n    'post_id' => 'user_'. $current_user_id,\n    'return' => home_url('thank-you')\n]);<\/code><\/pre>\n
Se vogliamo un testo diverso sul pulsante di invio del modulo, possiamo specificarlo nella propriet\u00e0 submit_value<\/code>.<\/p>\n
acf_form([\n    'field_groups' => [1145],\n    'post_id' => 'user_'. $current_user_id,\n    'submit_value' => __('Update profile', 'txtdomain')\n]);<\/code><\/pre>\n
Puoi anche dire acf_form()<\/code>di non eseguire il rendering del <form><\/code>tag. Se desideri combinare il modulo di ACF con il tuo modulo personalizzato, puoi impostare form<\/code>e false<\/code>digitare manualmente <form><\/code>e. <input type=\"submit\"\/><\/code>Se lo fai, ACF sar\u00e0 comunque in grado di aggiornare i valori, ma devi occuparti dell’aggiornamento di tutti gli altri campi all’interno del tuo modulo personalizzato.<\/p>\n
<form method=\"POST\">\n    <input type=\"text\" name=\"my-custom-input\" value=\"\" \/>\n    <?php\n    acf_form([\n        'field_groups' => [1145],\n        'post_id' => 'user_'. $current_user_id,\n        'form' => false\n    ]);\n    ?>\n    <input type=\"submit\" value=\"<?php _e('Submit', 'txtdomain'); ?>\" \/>\n<\/form><\/code><\/pre>\n
Attivazione di azioni all’invio di moduli<\/h2>\n
A volte potresti voler attivare alcune funzioni o eventi personalizzati quando viene aggiornato un modulo front-end. Un esempio comune \u00e8 la scrittura di una funzione che invia una notifica e-mail ad ogni invio di un modulo.<\/p>\n
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\/)<\/code>e il filtro [acf\/pre_save_post](https:\/\/www.advancedcustomfields.com\/resources\/acf-pre_save_post\/)<\/code>. Ancora una volta, non lasciarti ingannare dal nome "post". Vengono attivati \u200b\u200bper qualsiasi aggiornamento dei campi ACF, inclusi i campi per un utente, una categoria, un menu e cos\u00ec via.<\/p>\n
Il filtro acf\/pre_save_post<\/code>viene eseguito solo<\/strong> sui moduli front-end che utilizzano acf_form()<\/code>. Come parametro per questo filtro otteniamo post_id<\/code>, 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<\/code><\/p>\n
add_filter('acf\/pre_save_post', function($post_id) {\n    if (strpos($post_id, 'user_') === false) {\n        return $post_id;\n    }\n\u00a0\n    $user_id = intval(substr($post_id, 5));  \/\/ Extracts the user ID\n\u00a0\n    \/\/ Do your thing. You'll find the submitted values in $_POST\n\u00a0\n    return $post_id;\n});<\/code><\/pre>\n
In alternativa puoi usare l’hook acf\/save_post<\/code>, ma ricorda che viene attivato anche in admin. Come parametro per questo hook otterrai post_id<\/code>, come acf\/pre_save_post<\/code>. Una cosa importante da ricordare quando si utilizza acf\/save_post<\/code>\u00e8 che \u00e8 possibile utilizzare la priorit\u00e0 dell’hook per controllare se la funzione viene eseguita prima del salvataggio dei campi o dopo. Una funzione agganciata con priorit\u00e0 10 o superiore verr\u00e0 attivata dopo il salvataggio dei campi. E una priorit\u00e0 inferiore a 10 verr\u00e0 attivata prima che ACF salvi i valori.<\/p>\n
add_action('acf\/save_post', function($post_id) {\n    \/\/ You can fetch the values with standard get_field()\n});\n\u00a0\nadd_action('acf\/save_post', function($post_id) {\n    \/\/ You can access the submitted values in $_POST\n}, 8);<\/code><\/pre>\n
Quando hai agganciato la funzione prima del salvataggio (priorit\u00e0 inferiore a 10) puoi confrontare i valori inviati con ci\u00f2 che ACF salver\u00e0. Puoi fare get_field()<\/code>per ottenere il valore corrente e confrontarli con il valore corrispondente in $_POST<\/code>.<\/p>\n
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\/)()<\/code>. Di seguito \u00e8 riportato un esempio di come si configurano le notifiche e-mail quando un utente aggiorna le proprie impostazioni nel front-end;<\/p>\n
add_action('acf\/save_post', function($post_id) {\n    if (strpos($post_id, 'user_') === false) {\n        return $post_id;\n    }\n\u00a0\n    if (is_admin()) {\n        return;  \/\/ Bail if we are updating in admin\n    }\n\u00a0\n    $user_id = intval(substr($post_id, 5));\n\u00a0\n    \/\/ Use get_field() to get the saved\/submitted values if needed\n    \/\/ Then use wp_mail() to send an email\n});<\/code><\/pre>\n
Fonte di registrazione:  awhitepixel.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"
Come creare un modulo front-end con Advanced Custom Fields (ACF). Entrer\u00f2 nei dettagli su come funziona e su come puoi modificarlo per adattarlo alle tue esigenze.<\/p>\n","protected":false},"author":1,"featured_media":224889,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[720,835,1110,814,814,835,720,844,844,865,865],"tags":[1168],"class_list":["post-233643","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-sviluppatore","category-guida-per-principianti","category-n-a","category-plugin-2","category-tutorial","category-wordpress-6","tag-affiai-it"],"_links":{"self":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233643","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/comments?post=233643"}],"version-history":[{"count":0,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/posts\/233643\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media\/224889"}],"wp:attachment":[{"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/media?parent=233643"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/categories?post=233643"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wordpress.mediadoma.com\/it\/wp-json\/wp\/v2\/tags?post=233643"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}