Come creare pattern di blocco di WordPress per velocizzare la creazione di siti Web

I modelli di blocco saranno un grosso problema per tutti gli utenti di WordPress e in questo post ti mostrerò esattamente come creare i tuoi modelli di blocco.

 add_action( 'init', function() { register_pattern( 'NAME', [ 'title' => __( 'TITLE' ), 'content' => 'PATTERN' ] ); } );

Due giorni fa, sono uscito con un video e ho introdotto questo concetto che sta arrivando proprio dietro l'angolo in WordPress chiamato modelli di blog. È un po' sperimentale in questo momento, ed è qualcosa di cui sono davvero entusiasta. E penso che se ti occupi del potenziale di ciò che sono i pattern di blocco, allora puoi vedere il potenziale per aiutarti a fornire siti Web più velocemente se hai clienti, per essere in grado di consentire loro di fare di più con i loro sito web.

Quindi te lo mostro. Esattamente come creare uno schema a blocchi in questo video. Ora faremo alcune cose che sono un po' dal punto di vista tecnico, e so che questo è il canale WordPress per i non tecnici, quindi cercherò di renderlo il più semplice possibile, ma tu sei alla fine vedremo davvero quanto sia semplice creare uno di questi schemi a blocchi.

Quindi andiamo avanti e diamo un'occhiata. Quindi ecco la pagina in cui si parla della nuova versione di questa funzionalità nel realizzarla. In grado solo per la gente media di creare uno schema a blocchi. Quindi, quando scorro verso il basso, fornisce il tipo di modello per esso. Quindi tutto ciò che è coinvolto è la creazione di qualcosa chiamato funzione personalizzata.

Ma non preoccuparti, lo renderò super facile per tutti, ma è qui che si trova quel piccolo frammento di codice. Ora avrò un link nella descrizione del video in basso. Ti porterà al mio sito web. Riceverai anche istruzioni scritte su come farlo. Questo piccolo frammento di codice che puoi copiare e incollare sul tuo sito web.

Ok, ecco di cosa avremo bisogno. Questa è una nuova funzionalità di Gutenberg e avrai bisogno del plugin Gutenberg installato e attivato, quindi avrai bisogno di una versione minima di 7.8 e questo è quello che è uscito di recente. Ora, quello che accadrà forse tra quattro o sei mesi, forse entro la fine dell'estate 2020 questo sarà incluso in WordPress per impostazione predefinita, ma per ora, se vuoi provarlo, dovrai farlo , dovrai installare il plugin Gutenberg.

La prossima cosa che puoi fare, e questo è facoltativo, se non sai come aggiungere una funzione personalizzata a un tema figlio, e non uso nemmeno più un tema figlio, potresti voler usare questo plugin gratuito, e questo è uno dei migliori plugin gratuiti. Che io abbia mai incontrato e si chiama frammenti di codice. E questo ci permetterà di aggiungere questa funzione personalizzata e un modo molto facile da usare, facile da gestire.

Bene? Quindi ne avrai bisogno. E questo è facoltativo. Questo è un plugin gratuito chiamato blocchi di cadenza. E ciò che fa è aggiungere molte funzionalità di creazione di pagine a Gutenberg. È abbastanza pulito in quello che ti permette di fare. Puoi trascinare e ridimensionare le colonne. Ci sono molti elementi che aggiungono molte funzionalità di creazione di pagine, ma a Gutenberg, ed è un plug-in completamente gratuito.

Bene. Ora passiamo al mio sito web. Quindi ecco un sito web. È tutto pronto adesso. E se non sai come installare un plug-in, qualcuno si è davvero arrabbiato con me l'altro giorno per non aver mostrato come installare un plug-in e un video. Vai su plug-in, fai clic su aggiungi nuovo, quindi proprio qui fai una ricerca per il nome di quel plug-in, quindi fai clic.

Scarica, o scusa, fai clic su Installa ora e poi lo attivi. È un processo molto semplice. Quindi farò clic sui miei plug-in installati e puoi vedere che ho installato Gutenberg e si trattava di blocchi di cadenza opzionali, ed ecco frammenti di codice. Quindi andrò avanti e attiverò frammenti di codice e puoi vedere che ora è attivato proprio qui.

Quindi vai avanti e fai clic sui frammenti di codice e ne vedrai alcuni con cui viene fornito. Ed ecco questo interruttore a levetta ed è attivato. Sono tutti disattivati ​​​​e in realtà non è necessario mantenere quelli con cui viene fornito per impostazione predefinita. Puoi semplicemente fare clic qui e puoi eliminarli tutti, ma sono già andato avanti e ne ho aggiunto uno proprio qui chiamato modello di modello di blocco.

Quindi cosa faresti. Fai clic su Aggiungi nuovo e puoi nominare questo modello di modello di blocco in quel piccolo frammento di codice che ti ho mostrato che è proprio qui, ma ti darò una versione modificata di questo sul mio sito web. Lo copierai e incollerai proprio qui, quindi farai clic su salva modifiche.

