I temi WordPress giocano un ruolo fondamentale nel dare forma all’aspetto e alla funzionalità di un sito web. Definiscono il modo in cui vengono visualizzati i contenuti e offrono varie opzioni di design per creare un sito unico. Nel corso degli anni, i temi WordPress si sono evoluti in modo significativo, a partire da quelli che oggi chiamiamo “temi classici”

I temi classici sono stati lo standard per molto tempo, basandosi su template PHP e richiedendo una certa conoscenza della codifica per essere personalizzati. Questi temi offrivano una grande flessibilità ma potevano essere impegnativi per chi era alle prime armi con lo sviluppo web. Poi, il rilascio di WordPress 5.9 ha segnato un cambiamento significativo con l’introduzione dei “temi a blocchi”

Temi classici di WordPress e temi a blocchi

I temi classici sono il tipo tradizionale di tema per WordPress. Definiscono l’aspetto generale di un sito web utilizzando file template scritti in PHP, CSS per lo stile e JavaScript per le funzionalità aggiuntive. Questi temi altamente personalizzabili sono stati la spina dorsale dei siti WordPress per molti anni.

I temi a blocchi, invece, sono un tipo di tema WordPress più recente, introdotto per supportare le funzionalità di modifica completa del sito (FSE). A differenza dei temi classici, utilizzano i blocchi per costruire tutte le parti di un sito web, compresi gli header, i footer e le aree di contenuto. Questo permette un modo più visivo e intuitivo di progettare e personalizzare i siti web direttamente nell’editor di WordPress.

Le differenze principali tra i temi classici e quelli a blocchi sono:

  1. Personalizzazione: i temi classici richiedono l’uso di PHP e alcune conoscenze di codifica, mentre i temi a blocchi utilizzano un editor visuale per facilitare la personalizzazione.
  2. Flessibilità: i temi classici offrono maggiore flessibilità agli sviluppatori, mentre i temi a blocchi si concentrano sulla facilità d’uso e sull’accessibilità.
  3. Modifica: i temi classici vengono modificati attraverso i file del tema e il Personalizza di WordPress. I temi a blocchi possono essere modificati interamente tramite l’editor di blocchi.

Scegliere quale tipo di tema sviluppare

La scelta tra temi classici e temi a blocchi dipende dalle proprie esigenze e dal proprio livello di competenza. Se siete sviluppatori alla ricerca della massima flessibilità, i temi classici potrebbero essere la scelta che fa per voi. Tuttavia, se preferite un approccio più semplice e visivo alla creazione del sito, i temi a blocchi sono un’ottima opzione.

Entrambi i tipi di temi hanno dei punti di forza e sono adatti a diversi tipi di utenti e progetti. Capire le differenze fondamentali vi aiuterà a prendere una decisione consapevole su quale tema si adatta meglio alle esigenze del vostro sito web.

Questo articolo si propone di aiutarvi a capire e a padroneggiare i concetti fondamentali dei temi classici e dei temi a blocchi, consentendovi di creare e personalizzare i temi WordPress in modo efficace.

Capire la struttura di un tema

Capire la struttura di un tema, sia esso classico o a blocchi, è fondamentale per personalizzare efficacemente il vostro sito WordPress.

Prima di esplorare la struttura di ogni tema, dovete sapere che tutti i temi di WordPress sono memorizzati nella directory wp-content/themes della vostra installazione WordPress e che ogni tema risiede in una propria cartella.

Struttura del tema classico

Un tema classico comprende diversi file e directory chiave che creano l’aspetto e la funzionalità del sito. I due file principali sono:

  1. style.css: questo è il foglio di stile principale che definisce lo stile visivo del tema. Include i metadati relativi al tema (come il nome, l’autore e la versione) nella parte superiore, seguiti dalle regole CSS che definiscono lo stile del tema.
  2. index.php: questo è il file di template principale utilizzato per visualizzare i contenuti della pagina iniziale. Funge da fallback per altri file template che potrebbero mancare.

Oltre a questi, altri importanti file consentono un design modulare e assicurano che le diverse parti del sito possano essere facilmente personalizzate e mantenute. Anche se opzionali, questi file sono considerati standard:

  • header.php: questo file contiene la sezione dell’header del tema, che include il titolo del sito, il logo e il menu di navigazione. È incluso nella parte superiore di ogni pagina, per garantire un header coerente.
  • footer.php: questo file contiene la sezione del footer del tema, che spesso include le informazioni sul copyright e la navigazione a piè di pagina. Viene incluso nella parte inferiore di ogni pagina per garantire un footer coerente in tutto il sito.
  • functions.php: questo file viene utilizzato per aggiungere funzionalità personalizzate al tema. Può registrare i menu, inserire stili e script e aggiungere funzionalità di supporto al tema come le miniature dei post e gli sfondi personalizzati. In sostanza, funge da centro di controllo per le personalizzazioni e i miglioramenti del tema.
  • page.php single.php, archive.php, ecc.: questi file template definiscono la struttura di diversi tipi di contenuti, come pagine, singoli post e archivi.

