Guida per principianti: come utilizzare i modelli di blocco di WordPress

Pubblicato: 2022-05-03

Vuoi imparare come utilizzare i modelli di blocco di WordPress sul tuo sito web?

I modelli a blocchi ti consentono di aggiungere rapidamente elementi di design di uso comune al tuo post o ai layout di pagina.

In questo articolo, ti mostreremo come utilizzare i modelli di blocco di WordPress e trovare altri modelli da utilizzare sul tuo sito web.

Using block patterns in WordPress

Ecco gli argomenti che tratteremo in questa guida.

  • Cosa sono i modelli di blocco di WordPress
  • Come utilizzare i pattern a blocchi in WordPress
  • Trovare più pattern di blocchi da utilizzare sul tuo sito web
  • Come creare e condividere i propri schemi di blocco
  • Creazione manuale di modelli di blocco WordPress
  • Rimuovere un modello di blocco in WordPress
  • Qual è la differenza tra blocchi riutilizzabili e modelli di blocchi

Cosa sono i modelli di blocco di WordPress?

I modelli di blocco di WordPress sono una raccolta di elementi di design predefiniti che puoi utilizzare per creare layout di contenuto personalizzati più velocemente.

WordPress viene fornito con un editor intuitivo comunemente noto come editor di blocchi. Consente agli utenti di creare splendidi layout per i propri post e pagine utilizzando blocchi per elementi di contenuto comuni.

WordPress block editor

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

I modelli a blocchi forniscono una soluzione semplice a questo problema. WordPress ora viene fornito con una serie di utili schemi di blocco per impostazione predefinita.

Block patterns in WordPress

I temi WordPress popolari forniscono anche i propri modelli che puoi utilizzare durante la scrittura di contenuti.

Questi modelli includono elementi come layout multicolonna predefiniti, modelli multimediali e di testo, modelli di invito all'azione, intestazioni, pulsanti e altro ancora.

Puoi trovare ancora più modelli sul sito Web WordPress.org e puoi persino creare e condividere i tuoi modelli.

Detto questo, diamo un'occhiata a come utilizzare facilmente i modelli di blocco in WordPress per creare bellissimi contenuti per il tuo sito web.

Come utilizzare i pattern a blocchi in WordPress

Per impostazione predefinita, WordPress viene fornito con una serie di utili schemi di blocco che puoi utilizzare sul tuo sito web. Il tuo tema WordPress e alcuni plugin possono anche aggiungere i propri modelli.

Per utilizzare i pattern di blocco, devi modificare il post o la pagina di WordPress in cui desideri utilizzare il pattern di blocco.

Nella schermata di modifica del post, fai clic sul pulsante Aggiungi blocco per aprire l'inseritore di blocchi. Da qui, passa alla scheda Motivi per visualizzare i modelli di blocco disponibili.

Add block pattern

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

Puoi anche visualizzare i modelli di blocco in diverse categorie come in primo piano, pulsanti, colonne, intestazione e altro.

Sort block patterns by category

In alternativa, puoi anche fare clic sul pulsante Esplora per visualizzare i modelli di blocco.

Qui puoi vedere anteprime più grandi in un popup.

Block patterns preview

Una volta trovato uno schema che vuoi provare, puoi semplicemente fare clic per inserirlo nell'area del contenuto del tuo post o pagina.

Edit block pattern

Successivamente, puoi semplicemente puntare e fare clic su qualsiasi blocco all'interno del modello per modificarne il contenuto in base alle tue esigenze.

Avrai comunque tutte le opzioni che normalmente hai per ogni blocco. Ad esempio, se si tratta di un blocco di copertina, è possibile modificare il colore della copertina o l'immagine di sfondo.

Puoi aggiungere tutti i modelli di cui hai bisogno per il tuo post o pagina del blog. Puoi anche semplicemente eliminare un pattern per rimuoverlo da un post o da una pagina come faresti con qualsiasi blocco di WordPress.

