Guida per principianti: come utilizzare i pattern di blocchi di WordPress

Costruire siti WordPress non è mai stato così facile, e i pattern di blocchi sono una parte importante di questo. Quando li abbiamo scoperti per la prima volta, abbiamo visto il loro potenziale per accelerare il nostro flusso di lavoro.

Ora utilizziamo pattern di blocchi come blocchi riutilizzabili per CTA e pulsanti di offerta coupon: sono diventati essenziali per il modo in cui creiamo contenuti.

I pattern di blocchi rendono semplice ottenere design dall'aspetto professionale senza bisogno di competenze di codifica o web design.

Sono combinazioni predefinite di blocchi che puoi inserire e personalizzare rapidamente, dandoti un vantaggio invece di iniziare da zero ogni volta.

Sia che tu stia costruendo il tuo primo sito WordPress o che tu voglia lavorare più velocemente, questa guida per principianti ti mostrerà come trovare, usare e creare pattern di blocchi che ti faranno risparmiare tempo su ogni progetto.

Ecco gli argomenti che tratteremo in questa guida:

• Cosa sono i pattern di blocchi di WordPress?
• Come usare i pattern di blocchi in WordPress
• Come creare pattern nell'editor a blocchi
• Come creare pattern nell'editor del sito
• Gestire i pattern in WordPress
• Trovare altri pattern di blocchi da usare sul tuo sito web
• Come creare e condividere i tuoi pattern di blocchi
• Creare pattern di blocchi di WordPress manualmente
• Come rimuovere un pattern di blocchi in WordPress
• Cosa è successo ai blocchi riutilizzabili?
• Domande frequenti
• Risorse aggiuntive

Cosa sono i pattern di blocchi di WordPress?

I pattern di blocchi di WordPress sono raccolte pre-progettate di blocchi che ti aiutano a creare layout personalizzati in modo rapido ed efficiente. Sono stati un punto di svolta per noi quando costruiamo pagine con scadenze ravvicinate.

L'editor a blocchi di WordPress è intuitivo e consente agli utenti di creare splendidi layout con blocchi di contenuto. Questi includono testo, immagini, pulsanti e altri elementi che puoi disporre in base alle tue esigenze.

Tuttavia, non tutti gli utenti hanno il tempo o le competenze di design per creare layout da zero ogni volta. Abbiamo affrontato questa sfida noi stessi, motivo per cui i pattern di blocchi sono stati uno strumento così prezioso nel nostro flusso di lavoro.

I pattern di blocchi offrono una soluzione semplice. WordPress include una varietà di pattern predefiniti per impostazione predefinita, rendendo semplice l'aggiunta di layout dall'aspetto professionale in pochi secondi.

I temi WordPress popolari spesso includono i propri pattern personalizzati. Questi pattern consentono di risparmiare ancora più tempo fornendo design pronti all'uso su misura per il tuo tema.

I pattern possono includere layout come design a più colonne, combinazioni di media e testo, sezioni di invito all'azione, intestazioni e pulsanti personalizzati. Questa flessibilità li rende adatti a una varietà di tipi di contenuto.

Puoi anche trovare altri pattern di blocchi sul sito Web WordPress.org. Se ti piace progettare, puoi persino creare e condividere i tuoi pattern con la community di WordPress.

Successivamente, ti mostreremo come utilizzare i pattern di blocchi in WordPress per creare splendidi layout per il tuo sito Web.

Come usare i pattern di blocchi in WordPress

Per impostazione predefinita, WordPress viene fornito con diversi utili modelli di blocchi che puoi utilizzare sul tuo sito web. Anche il tuo tema WordPress e alcuni plugin potrebbero aggiungere i propri modelli.

Per utilizzare i modelli di blocchi, devi modificare il post o la pagina di WordPress in cui desideri utilizzare il modello 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 'Modelli' per visualizzare i modelli di blocchi disponibili.

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

Puoi anche visualizzare i modelli di blocchi in diverse categorie, come in primo piano, pulsanti, colonne, intestazioni e altro ancora.

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

Qui puoi vedere anteprime più grandi in un popup.

Una volta trovato un modello che desideri provare, fai semplicemente clic per inserirlo nell'area di contenuto del tuo post o della tua pagina.

Il modello apparirà nell'editor di contenuto con contenuti segnaposto che puoi modificare e sostituire con i tuoi.

Basta puntare e fare clic su qualsiasi blocco all'interno del modello per modificarne e cambiarne il contenuto in base alle tue esigenze.

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

Puoi aggiungere tutti i pattern che ti servono per il tuo post o pagina del blog. Puoi anche eliminare un pattern per rimuoverlo da un post o pagina, proprio come elimineresti qualsiasi blocco di WordPress.

Utilizzando i pattern di blocco, puoi creare rapidamente splendidi layout per i tuoi articoli e il tuo sito WordPress.

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

Come creare pattern nell'editor a blocchi

