WP Offload Media

Sono un fan di Advanced Custom Fields (ACF) da molto tempo ormai. È usato su quasi tutti i siti che ho costruito o su cui ho lavorato negli ultimi anni.

Per chi non lo sapesse, ACF è un plugin che ti dà più controllo sul tuo contenuto. Utilizza post meta personalizzati per arricchire il vostro contenuto con dati strutturati. Ti permette anche di costruire e configurare i campi di dati nei meta box quando aggiorni i post, le pagine, i post type personalizzati e molto altro ancora.

In passato, ho usato il plugin come parte di un progetto sul sito Delicious Brains. Tuttavia, questo post sul blog mi ha mostrato quanto sia vitale la soluzione di terze parti per lo sviluppo di WordPress. Lasciatemi spiegare…

Come funziona ACF

Mi ci è voluto un po’ per capire cosa fa ACF, quindi ecco un rapido esempio. L’ho usato su un sito di beneficenza per il soccorso dei cani, dove gli utenti aggiungono nuovi cani da riprendersi come un tipo di post personalizzato. Tuttavia, insieme al nome del cane, alla descrizione, al titolo del post e al contenuto, vogliono anche memorizzare la razza e il sesso del cane, un link a un video e alcune foto.

Per fare questo, ho creato un gruppo di campi per questi dati dal menu Custom Fields > Field Groups > Add New:

È possibile aggiungere campi di vari tipi. Qui ho usato selezioni, caselle di testo, un semplice checkbox booleano e un campo galleria. Quest’ultimo è un’opzione di ACF Pro, di cui parlerò più avanti.

Ecco come si configura una select box, completa di opzioni utente:

In seguito, ho detto che questo gruppo dovrebbe apparire solo nelle schermate di modifica del Dog post type personalizzato. C’è tutta una serie di logiche che si possono usare qui, come i tipi di post, i template, le categorie e i ruoli degli utenti:

Tuttavia, il vero potere di ACF è quando si aggiungono dati.

Aggiungimento di dati ai campi ACF

La schermata di modifica appare diversa quando si lavora su un Dog post. Mostra un meta box personalizzato completo dei campi definiti:

Questo rende l’aggiunta di tutti i dati extra facile per gli editor di contenuti. Vi permette anche di specificare esattamente dove volete che i dati siano resi nel tema, usando il codice della funzione get_field:

<div class="columns small-12 medium-9"> <a href="<?php get_permalink(); ?>"> <h2 class="icon paw"><?php get_the_title(); ?> <span class="dog-data"> <?php printf( ‘%s %s, get_field( 'gender' ), get_field( 'breed' ) ); ?> </span> </h2> </a></div>

Senza il plugin, dovrei usare i meta box personalizzati di default di WordPress, scrivere i miei meta box più ricchi da zero, o inserire la razza e il sesso del cane in tassonomie personalizzate. Potrei anche dover usare la galleria nativa incorporata nel contenuto del post.

ACF eleva WordPress

ACF è esattamente ciò che mancava a WordPress come sistema di gestione dei contenuti (CMS) quando si trattava di avere più controllo sui vostri contenuti. Con oltre un milione di installazioni attive, ha contribuito a rendere la piattaforma WordPress più potente, e potrebbe anche aver contribuito alla sua crescita.

Inoltre, gli sviluppatori e le agenzie lo hanno sfruttato per dare ai clienti il controllo dei loro contenuti senza la necessità di codici brevi, costruttori di pagine o addirittura post_content. Gli sviluppatori hanno il controllo completo su dove appaiono i dati sul front-end del sito, evitando le inevitabili modifiche del cliente che distruggono le immagini.

In effetti, ACF è così popolare tra i nostri clienti che abbiamo dovuto aggiungere un’integrazione con WP Offload Media. Ora, le immagini e il ritaglio funzionano con i media scaricati su Amazon S3, DigitalOcean Spaces o Google Cloud Storage.

Aggiungimento di opzioni di campo extra ad ACF

La versione gratuita del plugin ha molte funzionalità. Tuttavia, la versione premium è essenziale per avere accesso a campi come i ripetitori, i layout flessibili e le gallerie.

Per esempio, stiamo usando il campo Repeater per permettere agli utenti di visualizzare testimonianze selezionate in uno slider sulle pagine dei prodotti. Il ripetitore contiene un campo oggetto post annidato:

Appare poi quando si modifica la pagina, così possiamo controllare quali testimonial verranno visualizzati:

