7 cose che non sapevi di poter fare con i campi personalizzati avanzati

Advanced Custom Fields (ACF) è quasi sinonimo di sviluppo di WordPress. Alimentando oltre 4,5 milioni di siti, questo plugin ha aiutato WordPress a raggiungere nuovi livelli. Conosci il plug-in. Probabilmente hai costruito con il plugin. Ma ne stai sfruttando appieno?

In questa sessione, daremo uno sguardo rapido ad alcuni dei modi meno conosciuti in cui puoi sfruttare ACF per creare le tue esperienze WordPress più dinamiche, potenti e coinvolgenti.

Altoparlanti:

• Iain Poulson, Senior Product Manager di WP Engine
• Rob Stinson, Product Marketing Manager presso WP Engine

Slide della sessione:

Trascrizione:

Iain Poulson: Ciao e benvenuto alla nostra sessione sul plug-in Advanced Custom Fields. Sono Iain Poulson, Product Manager per ACF presso WP Engine, e sono qui affiancato da Rob Stinson, che è il nostro Product Marketing Manager. Oggi ti condurremo attraverso una sessione abbastanza rapida di sette cose che non sapevi di poter fare con il plug-in Advanced Custom Fields, alcune cose che sono abbastanza nuove e alcune cose che sono meno conosciute. E funzionalità che ci concentreremo su un sito fittizio che Rob ha progettato, quindi siamo fan fondamentalmente di esempi reali piuttosto che di cose astratte, ma siamo anche grandi fan dei film.

Quindi questo sito è una celebrazione del miglior periodo del cinema, probabilmente, probabilmente, i film degli anni '90, e quindi il sito si basa sul riconoscimento e sulla premiazione dei film più popolari e più amati degli anni '90. Il sito deve mostrare i film e consentire agli utenti di votare per il loro preferito e, in vero stile Rob, il sito ha un bell'aspetto. Quindi iniziamo, partiamo dall'inizio e installiamo ACF. Dimmi come, Rob.

ROB Stinson: Fantastico, grazie, Iain. Sì, grazie, amico. Ha un bell'aspetto, vero? È passato un bel po' di tempo a progettarlo, ci siamo divertiti un po'. Quindi abbiamo vinto il contratto. Abbiamo il progetto e stiamo dando il via alle cose, e la prima cosa che abbiamo fatto è stata se fosse identificato, che questo avesse senso in primo luogo, per ACF. Avremo bisogno di impostare un intero gruppo di campi personalizzati per alcuni tipi di post personalizzati e creare modelli interessanti e cose del genere. ACF è lo strumento per il lavoro qui. Quindi, ovviamente, dobbiamo prima installare ACF, e questo è il numero uno qui. Quindi in genere sappiamo che potresti semplicemente prendere il plug-in come file zip e caricarlo nell'amministratore di WordPress, bello e semplice.

Questo è il modo standard di installare un plug-in, ma sappiamo anche che gli sviluppatori di questi tempi amano gestire le proprie dipendenze in modo leggermente diverso. In genere mi piace gestirlo all'interno del codice e all'interno del mondo PHP, in genere viene fatto con Composer. Ora sei stato in grado di installare i plugin di WordPress dal repository di WordPress.org per un po' di tempo abbastanza facilmente con Composer, ma è stato un po' più difficile da fare con i plugin premium come ACF Pro.

Ma la versione più recente un paio di settimane fa, in realtà, circa un mese fa, abbiamo effettivamente abilitato la possibilità di installare ACL Pro ora tramite Composer, il che è fantastico, quindi lo faremo proprio ora. Quindi, come fare questo è, passaggio numero uno, è necessario aggiungere l'URL di ACF Pro Composer Repo al tuo file composer.JSON. Il passaggio numero due è che creerai un file auth.JSON per le tue credenziali e lo inserirai nella radice del tuo progetto, sia localmente che sulla strada per dove stiamo distribuendo e il le credenziali necessarie per quel file sono ora disponibili nell'area del tuo account su advancedcustomfields.com.

