Classic Editor e ACF: Campi Personalizzati con Editor Classico

Classic Editor e ACF: Campi Personalizzati con Editor Classico

Advanced Custom Fields (ACF) è uno dei plugin più importanti dell’ecosistema WordPress, utilizzato da sviluppatori e agenzie in tutto il mondo per creare interfacce di editing personalizzate senza scrivere codice complesso. La combinazione di ACF con Classic Editor rappresenta un’accoppiata vincente che offre il massimo controllo sulla struttura dei contenuti mantenendo un’interfaccia utente familiare e intuitiva. In questa guida esploreremo come ACF e Classic Editor lavorano insieme, le best practice per la configurazione e le soluzioni ai problemi più comuni.

Perché ACF Funziona Meglio con Classic Editor

ACF è stato sviluppato originariamente per l’editor classico di WordPress. Le sue metabox, i gruppi di campi e le interfacce di editing sono state progettate per integrarsi con la struttura a metabox dell’editor tradizionale. Sebbene ACF abbia aggiunto il supporto per Gutenberg (con il pannello laterale e i blocchi ACF), l’esperienza con Classic Editor rimane superiore per diversi motivi.

Con Classic Editor, i campi ACF appaiono come metabox posizionate sopra, sotto o accanto all’editor principale. L’utente può vedere contemporaneamente il contenuto dell’editor e tutti i campi personalizzati, scorrendo verticalmente nella pagina. Con Gutenberg, i campi ACF possono apparire nel pannello laterale (dove lo spazio è limitato) o come blocchi separati, frammentando l’esperienza di editing.

Inoltre, i campi ACF più complessi come il Repeater (ripetitore), il Flexible Content (contenuto flessibile) e il Group (gruppo) offrono un’esperienza molto più fluida con Classic Editor, dove hanno spazio orizzontale sufficiente per visualizzare tabelle, sottocampi e layout nested senza compressione.

Configurazione dei Gruppi di Campi

La configurazione di ACF con Classic Editor inizia dalla creazione dei gruppi di campi. Vai su ACF > Gruppi di campi > Aggiungi nuovo. Ogni gruppo di campi può essere configurato con regole di posizionamento che determinano dove e quando il gruppo appare nell’interfaccia di editing.

Le regole di localizzazione permettono di mostrare un gruppo di campi solo per specifici post type, template di pagina, categorie, ruoli utente e molte altre condizioni. Ad esempio, puoi creare un gruppo “Dati Immobile” che appare solo quando il post type è “immobile”, o un gruppo “Dettagli Evento” visibile solo per gli articoli nella categoria “Eventi”.

Le impostazioni di posizione del gruppo controllano dove appare la metabox nella pagina di editing. Con Classic Editor, le opzioni principali sono: “Dopo il titolo” (tra il titolo e l’editor TinyMCE), “Normale” (sotto l’editor) e “Lato” (nella sidebar destra). La scelta della posizione influisce significativamente sull’usabilità: posiziona i campi più importanti e utilizzati frequentemente “Dopo il titolo” per renderli immediatamente visibili.

Tipi di Campo ACF e Classic Editor

ACF offre oltre 30 tipi di campo, ciascuno ottimizzato per un tipo specifico di dato. Con Classic Editor, tutti i tipi di campo funzionano perfettamente e la loro interfaccia è visualizzata al meglio grazie allo spazio disponibile nella zona principale della pagina di editing. Ecco i tipi più utilizzati:

Campi di testo: Text, Textarea, Number, Email, URL, Password. Questi campi base sono ideali per dati semplici come sottotitoli, prezzi, link e contatti. Con Classic Editor, occupano l’intera larghezza disponibile o possono essere disposti su più colonne usando le impostazioni di layout del gruppo.

Campi di scelta: Select, Checkbox, Radio Button, True/False, Button Group. Perfetti per opzioni categoriche come lo stato di un elemento, la tipologia di un servizio o preferenze binarie. In Classic Editor, questi campi sono sempre visibili senza necessità di aprire pannelli laterali.

Campi relazionali: Relationship, Post Object, Page Link, User, Taxonomy. Permettono di creare collegamenti tra contenuti diversi, come associare un autore a un libro o un prodotto a una categoria. L’interfaccia di selezione di questi campi, con ricerca e filtri, funziona in modo ottimale nell’ampio spazio delle metabox di Classic Editor.

Campi media: Image, File, Gallery, oEmbed. Per caricare e gestire file multimediali. Il campo Gallery in particolare beneficia enormemente dello spazio offerto da Classic Editor, mostrando anteprime delle immagini in una griglia chiara e ridimensionabile.

Il Campo Repeater con Classic Editor

Il Repeater (disponibile in ACF PRO) è uno dei campi più potenti e la sua usabilità con Classic Editor è notevolmente superiore rispetto a Gutenberg. Un Repeater permette di creare un numero illimitato di righe, ciascuna contenente un set predefinito di sottocampi. L’esempio classico è una sezione “Team” dove ogni riga contiene nome, ruolo, foto e bio di un membro.

Con Classic Editor, il Repeater viene visualizzato come una tabella espandibile nella metabox. Ogni riga mostra i sottocampi in colonne o in layout a blocchi (a seconda della configurazione). L’utente può aggiungere, rimuovere, duplicare e riordinare le righe con drag-and-drop. La visualizzazione tabulare è particolarmente efficace perché permette di confrontare rapidamente i dati tra le righe.