Struttura del tema a blocchi

Un tema a blocchi è composto da diversi file e cartelle chiave progettati appositamente per lavorare con i blocchi e le funzionalità FSE. I file e le cartelle principali sono:

  1. theme.json: questo file è fondamentale per configurare le impostazioni, gli stili e le personalizzazioni del tema. Definisce stili e impostazioni globali per i blocchi, fornendo un modo centralizzato per gestire l’aspetto e il comportamento del tema. Sostituisce la necessità di utilizzare molto codice PHP personalizzato e permette di configurare facilmente i colori, la tipografia, la spaziatura e altro ancora.
  2. style.css: sebbene la maggior parte dello stile sia gestito all’interno di theme.json, come per i temi classici style.css è ancora utilizzato per dichiarare i metadati del tema, come il nome del tema, l’autore, la versione e la descrizione.
  3. templates/: questa cartella contiene i file HTML che definiscono il layout delle diverse parti del sito. Questi file includono template come index.html per la homepage, single.html per i singoli post, page.html per le pagine e altri ancora. Ogni file è costruito utilizzando dei blocchi.
  4. parts/: questa directory contiene sezioni riutilizzabili dei template, come gli header e i footer. Queste parti possono essere incluse in più template, assicurando la coerenza del sito.

Anche se non è obbligatorio usarli, i pattern sono importanti per lo sviluppo di temi avanzati. I pattern sono layout di blocchi predefiniti che possono essere inseriti nelle pagine e nei post, fornendo un modo rapido per creare design complessi.

Con i temi a blocchi, potete decidere di non creare manualmente la struttura del tema. Potete snellire il processo di configurazione utilizzando il plugin Create Block Theme, che raccoglie tutti i file e i dettagli necessari.

Plugin Create Block Theme
Plugin Create Block Theme.

Una volta inseriti i dettagli, viene creata una nuova cartella di temi nella directory wp-content/themes e il nuovo tema apparirà nell’area di amministrazione di WordPress in Aspetto > Temi. Potete aggiungere ulteriori dettagli sul tema nell’impostazione della meta descrizione di style.css.

Gerarchia dei template del tema WordPress

La gerarchia dei template stabilisce quali file di template WordPress utilizza per visualizzare i diversi tipi di contenuto. Sia i temi classici che quelli a blocchi seguono una gerarchia simile, ma si differenziano per i tipi di file utilizzati: i temi classici utilizzano file PHP, mentre i temi a blocchi utilizzano file HTML.

La gerarchia dei template segue un ordine specifico per determinare quale file template utilizzare. Se WordPress non riesce a trovare un file di template specifico, passa a quello successivo nella gerarchia.

Per esempio, quando WordPress deve visualizzare un singolo post di un blog, cerca innanzitutto un template specifico per il tipo di post, come single-{post-type}.php o single-{post-type}.html. Se questo file non esiste, cercherà i template generici single.php o single.html. Se nessuno di questi file viene trovato, WordPress tornerà al template più generico index.php o index.html.

Lo stesso processo si applica ad altri tipi di contenuti. Per una pagina statica, WordPress verifica innanzitutto la presenza di eventuali template personalizzati assegnati a quella pagina. Se non ne trova nessuno, cerca un template basato sullo slug della pagina (ad esempio, page-about.php o page-about.html) o sul suo ID (page-42.php o page-42.html). Se questi template specifici non sono disponibili, WordPress utilizza il template generale page.php o page.html. Se anche questo non è disponibile, ricorre a index.php o index.html.

Creare i template

La creazione di template in WordPress permette di personalizzare la visualizzazione di diversi tipi di contenuti sul vostro sito web. Sia che stiate lavorando con temi classici o con temi a blocchi, il processo prevede l’impostazione dei file necessari e la loro configurazione in base alle vostre esigenze.

Vediamo come impostare un template di pagina per entrambi i tipi di temi.

Template di pagina del tema classico

Nei temi classici si crea un template di pagina utilizzando PHP. Ecco come fare:

  1. Creare il file del template: utilizzando un editor di testo, create un nuovo file PHP nella directory del vostro tema e assegnategli il nome page.php.
  2. Aggiungere il codice del template: scrivete il codice PHP necessario per definire la struttura e il contenuto del template di pagina. In genere include i tag del template di WordPress per visualizzare il contenuto della pagina.
  3. Includere header e footer: assicuratevi che il vostro template includa l’header e il footer aggiungendo le funzioni get_header() e get_footer(). In questo modo il layout sarà coerente con il resto del sito.

Ecco un esempio di come potrebbe apparire page.php:

<?php
get_header(); ?>

<main>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
</main>

<?php get_footer(); ?>

In questo esempio, il template include l’header, mostra il titolo e il contenuto della pagina e include il footer.

Template di pagina di un tema a blocchi

Nei temi a blocchi, la creazione di un template di pagina può essere effettuata tramite l’Editor del sito WordPress o creando un file page.html nella cartella templates.

Una volta creato questo file, potete progettare un layout navigando nell’editor del sito (Aspetto > Editor nella dashboard di WordPress).

Utilizzate l’editor a blocchi per aggiungere e disporre i blocchi per progettare il layout della vostra pagina. Potete aggiungere blocchi per il titolo della pagina, l’immagine principale e il contenuto. Personalizzate ogni blocco in base alle vostre preferenze di design.

Personalizzare il template di pagina con l'editor a blocchi
Personalizzare il template di pagina con l’editor a blocchi.

Una volta soddisfatti del layout, salvate il template. WordPress genererà automaticamente il file HTML corrispondente nella directory del vostro tema.

Personalizzare lo stile dei temi

Definire lo stile del vostro tema WordPress è un passo fondamentale per definire l’aspetto visivo del vostro sito web. Sia i temi classici che i temi a blocchi offrono un’ampia possibilità di personalizzare gli stili, ma hanno un approccio diverso.

Personalizzare lo stile dei temi classici

Nei temi classici, lo stile è tipicamente gestito tramite i CSS. Ecco come personalizzare un tema classico:

Il foglio di stile principale di un tema classico è il file style.css. Questo file contiene tutte le regole CSS che definiscono l’aspetto del tema. È anche il luogo in cui vengono dichiarati i metadati del tema, come il nome del tema, l’autore, la versione e la descrizione.

Per assicurarvi che il CSS venga caricato correttamente, dovete inserire il foglio di stile nel file functions.php utilizzando la funzione wp_enqueue_style().

function my_theme_enqueue_styles() {
    wp_enqueue_style('my-theme-style', get_stylesheet_uri());
}
add_action('wp_enqueue_scripts', 'my_theme_enqueue_styles');

Questo passaggio è fondamentale per mantenere i corretti standard di WordPress e per garantire che gli stili siano applicati correttamente.

Inoltre, potete aggiungere CSS personalizzati direttamente al file style.css o creare file CSS separati per diverse parti del vostro tema. I CSS personalizzati possono anche essere incorporati all’interno di singoli file di template utilizzando il tag <style>, anche se questa pratica è generalmente meno comune e consigliata solo per stili specifici e isolati.

Per uno stile più avanzato, potete utilizzare preprocessori CSS come SASS o LESS. Questi strumenti permettono di scrivere un CSS più manutenibile e modulare, rendendo più facile la gestione e l’estensione degli stili del vostro tema.

Personalizzare lo stile dei temi a blocchi

Lo stile dei temi a blocchi è gestito principalmente attraverso il file theme.json e l’editor dei blocchi.

Il file theme.json è il luogo centrale per la configurazione degli stili e delle impostazioni globali del vostro tema. Questo file permette di definire i colori, la tipografia, la spaziatura e altri stili in un formato JSON strutturato, fornendo un modo centralizzato per gestire l’aspetto e il comportamento del tema. Gli stili globali definiti in theme.json si applicano a tutto il sito, garantendo un aspetto e un’atmosfera coerenti.

Oltre a theme.json, potete utilizzare l’editor a blocchi per applicare stili personalizzati direttamente ai blocchi. L’editor a blocchi permette di vedere le modifiche in tempo reale e di regolare il design visivamente senza dover scrivere codice manualmente. Questo rende il processo più accessibile, soprattutto per coloro che preferiscono un’interfaccia visiva alla codifica.

Sebbene il file theme.json gestisca la maggior parte dello stile, potete comunque utilizzare i CSS per un controllo più granulare. I CSS personalizzati possono essere aggiunti al file style.css o direttamente all’interno dei singoli blocchi utilizzando l’editor a blocchi.

Un esempio di file theme.json potrebbe includere le impostazioni per le palette di colori, la tipografia e gli stili dei blocchi, rendendo più semplice la gestione e la personalizzazione del design del tema.

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        {
          "name": "Primary",
          "slug": "primary",
          "color": "#0073aa"
        },
        {
          "name": "Secondary",
          "slug": "secondary",
          "color": "#005177"
        }
      ]
    },
    "typography": {
      "fontSizes": [
        {
          "name": "Small",
          "slug": "small",
          "size": "12px"
        },
        {
          "name": "Normal",
          "slug": "normal",
          "size": "16px"
        }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "#ffffff",
      "text": "#333333"
    },
    "typography": {
      "fontFamily": "Arial, sans-serif"
    }
  }
}

Personalizzare i temi