Quindi, se accedi, vedrai un'area delle licenze, e ci sono alcune schede extra e cose del genere, puoi effettivamente prendere l'intero pezzo di codice, copiare e incollare tutto, oppure puoi prendere il singolo nome utente e password e trasferiscila nel file che hai creato, il file auth.JSON.

E il terzo passaggio, eseguiamo il comando Composer, quindi è bello e facile, un processo in 3 passaggi, ma fantastico perché significa che, come ho detto, gli sviluppatori a cui piace avere un controllo un po' più preciso su come gestiscono le loro dipendenze del loro progetto, ora puoi farlo con ACF Pro, il che è fantastico. Ovviamente c'è più documentazione su di esso, quindi solo per approfondire e solo per vedere come si decomprime tutto, passa ai documenti sul sito Web e dovresti essere a posto. Fantastico, vomiterò a Iain per il numero due.

Iain Poulson: Bene, ora parliamo dell'impostazione dei dati per il sito. Quindi i tipi di post personalizzati, sono piuttosto fondamentali in WordPress nel modo in cui costruisci un sito che non riguarda solo post o pagine. È la funzione di tipo di post personalizzato che è stata introdotta in qualsiasi versione di WordPress nel passato lo trasforma in un vero e proprio CMS, e di solito è il primo passo che gli sviluppatori fanno quando stanno costruendo i siti. Ed è sempre stato qualcosa che è successo al di fuori di ACF. Storicamente, o registri un tipo di post con il codice o usi un altro plugin per farlo, ma è la parte del viaggio che si collega abbastanza bene con ACF. Quindi, come parte di ACF 6.1, quella funzionalità sta arrivando al plugin, quindi è il punto di partenza naturale del viaggio.

Vuoi creare un sito con i dati della struttura dei dati, creerai un tipo di post. Aggiungerai campi ad esso, quindi potresti aggiungere alcune tassonomie e quindi iniziare a modificare quei dati. Quindi sì, è qualcosa che abbiamo inserito nella 6.1 ed è piuttosto eccitante avere quel flusso completo di costruzione in CMS. Quindi cerchiamo il sito del premio VHS. Avremo bisogno di strutturare i nostri dati e fare in modo che WordPress faccia ciò di cui abbiamo bisogno, quindi in termini di tipo di post, poiché non vogliamo utilizzare post e pagine, creeremo un post personalizzato type for movie, per archiviare i dati del film, l'oggetto dati o il modello dati, ma ovviamente in termini di WordPress, si tratta di un tipo di post personalizzato.

Vogliamo classificare i film con una tassonomia in modo da poter consentire agli utenti di vedere facilmente film di un tipo di genere, e quindi otterrai la facile visualizzazione front-end, i semplici URL che ti consentono di accedere a film di determinati generi. E avremo bisogno di alcuni campi extra per archiviare dati strutturati attorno a un film, quindi vogliamo, ad esempio, che il regista sia un campo di testo. Avremo bisogno dell'anno in cui il film è uscito come numero, e avremo bisogno di qualche forma di relazione per mettere in relazione i film tra loro, e ovviamente, dobbiamo memorizzare il numero di voti che otterrà, e questo è il campo numerico.

Quindi diamo solo una rapida occhiata in ACF 6.1 a come lo faremo. Quindi questa è la schermata ACF 6.1 e noterai che è leggermente diversa, abbiamo il menu nella barra laterale. Ora è ACF, non solo campi personalizzati, e questa è la schermata del tipo di post. Quindi questo sono solo io che sto impostando il tipo di post del film. È il flusso di lavoro più semplice qui, semplicemente aggiungendo un'etichetta singolare per il tipo di post, che è film, l'etichetta plurale, e viene generata automaticamente la chiave del tipo di post. L'impostazione pubblica è impostata come predefinita perché voglio che sia visibile nel front-end, nel tipo di post e voglio poterlo modificare nell'amministratore.

