{"id":167168,"date":"2025-06-02T09:00:00","date_gmt":"2025-06-02T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/acf-visualizzare-campi-frontend-template-shortcode\/"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T22:00:00","slug":"acf-visualizzare-campi-frontend-template-shortcode","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/acf-visualizzare-campi-frontend-template-shortcode\/","title":{"rendered":"Visualizzare i Campi ACF nel Frontend: Template e Shortcode"},"content":{"rendered":"

Dal Backend al Frontend: Mostrare i Dati ACF<\/h2>\n

Creare campi personalizzati con ACF è solo metà del lavoro. La vera magia avviene quando i dati inseriti nel backend vengono visualizzati nel frontend<\/strong> del sito, nelle pagine che i visitatori effettivamente vedono. ACF offre due approcci principali per portare i dati dal pannello di amministrazione al sito pubblico: l’utilizzo di funzioni PHP nei template<\/strong> del tema e l’uso di shortcode<\/strong> direttamente nell’editor dei contenuti. Ciascun approccio ha i propri vantaggi e i propri contesti di utilizzo ideali.<\/p>\n

In questo articolo esploreremo entrambe le metodologie in dettaglio, partendo dalle funzioni PHP fondamentali di ACF fino ad arrivare alla creazione di shortcode personalizzati. Vedremo anche come gestire correttamente i diversi tipi di campo nel frontend, come applicare la formattazione appropriata e come garantire la sicurezza dell’output. Che tu sia uno sviluppatore esperto o un webmaster con conoscenze PHP di base, questa guida ti fornirà tutti gli strumenti necessari per integrare perfettamente i campi ACF nel design del tuo sito.<\/p>\n

Le Funzioni PHP Fondamentali di ACF<\/h2>\n

ACF mette a disposizione due coppie di funzioni PHP principali per recuperare e visualizzare i valori dei campi. La prima coppia è get_field()<\/code> e the_field()<\/code>: get_field(nome_campo)<\/code> recupera il valore del campo e lo restituisce come variabile PHP (senza stamparlo), mentre the_field(nome_campo)<\/code> recupera il valore e lo stampa direttamente nell’output HTML. La regola pratica è semplice: usa the_field()<\/code> quando vuoi stampare direttamente il valore nel template e get_field()<\/code> quando devi elaborare il valore prima di visualizzarlo.<\/p>\n

La seconda coppia è get_sub_field()<\/code> e the_sub_field()<\/code>, che funzionano in modo identico ma sono specifiche per i sottocampi<\/strong> all’interno di Repeater, Flexible Content e Group. Queste funzioni devono essere usate esclusivamente all’interno di un loop have_rows()<\/code>, altrimenti non restituiscono alcun valore. È un errore comune cercare di usare get_field()<\/code> per accedere ai sottocampi di un Repeater: questo non funziona e restituirà sempre null<\/code>.<\/p>\n

Entrambe le coppie di funzioni accettano un secondo parametro opzionale che specifica il post ID<\/strong> da cui recuperare il valore. Se omesso, ACF utilizza il post corrente nel loop di WordPress. Questo parametro diventa obbligatorio in due situazioni: quando recuperi valori dalle Options Page<\/strong> (passando la stringa option<\/code>) e quando recuperi valori da un post diverso da quello corrente (passando l’ID numerico del post).<\/p>\n

Visualizzare Campi di Testo nel Template<\/h2>\n

I campi di tipo Text e Text Area sono i più semplici da visualizzare. Per un campo di testo breve come un sottotitolo, puoi inserire il seguente codice direttamente nel file template del tema (ad esempio single.php<\/code> o un template part dedicato):<\/p>\n

<?php\n$sottotitolo = get_field(sottotitolo);\nif($sottotitolo): ?>\n    <h2 class=\"entry-subtitle\"><?php echo esc_html($sottotitolo); ?><\/h2>\n<?php endif; ?><\/code><\/pre>\n
\"Strumenti<\/p>\n
Nota tre elementi fondamentali in questo codice. Primo: il controllo if($sottotitolo)<\/code> che verifica se il campo ha un valore prima di visualizzarlo, evitando di mostrare tag HTML vuoti quando il campo non è compilato. Secondo: l’uso di esc_html()<\/code> per l’escaping del valore, che previene attacchi XSS convertendo eventuali caratteri HTML speciali nelle corrispondenti entità. Terzo: il wrapping in un tag HTML con una classe CSS che ti permette di stilizzare il campo nel foglio di stile del tema.<\/p>\n
Per i campi Text Area, il trattamento è leggermente diverso. Se hai configurato il campo con l’opzione “New Lines” impostata su “Automatically add paragraphs”, il valore restituito conterrà già i tag <p><\/code>. In questo caso, usa wp_kses_post()<\/code> per l’escaping invece di esc_html()<\/code>, poiché il primo consente i tag HTML sicuri (paragrafi, grassetti, link) mentre il secondo li convertirebbe tutti in testo visibile.<\/p>\n
Visualizzare Campi Immagine<\/h2>\n
I campi Image di ACF possono restituire tre formati diversi in base all’impostazione “Return Format”: Array, URL o ID. Ciascun formato richiede un approccio leggermente diverso nel template. Il formato Array<\/strong> è il più completo e versatile:<\/p>\n
<?php\n$immagine = get_field(immagine_autore);\nif($immagine): ?>\n    <img src=\"<?php echo esc_url($immagine[url]); ?>\"\n         alt=\"<?php echo esc_attr($immagine[alt]); ?>\"\n         width=\"<?php echo esc_attr($immagine[width]); ?>\"\n         height=\"<?php echo esc_attr($immagine[height]); ?>\" \/>\n<?php endif; ?><\/code><\/pre>\n
L’array restituito dal campo Image contiene numerose informazioni utili: url<\/code>, alt<\/code>, title<\/code>, caption<\/code>, description<\/code>, width<\/code>, height<\/code>, mime_type<\/code> e un sotto-array sizes<\/code> con gli URL di tutte le dimensioni registrate nel tema (thumbnail, medium, large e qualsiasi dimensione personalizzata). Puoi accedere a una dimensione specifica con $immagine[sizes][medium]<\/code>, che è utile per mostrare versioni più piccole dell’immagine in liste o anteprime.<\/p>\n
Se il formato di ritorno è ID<\/strong>, puoi utilizzare le funzioni native di WordPress per generare il tag immagine con le dimensioni desiderate: wp_get_attachment_image($immagine_id, medium)<\/code> genera un tag <img><\/code> completo con srcset e attributi responsive. Questo è spesso il metodo preferito dagli sviluppatori più esperti perché sfrutta appieno il sistema di immagini responsive di WordPress, generando automaticamente gli attributi srcset<\/code> e sizes<\/code> per il caricamento ottimale su diversi dispositivi.<\/p>\n
Gestire Campi Relazionali nel Frontend<\/h2>\n
I campi relazionali (Post Object, Relationship, Taxonomy, User) restituiscono oggetti WordPress completi, permettendoti di accedere a tutte le proprietà del post, del termine o dell’utente selezionato. Per un campo Post Object<\/strong> con ritorno singolo:<\/p>\n
<?php\n$post_correlato = get_field(articolo_correlato);\nif($post_correlato): ?>\n    <div class=\"related-post\">\n        <h3><a href=\"<?php echo get_permalink($post_correlato->ID); ?>\">\n            <?php echo esc_html($post_correlato->post_title); ?>\n        <\/a><\/h3>\n        <p><?php echo esc_html($post_correlato->post_excerpt); ?><\/p>\n    <\/div>\n<?php endif; ?><\/code><\/pre>\n
Per un campo Relationship<\/strong> che restituisce un array di oggetti post, il codice richiede un ciclo foreach per iterare su tutti gli elementi selezionati. Quando lavori con campi relazionali, assicurati di verificare che il post collegato sia ancora pubblicato e accessibile: un post messo in bozza o eliminato potrebbe essere ancora referenziato dal campo ACF, causando link rotti o informazioni inesatte nel frontend.<\/p>\n
Utilizzare gli Shortcode ACF<\/h2>\n
ACF include un sistema di shortcode integrato che permette di inserire i valori dei campi direttamente nell’editor dei contenuti, senza toccare i file del tema. La sintassi base è [acf field=\"nome_campo\"]<\/code>. Questo shortcode stampa il valore del campo del post corrente. Per recuperare un valore da un post specifico, usa [acf field=\"nome_campo\" post_id=\"123\"]<\/code>.<\/p>\n
Gli shortcode ACF sono particolarmente utili per chi gestisce i contenuti senza conoscenze di programmazione. Un editor può inserire il valore di un campo direttamente nel testo dell’articolo, nelle widget di testo o in qualsiasi area che supporta gli shortcode di WordPress. Ad esempio, un editor potrebbe scrivere: “Per informazioni chiamare il [acf field="telefono_aziendale" post_id="option"]<\/code>” e il numero di telefono verrà automaticamente recuperato dalla Options Page.<\/p>\n
\"Gestione<\/p>\n
Tuttavia, gli shortcode hanno alcune limitazioni importanti. Non supportano nativamente i campi complessi come Repeater, Flexible Content o Gallery. Per questi tipi di campo, è necessario creare shortcode personalizzati<\/strong> che gestiscano la logica di rendering. Inoltre, gli shortcode base di ACF non offrono opzioni di formattazione: il valore viene stampato così com’è, senza wrapping HTML, classi CSS o gestione degli errori.<\/p>\n
Creare Shortcode Personalizzati per ACF<\/h2>\n
Per gestire casi d’uso più complessi, puoi creare shortcode personalizzati nel file functions.php<\/code> del tema. Ecco un esempio di shortcode che visualizza un Repeater di testimonial con formattazione HTML completa:<\/p>\n
<?php\nfunction shortcode_testimonial_acf($atts) {\n    $atts = shortcode_atts(array(\n        max => -1,\n    ), $atts);\n\n    $output = ;\n    if( have_rows(testimonial) ):\n        $count = 0;\n        $output .= <div class=\"testimonial-grid\">;\n        while( have_rows(testimonial) ): the_row();\n            if($atts[max] > 0 && $count >= $atts[max]) break;\n            $output .= <div class=\"testimonial-card\">;\n            $output .= <blockquote> . wp_kses_post(get_sub_field(testo)) . <\/blockquote>;\n            $output .= <cite> . esc_html(get_sub_field(nome)) . <\/cite>;\n            $output .= <\/div>;\n            $count++;\n        endwhile;\n        $output .= <\/div>;\n    endif;\n    return $output;\n}\nadd_shortcode(testimonial, shortcode_testimonial_acf);\n?><\/code><\/pre>\n
Questo shortcode può essere usato nell’editor come [testimonial]<\/code> per mostrare tutti i testimonial, oppure [testimonial max=\"3\"]<\/code> per limitarne il numero. La chiave è usare sempre return<\/code> (non echo<\/code>) all’interno delle funzioni shortcode, e applicare l’escaping appropriato a ogni valore mostrato nell’output.<\/p>\n
Template Part Dedicati ai Campi ACF<\/h2>\n
Per progetti di medie e grandi dimensioni, la best practice è creare template part<\/strong> dedicati per i blocchi di visualizzazione dei campi ACF, piuttosto che inserire tutto il codice direttamente nei template principali. Crea una cartella template-parts\/acf\/<\/code> nel tuo tema e inserisci file PHP separati per ogni blocco di campi. Ecco la struttura consigliata:<\/p>\n
tema\/\n\u251c\u2500\u2500 template-parts\/\n\u2502   \u2514\u2500\u2500 acf\/\n\u2502       \u251c\u2500\u2500 hero-section.php\n\u2502       \u251c\u2500\u2500 team-members.php\n\u2502       \u251c\u2500\u2500 testimonials.php\n\u2502       \u251c\u2500\u2500 faq-section.php\n\u2502       \u2514\u2500\u2500 cta-banner.php<\/code><\/pre>\n
Ogni template part può essere incluso nei template principali con get_template_part(template-parts\/acf\/hero-section)<\/code>. Questo approccio mantiene il codice organizzato, facilita la manutenzione e permette di riutilizzare gli stessi blocchi in più template. Se un blocco deve ricevere parametri personalizzati, usa il terzo argomento di get_template_part()<\/code> (disponibile da WordPress 5.5) per passare un array di dati.<\/p>\n
Formattazione e Escaping dei Valori<\/h2>\n
La corretta formattazione e l’escaping dei valori ACF nel frontend è un aspetto cruciale spesso trascurato. Ogni tipo di campo richiede un trattamento specifico per garantire sia la corretta visualizzazione sia la sicurezza. Per i campi Text<\/strong> e Email<\/strong>, usa esc_html()<\/code>. Per i campi URL<\/strong> e Page Link<\/strong>, usa esc_url()<\/code>. Per i campi Wysiwyg<\/strong> e Text Area<\/strong> con formattazione HTML, usa wp_kses_post()<\/code>. Per i valori inseriti in attributi HTML (come alt, title, class), usa esc_attr()<\/code>.<\/p>\n
Per i campi Number<\/strong>, puoi formattare il valore con number_format()<\/code> per aggiungere separatori delle migliaia e decimali: number_format(get_field(prezzo), 2, ,, .)<\/code> trasformerà “1500” in “1.500,00”. Per i campi Date Picker<\/strong>, il valore salvato è nel formato Ymd<\/code> (es. “20260315”): per visualizzarlo in formato leggibile, usa date_i18n(d F Y, strtotime(get_field(data_evento)))<\/code> che produrrà “15 Marzo 2026” nella localizzazione italiana.<\/p>\n
I campi Select<\/strong>, Checkbox<\/strong> e Radio Button<\/strong> restituiscono valori diversi in base all’impostazione “Return Format”: possono restituire il valore, l’etichetta o entrambi come array. Verifica sempre quale formato è impostato prima di visualizzare il valore nel template: un errore comune è provare a stampare un array come stringa, che produce il warning “Array to string conversion”.<\/p>\n
Gestire Campi Vuoti e Valori di Default<\/h2>\n
Non tutti i campi saranno sempre compilati, e il tuo codice frontend deve gestire elegantemente i campi vuoti. La pratica migliore è verificare sempre l’esistenza del valore prima di tentare di visualizzarlo. Per i campi semplici, un controllo if($valore)<\/code> è sufficiente. Per i campi che possono avere il valore 0<\/code> o false<\/code> come valori validi (ad esempio un campo Number con valore 0), usa il controllo più specifico if($valore !== null && $valore !== )<\/code>.<\/p>\n
\"Creazione<\/p>\n
Puoi anche implementare valori di fallback<\/strong> nel template per i campi non compilati. L’operatore null coalescing di PHP (??<\/code>) è perfetto per questo scopo: $titolo = get_field(titolo_custom) ?? get_the_title();<\/code> usa il titolo personalizzato ACF se disponibile, altrimenti il titolo standard del post. Questo approccio garantisce che la pagina abbia sempre contenuto da mostrare, anche quando i campi ACF non sono stati compilati.<\/p>\n
Infine, ricorda che la funzione get_field()<\/code> restituisce false<\/code> quando il campo non esiste o non ha valore, non null<\/code>. Questo è un dettaglio importante quando fai confronti rigorosi. Inoltre, per i campi True\/False, un valore non salvato restituisce null<\/code> (che è falsy in PHP), mentre un valore esplicitamente impostato su “No” restituisce 0<\/code> o false<\/code>. Comprendere queste sfumature ti eviterà bug sottili nel tuo codice frontend.<\/p>\n
\n
Leggi anche gli altri articoli della serie ACF<\/h3>\n