Remove cover block

Utilizzando i modelli di blocco, puoi creare rapidamente bellissimi layout per i tuoi articoli e il sito WordPress.

In definitiva, i modelli di blocco ti aiutano a risparmiare tempo che altrimenti spenderesti per organizzare manualmente i blocchi ogni volta che devi aggiungere un'intestazione, una galleria, pulsanti e altro.

Trovare più pattern di blocchi da utilizzare sul tuo sito web

Per impostazione predefinita, WordPress viene fornito con alcuni modelli di blocchi comunemente usati. I temi WordPress possono anche aggiungere i propri modelli al tuo sito web.

Tuttavia, puoi trovare molti più schemi di blocco di quelli disponibili nell'inseritore di blocchi sul tuo sito web.

Basta andare sul sito Web di WordPress Patterns Directory per visualizzare molti altri modelli di blocchi.

Block pattern directory

Qui troverai molti altri modelli di blocchi inviati dalla community di WordPress.

Per utilizzare uno di questi schemi di blocco, porta semplicemente il mouse sullo schema di blocco e fai clic sul pulsante Copia.

Copy block pattern

Successivamente, devi tornare al tuo blog WordPress e modificare il post o la pagina in cui desideri inserire questo schema di blocco.

Nella schermata di modifica successiva, fai semplicemente clic con il pulsante destro del mouse e seleziona Incolla nel menu del browser o premi CTRL+V (Comando + V su Mac).

Paste block pattern

Come creare e condividere i propri schemi di blocco

Vuoi creare e condividere i tuoi modelli di blocco WordPress e condividerli con il mondo?

WordPress rende semplicissimo creare modelli di blocco e utilizzarli sui propri siti Web o condividerli con tutti gli utenti di WordPress in tutto il mondo.

Basta visitare il sito Web di WordPress Pattern Directory e fare clic sul collegamento "Crea nuovo modello".

Create block pattern

Nota: dovrai accedere o creare un account WordPress.org gratuito per salvare i tuoi schemi.

Una volta effettuato l'accesso, raggiungerai la pagina dell'editor del modello di blocco. È identico all'editor di blocchi di WordPress predefinito e puoi usarlo per creare il tuo modello.

Block pattern creator

Aggiungi semplicemente blocchi per creare il layout del tuo modello.

Puoi utilizzare blocchi di layout come gruppo, copertina, galleria e altro per organizzare il tuo layout.

Editing block pattern layout

Sono inoltre disponibili immagini royalty-free da utilizzare nei blocchi multimediali. La libreria multimediale di WordPress ti consentirà di trovare e utilizzare facilmente queste immagini nei tuoi modelli.

Una volta che sei soddisfatto del tuo modello di blocco, puoi salvarlo come bozza o inviarlo alla directory del modello.

Prima di poter inviare il tuo modello di blocco per la directory del modello, assicurati di aver letto le linee guida della directory del modello di blocco.

Puoi gestire tutti i tuoi schemi di blocco facendo clic sul collegamento I miei schemi. Mostrerà tutti i modelli di blocco che hai condiviso, i modelli di bozza e i modelli che hai preferito.

Your patterns

Se desideri creare schemi di blocco solo per uso personale, puoi salvarli come bozze. Dopodiché, puoi semplicemente copiarli e incollarli dalla pagina I miei modelli al tuo sito Web WordPress.

Creazione manuale di modelli di blocco WordPress

Puoi anche creare modelli di blocco manualmente e aggiungerli al tuo tema WordPress o al plug-in frammenti personalizzati.

Crea semplicemente un nuovo post o una nuova pagina in WordPress. Nell'area del contenuto, usa i blocchi per creare un layout personalizzato o una raccolta di blocchi che desideri salvare come modello.

Switch to the code editor

Successivamente, passa alla modalità Editor di codice e copia tutto il contenuto che vedi nell'editor di codice.

Copy raw code blocks

