Guida per principianti: Come utilizzare i modelli a blocchi di WordPress

Volete imparare a utilizzare i modelli di blocco di WordPress sul vostro sito web?

I modelli a blocchi consentono di aggiungere rapidamente elementi di design comunemente utilizzati ai layout dei post o delle pagine.

In questo articolo vi mostreremo come utilizzare i pattern di blocco di WordPress e troveremo altri pattern da utilizzare sul vostro sito web.

Ecco gli argomenti in copertina in questa guida:

Cosa sono i pattern di blocco di WordPress?

Ipattern di blocco di WordPress sono una raccolta di elementi di design preconfezionati che possono essere utilizzati per creare layout personalizzati più velocemente.

WordPress è dotato di un editor intuitivo, comunemente noto come editor di blocchi. Permette agli utenti di creare bellissimi layout per i loro post e pagine, utilizzando blocchi per gli elementi di contenuto comuni.

Tuttavia, non tutti gli utenti di WordPress sono designer o vogliono dedicare tempo alla creazione di layout ogni volta che devono creare una pagina o un post.

I modelli a blocchi offrono una soluzione semplice a questo problema. WordPress è ora dotato di una serie di utili modelli a blocchi per impostazione predefinita.

Itemi WordPress più diffusi forniscono anche i propri modelli che si possono utilizzare per scrivere i contenuti.

Questi modelli includono elementi come layout multicolonna predefiniti, modelli di testo e media, modelli di call-to-action, intestazioni, pulsanti e altro ancora.

Potete trovare altri pattern sul sito web di WordPress.org e potete anche creare e condividere i vostri pattern.

Esaminiamo quindi come utilizzare facilmente i pattern a blocchi in WordPress per creare splendidi contenuti per il sito web.

Come utilizzare gli schemi a blocchi in WordPress

Di default, WordPress è dotato di diversi pattern di blocchi utili che potete utilizzare sul vostro sito web. Anche il tema di WordPress e alcuni plugin possono aggiungere i loro pattern.

Per utilizzare i modelli di blocco, è necessario modificare il post o la pagina di WordPress in cui si desidera utilizzare il modello di blocco.

Nella schermata di modifica della pubblicazione, fare clic sul pulsante Add Block [+] per aprire il pannello di inserimento dei blocchi. Da qui, passare alla scheda ‘Patterns’ per visualizzare i pattern di blocco disponibili.

È possibile scorrere verso il basso per vedere i modelli di blocco disponibili.

È inoltre possibile visualizzare i pattern di blocco in diverse categorie, come caratteristiche, pulsanti, colonne, header e altro ancora.

In alternativa, è possibile fare clic sul pulsante “Esplora tutti i pattern” per visualizzare i pattern a blocchi.

Qui è possibile vedere l’anteprima più grande in un popup.

Una volta trovato il pattern che si desidera provare, basta fare clic per inserirlo nell’area del contenuto della pagina o del post.

Il pattern apparirà nell’editor dei contenuti con un contenuto segnaposto che si potrà modificare e sostituire con il proprio.

È sufficiente puntare e cliccare su qualsiasi blocco all’interno del pattern per modificarne il contenuto in base alle proprie esigenze.

Si avranno comunque tutte le opzioni normalmente disponibili per ciascun blocco. Ad esempio, se si tratta di un blocco copertina, è possibile modificare il colore di copertina o l’immagine di sfondo.

È possibile aggiungere tutti i pattern necessari per la pagina o la pubblicazione del blog. È anche possibile eliminare un pattern per rimuoverlo da una pagina o da un post, proprio come si eliminerebbe un qualsiasi blocco di WordPress.

Utilizzando i pattern a blocchi, è possibile creare rapidamente bellissimi layout per gli articoli e il sito WordPress.

In definitiva, i pattern di blocco aiutano a salvare il tempo che altrimenti si passerebbe a disporre manualmente i blocchi ogni volta che si devono aggiungere header, galleria, pulsanti e altro.

Come creare pattern nell’editor a blocchi

WordPress rende super facile creare pattern nell’editor a blocchi da riutilizzare in seguito.

Quando si modifica una pagina o un post, è sufficiente selezionare i blocchi che si desidera includere nel pattern e fare clic su “Crea pattern”.

È possibile selezionare più blocchi premendo il tasto shift sulla tastiera e facendo clic su di essi.

Tuttavia, se i blocchi sono disposti in modo tale da rendere più difficile la loro selezione, è possibile utilizzare la vista Elenco nella scheda Panoramica documento.

Creando un pattern si aprirà una finestra a comparsa.

È necessario fornire un nome al proprio pattern e scegliere una categoria.

Al di sotto di questo punto, è presente un’attiva/disattiva per mantenere il pattern sincronizzato o non sincronizzato.

Pattern sincronizzati: Quando l’utente o altri utenti modificano un pattern, le modifiche vengono salvate al successivo utilizzo del pattern.

