Using block patterns in WordPress
Tempo di lettura: 9 minuti

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.

Ecco gli argomenti che tratteremo in questa guida.

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 l’editor di blocchi. Consente agli utenti di creare splendidi layout per i propri post e pagine utilizzando blocchi per elementi di contenuto comuni.

Editor di blocchi di WordPress

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.

Blocca i modelli in WordPress

Temi WordPress popolari forniscono anche i propri modelli che puoi utilizzare durante la scrittura del contenuto.

Questi modelli includono elementi come layout multicolonna predefiniti, modelli multimediali e di testo, modelli di invito all’azione, intestazioni, pulsantie 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 modelli di blocco, è necessario modificare il WordPress post o pagina dove vuoi usare 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 Motivi per visualizzare i modelli di blocco disponibili.

Aggiungi motivo a blocchi

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.

Ordina i modelli di blocco per categoria

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

Qui puoi vedere anteprime più grandi in un popup.

Anteprima dei modelli di blocco

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

Modifica schema di blocco

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 copertura, è possibile modificare il colore della copertina o 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.

Rimuovere il blocco di copertura

Utilizzando i modelli a blocchi, puoi creare rapidamente bellissimi layout per i tuoi articoli e 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 al Directory dei modelli di WordPress sito Web per visualizzare molti altri modelli di blocchi.

Directory del modello di blocco

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.

Copia il modello di blocco

Successivamente, devi tornare al tuo blog WordPress e modifica 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).

Incolla il modello di blocco

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”.

Crea schema a blocchi

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.

Creatore di schemi di blocco

Aggiungi semplicemente blocchi per creare il layout del tuo modello.

Puoi utilizzare blocchi di layout come gruppo, copertina, galleriae altro per organizzare il layout.

Modifica del layout del modello di blocco

Ci sono anche immagini royalty-free disponibile per l’uso 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 il blocco linee guida per la directory dei modelli.

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.

I tuoi modelli

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.

Passa all'editor di codice

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

Copia i blocchi di codice grezzo

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 seguente codice nei tuoi temi funzioni.php file o a 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.

Aggiungi uno schema di blocco personalizzato al tuo 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 sul tuo tema funzioni.php file o a 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 modello che abbiamo utilizzato 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 esegui un sito WordPress multi autorepotresti 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.

Blocco riutilizzabile in WordPress

Per maggiori dettagli, vedere il nostro tutorial su come farlo usa 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 plug-in come bloccare i plugin. 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 designo la nostra scelta esperta del migliori servizi di email marketing per le piccole imprese.

Se ti è piaciuto questo articolo, iscriviti al nostro Canale Youtube per i video tutorial di WordPress. Puoi trovarci anche su Twitter e Facebook.



Source link

Di Simone Serra

Web Designer Freelancer Realizzazione Siti Web Serra Simone Realizzo siti web, portali ed e-commerce con focus specifici sull’usabilità, l’impatto grafico, una facile gestione e soprattutto in grado di produrre conversioni visitatore-cliente. Elaboro siti internet, seguendo gli standard Web garantendo la massima compatibilità con tutti i devices. Sviluppo e-commerce personalizzati, multilingua, geolocalizzati per potervi mettere nelle migliori condizioni di vendita. Posiziono il tuo sito su Google per dare maggiore visibilità alla tua attività sui motori di ricerca con SEO di base o avanzato.