{"id":167171,"date":"2025-06-23T09:00:00","date_gmt":"2025-06-23T09:00:00","guid":{"rendered":"https:\/\/gtechgroup.it\/blog\/acf-flexible-content-layout-dinamici\/"},"modified":"-0001-11-30T00:00:00","modified_gmt":"-0001-11-29T22:00:00","slug":"acf-flexible-content-layout-dinamici","status":"publish","type":"post","link":"https:\/\/gtechgroup.it\/blog\/acf-flexible-content-layout-dinamici\/","title":{"rendered":"ACF Flexible Content: Layout Dinamici Senza Page Builder"},"content":{"rendered":"

Cos’è il Flexible Content di ACF<\/h2>\n

Il Flexible Content<\/strong> è il campo più avanzato e versatile disponibile in ACF PRO. Si tratta di un campo speciale che permette agli utenti di comporre pagine combinando diversi layout predefiniti<\/strong>, ciascuno con i propri campi specifici. A differenza del Repeater, che ripete sempre la stessa struttura di campi, il Flexible Content offre una scelta tra più strutture diverse, permettendo di creare pagine con sezioni eterogenee come un hero banner, un blocco di testo con immagine, una griglia di servizi, una sezione testimonial e un call-to-action, il tutto gestito da un’unica interfaccia nell’editor di WordPress.<\/p>\n

In pratica, il Flexible Content trasforma l’editor di WordPress in un page builder leggero<\/strong>, senza le complessità e l’overhead di strumenti come Elementor o WPBakery. Il grande vantaggio è che i layout sono definiti dallo sviluppatore nel tema, garantendo coerenza visiva e aderenza al brand, mentre il gestore dei contenuti ha la libertà di scegliere quali sezioni includere, in quale ordine e con quali contenuti. Il risultato è un equilibrio perfetto tra flessibilità per l’utente e controllo per lo sviluppatore.<\/p>\n

In questo articolo esploreremo la configurazione del Flexible Content, la creazione dei layout, il rendering nel frontend con i template PHP e le strategie per costruire sistemi di layout scalabili e manutenibili. Se sei uno sviluppatore WordPress che desidera offrire ai clienti un’esperienza di editing potente senza dipendere da page builder esterni, il Flexible Content è lo strumento che fa per te.<\/p>\n

Creare un Campo Flexible Content<\/h2>\n

Per creare un campo Flexible Content, accedi all’editor di un gruppo di campi ACF e aggiungi un nuovo campo selezionando il tipo Flexible Content<\/strong>. Assegna un’etichetta come “Contenuto Pagina” o “Sezioni” e configura il nome del campo (ad esempio sezioni_pagina<\/code>). Una volta selezionato il tipo, l’interfaccia si espande mostrando l’area dove definire i layout<\/strong>.<\/p>\n

Ogni layout rappresenta un tipo di sezione che l’utente potrà aggiungere alla pagina. Clicca su Add Layout<\/strong> per creare il primo layout. Ogni layout ha un nome<\/strong> (l’etichetta visibile all’utente), un name<\/strong> (l’identificativo tecnico) e un proprio set di sottocampi<\/strong>. Pensa al layout come a un mini-gruppo di campi autonomo: può contenere qualsiasi tipo di campo ACF, inclusi Text, Image, Wysiwyg, Repeater e persino altri Flexible Content annidati.<\/p>\n

\"Creazione<\/p>\n

Ecco un esempio di configurazione tipica con cinque layout. Hero Banner<\/strong>: campi per titolo (Text), sottotitolo (Text Area), immagine di sfondo (Image), testo del pulsante CTA (Text) e URL del pulsante (URL). Testo con Immagine<\/strong>: editor Wysiwyg per il testo, campo Image per l’immagine, Select per la posizione dell’immagine (sinistra\/destra). Griglia Servizi<\/strong>: Repeater con icona (Image), titolo (Text) e descrizione (Text Area) per ogni servizio. Testimonial<\/strong>: Repeater con foto (Image), nome (Text), ruolo (Text) e citazione (Text Area). Call to Action<\/strong>: titolo (Text), testo (Text Area), testo pulsante (Text) e URL (URL).<\/p>\n

Opzioni di Configurazione del Flexible Content<\/h2>\n

Il campo Flexible Content offre diverse opzioni a livello globale. Minimum Layouts<\/strong> e Maximum Layouts<\/strong> controllano il numero minimo e massimo di sezioni che l’utente può aggiungere. Button Label<\/strong> personalizza il testo del pulsante per aggiungere nuove sezioni (ad esempio “Aggiungi Sezione” invece del generico “Add Row”). Ogni singolo layout ha anche le proprie opzioni: Min<\/strong> e Max<\/strong> per limitare quante volte quel specifico layout può essere usato nella stessa pagina.<\/p>\n

L’opzione Layout<\/strong> di ogni singolo layout controlla come i sottocampi vengono visualizzati nell’editor: Block<\/em> (predefinito) mostra i campi in un blocco espandibile, Table<\/em> li mostra come colonne di una tabella e Row<\/em> è un compromesso tra i due. Per layout con molti sottocampi o con campi di tipo Wysiwyg e Image, il formato Block è quasi sempre la scelta migliore perché offre più spazio e una migliore organizzazione visiva.<\/p>\n

Un’opzione particolarmente utile è la possibilità di assegnare un’icona<\/strong> a ogni layout nel menu di selezione. Anche se ACF non supporta nativamente le icone personalizzate per i layout, puoi usare il filtro acf\/fields\/flexible_content\/layout_title<\/code> per aggiungere emoji o icone HTML al titolo di ogni layout, rendendo il menu di selezione più intuitivo per gli utenti.<\/p>\n

Rendering del Flexible Content nel Frontend<\/h2>\n

La visualizzazione del Flexible Content nel frontend è gestita con un loop have_rows()<\/code> simile a quello del Repeater, con l’aggiunta di get_row_layout()<\/code> che identifica quale layout è stato selezionato per ogni riga. La struttura base è un ciclo while con un costrutto switch o if\/elseif per gestire i diversi layout:<\/p>\n

<?php if( have_rows(sezioni_pagina) ): ?>\n    <?php while( have_rows(sezioni_pagina) ): the_row(); ?>\n\n        <?php if( get_row_layout() == hero_banner ): ?>\n            <section class=\"hero\">\n                <h1><?php the_sub_field(titolo); ?><\/h1>\n                <p><?php the_sub_field(sottotitolo); ?><\/p>\n            <\/section>\n\n        <?php elseif( get_row_layout() == testo_con_immagine ): ?>\n            <section class=\"text-image\">\n                <div class=\"text\"><?php the_sub_field(testo); ?><\/div>\n                <?php $img = get_sub_field(immagine); ?>\n                <img src=\"<?php echo esc_url($img[url]); ?>\" alt=\"<?php echo esc_attr($img[alt]); ?>\" \/>\n            <\/section>\n\n        <?php elseif( get_row_layout() == call_to_action ): ?>\n            <section class=\"cta\">\n                <h2><?php the_sub_field(titolo); ?><\/h2>\n                <a href=\"<?php the_sub_field(url_pulsante); ?>\">\n                    <?php the_sub_field(testo_pulsante); ?>\n                <\/a>\n            <\/section>\n\n        <?php endif; ?>\n    <?php endwhile; ?>\n<?php endif; ?><\/code><\/pre>\n
Per mantenere il codice organizzato e manutenibile, è fortemente consigliato separare il rendering di ogni layout in un file template part dedicato. Invece di scrivere tutto l’HTML nel template principale, crea una cartella template-parts\/flex\/<\/code> nel tema con un file per ogni layout (ad esempio hero-banner.php<\/code>, testo-immagine.php<\/code>, call-to-action.php<\/code>) e includi il file appropriato con get_template_part()<\/code>.<\/p>\n
Organizzazione dei Template Part<\/h2>\n
Un’architettura ben organizzata per il Flexible Content utilizza una struttura di file chiara e coerente. Ecco la struttura consigliata per il tema:<\/p>\n
tema\/\n\u251c\u2500\u2500 template-parts\/\n\u2502   \u2514\u2500\u2500 flex\/\n\u2502       \u251c\u2500\u2500 hero-banner.php\n\u2502       \u251c\u2500\u2500 testo-immagine.php\n\u2502       \u251c\u2500\u2500 griglia-servizi.php\n\u2502       \u251c\u2500\u2500 testimonial.php\n\u2502       \u251c\u2500\u2500 call-to-action.php\n\u2502       \u251c\u2500\u2500 gallery.php\n\u2502       \u2514\u2500\u2500 faq.php<\/code><\/pre>\n
\"Organizzazione<\/p>\n
Il template principale diventa estremamente pulito, con un singolo loop che carica automaticamente il file corretto in base al layout selezionato. Puoi sfruttare una convenzione di naming per automatizzare il caricamento: se il nome tecnico del layout corrisponde al nome del file template part, puoi usare get_template_part(template-parts\/flex\/ . get_row_layout())<\/code> per caricare automaticamente il file senza bisogno di un costrutto if\/elseif per ogni layout. Questo approccio è elegante e scalabile: aggiungere un nuovo layout richiede solo di creare il layout in ACF e il corrispondente file template, senza modificare il template principale.<\/p>\n
Layout Avanzati con Opzioni di Stile<\/h2>\n
Per offrire maggiore flessibilità agli utenti senza sacrificare la coerenza del design, puoi aggiungere campi di stile<\/strong> a ogni layout. Un approccio comune è creare un campo Tab “Stile” (o “Opzioni”) all’interno di ogni layout con campi come: Sfondo<\/strong> (Select con opzioni Bianco, Grigio chiaro, Scuro, Immagine), Padding<\/strong> (Select con opzioni Piccolo, Medio, Grande), Allineamento<\/strong> (Button Group con Sinistra, Centro, Destra) e Larghezza<\/strong> (Select con Contenuto, Piena larghezza).<\/p>\n
Questi campi di stile vengono poi tradotti in classi CSS nel template part:<\/p>\n
<?php\n$sfondo = get_sub_field(sfondo) ?: bianco;\n$padding = get_sub_field(padding) ?: medio;\n$larghezza = get_sub_field(larghezza) ?: contenuto;\n?>\n<section class=\"section-hero bg-<?php echo esc_attr($sfondo); ?> padding-<?php echo esc_attr($padding); ?> width-<?php echo esc_attr($larghezza); ?>\">\n    <!-- contenuto del layout -->\n<\/section><\/code><\/pre>\n
Questo approccio dà all’utente la possibilità di personalizzare l’aspetto di ogni sezione (alternare sfondi chiari e scuri, variare il padding, ecc.) pur restando all’interno di un sistema di design predefinito. Lo sviluppatore mantiene il controllo sulle opzioni disponibili e sullo stile CSS corrispondente, garantendo che ogni combinazione di opzioni produca un risultato visivamente coerente.<\/p>\n
Flexible Content vs Page Builder: Quando Scegliere Cosa<\/h2>\n
La domanda che molti sviluppatori si pongono è: perché usare il Flexible Content quando esistono page builder più potenti come Elementor o WPBakery? La risposta dipende dal progetto e dal profilo dell’utente finale. Il Flexible Content eccelle in scenari dove il controllo del design è critico<\/strong>: siti aziendali con un brand guide rigoroso, portali istituzionali con standard di accessibilità, siti dove la coerenza visiva non può essere lasciata alla discrezione dell’utente.<\/p>\n
I vantaggi del Flexible Content rispetto ai page builder includono: performance superiori<\/strong> (nessun CSS\/JS aggiuntivo dei page builder, HTML pulito e semantico), manutenibilità<\/strong> (il codice dei layout è nel tema, versionabile con Git), portabilità<\/strong> (se cambi tema, i dati ACF restano nel database e possono essere riutilizzati), sicurezza<\/strong> (l’utente non può inserire codice arbitrario o rompere il layout). Gli svantaggi principali sono la necessità di uno sviluppatore per creare nuovi layout e la mancanza di un’anteprima visuale in tempo reale nell’editor.<\/p>\n
In molti progetti professionali, la soluzione ideale è un approccio ibrido: usare il Flexible Content per le pagine principali del sito (homepage, chi siamo, servizi) dove il design deve essere perfetto, e Elementor o Gutenberg per le pagine secondarie (articoli del blog, landing page temporanee) dove la velocità di creazione è più importante della perfezione del codice.<\/p>\n
Gestire Layout Complessi: Annidamento e Relazioni<\/h2>\n
Il Flexible Content supporta l’annidamento di Repeater all’interno dei layout (ad esempio, una griglia di servizi con un Repeater per i singoli servizi) e, con ACF PRO, puoi anche annidare un Flexible Content dentro un altro, anche se questa pratica è generalmente sconsigliata per la complessità che introduce sia nel backend che nel frontend.<\/p>\n
\"Strumenti<\/p>\n
Un approccio più sostenibile per contenuti complessi è combinare il Flexible Content con i campi relazionali<\/strong>. Invece di annidare un Repeater di testimonial dentro il layout “Sezione Testimonial”, puoi creare un custom post type “Testimonial” e usare un campo Relationship nel layout per selezionare quali testimonial mostrare. Questo approccio separa i dati dalla presentazione: i testimonial esistono come entità indipendenti e possono essere riutilizzati in più pagine senza duplicazione.<\/p>\n
Questo pattern architetturale, dove il Flexible Content gestisce il layout e i custom post type gestiscono i dati, è considerato una best practice nella comunità degli sviluppatori ACF. Produce codice più pulito, database più efficienti e un’esperienza di editing più intuitiva. Lo svantaggio è che richiede più lavoro iniziale nella progettazione dell’architettura, ma ripaga ampiamente in manutenibilità e scalabilità.<\/p>\n
Preview e Anteprima dei Layout<\/h2>\n
Una delle limitazioni storiche del Flexible Content è la mancanza di un’anteprima visuale nell’editor. L’utente vede solo i campi da compilare, senza un’idea chiara di come il layout apparirà nel frontend. Per mitigare questo problema, puoi adottare diverse strategie. La prima è utilizzare il campo Message<\/strong> all’inizio di ogni layout per mostrare un’anteprima o una descrizione visiva del layout, eventualmente con un’immagine di esempio.<\/p>\n
La seconda strategia è sfruttare il sistema di preview<\/strong> di WordPress: assicurati che il pulsante “Anteprima” funzioni correttamente per il tuo tema, in modo che l’utente possa vedere il risultato in un’altra finestra del browser mentre compila i campi. La terza strategia, più avanzata, è utilizzare JavaScript personalizzato per creare anteprime live nell’editor, ma questo richiede un investimento significativo in sviluppo frontend.<\/p>\n
Con l’introduzione dei blocchi ACF per Gutenberg (che tratteremo in un articolo dedicato), la situazione è migliorata notevolmente: i blocchi ACF offrono un’anteprima nativa nell’editor Gutenberg, combinando la potenza dei campi ACF con l’esperienza visuale dell’editor a blocchi.<\/p>\n
\n
Leggi anche gli altri articoli della serie ACF<\/h3>\n