Come creare modelli di blocchi per accelerare la costruzione di siti Web

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


add_action ('init', function () {

register_pattern ('NAME', [
'title' => __ ('TITLE'),
'content' =>
'MODELLO'
]);
});

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

Quindi ti mostrerò. Esattamente come creare uno schema a blocchi in questo video. Ora faremo alcune cose che sono un po ‘sul lato tecnico e so che questo è il canale WordPress per i non tecnici, quindi cercherò di renderlo il più semplice possibile, ma tu sei vedremo alla fine quanto sia semplice creare uno di questi schemi a blocchi.

Quindi andiamo avanti e diamo un’occhiata a questo. Quindi, ecco la pagina in cui parla della nuova versione di questa funzione nel realizzarla. In grado solo per la gente media di creare un modello a blocchi. Quindi quando scorro verso il basso, dà il tipo di modello per esso. Quindi tutto ciò che è coinvolto è creare 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à sul mio sito web. Riceverai istruzioni scritte su come fare anche questo. 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 che il plugin Gutenberg sia installato e attivato, quindi avrai bisogno di una versione minima di 7.8 e questo è quello che è uscito di recente. Ora, ciò che accadrà sarà forse tra quattro o sei mesi, forse entro la fine dell’estate 2020 questo sarà incluso in WordPress per impostazione predefinita, ma per ora, dovrai provarlo, se vuoi provarlo , dovrai installare il plug-in 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 più nemmeno un tema figlio, potresti voler utilizzare questo plugin gratuito, e questo è uno dei migliori plugin gratuiti. Che io abbia mai incontrato, e si chiama frammenti di codice. E questo ci consentirà di aggiungere questa funzione personalizzata e un modo molto facile da usare, facile da gestire.

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

Va bene. Ora passiamo al mio sito Web. Quindi ecco un sito web. È tutto pronto adesso. E se non sai come installare un plug-in, l’altro giorno qualcuno si è davvero arrabbiato con me per non aver mostrato come installare un plug-in e un video. Vai ai plug-in, fai clic su Aggiungi nuovo, quindi fai una ricerca del nome di quel plug-in e fai clic su.

Scarica, o mi dispiace, fai clic su Installa ora e poi lo attivi. È un processo molto semplice. Quindi farò clic sui miei plug-in installati e vedrai che ho installato Gutenberg e questo era un blocco di cadenza opzionale, ed ecco i frammenti di codice. Quindi ho intenzione di andare avanti e attivare frammenti di codice e puoi vedere che ora è attivato proprio qui.

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

Quindi cosa faresti. È fare clic su Aggiungi nuovo e puoi nominare questo modello di schema a blocchi 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 copi e incolli proprio qui, quindi fai clic su Salva modifiche.

Non hai intenzione di fare clic su Salva e attiva, di fare clic su per salvare le modifiche e ti mostrerò il perché in un attimo. Va bene. Quindi ora quello che vorrai fare è creare questo schema a blocchi. E un modello a blocchi è semplicemente una sezione salvata. Quindi, se usi un generatore di pagine, ora sai che potresti salvare sezioni e alcune di esse hanno sezioni predefinite, ma l’esperienza dell’utente, penso che sia molto meglio in Gutenberg.

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

Ti mostrerò quello che ho già creato, ed è. Giusto qui. Quindi ecco un modello 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 inserisco un video. Quindi farò di questo il mio schema a blocchi in modo che io possa semplicemente con due clic del mouse, aggiungerlo a 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 quello, c’è questa opzione proprio qui che dice l’editor di codice. Quindi vorrai fare clic sull’editor del codice, e poi ti mostra tutto il codice che è coinvolto nel rendere quel blog un modello a blocchi.

Va bene? Quindi fai clic qui e quindi fai clic su control a o comanda a sul tuo computer per evidenziarlo tutto. E sono capodanno. 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 proprio qui che dice l’editor del codice di uscita, e ora mi mostrerà come è normalmente qui.

Va bene. Quindi puoi salvarlo come bozza se vuoi, ma non ne avrai bisogno. Questo è solo per te per creare questo modello a blocchi, e potresti creare un modello a blocchi che è qualsiasi cosa, e non deve essere un blocco di cose. Potrebbe essere un intero modello per un post sul blog, ad esempio. Ok, quindi ora farò clic su dove c’è il w che mi fa uscire dall’editor del blocco.

Ora tornerò indietro agli snippet di codice. Quindi qui è dove ho creato quel modello di schema a blocchi. Ho intenzione di fare 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ò in un titolo che ha senso gestirlo.