Pattern non sincronizzati: Le modifiche apportate a questi pattern dopo averli inseriti in una pagina o in un post non influiranno sul pattern originale.

Fare clic sul pulsante “Crea” per salvare il pattern.

La prossima volta che si vorrà utilizzare quel pattern, basterà cercarne il nome o la categoria nel pannello di inserimento dei blocchi.

Come creare pattern nell’editor del sito

Se si utilizza un tema a blocchi con supporto completo dell’editor del sito, è possibile creare pattern anche nell’editor del sito.

Aprire l’editor del sito visitando la pagina Aspetto ” Editor.

A questo punto si accede all’interfaccia dell’editor del sito.

Per continuare, fare clic su “Patterns” nella barra laterale sinistra.

Verranno visualizzati tutti i pattern e le categorie disponibili.

Per creare un nuovo pattern, fare clic sul pulsante Aggiungi [+] e selezionare “Crea pattern”.

Si aprirà una finestra a comparsa in cui si dovrà fornire un nome al pattern, scegliere una categoria e decidere se il pattern deve essere sincronizzato o meno.

Fare clic su “Crea” per continuare.

WordPress creerà una tela bianca per creare il vostro pattern.

Da qui è possibile aggiungere blocchi per creare il proprio pattern.

Una volta terminato, non dimenticate di fare clic sul pulsante ‘Salva’ per salvare il pattern.

Gestione dei pattern in WordPress

Se si utilizza un tema a blocchi con supporto completo dell’editor del sito, è possibile gestire i pattern nell’editor del sito.

Aprire l’editor del sito visitando la pagina Aspetto ” Editor.

Nella schermata Modelli è possibile fare clic su un modello per modificarlo. È anche possibile fare clic sul menu a tre punti accanto a un pattern per duplicarlo, esportarlo o eliminarlo.

Per gestire tutti i vostri pattern, fate clic sulla scheda “Gestisci tutti i miei pattern” nella barra laterale.

Verrà visualizzato un elenco di tutti i pattern.

Ora è possibile modificarli, esportarli o eliminarli.

Se si utilizza un tema classico (temi WordPress che non supportano l’editor completo del sito), è possibile gestire i pattern visitando la pagina Aspetto ” Patterns.

Da qui è possibile aggiungere, eliminare ed esportare i propri pattern di blocco.

Trovare altri modelli di blocchi da utilizzare sul vostro sito web

Per impostazione predefinita, WordPress è dotato di alcuni modelli di blocco comunemente utilizzati. I temi di WordPress possono anche aggiungere i propri modelli al sito web.

Tuttavia, sul sito web è possibile trovare molti altri pattern di blocchi oltre a quelli disponibili nel pannello di inserimento.

Per visualizzare molti altri modelli di blocchi, basta visitare il sito web WordPress Patterns Directory.

Qui troverete i pattern di blocco inviati dalla Community di WordPress.

Per utilizzare uno di questi pattern, è sufficiente fare clic per visualizzare il pattern e poi cliccare sul pulsante ‘Copia pattern’.

Successivamente, è necessario tornare al proprio blog WordPress e modificare il post o la pagina in cui si desidera inserire il modello di blocco.

Nella schermata di modifica, è sufficiente fare clic con il tasto destro del mouse e selezionare “Incolla” nel menu del browser oppure premere CTRL+V (Command + V su Mac).

Come creare e condividere i propri pattern a blocchi

Volete creare i vostri pattern di blocchi WordPress e condividerli con il mondo?

WordPress rende facilissimo creare modelli di blocco e utilizzarli sui propri siti web o condividerli con tutti gli utenti di WordPress nel mondo.

Basta visitare il sito web della WordPress Pattern Directory e fare clic sul link “New Pattern”.

Nota: per salvare i modelli è necessario accedere o creare un account gratuito su WordPress.org.

Una volta effettuato l’accesso, si accede alla pagina dell’editor di blocchi. È identico all’editor di blocchi predefinito di WordPress e potete usarlo per creare il vostro modello.

È sufficiente aggiungere blocchi per creare il layout del modello.

È possibile utilizzare blocchi di layout come gruppo, copertina, galleria e altro ancora per organizzare il layout.

Sono disponibili anche immagini royalty-free da utilizzare nei blocchi multimediali. La libreria multimediale di WordPress vi permetterà di trovare e utilizzare facilmente queste immagini nei vostri modelli.

Una volta soddisfatti del vostro modello di blocco, potete salvarlo come bozza o inviarlo alla directory dei modelli.

Prima di inviare il vostro modello a blocchi per la directory dei modelli, assicuratevi di aver letto le linee guida della directory dei modelli a blocchi.

Potete gestire tutti i vostri pattern facendo clic sul link “I miei pattern”. Verranno visualizzati tutti i pattern a blocchi che avete condiviso, i pattern in bozza e i pattern che avete favorito.