Con azioni e filtri sparsi nella codebase, ACF è sempre stato uno strumento estremamente facile da sviluppare ed estendere. Inoltre dà la priorità ai miglioramenti che sono importanti per i suoi utenti.

Utilizzare la funzione JSON locale

Tuttavia, uno dei pochi problemi che ho riscontrato in passato era la memorizzazione delle configurazioni dei campi nel database, in particolare i tipi di post personalizzati per i gruppi di campi e i campi.

Questo significava che se si cambiava la definizione del campo su un sito di sviluppo, non si poteva spingere il database usando una soluzione come WP Migrate DB Pro per tornare in funzione. Scopriresti che la tabella dei post cambierebbe, e perderesti i nuovi dati.

Questo è il vecchio problema della fusione dei database (non farmi iniziare…). Ero solito aggirare questo problema facendo prima dei cambiamenti di campo sul sito dal vivo. Poi, tiravo il database sul mio sito locale per continuare lo sviluppo. Non è l’ideale.

Fortunatamente, ACF ha introdotto la funzione Local JSON. Ciò che fa è permettere di salvare le configurazioni dei campi come file JSON, che possono sincronizzarsi con il database.

Questa fantastica caratteristica risolve il problema della fusione del database per i dati ACF. Significa anche che puoi tenere i file JSON sotto controllo di versione e rendere la configurazione una parte del tuo tipico processo di distribuzione dei file. Lavorando con il plugin sul nostro sito, ho aggiunto alcune modifiche per integrarlo ancora di più con la nostra configurazione Git e multi-ambiente:

• Ho definito la directory JSON nella nostra app/data directory fuori dal tema (perché potrebbe cambiare).
• La voce di menu “Campi personalizzati” verrà visualizzata solo negli ambienti di sviluppo.
• I file JSON con una configurazione del database non aggiornata su admin_init si sincronizzeranno automaticamente.

Anche se ora abbiamo il Block Editor di WordPress (precedentemente noto come Gutenberg), direi che ACF è ancora vitale per creare una grande esperienza di editing.

Utilizzare il Block Editor insieme ad ACF

Il Block Editor offre una direzione diversa per la modifica dei contenuti rispetto ad ACF. Si crea il contenuto usando i blocchi invece di memorizzarlo come meta dati del post, il che offre una certa flessibilità di progettazione.

All’inizio, l’editor dei blocchi non supportava i meta box. Sono stati persino rimossi dalla schermata “Edit Post”, suscitando molta indignazione. Ora è stato aggiunto il supporto per i meta box. Essi appaiono sotto l’editor dei blocchi con un’interfaccia utente (UI) minima e meno raffinata.

Utilizzando i blocchi invece dei campi per i dati personalizzati, il nuovo editor ha il potenziale per avere un enorme impatto sul futuro di ACF. Inoltre, i nuovi siti saranno molto meno propensi a installare uno strumento di terze parti ora che c’è una soluzione nativa.

Tuttavia, non è la prima volta che i cambiamenti proposti al nucleo minacciano il futuro di ACF. Qualche anno fa, un nuovo team è stato messo insieme per Post Meta. All’inizio, sembrava che questo avrebbe ucciso le varie soluzioni di campi personalizzati di terze parti:

Ci sono state una serie di librerie/frameworks/plugins (CMB, SCB, WPAlchemy, ACF, Pods), che hanno riempito questo ruolo per il momento. Guarderemo a questi come prequel spirituali di un nuovo plugin degno del core.

All’epoca, ho scritto di come questa decisione di introdurre nuove funzionalità concorrenti potrebbe rendere alcuni plugin ridondanti. Alla fine il progetto Post Meta non è andato da nessuna parte, il nuovo editor è arrivato, e ACF ha superato la tempesta.

ACF non solo si è ripreso, ma si è adattato. Il risultato fu qualcosa che combinava la potenza di ACF e la flessibilità dei blocchi personalizzati. Parliamone ora.

Come costruire blocchi usando ACF

Ovviamente, i blocchi personalizzati possono essere utili. Tuttavia, il processo tecnico per crearli è complesso. I blocchi ACF colmano la lacuna.

I blocchi ACF si integrano con i tuoi attuali campi personalizzati, sono dinamici e personalizzabili, e ti permettono di ottenere due cose:

• Puoi portare i tuoi attuali campi personalizzati nell’ecosistema del Block Editor.
• Si possono creare soluzioni in linea personalizzate.