Non farai clic su salva e attiva, farai clic su per salvare le modifiche e ti mostrerò perché tra un momento. Bene. Quindi ora quello che vorrai fare è creare questo modello di blocco. E uno schema a blocchi è semplicemente una sezione salvata. Quindi, se usi un generatore di pagine, ora sai che potresti salvare sezioni e alcune di esse sono dotate di sezioni predefinite, ma l'esperienza dell'utente, penso che sia molto migliore in Gutenberg.

Quindi quello che vorrai fare è andare alle pagine. E fai clic su aggiungi nuovo e vorrai nominarlo. Uhm, in realtà fammi sbarazzarmi di questo tour. Vorrai dare un nome a questo modello di blocco, ed è proprio qui che creeremo questo modello di blocco. Ora, non ho intenzione di creare uno schema a blocchi in questo momento.

Ti mostrerò quello che ho già creato, ed è . Giusto qui. Quindi ecco uno schema a blocchi che ho creato. Potresti vedere che è questa sezione. Ha questo sfondo colorato. Ho un'intestazione, alcuni sottotitoli e un paio di pulsanti qui, e ho inserito un video. Quindi farò di questo il mio schema di blocco in modo da poterlo aggiungere con due clic del mouse in qualsiasi punto del mio sito web.

Quindi quello che farò è fare clic in alto a destra, ci sono questi tre punti. Sono un po 'difficili da vedere e quando fai clic su di esso, c'è questa opzione proprio qui che dice editor di codice. Quindi vorrai fare clic sull'editor di codice, quindi ti mostrerà tutto il codice coinvolto nel rendere quel blog un modello di blog con pattern a blocchi.

Bene? Quindi fai clic qui e poi fai clic su control a o command a sul tuo computer per evidenziare tutto. E sono il nuovo anno. Mettilo negli appunti. Quindi lo farò controllare C. quindi ora è nei miei appunti. Quindi ora quello che farò è uscire da qui. In realtà, se vuoi uscire da questa vista, c'è una piccola X qui che dice uscita dall'editor del codice, e ora me lo mostrerà come normalmente è proprio qui.

Bene. Quindi potresti salvarlo come bozza, se lo desideri, ma non ne avrai bisogno. Questo è solo per te per creare questo modello di blocco e potresti creare un modello di blocco che è qualsiasi cosa, e non deve essere un blocco di cose. Ad esempio, potrebbe essere un intero modello per un post sul blog. Ok, quindi ora farò clic dove c'è il w che mi fa uscire dall'editor di blocchi.

Ora tornerò ai frammenti di codice. Quindi proprio qui è dove ho creato quel modello di modello di blocco. Farò clic su clone e ora ne è stato creato un clone, quindi farò clic sul titolo per iniziare a modificarlo. Quindi, per il titolo, lo cambierò con un titolo che abbia senso per gestirlo.

Quindi per me, lo chiamerò solo. Un eroe con il video. Quindi ora so di cosa si tratta quando guarderò l'elenco in futuro. Ok, quindi ci sono un paio di cose qui che dovrai modificare. Tre cose. È semplicissimo. Il primo è il nome. Quindi questo può essere qualsiasi nome sarà, deve essere tutto minuscolo, senza spazi o caratteri stravaganti.

Quindi andrò avanti e inserirò un nome in questo momento. Puoi vedere che l'ho chiamato eroe con il video. Quindi, proprio qui devi inserire un titolo. Quindi stiamo sostituendo questa parola titolo, e questo è ciò che verrà mostrato. Stai guardando un elenco di modelli di blog, blocchi, non modelli di blocchi di blog. E se noti, puoi, questo è il nome descrittivo, quindi può avere spazi.

Uh, non ci metterei nessun personaggio funky. Gli spazi vanno bene. Quindi questo è ciò che mostrerà in questo elenco a e il prossimo qui dove dice il modello a. Incollerai semplicemente ciò che hai appena copiato negli appunti. Ora voglio che tu prenda nota di una cosa. Per ognuno di questi. Ho lasciato il piccolo apostrofo sul fronte e sul retro.

Vedi che c'è l'apostrofo che deve esserci. Se lo rimuovi accidentalmente, rimettilo subito a posto. Bene. Stiamo solo cambiando. Stiamo solo sostituendo il segnaposto di testo. Quindi per qui, non voglio sostituire tutto. Voglio solo sostituire il modello di parole, quindi lo evidenzierò e poi incollerò ciò che ho copiato.

Ed eccolo. Quindi ora scorrerò verso il basso e questa volta farò clic su salva modifiche e attiva. E quindi ora dovrebbe dire snippet aggiornato e attivato. E quando faccio clic su tutti i frammenti, ora puoi vedere questo eroe con il video attivato. Quindi in futuro per ulteriori modelli di blocco, voglio andare dove dice modello di modello di blocco e fare clic su clona e creare quel modello di modello di blocco in quel modo.