Se si desidera creare pattern a blocchi solo per uso personale, è possibile salvarli come bozze. Dopodiché, copiateli e incollateli dalla pagina I miei pattern al vostro sito web WordPress.

Creare manualmente i modelli di blocco di WordPress

È anche possibile creare pattern di blocchi manualmente e aggiungerli al tema di WordPress o a un plugin di snippet personalizzati come WPCode.

È sufficiente creare un nuovo post o una nuova pagina in WordPress. Nell’area dei contenuti, utilizzare i blocchi per creare un layout personalizzato o una raccolta di blocchi che si desidera salvare come modello.

Quindi, passare alla modalità Editor del codice.

Da qui, è necessario copiare tutto il contenuto che si vede nell’editor del codice.

Quindi, aprire un editor di testo come Notepad e incollare il codice. Ne avrete bisogno nel prossimo passo.

Ora siete pronti a registrare i vostri blocchi come pattern.

Per farlo, è sufficiente copiare e incollare il seguente codice nel file functions.php del tema o in un plugin di snippets di codice come il gratuito WPCode (consigliato).

Per maggiori dettagli, ecco la guida completa all’aggiunta di codice personalizzato in WordPress.

function wpb_my_block_patterns() {
    register_block_pattern(
        'my-plugin/my-awesome-pattern',
        array(
            'title'       => __( 'Two column magazine layout', 'my-theme'),
            'description' => _x( 'A simple magazine style two-column layout with large image and stylized text', 'my-theme' ),
            'categories'  => array( 'columns' ),
            'content'     => ' Your block content code goes here'
            )
    );
}
add_action( 'init', 'wpb_my_block_patterns' );

Ora, copiare e incollare i dati grezzi del blocco copiati in precedenza come valore per il parametro del contenuto. In altre parole, è necessario sostituire il testo che dice “Il codice del contenuto del blocco va qui” con il codice del blocco. Assicurarsi di lasciare al loro posto le virgolette singole che circondano il testo.

Infine, non dimenticate di cambiare il titolo e la descrizione con quelli che preferite e di salvare le modifiche.

Ora è possibile visitare il sito web e modificare una pagina o una pubblicazione. Il pattern di blocco appena registrato apparirà nel pannello di inserimento dei blocchi.

Come rimuovere un pattern di blocco in WordPress

È possibile rimuovere o annullare facilmente qualsiasi modello di blocco in WordPress. Supponiamo di voler rimuovere il modello di blocco creato nell’esempio precedente.

È sufficiente copiare e incollare il seguente codice nel file functions.php del tema o in WPCode:

function wpb_unregister_my_patterns() {
  unregister_block_pattern( 'my-plugin/my-awesome-pattern' );
}
add_action( 'init', 'wpb_unregister_my_patterns' );

In questo esempio, "my-plugin/my-awesome-pattern" è il nome del pattern usato per la registrazione.

È possibile utilizzare questo codice per disregistrare qualsiasi modello di blocco creato dal tema o da un plugin. Tutto ciò che occorre sapere è il nome usato per registrare il modello.

Rimuovere i modelli principali di WordPress

I pattern principali di WordPress sono disponibili per tutti gli utenti di WordPress. Ciò significa che possono essere abusati e che potrebbero anche non corrispondere al resto del tema di WordPress.

Se non si vuole utilizzare un pattern, si può semplicemente evitare di aggiungerlo ai propri contenuti. Tuttavia, se gestite un sito WordPress con più autori, potreste voler impedire a tutti gli utenti di utilizzare questi pattern principali.

Per rimuovere tutti i pattern principali di WordPress, è necessario aggiungere il seguente codice al file functions del tema o a WPCode:

remove_theme_support( 'core-block-patterns' );

Che fine hanno fatto i blocchi riutilizzabili?

I pattern di blocchi e i blocchi riutilizzabili hanno entrambi l’obiettivo di risolvere un problema simile: fornire agli utenti opzioni per aggiungere facilmente blocchi di uso comune.

Per correggere questo problema, il team Core WordPress ha unito i blocchi riutilizzabili in pattern.

Per avere la stessa funzionalità dei blocchi riutilizzabili, è ora possibile utilizzare i pattern sincronizzati. Quando l’utente o altri utenti modificano il pattern, le modifiche vengono salvate al successivo utilizzo del pattern.

Speriamo che questa guida vi abbia aiutato a imparare a utilizzare i pattern di blocco di WordPress sul vostro sito web. Potreste anche consultare la nostra guida su come padroneggiare l’editor a blocchi di WordPress o dare un’occhiata a questi pratici scorciatoi di WordPress per essere più produttivi.

Se questo articolo vi è piaciuto, iscrivetevi al nostro canale YouTube per le esercitazioni video su WordPress. Potete trovarci anche su Twitter e Facebook.