Quindi per me lo chiamerò semplicemente. Un eroe con video. Quindi ora so di cosa si tratta quando guarderò l’elenco in futuro. Va bene, quindi ci sono un paio di cose 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 funky.

Quindi andrò avanti e inserirò un nome proprio ora. Puoi vedere che l’ho chiamato eroe con il video. Quindi, proprio qui devi inserire un titolo. Quindi stiamo sostituendo questo titolo di parola, 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 metterei nessun personaggio funky lì dentro. Gli spazi vanno bene. Quindi questo è ciò che mostrerà in questo elenco a e il prossimo proprio qui dove si dice modello a. Stai per incollare 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 davanti e sul retro.

Vedi che c’è l’apostrofo che deve essere lì. Se lo rimuovi accidentalmente, rimettilo a posto. Va 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 quindi incollerò ciò che ho copiato.

Ed eccolo qui. Quindi ora ho intenzione di scorrere verso il basso e questa volta ho intenzione di fare clic su Salva modifiche e attivare. E così ora dovrebbe dire frammento aggiornato e attivato. E quando faccio clic su tutti i frammenti, ora puoi vedere questo eroe con video attivato. Quindi in futuro per ulteriori schemi a blocchi, voglio andare dove dice modello a blocchi e fare clic su clona e creare quel modello a blocchi in quel modo.

In questo modo ho sempre il modello lì dentro. Ora, se 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. Ok, quindi ora vado alle pagine del mio clic su Aggiungi nuovo e se vuoi vedere il.

Schemi a blocchi. Uh, proprio qui è l’icona per questo. E quando ci passi sopra, dice schemi a blocchi. E quando faccio clic su di esso, vedi alcuni dei modelli di blocco che sono attualmente in fase di sperimentazione. Ma quando scorri verso il basso, vedrai quel modello di blocco che ho creato. E la cosa veramente bella è che genera un’anteprima in miniatura.

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

Posso fare clic qui e posso cambiare il video. Così. Ecco come si crea un modello a blocchi. Ora questo è un grosso problema, penso perché ciò che accadrà è un tema. Sviluppatori e creatori di plug-in, saranno in grado di creare questi schemi di blocchi per te, quindi sarà molto più veloce, più veloce e più semplice costruire 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. Cosa lo porta ancora oltre. Puoi vedere quanto è facile per te creare i tuoi schemi a blocchi ed è davvero facile vederlo in un elenco. Fai clic su un pulsante e verrà inserito lì. Quindi ora potresti pensare a quanto può essere più semplice costruire un sito Web quando hai la tua libreria di schemi a blocchi.

Quindi, se crei siti Web per i clienti e non vuoi utilizzare un generatore di pagine. Vuoi solo usare il builder incorporato. Potresti creare la tua libreria di modelli. Hai visto com’è facile. Riesco a farlo. Potresti farlo. Uh, potresti creare la tua libreria di schemi a blocchi 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 si limita solo a quella sezione che hai visto. Fondamentalmente tutto ciò che puoi creare su una pagina. È possibile creare un modello a blocchi. Quindi, se stai usando il generatore di blocchi solo per i post di blog e ci sono alcuni elementi che vuoi usare più e più volte in un post di blog per migliorare il layout dei post di blog, beh, puoi creare un modello di blocco per esso.

Ed è davvero facile. Un clic e sei in grado di usarlo. In effetti, l’intero modello di post sul blog. Quindi, se esiste una formula che segui per le sezioni di un post di blog, puoi rendere l’intero post di blog un modello a blocchi. 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 con ora. Non è proprio Yeti, Yeti. Non è del tutto pronto per la prima serata perché se hai notato, l’unico aspetto negativo che ho visto è quando stai guardando il blog. Vedi ci vado di nuovo.

Se stai osservando gli schemi a blocchi, è 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.

Patterns. Quindi devono solo migliorarlo. E parte della sintassi sul codice potrebbe cambiare leggermente. Chissà quando finalmente verrà fuori. Ma il punto centrale di questo video è solo quello di mostrarti cosa sarà possibile molto, molto presto in modo che tu possa iniziare. Pensando a come può applicarsi 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 aspetti avanzati del futuro di WordPress in questo modo, e se hai apprezzato questo video o ne hai trovato un valore, considera l’idea di dare un pollice in alto e condividere questo video in modo che le persone possano vedere cosa sta succedendo dietro l’angolo.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map