In questo modo ho sempre il modello lì dentro. Ora, se lo sai già e hai il tuo modo di aggiungere funzioni personalizzate, non hai bisogno di frammenti di codice e, e tutto questo genere di cose, potresti metterlo dove vuoi metterlo. Questo è solo un modo molto più semplice per gestirlo se me lo chiedi. Va bene, quindi ora vado alle pagine sul mio clic su aggiungi nuovo e se vuoi vedere il.

Blocca i modelli. Uh, proprio qui c'è l'icona per questo. E quando ci passi sopra, dice schemi a blocchi. E quando ci clicco sopra, vedi alcuni dei modelli di blocchi che vengono sperimentati in questo momento. Ma quando scorri verso il basso, vedrai quel modello di blocco che ho creato. E ciò che è veramente bello è che genera un'anteprima in miniatura.

E lo fa in modo dinamico. Hai strumenti per la creazione di pagine che non fanno nemmeno questo. Uh, e rende molto più facile gestire i tuoi schemi di blocco. Quindi, e puoi vedere proprio qui, dice eroe con modello. Ora, se voglio usarlo ovunque sul mio sito Web, è un clic del mouse. E poi eccolo lì. E tutto ciò che avrei dovuto fare a quel punto per iniziare a modificare alcuni testi, modificare i collegamenti ai pulsanti.

Posso cliccare qui e posso cambiare il video. Così. È così che crei uno schema a blocchi. Ora questo è un grosso problema, penso perché quello che accadrà è un tema. Sviluppatori e creatori di plug-in saranno in grado di creare questi modelli di blocchi per te, quindi sarà molto più veloce, più veloce e più facile creare un sito Web utilizzando lo strumento nativo per la creazione di blocchi che WordPress include già.

Non c'è niente da comprare, non c'è codice gonfio. Non c'è nessuna di queste cose, e. Ciò che lo porta ancora più lontano. Puoi vedere quanto è facile per te creare i tuoi schemi di blocco ed è davvero facile vederlo in un elenco. Fare clic su un pulsante e viene inserito lì. Quindi ora potresti pensare a quanto può essere più semplice creare un sito Web quando hai la tua libreria di schemi di blocco.

Quindi, se crei siti Web per i clienti e non desideri utilizzare un generatore di pagine. Vuoi solo usare il generatore di blocchi integrato. Potresti creare la tua libreria di modelli. Hai visto quanto è facile. Riesco a farlo. Potresti farlo. Uh, potresti creare la tua libreria di schemi di blocco che puoi spostare da un sito all'altro e puoi mostrare al tuo cliente come possono costruirlo.

Ora, questo non è solo per le pagine, questo è per i post e non è limitato solo a quella sezione che hai visto. Fondamentalmente qualsiasi cosa tu possa creare su una pagina. Puoi creare uno schema a blocchi. Quindi, se stai utilizzando il generatore di blocchi solo per i post del blog e ci sono alcuni elementi che vuoi utilizzare più e più volte in un post del blog per migliorare il layout dei post del blog, puoi creare un modello di blocco per esso.

Ed è davvero facile. Un clic e sei in grado di usarlo. In effetti, gli interi modelli di post del blog. Quindi, se c'è una formula che segui per le sezioni di un post del blog, puoi trasformare l'intero post del blog in un modello di blocco. Quel clic viene applicato e quindi tutto ciò che devi fare è puntare, fare clic e modificare.

Quindi l'ultima cosa prima di concludere qui, questo è un nuovo concetto ed è qualcosa a cui pensare nei prossimi mesi. Sperimenta ora. Non è proprio Yeti, Yeti. Non è ancora pronto per la prima serata perché se hai notato, um, l'unico aspetto negativo che ho visto è quando stai guardando il blog. Vedi ci vado di nuovo.

Se stai guardando i modelli di blocco, è solo un elenco di articoli più alto in cui devi scorrere, quindi devono migliorare il processo di categorizzazione e organizzazione. Forse hanno una sorta di interfaccia per renderlo più visivo e facile da lavorare. Se hai 50 blocchi diversi.

Modelli. Quindi devono solo migliorarlo. E parte della sintassi del codice potrebbe cambiare un po'. Chissà quando questo finalmente uscirà. Ma lo scopo di questo video è solo quello di mostrarti cosa sarà possibile molto, molto presto in modo che tu possa iniziare. Pensando a come può essere applicato al tuo flusso di lavoro e cosa stai facendo come costruttore di siti web.

Comunque, questo è tutto ciò che ho per te in questo post. Spero che apprezzerai gli sguardi avanzati nel futuro di WordPress in questo modo, e se hai apprezzato questo video o hai trovato un valore, considera di dargli un pollice in su e condividere questo video in modo che le persone possano vedere cosa sta arrivando dietro l'angolo.