Quindi, apri un editor di testo semplice come Blocco note e incolla il codice lì. Ti servirà nel passaggio successivo.

Ora sei pronto per registrare i tuoi blocchi come pattern.

Per farlo, copia e incolla semplicemente il codice seguente nel file functions.php del tuo tema o in un plug-in specifico del sito.

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 copia e incolla i dati dei blocchi grezzi che hai copiato in precedenza come valore per il parametro del contenuto. In altre parole, dovrai sostituire il testo che dice "Il tuo codice di contenuto del blocco va qui" con il tuo codice di blocco. Assicurati di lasciare le virgolette singole che circondano il testo in posizione.

Infine, non dimenticare di modificare il titolo e la descrizione con i tuoi e salvare le modifiche.

Ora puoi visitare il tuo sito Web e modificarlo e pubblicarlo o pagina. Ora sarai in grado di vedere il tuo modello di blocco appena registrato nell'inseritore di blocchi.

Add custom block pattern to your post

Rimuovere un modello di blocco in WordPress

Puoi facilmente rimuovere o annullare la registrazione di qualsiasi modello di blocco in WordPress. Diciamo che vuoi rimuovere il pattern di blocco che hai creato nell'esempio sopra.

Tutto quello che devi fare è copiare e incollare il seguente codice nel file functions.php del tuo tema o in un plug-in specifico del sito.

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 che abbiamo usato durante la registrazione.

Puoi utilizzare questo codice per annullare la registrazione di qualsiasi modello di blocco creato dal tuo tema o da un plug-in. Tutto quello che devi sapere è il nome usato per registrare il modello.

Rimuovi i modelli di base di WordPress

I modelli principali di WordPress sono disponibili per tutti gli utenti di WordPress. Ciò significa che potrebbero essere utilizzati in modo eccessivo e potrebbero non corrispondere nemmeno al resto del tema WordPress.

Se non vuoi utilizzare un modello, puoi semplicemente evitare di aggiungerlo al tuo contenuto. Tuttavia, se gestisci un sito WordPress con più autori, potresti voler impedire a tutti gli utenti di utilizzare questi modelli di base.

Per rimuovere tutti i modelli di base di WordPress, devi aggiungere il seguente codice al file delle funzioni del tuo tema o a un plug-in specifico del sito.

remove_theme_support( 'core-block-patterns' );

Qual è la differenza tra blocchi riutilizzabili e modelli di blocchi?

I modelli di blocchi e i blocchi riutilizzabili intendono entrambi risolvere un problema simile: fornire agli utenti opzioni per aggiungere facilmente blocchi di uso comune.

Tuttavia, sono abbastanza diversi l'uno dall'altro.

Ad esempio, i blocchi riutilizzabili possono essere modificati e salvati direttamente nell'editor dei post, ma non sono flessibili come i modelli di blocco.

Una grande differenza è che se apporti una modifica a un blocco riutilizzabile, cambia il blocco su ogni post o pagina su cui lo hai utilizzato.

Reusable block in WordPress

Per maggiori dettagli, consulta il nostro tutorial su come utilizzare i blocchi riutilizzabili in WordPress.

D'altra parte, se inserisci un pattern e lo modifichi, tali modifiche si applicano solo al post o alla pagina in cui hai aggiunto quel pattern.

I modelli di blocco possono anche essere registrati dal tuo tema WordPress o da plug-in come i plug-in di blocco. Ciò consente a quegli sviluppatori di offrirti molte più opzioni di progettazione per creare i layout dei tuoi post e delle pagine.

Ci auguriamo che questa guida ti abbia aiutato a imparare come utilizzare i modelli di blocco di WordPress sul tuo sito web. Potresti anche voler vedere la nostra guida su come scegliere il miglior software di web design, o la nostra selezione di esperti dei migliori servizi di email marketing per le piccole imprese.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per i tutorial video di WordPress. Ci trovate anche su Twitter e Facebook.