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:

/*!
Theme Name: NomeDelTema
Theme URI:  https://esempio.com/
Author:     Giuseppe
Author URI: https://esempio.com/
Version:    1.0
Text Domain: nome-del-tema
*/

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:

// functions.php
function nome_del_tema_register_block_patterns() {
  if ( function_exists( 'register_block_pattern' ) ) {
    register_block_pattern(
      'nome-del-tema/pattern-testimonianze',
      array(
        'title'       => __( 'Testimonianze', 'nome-del-tema' ),
        'description' => _x( 'Sezione testimonianze con layout personalizzato', 'Block pattern description', 'nome-del-tema' ),
        'content'     => "<!-- wp:paragraph --><p>Testo testimonianza</p><!-- /wp:paragraph -->",
      )
    );
  }
}
add_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:

npm install -D tailwindcss postcss autoprefixer
npx 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:

function nome_del_tema_enqueue_styles() {
  // Stile principale generato da Tailwind
  wp_enqueue_style(
    'nome-del-tema-tailwind',
    get_template_directory_uri() . '/dist/css/tailwind.css', // percorso del file compilato
    array(),
    '1.0'
  );
}
add_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.