Quindi, una volta salvato e aggiunto, la cosa bella della connessione qui con ACF è il fatto che il passaggio successivo nel viaggio è che abbiamo creato il tipo di post, vogliamo aggiungere campi al tipo di post o vogliamo collegare i campi esistenti al tipo di post o creare una tassonomia? Quindi possiamo fare tutto da quel punto qui, quindi e ovviamente dobbiamo aggiungere quei campi. OK, quindi facendo clic su quell'avviso per aggiungere nuovi campi al tipo di post del film, otteniamo l'Editor del gruppo di campi, ed è precompilato in basso nelle impostazioni Metabox.

Quindi le regole di posizione sono già impostate per dire, mostra questi campi, quando stai modificando il tipo di post del film, e poi puoi andare avanti e aggiungere i tuoi campi, cosa che ho già fatto qui nello screenshot. Quindi abbiamo il regista, l'anno, i voti e i film correlati. Quindi, ovviamente, possiamo registrare la tassonomia personalizzata di cui abbiamo parlato, aggiungendo il genere e collegando la tassonomia del genere al tipo di post dei film. Ma questi sono i campi che abbiamo aggiunto che sono collegati all'oggetto film, ma per quanto riguarda i campi di cui abbiamo bisogno per archiviare dati che potrebbero essere più globali o a livello di sito? Rob, cosa abbiamo in cambio?

Rob Stinson: Fantastico, grazie per quello, Iain, sembra buono. Il nostro modello di contenuto sta procedendo bene, ma non abbiamo ancora finito. Ora abbiamo già trattato l'installazione di ACF Pro tramite Composer e abbiamo appena esaminato i tipi di post personalizzati e le tassonomie personalizzate in ACF. Ora quelle due cose che sono molto, molto fresche, ma la terza cosa che voglio coprire ora, è un vecchio, ma un buono. E quindi è stato nel plugin per un certo numero di anni, ma non tutti lo sanno, e non tutti ne comprendono appieno il valore, quindi esamineremo ora i campi globali con la pagina delle opzioni.

Ora, in genere, pensi a un campo personalizzato e al modo in cui memorizza i dati per un particolare post, o una pagina, o un tipo di post personalizzato. Ma a volte abbiamo la necessità di archiviare dati associati a tutto il sito e un ottimo esempio sul nostro meraviglioso sito di premi VHS è questo tipo di barra di notifica o promozionale. E questa è una barra che vogliamo persistere in ogni singola pagina del sito Home page, vai alla pagina di un film, è lì. Vai alla pagina Informazioni, o a una pagina Contatti o a una pagina Blog, questa piccola barra si trova in tutto il sito, indipendentemente da dove naviga l'utente, quindi non ha senso associare quei dati rilevanti a un post o a un film.

È qualcosa che dovrebbe essere associato al sito. Quindi vogliamo essere in grado di attivare e disattivare questa barra perché vogliamo impostare le cose, ma forse vorremo attivarla in determinati periodi dell'anno. Potremmo avere una promozione o una campagna particolare, quindi vogliamo la possibilità di avere un campo booleano, in modo da poter attivare e disattivare questa cosa. Inoltre, vogliamo essere in grado di aggiornare il testo dell'azione richiamata stessa o nel pulsante, quindi ovviamente i campi personalizzati hanno molto senso per questo.

Ora per impostare una pagina delle opzioni, che è la funzionalità all'interno di ACF che ci consente di farlo, il passaggio numero uno è, in genere nelle tue funzioni, file .PHP, oppure puoi, ovviamente, registrarlo altrove, forse un plug-in che stai sviluppando. Ma registrerai la pagina delle opzioni stessa e ci sono alcune piccole configurazioni nelle impostazioni che puoi fare. Puoi avere una singola pagina di opzioni, ma puoi anche averne più di una, e le hai in qualche modo nidificate, quindi pagine figlie, o pagine genitori e cose del genere, così puoi fare cose interessanti.