La personalizzazione dei temi WordPress permette di adattare l’aspetto e le funzionalità del vostro sito web per soddisfare esigenze e preferenze specifiche. Sia i temi classici che quelli a blocchi offrono vari metodi di personalizzazione, ma con approcci diversi.

Personalizzare i temi classici

I temi classici offrono diversi modi per personalizzare l’aspetto del vostro sito:

  1. Il Personalizzatore del tema: il Personalizzatore del tema di WordPress è un’interfaccia facile da usare che permette di apportare modifiche all’aspetto del vostro tema senza toccare alcun codice. Potete accedervi tramite Aspetto > Personalizza. Offre opzioni per modificare l’identità del sito, i colori, i menu, i widget e altro ancora. Le modifiche possono essere visualizzate in anteprima in tempo reale prima di essere salvate.
  2. CSS personalizzato: per modifiche di stile più specifiche, potete aggiungere CSS personalizzati direttamente nel Personalizzatore del tema nella sezione CSS aggiuntivi. Questo metodo è ideale per apportare piccole modifiche senza modificare i file del tema.
  3. Temi child: se avete bisogno di apportare modifiche estese, la creazione di un tema child è l’approccio consigliato. Un tema child eredita le funzionalità del tema genitore e permette di sovrascrivere o aggiungere nuovi stili e caratteristiche. Questo garantisce che le personalizzazioni vengano conservate quando il tema principale viene aggiornato.
  4. File di tema: gli utenti più esperti possono modificare direttamente i file di tema, come header.php, footer.php e functions.php, per apportare modifiche più significative. Tuttavia, questo metodo richiede una buona conoscenza di PHP e della gerarchia dei template di WordPress.
  5. Plugin: esistono numerosi plugin che ampliano le possibilità di personalizzazione del tema. Ad esempio, i plugin di page builder come Elementor permettono di creare layout complessi senza dover ricorrere al codice.

Personalizzare i temi a blocchi

Grazie all’enfasi posta sul FSE, i temi a blocchi offrono un approccio alla personalizzazione più visivo e facile da usare:

  1. Editor del sito: l’Editor del sito di WordPress (Aspetto > Editor) è lo strumento principale per personalizzare i temi a blocchi. Permette di modificare tutti gli aspetti del vostro sito, tra cui header, footer, template e singoli blocchi, utilizzando un’interfaccia visiva. Le modifiche vengono applicate istantaneamente, rendendo facile verificare come influiscano sul design del sito.
  2. Stili globali: i temi a blocchi utilizzano il file theme.json per definire gli stili globali. Potete personalizzare i colori, la tipografia, la spaziatura e molto altro ancora a livello globale, garantendo la coerenza del sito. L’Editor del sito permette anche di modificare visivamente queste impostazioni.
  3. Blocchi e pattern riutilizzabili: potete creare blocchi e pattern riutilizzabili per mantenere la coerenza e semplificare il processo di progettazione. I blocchi riutilizzabili possono essere salvati e inseriti in qualsiasi post o pagina, mentre i block pattern forniscono layout predefiniti che possono essere personalizzati per adattarsi alle vostre esigenze.
  4. Template personalizzati: con i temi a blocchi, potete creare template personalizzati per diversi tipi di contenuti direttamente nell’Editor del sito. Questo vi permette di personalizzare il layout e il design di specifiche pagine o tipi di post senza scrivere alcun codice.
  5. Plugin: come i temi classici, anche i temi a blocchi possono essere ampliati con i plugin. Molti plugin sono progettati per migliorare le funzionalità dell’editor a blocchi, offrendo blocchi aggiuntivi, template e opzioni di personalizzazione.

Riepilogo

La personalizzazione dei temi WordPress permette di rendere il vostro sito unico e funzionale. I temi classici si affidano al Personalizzatore di temi, ai CSS personalizzati, ai temi child e alla modifica diretta dei file per ottenere la massima flessibilità. I temi a blocchi utilizzano l’Editor del sito e theme.json per un approccio più visivo e intuitivo.

Entrambi i metodi offrono strumenti potenti per adattare il sito alle vostre esigenze, sia che preferiate creare codice che la personalizzazione visiva.

Dopo aver creato un tema adatto ai vostri gusti, sia esso classico o a blocchi, è importante ospitare il vostro sito su un hosting solido per evitare problemi come downtime, attacchi DDoS e altro. È qui che si distinguono i provider di hosting premium come Kinsta.

Kinsta offre un potente hosting WordPress gestito con un’architettura completamente containerizzata, alimentato esclusivamente da Google Cloud Platform sulla rete Premium Tier di Google.

Joel Olawanle Kinsta

Joel è uno Frontend developer che lavora in Kinsta come redattore tecnico. È un insegnante appassionato che ama l'open source e ha scritto oltre 200 articoli tecnici principalmente su JavaScript e i suoi framework.