Come creare e utilizzare componenti a blocchi su WordPress

Rifat Tutorial WordPress Feb 2, 2024

L’editor di blocchi di WordPress, a volte indicato come Gutenberg, ha una funzione chiamata Blocco riutilizzabile che è abbastanza utile ma utilizzata raramente. I blocchi riutilizzabili hanno lo stesso scopo dei moduli globali se hai familiarità con Elementor , Divi o altri page builder.

Si tratta di blocchi, o gruppi di blocchi, che puoi riutilizzare dopo averli configurati una sola volta. Non è necessario modificarli nuovamente dopo averli inseriti su più pagine e post. Inoltre, puoi apportare modifiche a tutto il sito se decidi di modificarle nuovamente, il che ti farà risparmiare ore in tutto il sito web. Ora esploriamo ogni metodo per gestire i blocchi riutilizzabili di WordPress.

Crea un blocco in WordPress

In WordPress, creare un blocco non è troppo difficile. Puoi rendere riutilizzabile qualsiasi blocco all'interno di qualsiasi post che stai aggiornando con l'editor dei blocchi (l'editor predefinito in WordPress 5.x, a meno che non utilizzi il plug-in dell'editor classico). Nelle impostazioni al passaggio del mouse del blocco, fai clic sul menu a discesa con tre punti e scegli Aggiungi a blocchi riutilizzabili.

Quando rinomini il nuovo blocco nell'editor, sarà più facile recuperarlo in seguito. Allo scopo, servirà sul tuo sito web, assicurati che il nome che scegli sia memorabile. Come "Post correlati", "Immagine di copertina del post del blog" o qualcosa di simile illustrativo.

Create Amazing Websites

Con il miglior generatore di pagine gratuito Elementor

Parti ora

Puoi fare nuovamente clic sulle impostazioni a discesa e selezionare Rimuovi dai blocchi riutilizzabili se hai commesso un errore durante la generazione del blocco riutilizzabile o semplicemente hai commesso un errore in generale. L'utilizzo di questa opzione rimuove il blocco nella sua interezza dal database. Se lo desideri, puoi aggiungerlo nuovamente alla raccolta seguendo i passaggi precedenti.

Inoltre, l'opzione Modifica può essere utilizzata semplicemente facendo clic sul blocco stesso una volta salvato.

Puoi scegliere di rinominare il blocco di paragrafo in questo esempio. Tuttavia le modifiche per ciascun blocco saranno uniche. Hai opzioni extra per un blocco immagine, come l'allineamento e la possibilità di caricare o inserire un file diverso dal tuo catalogo multimediale.

Puoi utilizzare questa procedura con qualsiasi blocco riutilizzabile che crei. Ma ricorda che qualsiasi modifica apportata in questo modo a un blocco riutilizzabile influisce anche su tutte le altre istanze di quel blocco sul tuo sito web. Di conseguenza, se modifichi un'immagine in un singolo blocco, verrà aggiornata ovunque.

Inserimento di un blocco riutilizzabile

È molto semplice utilizzare la funzionalità Blocchi riutilizzabili di WordPress. Per accedere alla scheda Riutilizzabile nell'editor dei blocchi, fai clic su qualsiasi istanza del segno + all'interno di un cerchio. Il pulsante più si trova nell'angolo in alto a sinistra dello schermo, sotto qualsiasi blocco e a destra di qualsiasi blocco.

La scheda Più utilizzati, che viene visualizzata in cima all'elenco ogni volta che viene selezionato il pulsante Più, può contenere anche i blocchi riutilizzabili che crei quando li inserisci in altri post e pagine.

Questi possono variare a seconda dei blocchi che utilizzi, tuttavia, se utilizzi, ad esempio, lo stesso Blocco riutilizzabile come piè di pagina per ogni post del blog, verranno visualizzati qui molto frequentemente.

Gestire tutti i blocchi in WordPress

È presente un collegamento Gestisci tutti i blocchi riutilizzabili nella parte inferiore della scheda Riutilizzabili. Verrai indirizzato a un sito Web che ti sembrerà familiare dopo aver fatto clic su questo collegamento, dove viene visualizzato un elenco di tutti i blocchi riutilizzabili che hai generato. L'elenco assomiglierà più o meno esattamente all'elenco di post e pagine fornito con WordPress per impostazione predefinita.

Scorrendo l'elenco, noti alcune scelte cruciali. Modifica, esporta come JSON e importa da JSON.

Quando modifichi un blocco, usa Modifica esattamente come faresti sopra. Il blocco appare nel suo editor simile a un post dove puoi modificarlo e solo esso, anziché all'interno di un post specifico. Ancora una volta, qualsiasi modifica apportata a questo blocco influenzerà ogni istanza dell'intero sito.

A seconda delle impostazioni del browser, selezionando il pulsante Esporta come JSON (3) si aprirà una finestra di dialogo in cui è possibile selezionare dove salvare il file JSON creato. Il file è un semplice documento JSON. Vengono visualizzati il ​​tipo di file (un blocco), il titolo che gli hai assegnato durante la modifica o la creazione e l'HTML effettivo che WordPress inietterà per visualizzare il blocco e i suoi contenuti sul front-end del sito web.

Il processo di importazione da JSON è abbastanza semplice: individua il file JSON sul tuo computer, quindi caricalo come qualsiasi altro file o allegato.

Verrà visualizzato nell'elenco dei blocchi riutilizzabili dopo aver fatto clic su Importa. Tieni però presente che il nome del blocco appena importato non verrà modificato se ne hai già uno con lo stesso nome (Blocco riutilizzabile 1, in questo caso). È un processo manuale per distinguerli.

Creare gruppi di blocchi in WordPress

Il pieno potenziale dei blocchi riutilizzabili viene potenziato organizzandoli in gruppi. Puoi anche unire insieme i blocchi Gutenberg e memorizzarli come un singolo blocco riutilizzabile, che è un'alternativa ad avere una singola immagine, paragrafo o intestazione che puoi posizionare a livello globale. Per creare un modulo di adesione e-mail globale per tutti i tuoi post dell'Editor blocchi, potresti, ad esempio, raggruppare insieme un blocco di intestazione, un blocco di paragrafo, un blocco di immagini e un blocco HTML personalizzato.

Tutto quello che devi fare è fare clic tenendo premuto il tasto Maiusc su qualsiasi blocco per aggiungerlo a una raccolta di blocchi WordPress riutilizzabili. I blocchi selezionati avranno un bordo blu attorno a loro.

Successivamente, farai clic sul pulsante Trasforma (2) e sceglierai Raggruppa dal menu (3). Ora noterai che i blocchi si sono combinati in uno solo. Il blocco del gruppo viene quindi convertito in un blocco riutilizzabile utilizzando la stessa procedura di qualsiasi altro blocco singolo.

Quando aggiungi un nuovo blocco a un post o a una pagina, questo nuovo gruppo verrà visualizzato nell'elenco di tutti i blocchi riutilizzabili e nella scheda Riutilizzabili.

Conclusione

Uno degli aspetti migliori e più utili del Gutenberg Block Editor sono i blocchi riutilizzabili. L'utilizzo della funzione dei blocchi riutilizzabili può elevare la progettazione e lo sviluppo dei tuoi post e delle tue pagine a nuovi livelli di utilità, creatività ed esperienza utente. Puoi condividere blocchi e contenuti con gli amici e creare modelli per aspetti comuni del tuo sito.

Divi WordPress Theme