Per il nostro, il nostro è piuttosto semplice. Stiamo solo impostando una barra di notifica qui, quindi abbiamo solo bisogno della singola pagina, quindi il primo passo è registrare quella pagina Opzioni. Secondo passaggio, come faremmo normalmente, creeremmo un gruppo di campi. Lo chiameremmo campi della barra della promozione, o qualcosa del genere, o campi della barra delle notifiche, e puoi vedere lì che ho il mio campo booleano in alto, quindi vero o falso è la barra della promozione attiva. E poi ho un campo di testo per il messaggio, un campo di testo per il testo del pulsante, un campo URL per il collegamento del pulsante, e poi potremmo avere anche un tipo di avviso, ma forse vogliamo avere avvisi o stile promozionale avvisi, e forse facciamo qualche interessante stile condizionale basato su quello che è selezionato lì.

Quindi aggiungiamo il nostro gruppo di campi, e aggiungiamo i nostri campi, e il passaggio tre è appena sotto. Come sai, nelle regole sulla posizione, ora possiamo selezionare la pagina delle opzioni è uguale a– e vedi le impostazioni del sito che ho lì– che è la pagina delle opzioni che ho registrato nel passaggio numero uno. E così, con tutto ciò che è stato fatto, nell'amministratore di WordPress ora vediamo sul lato sinistro, nella nostra barra di amministrazione abbiamo Impostazioni del sito, e facciamo clic su di esso, e vediamo tutti i campi, come ci aspetteremmo.

E possiamo attivare o disattivare la barra delle notifiche. Possiamo aggiornare il testo, aggiornare il pulsante e quindi quei dati saranno resi disponibili per il nostro modello, quindi l'esperienza del modello con i campi dati all'interno di una pagina di opzioni è sostanzialmente la stessa di quella che faresti altrimenti. Ci sono un paio di piccole sfumature su come miri specificamente al fatto che questa è una pagina di opzioni e non un post, ma passa alla documentazione su advancedcustomfields.com e ti guida attraverso come gestirla. Numero quattro, te lo restituirò, Iain.

Iain Poulson: Grazie, Rob, sì. Voglio solo ora parlare di come registriamo a livello di codice i campi con ACF. Quindi creare campi in ACF è semplicissimo con l'interfaccia utente di Field Editor, il genere di cose che conosciamo e amiamo, che abbiamo visto in precedenza, ma ci sono altri modi per definire i campi. ACF ci consente di esportare sia file JSON che PHP con definizioni di campo e che possono essere utilizzati per creare campi.

Ma sapevi che, in realtà, nella comunità ACF esiste un pacchetto chiamato ACF builder che ti consente di creare campi utilizzando una specie di API fluente con codice PHP? In realtà è un pacchetto di terze parti e si chiama ACF Builder Package di StoutLogic. Sì, il collegamento GitHub è lì. Fondamentalmente, ti consente di creare campi direttamente dal codice senza conoscere la complessità di come ACF ha bisogno dei dati del campo in PHP. Usa un modo davvero espressivo per farlo. Lo rende riutilizzabile e portatile.

È possibile eseguire il commit delle definizioni dei campi perché con i file PHP nel controllo della versione è facile collaborare. È facile da inviare al tuo meccanismo di distribuzione e in un certo senso togli anche l'interfaccia utente dell'editor del gruppo di campi, quindi definisci quei campi nel codice che impedisce ai client di toccare l'interfaccia utente, quindi diamo un'occhiata veloce a come possiamo fallo. Per installarlo, perché è un pacchetto, abbiamo già parlato di Composer. Questo è un pacchetto Composer che puoi installare con il seguente comando, Composer acquisisce StartLogic, il fornitore, ACF Builder, e quindi questo è l'aspetto del codice.

Stai in qualche modo istanziando un'istanza di Fields Builder e gli stai dando l'idea di quello che sarebbe il gruppo di campi. E poi stai dicendo, in questo gruppo di campi, aggiungiamo un campo di testo chiamato Director. Aggiungiamo un campo numerico chiamato Anno e poi, cosa importante, imposteremo la posizione in cui il gruppo di campi deve apparire nel tipo di post del film.