In Gutenberg, lo stesso Repeater viene compresso nel pannello laterale o inserito come blocco, perdendo la chiarezza della visualizzazione tabulare. Per dataset complessi con molte righe e sottocampi, la differenza di usabilità è significativa.

Flexible Content: Layout Dinamici

Il Flexible Content (contenuto flessibile) è un campo ACF PRO che permette di creare layout di pagina modulari. Funziona come un mini page builder: l’utente può aggiungere, rimuovere e riordinare “layout” predefiniti, ciascuno con i propri campi. Ad esempio, puoi definire layout come “Hero Section”, “Griglia Servizi”, “Testimonianze” e “CTA”, e l’utente li assembla nell’ordine desiderato.

Con Classic Editor, il Flexible Content è posizionato come metabox e l’utente aggiunge layout cliccando su un pulsante che mostra le opzioni disponibili. Ogni layout aggiunto può essere espanso per modificare i campi o collassato per avere una visione d’insieme della struttura della pagina. Il drag-and-drop permette di riordinare i layout facilmente.

Questa combinazione di Classic Editor + ACF Flexible Content è un’alternativa leggera ai page builder come Elementor per siti dove il design è predefinito dallo sviluppatore e il cliente deve solo inserire i contenuti. Lo sviluppatore crea i template PHP che renderizzano i layout, e il cliente usa l’interfaccia ACF in Classic Editor per popolarli con i propri contenuti.

Nascondere l’Editor TinyMCE

In molti progetti basati su ACF, l’editor TinyMCE principale non è necessario perché tutti i contenuti sono gestiti tramite campi personalizzati. Con Classic Editor, puoi nascondere l’editor in diversi modi. Il metodo più semplice è rimuovere il supporto “editor” dal post type nella sua registrazione tramite remove_post_type_support().

function remove_editor_from_custom_pt() {
    remove_post_type_support(progetto, editor);
}
add_action(init, remove_editor_from_custom_pt);

In alternativa, puoi usare un campo ACF WYSIWYG al posto dell’editor principale, ottenendo lo stesso tipo di editor TinyMCE ma come campo ACF posizionabile e configurabile. Questo approccio offre più controllo: puoi impostare la toolbar del WYSIWYG, limitare i media tab e definire le opzioni di formattazione disponibili.

Pagine di Opzioni con ACF e Classic Editor

ACF PRO permette di creare pagine di opzioni personalizzate nell’admin di WordPress. Queste pagine sono particolarmente utili per impostazioni globali del sito come informazioni aziendali, link ai social media, testi ricorrenti nel footer e configurazioni generali. Le pagine di opzioni usano la stessa interfaccia delle metabox di Classic Editor, offrendo un’esperienza coerente in tutto il backend.

Per creare una pagina di opzioni, registrala con acf_add_options_page() nel functions.php e crea un gruppo di campi con la regola di localizzazione “Pagina opzioni è uguale a [nome pagina]”. I valori salvati in queste pagine sono accessibili nel template con get_field(nome_campo, option).

Validazione e Messaggi di Errore

ACF offre validazione lato client e lato server per i campi personalizzati. Con Classic Editor, i messaggi di errore di validazione appaiono chiaramente accanto ai campi interessati, evidenziati in rosso. L’utente può scorrere rapidamente fino al campo con l’errore e correggerlo prima di salvare nuovamente.

La validazione include controlli come “campo obbligatorio”, “valore minimo/massimo” per i numeri, “formato email valido”, “dimensioni immagine minime” e regole personalizzate tramite il filtro acf/validate_value. Classic Editor gestisce questi messaggi in modo diretto e non ambiguo, rendendo chiaro all’utente cosa deve correggere.

Import/Export dei Gruppi di Campi

ACF permette di esportare i gruppi di campi come file JSON o PHP per la portabilità tra ambienti. Questa funzionalità è fondamentale per i flussi di lavoro di sviluppo professionale dove i gruppi di campi vengono creati in un ambiente di sviluppo e poi distribuiti su staging e produzione. L’esportazione in PHP è particolarmente utile perché i gruppi di campi vengono inclusi nel codice del tema o del plugin, eliminando la necessità di sincronizzare il database tra gli ambienti.

Conclusioni

La combinazione di ACF e Classic Editor rimane una delle soluzioni più potenti e flessibili per la creazione di interfacce di editing personalizzate in WordPress. L’editor classico offre lo spazio e la struttura ideale per i campi ACF, specialmente per i tipi di campo complessi come Repeater e Flexible Content. Se il tuo progetto WordPress richiede strutture dati personalizzate e un’interfaccia di editing su misura, ACF con Classic Editor è la combinazione che ti consigliamo di valutare.

Hai bisogno di sviluppare un’interfaccia di editing personalizzata con ACF e Classic Editor per il tuo progetto WordPress? Il team di G Tech Group è specializzato nella creazione di soluzioni WordPress su misura. Contattaci per discutere le tue esigenze e ricevere un preventivo personalizzato.

Migliora il Tuo Sito WordPress

Scopri le nostre guide complete sugli altri plugin essenziali per WordPress:

• Come Installare Elementor su WordPress
• Come Installare e Configurare WP Rocket
• Come Installare e Configurare SEOPress
• Come Installare e Configurare UpdraftPlus