Sono resi utilizzando un file template PHP o una funzione callback – quindi è proprio come sviluppare un tema. Mantengono anche la compatibilità con il core di WordPress, quindi potreste anche creare blocchi riutilizzabili attraverso il framework.

Mentre i blocchi ACF non sono una stampella, direi che se le vostre competenze di React sono ancora abbozzate, vorrete sicuramente indagare ulteriormente. Ti permetteranno di sfruttare la potenza del Block Editor pur rimanendo all’interno del familiare functions.php file.

Costruire un blocco ACF

Vi mostriamo come costruire un blocco ACF. La versione Pro dello strumento ha incluso questa funzionalità da ACF 5.8, quindi è con noi da circa due anni. Ecco il semplicissimo codice di registrazione del blocco di esempio:

add_action('acf/init', 'my_acf_init');function my_acf_init() { // check function exists if( function_exists('acf_register_block_type') ) { // register a testimonial block acf_register_block_type(array( 'name' => 'testimonial', 'title' => __('Testimonial'), 'description' => __('A custom testimonial block.'), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'render_callback' => 'my_acf_bock_render_callback', 'category' => 'formatting', 'icon' => 'admin-comments', 'keywords' => array( 'testimonial', 'quote' ), )); }}

Da qui, si vuole creare un gruppo di campi e rendere il blocco. Per il primo, lo farete dall’interno della schermata Custom Fields > Field Groups all’interno di WordPress:

Qui, aggiungete il vostro gruppo di campi e popolatelo normalmente. Tuttavia, nel meta box “Posizione”, vorrai usare la regola “Blocco” per selezionare (in questo caso) il blocco Testimonial.

Finalmente, dovrai rendere il blocco. Questo segue lo stesso processo a cui si potrebbe essere già abituati con i campi personalizzati:

• Crea un file template per il tuo tema basato sul parametro dato nell’impostazione render_template quando si registra inizialmente il blocco.
• Choose the right method for rendering the Block.
• Enqueue your styles and scripts.

Note that the acf_register_block_type() function offers enqueue_styleenqueue_script and enqueue_assets settings.

On the whole, Blocks shouldn’t replace every custom field meta box where they’re needed, but they will let you take advantage of crafting content in the editor.

‘InnerBlocks’ Support

The Block Editor also has functionality that helps you work with ACF Blocks. InnerBlocks essentially let you insert any new Block into your ACF Block.

They can be custom or core Blocks, and you’re able to use the current “Title”, “Content”, and “Button” fields in your own ACF Blocks.

Here’s a quick tutorial to get up and running. Per iniziare ad usare gli InnerBlocks, includete 'jsx' => true nell’array supports:

acf_register_block_type( array( 'name' => 'testimonial', 'title' => __( 'Testimonial' ), 'render_template' => 'template-parts/blocks/testimonial/testimonial.php', 'mode' => 'preview', 'supports' => ));

Avrete poi bisogno di echo il tag HTML <InnerBlocks /> nel vostro template di blocco:

 echo '<div class="block-about__content">'; echo '<InnerBlocks />';

Questo è solo un semplice esempio, ma si possono fare molte altre cose con gli InnerBlocks.

Alternative ai blocchi ACF

Naturalmente, ACF non sarà l’unica soluzione per creare blocchi. Come tale, il vostro primo istinto sarà probabilmente una costruzione personalizzata.

Abbiamo coperto come creare un blocco ‘vanilla’ in passato, ma prima di iniziare, avrete bisogno di una conoscenza di React.

Ci sono anche plugin per WordPress che vi permettono di assemblare blocchi da vari componenti, ma direi che non sono davvero per sviluppatori ma per ‘armeggiatori dell’utente finale’. Lazy Blocks è regolarmente aggiornato, quindi questa è una buona opzione se volete sperimentare ciò che offre.

Il futuro di ACF

Dal suo rilascio, ACF è stato un plugin complementare vitale per WordPress. Estende, arricchisce e rende la piattaforma più utilizzabile. Non credo che potrei costruire siti web senza di lui.

Tuttavia, la combinazione del Block Editor e di ACF Blocks è la ciliegina sulla torta – è un eccellente investimento nel futuro del CMS. Aiuterà ad abbassare la barriera d’ingresso per gli sviluppatori per estendere il Block Editor senza iniziare la ripida curva di apprendimento di React. A lungo termine, coloro che stanno spingendo così tanto per l’evoluzione del Block Editor potrebbero vedere questo come una vittoria.