E tutto questo fa molto per te senza che tu debba pensarci, quindi gli dai il nome del regista per l'etichetta del campo, e andrà avanti e, ovviamente, creerà la lumaca o la chiave per il campo senza che tu debba per aggiungerlo, quindi ci vuole molta digitazione, molta riflessione e molta creazione soggetta a errori. E poi la seconda parte è dove carichi quella definizione di campo in ACF, e costruirà il gruppo di campi per te.

Rob Stinson: Va bene, quindi numero 5 qui, relazioni bidirezionali. Ora, questo è interessante. Penso di ricordare questo progetto specifico su cui ho lavorato ai tempi della mia agenzia in cui l'ho capito davvero, ed è stato una specie di punto di svolta. Quindi, se questo non è qualcosa che hai fatto prima con ACF, fai attenzione, perché questa è una cosa davvero utile, quindi diamo un'occhiata a un esempio. Guardando, ovviamente, il nostro sito di premi VHS, abbiamo un elenco di circa 100 film, e ovviamente ci sono diversi modi per collegare queste cose.

Abbiamo già la nostra tassonomia personalizzata di genere. Potremmo avere un paio di campi diversi che in qualche modo gestiscono cose come tag o raggruppamento, quindi le relazioni bidirezionali sono utili quando vuoi creare un tipo specifico di connessione bidirezionale tra due post o, nel nostro caso, due film. Quindi, per il nostro esempio, diciamo solo che abbiamo questi tre film nel nostro database, e sono tutti animati, quindi vogliamo creare una relazione bidirezionale con loro.

Ora ciò significa che diciamo che abbiamo il nostro primo film qui, "Toy Story", un grande film, e identifichiamo che ci sono altri due film correlati che vogliamo associare. Quindi potremmo creare un campo di relazione per il nostro tipo di post personalizzato, che è film, e avremmo un campo di relazione lì, e selezioneremmo il film, "Il re leone" e Princes Monon: mi dispiace così tanto. Continuo a inciampare su questa parola. Lo sto massacrando, ma il film si chiama "Principessa Mononoke". Hahaha. Per favore, non odiarmi. Sto solo lottando per pronunciare quella parola per qualche motivo.

E identifichiamo che questi due film sono correlati, quindi li selezioniamo dal campo delle relazioni. Ora, in questo caso, avrebbe senso che, sì, "Il re leone", ad esempio, sia correlato a "Toy Story" e quindi "Toy Story" sia correlato a "Il re leone". Quindi forse normalmente andremmo alla schermata di modifica di "Lion King", e poi troveremmo "Toy Story" e lo aggiungeremmo lì, ma stiamo raddoppiando il nostro lavoro lì. Quindi ciò che fa una relazione bidirezionale è che crea automaticamente quella connessione per noi, il che è davvero molto utile.

Quindi, una volta che aggiungiamo, ad esempio, "Il Re Leone" a "Toy Story", "Toy Story" viene automaticamente aggiunto a "Il Re Leone" e questo è davvero molto utile. Fa risparmiare molto tempo ai creatori di contenuti e ai gestori di contenuti. Riduce il rischio di dimenticanza, o forse potresti rimuoverne uno da un post e poi dimenticarti di rimuoverlo dall'altro. Semplifica davvero, davvero l'esperienza di modifica dei contenuti, quindi una cosa davvero utile che può essere utilizzata, specialmente su siti interessanti come questo. Allora come lo facciamo? Bene, ci sono due modi per farlo al momento, e parlerò di una terza cosa, forse, che arriverà in pista entro la fine dell'anno.

Quindi il modo in cui è fatto è, il numero uno è, puoi farlo nel codice. Quindi, solo con il plug-in ACF Pro installato, puoi scrivere il codice per farlo. E puoi scrivere una funzione che si aggancia al filtro del valore di aggiornamento ACF, e questo filtro viene eseguito prima che un valore venga salvato e fondamentalmente quello che fa è, prende il post corrente che stai modificando e identifica l'ID post del post che è stato aggiunto, quindi aggiorna l'altro post e fa quel tipo di corrispondenza in background per te, quindi abbastanza utile.

