In questo articolo vi illustrerò come creare un Blocco pattern di WordPress personalizzato e riutilizzarlo in qualsiasi sito web WordPress. Se seguirete i vari passaggi indicati, questa operazione vi risulterà semplice e riuscirete nell’impresa anche se non siete dei Dev provetti!!!
Cosa sono i Blocks Patterns di WordPress?
Vediamo innanzitutto cosa sono questi blocchi e a cosa servono. I modelli di blocco sono layout predefiniti, già pronti per l’uso e composti da blocchi Gutenberg di WordPress. Sono presenti dalla versione di WordPress 5.5 e dalla 5.8 puoi creare e registrare pattern di blocchi personalizzati, da riutilizzare in più siti Web.
Questi blocchi ti consentono di creare facilmente un layout articolato in pochi minuti e di salvarlo come modello di template, o di creare blocchi pattern adatti alle esigenze del cliente.
Mentre il “blocco riutilizzabile”, che probabilmente già conoscete, ti permette di riutilizzare lo stesso blocco con lo stesso contenuto in tutto il sito in cui è stato creato, nei blocchi pattern posso modificare il contenuto di volta in volta.
Di seguito trovate il link per visionare la libreria dei patterns disponibili su WordPress suddivisi per Categorie.
I passaggi per creare e registrare un blocco pattern nel vostro child theme
- Creare il nuovo blocco pattern, composto dai vari blocchi Gutenberg che si vogliono utilizzare
- Copiare il codice dal Code Editor
- Passare il codice nel Json Formatter Escaper e utilizzare il codice corretto
- Registrare il nuovo blocco pattern ed inserire la funzione nel function.php del child theme, eventualmente comprensivo delle “categorie” e delle “keyword” per la ricerca del pattern. Il codice corretto nel passaggio precedente andrà aggiunto al “content” della funzione.
Creazione del pattern utilizzando i blocchi di Gutenberg
Nell’esempio sottostante ho creato un pattern con i blocchi Gutenberg: “Titolo”, “Paragrafo” e “Galleria”.
Copiare il codice dei blocchi dal Code Editor
Per trovare il code editor, cliccare sui 3 punti a dx, cercate l’editor del codice e ricopiate il codice, come da esempio sottostante.
<!-- wp:heading {"textAlign":"center"} -->
<h2 class="has-text-align-center">Come creare un blocco di gutenberg personalizzato</h2>
<!-- /wp:heading -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer consectetur interdum felis non condimentum. Donec aliquet convallis ipsum, quis ultrices arcu. Sed vel porttitor erat, in elementum arcu. Ut metus purus, semper non lectus et, laoreet sodales massa. Sed posuere justo quis metus eleifend cursus. Morbi nec lectus lacinia, condimentum urna ac, tristique nunc. Donec ornare neque vel auctor convallis. Etiam mattis ut nulla feugiat ultrices. Quisque condimentum efficitur dui. Vestibulum nisl justo, dignissim et interdum in, placerat ut risus. Duis vitae risus pretium, egestas odio porta, elementum velit. Cras congue massa a aliquam commodo. Etiam aliquet tempor nunc, ac elementum enim. Mauris vel odio cursus, commodo magna a, elementum eros. Fusce lobortis justo et lacus dignissim hendrerit.</p>
<!-- /wp:paragraph -->
<!-- wp:gallery {"linkTo":"none","backgroundColor":"ast-global-color-5","className":"","block_id":"8e5562b5"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped has-ast-global-color-5-background-color has-background"><!-- wp:image {"id":5,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://appenineggiando.it/wp-content/uploads/2022/05/fogs-on-green-mountain-1054222-1024x683.jpg" alt="op" class="wp-image-5"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":146,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://appenineggiando.it/wp-content/uploads/2022/06/look-out.jpg" alt="" class="wp-image-146"/></figure>
<!-- /wp:image -->
<!-- wp:image {"id":429,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://appenineggiando.it/wp-content/uploads/2022/11/1200x1200_px_Cityscape-1314023-1024x1024.jpg" alt="1200x1200_px_Cityscape 1314023" class="wp-image-429"/></figure>
<!-- /wp:image --></figure>
<!-- /wp:gallery -->
Passare il codice nel JSON Formatter Escaper
Inserite il codice precedentemente ottenuto dal code Editor e cliccate “escape” per ottenere il codice corretto con l’escaping dei caratteri, da utilizzare per la registrazione del vostro pattern.
Segui il link al Json Formatter Escaper.
Registrazione del Blocco Pattern
Per registrare il Pattern inserire la seguente funzione nel functions.php del child theme, se volete creare le “categorie e le keywords” del pattern, utilizzate il codice sottostante per intero. Altrimenti, senza indicare categorie e keywords, il vostro blocco verrà registrato come “Uncategorized” e lo troverete in questa categoria.
Il codice “escaped” nel passaggio precedente, andrà inserito nel “content“ della vostra funzione.
// Registrazione "mio blocco" NUOVO PATTERN GUTENBERG nel functions.php del child theme, senza categoria e keywords cioè
"uncategorized"
function function_name() {
register_block_pattern(
'slug',
array(
'title' => __( 'mio-blocco', 'text-domain' ),
'description' => _x( 'Your Description.', 'Block pattern description', 'text-domain' ),
'content' => "<!-- wp:heading -->\r\n<h2>Blocco di Gutenberg</h2>\r\n<!-- /wp:heading -->\r\n\r\n<!-- wp:paragraph -->\r\n<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam lacinia, velit vel commodo euismod, elit felis vestibulum mi, in laoreet mauris elit quis ipsum. Sed ac tristique mauris. Vivamus vitae tortor in arcu laoreet tincidunt at quis arcu. Proin semper, tellus vitae tristique fermentum, leo turpis congue enim, vitae tincidunt ligula elit et mi. Quisque iaculis augue nunc, a fringilla erat fermentum in. Phasellus luctus, libero in gravida semper, neque ex ullamcorper neque, at gravida augue velit eu ipsum. Donec non aliquet est, elementum commodo lacus. Maecenas mattis nisi enim, id porta nulla elementum in.</p>\r\n<!-- /wp:paragraph -->\r\n\r\n<!-- wp:gallery {\"columns\":2,\"linkTo\":\"media\"} -->\r\n<figure class=\"wp-block-gallery has-nested-images columns-2 is-cropped\"><!-- wp:image {\"id\":144,\"sizeSlug\":\"large\",\"linkDestination\":\"media\"} -->\r\n<figure class=\"wp-block-image size-large\"><a href=\"https://appenineggiando.it/wp-content/uploads/2022/06/submerged.jpg\"><img src=\"https://appenineggiando.it/wp-content/uploads/2022/06/submerged.jpg\" alt=\"\" class=\"wp-image-144\"/></a></figure>\r\n<!-- /wp:image -->\r\n\r\n<!-- wp:image {\"id\":143,\"sizeSlug\":\"large\",\"linkDestination\":\"media\"} -->\r\n<figure class=\"wp-block-image size-large\"><a href=\"https://appenineggiando.it/wp-content/uploads/2022/06/orange-tree.jpg\"><img src=\"https://appenineggiando.it/wp-content/uploads/2022/06/orange-tree.jpg\" alt=\"\" class=\"wp-image-143\"/></a></figure>\r\n<!-- /wp:image -->\r\n\r\n<!-- wp:image {\"id\":146,\"sizeSlug\":\"large\",\"linkDestination\":\"media\"} -->\r\n<figure class=\"wp-block-image size-large\"><a href=\"https://appenineggiando.it/wp-content/uploads/2022/06/look-out.jpg\"><img src=\"https://appenineggiando.it/wp-content/uploads/2022/06/look-out.jpg\" alt=\"\" class=\"wp-image-146\"/></a></figure>\r\n<!-- /wp:image -->\r\n\r\n<!-- wp:image {\"id\":145,\"sizeSlug\":\"large\",\"linkDestination\":\"media\"} -->\r\n<figure class=\"wp-block-image size-large\"><a href=\"https://appenineggiando.it/wp-content/uploads/2022/06/cat-nose.jpg\"><img src=\"https://appenineggiando.it/wp-content/uploads/2022/06/cat-nose.jpg\" alt=\"\" class=\"wp-image-145\"/></a></figure>\r\n<!-- /wp:image --></figure>\r\n<!-- /wp:gallery -->",
)
);
}
add_action( 'init', 'function_name' );
Non dimenticatevi di modificare e di adeguare i dati della funzione alle vostre esigenze.
Esempio di funzione con “categories” e “keywords”.
Se avete seguito tutti i passaggi attentamente, il vostro blocco dovrebbe essere perfettamente funzionante!!!
Qui potete scaricare il pdf per creare un blocco pattern personalizzato
Vi ringrazio dell’attenzione e mi auguro che queste indicazioni vi possano essere utili.
Buon divertimento con WordPress!!!