WordPress rende semplicissimo creare pattern nell'editor a blocchi che puoi riutilizzare in seguito.

Durante la modifica di un post o di una pagina, seleziona semplicemente i blocchi che desideri includere nel tuo pattern e fai clic su 'Crea pattern'.

Puoi selezionare più blocchi premendo il tasto Maiusc sulla tastiera e facendo clic su di essi.

Tuttavia, se i tuoi blocchi sono disposti in un modo che rende più difficile selezionarli, puoi utilizzare la vista Elenco nella scheda Panoramica del documento.

La creazione di un pattern aprirà un popup.

Dovrai fornire un nome per il tuo pattern e scegliere una categoria.

Sotto, vedrai un interruttore per mantenere il pattern Sincronizzato o Non sincronizzato.

Pattern Sincronizzati: Quando tu o altri utenti modificate il pattern, tali modifiche verranno salvate la prossima volta che il pattern verrà utilizzato.

Pattern Non Sincronizzati: Le modifiche apportate a tali pattern dopo averli inseriti in un post o pagina non influenzeranno il pattern originale.

Fai clic sul pulsante 'Crea' per salvare il tuo pattern.

La prossima volta che vorrai utilizzare quel pattern, dovrai solo cercarne il nome o la categoria nell'inseritore di blocchi.

Come creare pattern nell'editor del sito

Se stai utilizzando un tema a blocchi con supporto per l'editor completo del sito, puoi anche creare pattern nell'editor del sito.

Apri l'editor del sito visitando la pagina Aspetto » Editor.

Ora atterrerai nell'interfaccia dell'editor del sito.

Fai clic su ‘Pattern’ dalla barra laterale sinistra per continuare.

Vedrai tutti i pattern e le categorie disponibili.

Per creare un nuovo pattern, fai clic sul pulsante Aggiungi [+] e quindi seleziona ‘Crea pattern’.

Si aprirà una finestra popup in cui dovrai fornire un nome per il tuo pattern, scegliere una categoria e decidere se desideri che il pattern venga sincronizzato o non sincronizzato.

Fai clic su ‘Crea’ per continuare.

WordPress creerà una tela vuota per te per creare il tuo pattern.

Da qui, puoi aggiungere blocchi per progettare il tuo pattern.

Una volta terminato, non dimenticare di fare clic sul pulsante ‘Salva’ per memorizzare il tuo pattern.

Gestire i pattern in WordPress

Se stai utilizzando un tema a blocchi con supporto per l'editor completo del sito, puoi gestire i pattern nell'editor del sito.

Apri l'editor del sito visitando la pagina Aspetto » Editor.

Nella schermata Pattern, puoi fare clic su un pattern per modificarlo. Puoi anche fare clic sul menu a tre punti accanto a un pattern per duplicarlo, esportarlo o eliminarlo.

Per gestire tutti i tuoi pattern, fai clic sulla scheda ‘Gestisci tutti i miei pattern’ nella barra laterale.

Questo ti mostrerà un elenco di tutti i tuoi pattern. Ora puoi modificarli, esportarli o eliminarli.