Un po 'di codice, quindi finché ti senti a tuo agio, non è un sollevamento troppo pesante. Ma ancora una volta, c'è un link lì, o un URL, che puoi controllare nei documenti Advanced Custom Fields per vedere come puoi farlo. L'opzione due, tuttavia, non è un codice, il che a volte è carino. Quindi questo è in realtà un plug-in dell'ecosistema chiamato ACF Extended. È disponibile su WordPress.org e ciò che fa è portare quella funzionalità nell'interfaccia utente ACF stessa.

Quindi, se hai installato questa estensione, ACF Extended, e hai installato ACF Pro, vedrai un'opzione che quando crei un campo di relazione, c'è un interruttore bidirezionale che puoi attivare, quindi puoi stabilirlo in una raccolta proprio lì dall'interfaccia utente, il che è piuttosto utile. Ora le cose stanno andando davvero in modo interessante con questo progetto, ma non perdiamo la testa con esso, o dovremmo? Iain, passo a te.

Iain Poulson: Sì, grazie Rob. Vale la pena chiamare senza testa quando si tratta di ACF. ACF ha il supporto senza testa, quindi sì, siti senza testa sottostanti, natura disaccoppiata dei siti. Sono in corso molte comunicazioni API e ACF ha il supporto API. L'API REST che abbiamo aggiunto in modo nativo in ACF a partire dalla 5.11 o 5.11 e supportiamo GraphQL con il plug-in WP GraphQL, che ha un componente aggiuntivo ACF per WP GraphQL, quindi ACF supporta i siti senza testa. Ha l'integrazione con il programma WP Engine Atlas per veri e propri siti WordPress senza testa, ma parliamo solo di una sorta di esempio reale di come prenderesti i dati che si trovano nel nostro sito VHS WordPress e li utilizzeresti in modo disaccoppiato.

Quindi, per esempio, ascoltatemi, le persone stanno praticamente votando sul sito del premio VHS, e saranno... penso che abbiamo fissato una data arbitraria, devono votare fino alla fine della data certa, e noi vedrò qual è il più popolare. Abbiamo il nostro cinema locale e sta facendo un doppio cartellone dei film degli anni '90 più votati. Quindi hanno, al cinema, hanno il loro cartellone pubblicitario, ed è online. È connesso al Web e possiamo alimentare dinamicamente ciò che viene mostrato su quel cartellone, quindi dobbiamo connetterci al nostro sito WordPress.

Ad esempio, il cartellone pubblicitario è una semplice app del nodo, dobbiamo recuperare i dati dal sito VHS, quindi diamo solo una rapida occhiata a come potremmo farlo con un endpoint API REST personalizzato e, come ho detto prima, abbiamo ha ottenuto il supporto GraphQL. Può essere fatto in entrambi i modi, ma questo è probabilmente un esempio più semplice da mostrare. Quindi, prima di tutto, creeremo una funzione che fondamentalmente ottenga i dati di cui abbiamo bisogno, quindi solo esaminando questo, è una query WP che dice, voglio film o pubblicare tipi di un tipo di film, ma io solo ne voglio due. Ma voglio anche ordinarlo in base al campo ACF, che è il nome del campo voti, e lo stiamo ordinando in ordine decrescente, quindi otterremo il massimo e otterremo il massimo due.

E poi, creeremo un endpoint REST personalizzato, che utilizza la funzione di callback che abbiamo creato nella diapositiva precedente, e che ci darà solo un endpoint che possiamo colpire per andare a prendere i due film. Quindi come appare effettivamente nella realtà– e questo è solo un test– quindi l'URL è vhsawards.com, il WP-JSON, e poi gli abbiamo dato uno spazio dei nomi di VHS Versione 1 nel caso in cui volessimo cambiare l'API, e abbiamo solo una struttura URL molto semplice di popular.

E questo sta solo restituendo un oggetto JSON con due elementi, i primi due votati, che per caso erano "Fight Club" e "Goodfellas", che sono piuttosto buoni, quindi sì. È sicuramente utile mostrare come ACF alimenta i siti disaccoppiati e senza testa, ma al momento è piuttosto difficile parlare di WordPress senza menzionare i blocchi. Non riesco a credere che siamo arrivati ​​così lontano senza nemmeno menzionare i blocchi. Cosa hai per noi, Rob, per cambiarlo?

