Creare un tema WordPress personalizzato con Gutenberg

WordPress è uno degli strumenti più versatili per la creazione di siti web. Da quando Gutenberg è entrato a far parte del core, l’intera logica di costruzione delle pagine si è trasformata, rendendo la struttura dei contenuti più modulare e la gestione del design più flessibile. L’obiettivo di questa guida è mostrare come sviluppare un tema personalizzato orientato ai blocchi, con l’integrazione di Tailwind CSS per rendere il codice ancora più pulito e scalabile.

Perché Gutenberg?

Gutenberg mette a disposizione un sistema di blocchi che ti permette di:

• Modularizzare i contenuti: ogni blocco è un’entità a sé stante con il suo stile e le sue funzionalità.
• Personalizzare l’esperienza utente: è possibile creare blocchi custom, pattern predefiniti e aree di contenuto “modello” pronte all’uso.
• Migliorare le performance: Gutenberg si integra nativamente con gli standard più moderni di WordPress, riducendo le dipendenze esterne e ottimizzando il caricamento delle pagine.

Nota: Con i blocchi, puoi progettare layout avanzati senza ricorrere a troppi plugin, minimizzando i problemi di compatibilità.

La mia metodologia

Nel mio flusso di lavoro, utilizzo un approccio incentrato sulla “modularità” e sull’uso efficiente di Tailwind. Di seguito, trovi i punti chiave del processo.

1. Struttura del tema Organizzo i file principali del tema:

• functions.php: file dove dichiaro funzioni e hook personalizzati.
• style.css: contiene le informazioni di base del tema (nome, autore, versione, ecc.).
• index.php, header.php, footer.php, archive.php, single.php, ecc.: template standard di WordPress per la gestione delle varie sezioni del sito.
• theme.json (per i block theme o per personalizzare Gutenberg): definisce colori, font e stili globali che Gutenberg deve riconoscere.

Esempio di intestazione di style.css:

1/*!
2Theme Name: NomeDelTema
3Theme URI:  https://esempio.com/
4Author:     Giuseppe
5Author URI: https://esempio.com/
6Version:    1.0
7Text Domain: nome-del-tema
8*/

1. Supporto ai blocchi e ai pattern

• Abilita le feature di Gutenberg: uso le funzioni add_theme_support('editor-styles'), add_theme_support('wp-block-styles'), e altre specifiche per la tipologia di contenuti e stili desiderati.
• Block Patterns: registro pattern personalizzati che consentono di creare blocchi predefiniti riutilizzabili. Ad esempio:

1// functions.php
2function nome_del_tema_register_block_patterns() {
3  if ( function_exists( 'register_block_pattern' ) ) {
4    register_block_pattern(
5      'nome-del-tema/pattern-testimonianze',
6      array(
7        'title'       => __( 'Testimonianze', 'nome-del-tema' ),
8        'description' => _x( 'Sezione testimonianze con layout personalizzato', 'Block pattern description', 'nome-del-tema' ),
9        'content'     => "<!-- wp:paragraph --><p>Testo testimonianza</p><!-- /wp:paragraph -->",
10      )
11    );
12  }
13}
14add_action( 'init', 'nome_del_tema_register_block_patterns' );

In questo modo, ogni volta che crei un contenuto, puoi inserire pattern pronti all’uso, risparmiando tempo e mantenendo un design uniforme.

1. Styling: integrazione con Tailwind Utilizzare Tailwind all’interno di un tema WordPress ti garantisce la possibilità di scrivere codice CSS estremamente modulare. Ecco la procedura che utilizzo più spesso:

• Installa Tailwind:

1npm install -D tailwindcss postcss autoprefixer
2npx tailwindcss init -p

• Configura tailwind.config.js: definisci percorsi, estensioni dei file e personalizzazioni varie (colori, spaziature, breakpoint).
• Integra con i template: tailwind deve processare i file .php e i file .js o .jsx se stai usando React (ad es. per blocchi custom).
• Enqueue in WordPress: nel file functions.php, fai il “enqueue” del CSS generato:

1function nome_del_tema_enqueue_styles() {
2  // Stile principale generato da Tailwind
3  wp_enqueue_style(
4    'nome-del-tema-tailwind',
5    get_template_directory_uri() . '/dist/css/tailwind.css', // percorso del file compilato
6    array(),
7    '1.0'
8  );
9}
10add_action('wp_enqueue_scripts', 'nome_del_tema_enqueue_styles');

• Ottimizzazione: grazie all’approccio “utility-first” di Tailwind, eviti righe di CSS duplicate. Inoltre, con la modalità purge (o content nelle versioni più recenti), i CSS inutilizzati vengono eliminati, migliorando le performance.

Applicazioni pratiche Questo approccio mi ha permesso di creare soluzioni adatte anche per portali turistici e siti per enti pubblici, dove i contenuti devono essere gestiti da più persone e devono rispettare linee guida di design (brand identity, palette specifiche, ecc.).

Bonus: Sfruttare i block style per definire varianti di uno stesso blocco. Questo evita di duplicare funzionalità, mantenendo la struttura dei contenuti più pulita.