Se stai utilizzando un tema classico (temi WordPress che non supportano l'editor completo del sito), puoi gestire i pattern visitando la pagina Aspetto » Pattern.

Da qui, puoi aggiungere, eliminare ed esportare i tuoi pattern a blocchi.

Tieni presente che anche alcuni temi classici come Hestia ora gestiscono i pattern in modo simile ai temi Full Site Editing, mentre altri utilizzano ancora l'interfaccia precedente mostrata nello screenshot seguente.

Quindi, il modo in cui gestisci i pattern a blocchi dipende davvero dal tema che stai utilizzando.

Trovare altri pattern di blocchi da usare sul tuo sito web

Per impostazione predefinita, WordPress include alcuni pattern di blocchi di uso comune. I temi di WordPress possono anche aggiungere i propri pattern al tuo sito web.

Tuttavia, puoi trovare molti più pattern di blocchi rispetto a quelli disponibili nell'inseritore di blocchi sul tuo sito web.

Vai semplicemente al sito web della Directory dei Pattern di WordPress per visualizzare molti altri pattern di blocchi.

Qui troverai pattern di blocchi inviati dalla community di WordPress.

Per utilizzare uno di questi pattern di blocchi, fai semplicemente clic per visualizzare il pattern e quindi fai clic sul pulsante 'Copia pattern'.

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

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

Come creare e condividere i tuoi pattern di blocchi

Vuoi creare i tuoi pattern di blocchi WordPress e condividerli con il mondo?

WordPress rende semplicissimo creare pattern di blocchi e utilizzarli sui tuoi siti web o condividerli con tutti gli utenti WordPress in tutto il mondo.

Visita semplicemente il sito web della Directory dei Pattern di WordPress e fai clic sul link 'Nuovo pattern'.

Nota: Dovrai accedere o creare un account WordPress.org gratuito per salvare i tuoi pattern.

Una volta effettuato l'accesso, raggiungerai la pagina dell'editor dei pattern di blocchi. È identica all'editor di blocchi predefinito di WordPress e puoi usarla per creare il tuo pattern.

Aggiungi semplicemente blocchi per creare il layout del tuo pattern.

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

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

Una volta soddisfatto del tuo pattern di blocchi, puoi salvarlo come bozza o inviarlo alla directory dei pattern.

Prima di poter inviare il tuo pattern di blocchi alla directory dei pattern, assicurati di aver letto le linee guida della directory dei pattern.

Puoi gestire tutti i tuoi pattern di blocchi facendo clic sul link ‘I miei pattern’. Verranno visualizzati tutti i pattern di blocchi che hai condiviso, i pattern in bozza e i pattern che hai aggiunto ai preferiti.

Se desideri creare pattern di blocchi solo per uso personale, puoi salvarli come bozze. Successivamente, copiali e incollali dalla pagina I miei pattern sul tuo sito web WordPress.

Creare pattern di blocchi di WordPress manualmente

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

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

Successivamente, passa alla modalità Editor di codice.

Da qui, devi copiare tutto il contenuto che vedi nell'editor di codice.

Successivamente, apri un editor di testo semplice come Blocco note e incolla quel codice. Ti servirà nel passaggio successivo.

Ora sei pronto per registrare i tuoi blocchi come pattern.

Per fare ciò, copia e incolla semplicemente il seguente codice nel file functions.php del tuo tema o in un plugin per snippet di codice come il plugin gratuito WPCode (consigliato).

Per maggiori dettagli, ecco la guida completa per aggiungere 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, copia e incolla i dati grezzi del blocco che hai copiato in precedenza come valore per il parametro content. 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 al loro posto.

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

Ora puoi visitare il tuo sito web e modificare un post o una pagina. Il tuo pattern di blocco appena registrato apparirà nell'inseritore di blocchi.

Come rimuovere un pattern di blocchi in WordPress

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

Tutto ciò che devi fare è copiare e incollare il seguente codice nel file functions.php del tuo 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 che abbiamo usato quando lo abbiamo registrato.

Puoi usare questo codice per annullare la registrazione di qualsiasi pattern di blocco creato dal tuo tema o da un plugin. Tutto ciò che devi sapere è il nome utilizzato per registrare il pattern.

Rimuovere Pattern di WordPress Core

I pattern di WordPress core sono disponibili per tutti gli utenti di WordPress. Ciò significa che potrebbero essere sovrautilizzati e potrebbero non corrispondere nemmeno al resto del tuo tema WordPress.

Se non si desidera utilizzare un pattern, è sufficiente evitare di aggiungerlo al proprio contenuto. Tuttavia, se si gestisce un sito WordPress multi-autore, si potrebbe 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' ); 

Cosa è successo ai blocchi riutilizzabili?

I pattern di blocchi e i blocchi riutilizzabili miravano entrambi a risolvere un problema simile: fornire agli utenti opzioni per aggiungere facilmente blocchi comunemente usati.

Per risolvere questo problema, il team di Core WordPress ha unito i blocchi riutilizzabili nei pattern.

Per avere la stessa funzionalità dei blocchi riutilizzabili, ora è possibile utilizzare i Pattern Sincronizzati. Quando tu o altri utenti modificate il pattern, tali modifiche verranno salvate la prossima volta che il pattern verrà utilizzato.

Domande frequenti

Ecco alcune domande che vengono poste frequentemente dai nostri lettori sui pattern di blocchi.

Dove posso trovare pattern di blocchi aggiuntivi?

Oltre ai pattern predefiniti in WordPress, puoi esplorare la Directory dei Pattern di WordPress online per ancora più opzioni create dalla community.

I pattern di blocco possono rallentare il mio sito web?

No, i pattern di blocco in sé non influiscono sulla velocità del tuo sito. Sono un modo per strutturare i contenuti, ma assicurati di utilizzare immagini e blocchi ottimizzati per le migliori prestazioni.

Per suggerimenti, consulta la nostra guida definitiva su velocità e prestazioni di WordPress.

Risorse aggiuntive

Se vuoi personalizzare il design del tuo sito WordPress, troverai utili le seguenti risorse:

• Come creare facilmente un tema WordPress personalizzato (senza codice)
• Come ridisegnare un sito web WordPress (Guida per principianti)
• Problemi comuni dell'editor a blocchi di WordPress e come risolverli
• Come stilizzare il modulo commenti di WordPress (Guida definitiva)
• Come personalizzare il colore di sfondo dell'editor a blocchi di WordPress

Speriamo che questa guida ti abbia aiutato a imparare come utilizzare i pattern di blocco di WordPress sul tuo sito web. Potresti anche voler consultare la nostra guida su come padroneggiare l'editor di blocchi di WordPress o dare un'occhiata a questi utili scorciatoie di WordPress per essere più produttivo.

Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.