Rob Stinson: Dobbiamo assolutamente parlare di blocchi. Prima di farlo, mi sono reso conto che poco prima, quando stavamo esaminando il numero cinque sulle relazioni bidirezionali, avevo accennato a un terzo modo di farlo. Non l'ho trattato, quindi tutto quello che voglio dire è guardare questo spazio perché stiamo pianificando, abbiamo sulla tabella di marcia, di cercare di aggiungere un migliore supporto per le relazioni bidirezionali in modo nativo nel plugin stesso, in modo da poter facilitare quella roba solo all'interno del plug-in ACF senza la necessità di materiale di terze parti, quindi basta guardare questo spazio, nessun impegno sui tempi. Questo è qualcosa che stiamo guardando.

Quindi numero sette, sì. Diamo un'occhiata alla creazione di un blocco personalizzato con ACF. Ora la maggior parte delle persone sa che ora puoi farlo in ACF, ma non necessariamente tutti l'hanno provato. Quindi, se sei in quel campo e sei un utente ACF di lunga data e non hai utilizzato la funzionalità di blocco personalizzato ora, guarda questo, perché potrebbe semplicemente chiederti di vedere il valore di questa funzione. Ma come lo useremo per i VHS Awards? Forse vogliamo avere un componente di blocco per il nostro sito che possiamo aggiungere in vari punti, e questa è la bellezza di un blocco personalizzato, o di qualsiasi blocco, è che può essere utilizzato e posizionato su pagine e post in tutto il sito, e vogliamo per creare un blocco di invito all'azione personalizzato.

Ora questo è un blocco piuttosto semplice e puoi sicuramente fare cose più interessanti con i blocchi personalizzati. Lo manterremo semplice ora. Ma questo banner blu, chiamata ad Action Block, vogliamo poterlo inserire nella Home page, o forse su alcuni post di blog e cose del genere, incoraggiando i lettori e i visitatori del sito a fare clic su quel pulsante, e passare attraverso, e votare per il loro film preferito degli anni '90. Quindi, come costruiremmo questo blocco personalizzato con ACF? E il motivo per cui lo stiamo facendo come blocco personalizzato è che ha un design unico.

Ha questo interessante gradiente di sfondo in corso per questo schema di punti ripetuto, e ci siamo resi conto che è più facile per noi costruirlo come blocco personalizzato con quel controllo ottimizzato che ci dà, rispetto a quello che potremmo forse fare con blocchi che sono fuori dal scaffale con core di WordPress. Allora come lo facciamo? Il primo passo è registrare il nostro blocco personalizzato, tipicamente in functions.PHP, o dovunque tu stia scrivendo questo tipo di codice. Bello e semplice, e indichiamo la directory in cui i file modello saranno alla fine per il nostro blocco personalizzato, quindi questo è il passaggio numero uno.

Passaggio numero due, creiamo il nostro gruppo di campi e aggiungiamo i nostri campi. Quindi, per il nostro blocco Azione chiamata, vogliamo avere anche testo, testo del pulsante, collegamento del pulsante e colore di sfondo. Forse vogliamo dare la possibilità di qualche variazione sullo stile per questo. Il numero tre è che, nelle regole di localizzazione, selezioneremo il blocco, e diremo che è uguale a, e abbiamo registrato il blocco CTA poco prima, ed è per questo che è disponibile per noi lì in quel menu a discesa. Ora passiamo al nostro file modello, quindi tutti i campi e tutto sono impostati, e ora faremo alcuni dei nostri modelli. Ora, il template è in qualche modo diverso da come, forse, tradizionalmente si farebbe il template con ACF.

Ma in molti altri modi, è molto, molto simile, quindi molti dei modelli che normalmente utilizzi per il tuo sviluppo, li userai mentre costruisci i tuoi blocchi personalizzati, il che è fantastico. Quindi, nel nostro progetto, diremo che è il nostro tema personalizzato. Abbiamo una directory dei blocchi, quindi abbiamo una directory CTA, che corrisponde al blocco che abbiamo registrato, e quindi in genere avresti tre file modello, block.JSONsomething.PHP, che è il nostro markup HTML, e poi dot CSS per il nostro messa in piega.

Quindi questo è il tipo di blocco JSON, e qui è una specie di dove abbiamo registrato il blocco, ma è così che possiamo capire le cose un po' di più, e c'è molto che puoi fare qui riguardo alla configurazione e alle varie funzionalità Core native che puoi attivare o disattivare, rendere disponibile il tuo blocco personalizzato. Quindi dai sicuramente un'occhiata alla documentazione su questo e capisci cosa si può fare, perché qui è davvero dove puoi, come ho detto, configurare come quel blocco è reso disponibile, e mostra, e le caratteristiche, le caratteristiche principali che puoi passare attraverso al tuo blocco personalizzato.

Poi abbiamo il nostro file modello, il nostro file PHP, e potete vedere qui che sto semplicemente impostando variabili che interagiscono con il campo Get, che interagiscono con i dati del nostro campo lì, un po' di logica condizionale molto semplice sul nostro stile lì, e poi il nostro HTML per il nostro blocco stesso. E poi non ho intenzione di esaminare il CSS. Sai cos'è il CSS e sono sicuro che probabilmente potresti scrivere un CSS migliore di quello che ho scritto qui, ma hai avuto l'idea. Hai un file CSS per lo stile del tuo blocco e puoi vedere che abbiamo alcune cose interessanti sui caratteri e lo sfondo radiale e sfumato per quel tipo di sfondo puntinato, il che è piuttosto divertente.

Ma ancora una volta, il motivo per cui stiamo creando questo blocco personalizzato è perché vogliamo che metta davvero a punto il nostro CSS, il nostro stile, in modo da poter davvero implementare il design su cui stiamo lavorando. E solo per mostrarti come appare nell'Editor, puoi vedere, possiamo selezionare il nostro blocco Azione richiamata, puoi allargare l'illuminazione. Possiamo interagire con i nostri campi, aggiungere il testo per il testo e il pulsante e aggiungere anche un collegamento per il pulsante, e questo è un blocco personalizzato dall'aspetto molto gradevole per il quale possiamo passare ai nostri editor di contenuti.

Iain Poulson: Sì, grazie, Rob. Che bella vista. Abbiamo davvero bisogno di metterlo in diretta. Questo è impressionante. Bene, ripassiamo quello di cui abbiamo parlato oggi. Quindi abbiamo esaminato come installare ACF Pro, ma con Composer. Abbiamo parlato di come registrare tipi di post personalizzati e tassonomie in ACF. Abbiamo esaminato la registrazione di campi globali o a livello di sito con una pagina di opzioni e abbiamo esaminato un modo diverso per registrare i campi a livello di codice con un pacchetto.

Rob ha approfondito le relazioni e come creare relazioni bidirezionali. Abbiamo toccato headless con ACF e Rob ha appena fatto un ottimo esempio di creazione di un blocco personalizzato con ACF con quasi nulla a parte PHP, HTML e CSS e nessuna reazione in corso, quindi è davvero buono. È stato fantastico, Rob. Quali sono i voti? Come siamo usciti?

Rob Stinson: Guarda, per me, si riduce a questo: il più grande film degli anni '90 è innegabilmente "Hook" di Robin Williams. Un sacco di nostalgia racchiusa per me in questo, amo quel film. E tu, Ian?

Iain Poulson: Per me, deve essere "Robin Hood, principe dei ladri" di Kevin Costner. È un classico. Dimentica i capelli arruffati, le triglie, lo strano accento inglese che non è nemmeno un accento inglese. È il più grande film di Robin Hood di tutti i tempi, ed è una collina su cui sono disposto a morire.

Rob Stinson: Ah, ah, no, giusto. Senti, grazie a tutti per essere usciti. Spero che tu abbia imparato qualcosa e non vediamo davvero l'ora di vedere cosa costruisci con ACF, evviva.