WordPress 5.9 ha introdotto un nuovo modo di costruire siti web: il Full Site Editing. È stato un punto di svolta per gli utenti di WordPress perché ha cambiato completamente il modo in cui i temi di WordPress vengono sviluppati e funzionano.
L’introduzione dell’FSE ha portato a una distinzione tra i temi che supportano pienamente le nuove funzionalità di costruzione del sito, noti anche come Temi a blocchi, e i temi tradizionali basati su PHP, che oggi chiamiamo Temi classici.
Nel corso del tempo, molte funzioni create per i temi a blocchi sono state estese ai temi classici. Ciò ha dato vita a una terza categoria di temi, i Temi ibridi, che sono progettati con la logica e la struttura dei Temi classici, ma con il supporto di varie funzioni tipiche dei Temi a blocchi.
Questo articolo analizza i temi ibridi, le loro caratteristiche principali, il modo in cui gli sviluppatori possono migliorarli e quando sceglierli rispetto ai temi a blocchi.
Cominciamo!
Temi classici o Temi ibridi?
Prima dell’introduzione dei temi a blocchi con Twenty Twenty-Two e WordPress 5.9, non esistevano i temi classici. Il termine è nato per distinguerli dai temi a blocchi. I temi classici sono tutti i temi WordPress che non supportano le funzionalità dei blocchi.
Oggi non è facile trovare temi classici puri perché, a partire dalla versione 5.9, questi temi sono stati arricchiti con molte funzioni sviluppate per i temi a blocchi, rendendo le esperienze di modifica e progettazione delle due categorie di temi sempre più sfumate.
Detto questo, il modo di lavorare con i temi ibridi è ancora diverso da quello dei temi a blocchi.
Caratteristiche di base dei temi ibridi
Con i temi ibridi, il sito può sfruttare le capacità di editing dell’editor di blocchi di WordPress pur rimanendo compatibile con i plugin e le funzionalità tradizionali di WordPress, come i widget, i menu e i modelli di pagina.
Il Customizer di WordPress
I temi ibridi di solito supportano il Customizer di WordPress, un ambiente di configurazione visuale che permette di perfezionare l’aspetto del sito WordPress e di visualizzare l’anteprima delle modifiche in tempo reale.
Il tema predefinito Twenty Twenty-One è un buon esempio di tema ibrido che offre le impostazioni più comuni del Customizer, tra cui Identità del sito, Colori e modalità scura, Immagine di sfondo, Menu, Widget, Impostazioni della homepage e altro ancora.
I temi possono registrare controlli specifici del Customizer, quindi le funzionalità variano a seconda del tema. L’immagine che segue mostra il Customizer di Neve, un tema ibrido leggero di ThemeIsle.
I temi possono anche registrare funzionalità avanzate per dare agli utenti un controllo granulare su aspetti specifici del design del sito. Neve, ad esempio, offre un potente builder per la creazione di intestazioni e footer.
Widget a blocchi
I temi ibridi permettono di personalizzare le aree dei widget utilizzando i blocchi, grazie all’editor dei widget a blocchi. È stato introdotto per la prima volta con WordPress 5.8 e possiamo provarlo con qualsiasi tema classico che utilizzi i widget.
L’interfaccia dell’editor dei widget è simile a quella dell’editor dei post. L’immagine che segue mostra un blocco immagine nell’area widget del footer del tema Twenty Twenty-One.
I widget classici come Categorie, Archivi, Post recenti o Commenti recenti sono ancora supportati nei temi ibridi. L’Editor di widget integra i widget classici di WordPress consentendo agli utenti di crearne di propri attraverso l’interfaccia a blocchi.
Style book e block pattern
Con le recenti modifiche introdotte con WordPress 6.8, i temi ibridi che supportano gli stili dell’editor possono utilizzare il Libro degli stili, un’interfaccia grafica che consente agli utenti di visualizzare l’anteprima di qualsiasi blocco che può essere utilizzato nel sito senza doverlo necessariamente inserire nei contenuti.
È possibile accedere al Libro degli stili nei temi ibridi da Aspetto > Design > Stili.
L’immagine che segue mostra il Libro degli stili del tema ibrido Kadence.
Nella stessa interfaccia possiamo sfogliare e gestire i pattern.
Per i temi ibridi che li supportano, i pattern sono disponibili nell’Editor dei post, che è abilitato di default su tutte le installazioni di WordPress a partire dalla versione 5.0, a meno che non l’abbiamo disabilitato con il plugin Classic Editor.
Struttura del tema: una panoramica per gli sviluppatori
I temi classici e i temi a blocchi non sono diversi solo in termini di funzionalità per l’utente finale. Sono diversi anche dal punto di vista strutturale.
Temi classici
I temi classici si basano su alcuni file principali, il più importante dei quali è il file style.css. Questo file fornisce i metadati del tema e determina l’aspetto del sito sul front-end.
Oltre al foglio di stile del tema, i temi classici hanno di solito un file functions.php utilizzato per creare le funzionalità e il supporto del tema.
I temi classici si basano anche su template PHP che definiscono la struttura di una pagina e le sue aree principali: intestazione, corpo, barre laterali e footer. Quando un utente visita un post o una pagina, WordPress individua il template da utilizzare per rendere il contenuto sullo schermo secondo un rigido sistema di regole noto come gerarchia dei template. I template più comunemente utilizzati sono index.php, page.php, single.php e altri.
I temi classici possono utilizzare funzioni PHP specifiche (hook e filtri), che vengono eseguite in momenti specifici della vita di WordPress, consentendo agli sviluppatori di estendere le funzionalità di un tema utilizzando codice PHP nel file functions.php di un child theme.
Si può intuire che la personalizzazione di un tema classico è complessa per gli utenti che non hanno competenze di sviluppo.
Temi a blocchi
Anche i temi a blocchi hanno bisogno di uno style.css per fornire a WordPress i metadati del tema, ma si basano prevalentemente su un file theme.json, un file di configurazione che definisce gli stili e le impostazioni globali del tema. Questo file contiene un oggetto JSON le cui proprietà definiscono le impostazioni iniziali necessarie per creare il layout e definire l’aspetto delle pagine del sito.
I temi a blocchi utilizzano anche template e parti di template, ma questi sono strutturalmente diversi dai classici template PHP dei temi. Nei temi a blocchi, i template e le parti di template sono file HTML contenenti markup specifici e oggetti JSON. Ad esempio, analizziamo il template home.html del tema predefinito Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:pattern {"slug":"twentytwentyfive/hidden-blog-heading"} /-->
<!-- wp:pattern {"slug":"twentytwentyfive/template-query-loop"} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Questo template è composto da elementi strutturati sotto forma di tag HTML e commenti. I commenti possono riferirsi ad altri elementi tipici di un tema a blocchi, come le parti del template e i pattern, che sono composti da blocchi o altri elementi annidati.
Aggiungere le funzionalità dei blocchi ai temi ibridi
Come abbiamo detto in precedenza, con i temi classici è necessario aggiungere del codice personalizzato per modificare il layout o le funzionalità di un sito, spesso coinvolgendo template file o il functions.php. Al contrario, i temi a blocchi permettono a chi non sviluppa di avere un maggiore controllo sul layout e sull’aspetto del sito.
I temi ibridi offrono meno funzionalità dei blocchi rispetto ai temi a blocchi, ma possono comunque fornire un maggiore controllo sul layout e sullo stile grazie a pattern e agli stili globali.
Analizziamo alcune potenti funzionalità tipiche dei temi a blocchi che possiamo integrare in un tema classico e scopriamo come implementarle in modo efficace.
Stili globali
WordPress 5.8 ha introdotto gli Stili Globali, un’interfaccia grafica che permette agli utenti di controllare l’aspetto del proprio sito web da una posizione centralizzata e agli sviluppatori di controllare gli stili dei siti WordPress attraverso un file theme.json.
Per abilitare questa funzione in un tema ibrido, basta aggiungere un file theme.json nella cartella principale del tema. Vediamo alcune delle caratteristiche principali che possiamo aggiungere ad un tema ibrido con il theme.json.
Tipografia
Supponiamo di voler aggiungere ad un tema classico il supporto per tre famiglie di caratteri. In questo esempio utilizzeremo Twenty Twenty-One.
Per prima cosa, creiamo una cartella fonts sotto assets e carichiamo alcuni font a scelta. Aggiungeremo tre font: Manrope Fira Code e Beiruti. Possiamo ottenere questi font dal tema Twenty Twenty-Five.
Apriamo l’editor di testo e creiamo il seguente theme.json:
{
"$schema": "https://schemas.wp.org/trunk/theme.json",
"version": 3,
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
},
"typography": {
"fontFamilies": [
{
"name": "Manrope",
"slug": "manrope",
"fontFamily": "Manrope, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/manrope/Manrope-VariableFont_wght.woff2"
],
"fontWeight": "200 800",
"fontStyle": "normal",
"fontFamily": "Manrope"
}
]
},
{
"name": "Fira Code",
"slug": "fira-code",
"fontFamily": "\"Fira Code\", monospace",
"fontFace": [
{
"src": [
"file:./assets/fonts/fira-code/FiraCode-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "\"Fira Code\""
}
]
},
{
"name": "Beiruti",
"slug": "beiruti",
"fontFamily": "Beiruti, sans-serif",
"fontFace": [
{
"src": [
"file:./assets/fonts/beiruti/Beiruti-VariableFont_wght.woff2"
],
"fontWeight": "300 700",
"fontStyle": "normal",
"fontFamily": "Beiruti"
}
]
}
]
}
}
}La proprietà settings.typography.fontFamilies permette di registrare un numero qualsiasi di famiglie di font personalizzate. Per ogni font, dovremo dichiarare le seguenti proprietà:
name: un titolo leggibile per la famiglia di font.slug: uno slug obbligatorio per la famiglia di font. Verrà aggiunto a una proprietà CSS personalizzata:--wp--preset--font-family--{slug}.fontFamily: un valore obbligatorio che corrisponderà al valore CSS font-family.fontFace: un array opzionale di font che vengono mappati alla regola “at” di CSS@font-face. È necessario solo con i font personalizzati.
Salviamo il theme.json e accediamo alla bacheca di WordPress. Creiamo un nuovo post o una nuova pagina, aggiungiamo un paragrafo con un testo di esempio e apriamo la barra laterale dei blocchi. Clicchiamo sul pulsante Typography Options e selezioniamo Font. Dovremmo trovare le opzioni per le famiglie di font appena aggiunte al tema.
Le immagini che seguono mostrano l’aspetto della barra laterale del blocco Paragrafo prima e dopo l’aggiunta del theme.json.
Le proprietà degli stili globali variano a seconda del tema. Oltre a typography, le proprietà frequentemente supportate permettono di controllare la palette dei colori, il layout e gli stili personalizzati. Gli esempi che seguono sono stati testati su Twenty Twenty-One.
Palette dei colori, gradienti e filtri duotone
Possiamo aggiungere il supporto dei colori personalizzati utilizzando la proprietà settings.color a livello di tema o di singolo blocco. Ad esempio, il codice che segue aggiunge due colori alla palette predefinita:
settings: {
"color": {
"palette": [
{
"name": "Dark blue",
"slug": "dark-blue",
"color": "#1e73be"
},
{
"name": "Bright green",
"slug": "bright-green",
"color": "#81d742"
}
]
},
}Possiamo utilizzare la proprietà settings.color.palette per registrare tutti i colori che vogliamo.
Possiamo anche aggiungere il supporto dei gradienti e dei filtri duotone:
settings: {
"color": {
"gradients": [
{
"gradient": "linear-gradient(135deg, #0073e6, #8fceff)",
"name": "Clear Sky",
"slug": "clear-sky"
},
{
"gradient": "linear-gradient(to right top, #ff8c00, #ff0080)",
"name": "Vivid Sunset",
"slug": "vivid-sunset"
}
]
}
}
settings: {
"color": {
"duotone": [
{
"colors": [ "#0A2F51", "#F5D04E" ],
"name": "Deep Sea Gold",
"slug": "deep-sea-gold"
},
{
"colors": [ "#3A0CA3", "#FFB703" ],
"name": "Purple Amber",
"slug": "purple-amber"
},
{
"colors": [ "#1B4332", "#BAE6C4" ],
"name": "Forest Mist",
"slug": "forest-mist"
},
{
"colors": [ "#000000", "#FFFFFF" ],
"name": "Black and White",
"slug": "black-and-white"
}
]
}
}
Layout
Possiamo anche personalizzare le impostazioni predefinite del layout. La proprietà settings.layout permette di impostare la larghezza predefinita del contenuto e l’ampiezza dell’allineamento. Ecco un esempio:
"settings": {
"layout": {
"contentSize": "768px",
"wideSize": "1024px"
}
}Per una panoramica più approfondita sul theme.json, si legga il nostro tutorial completo sul theme.json e la documentazione ufficiale di WordPress.
Variazioni degli stili del blocco
Introdotte per la prima volta con WordPress 5.3, le variazioni degli stili dei blocchi consentono agli sviluppatori di creare stili alternativi per blocchi specifici.
In breve, gli stili dei blocchi sono classi CSS aggiunte all’elemento contenitore di un blocco nella forma .is-style-{name}.
Le variazioni di stile dei blocchi appaiono nel pannello Stili della barra laterale dei blocchi e permettono di selezionare uno stile per il blocco con un solo clic.
Possiamo registrare le variazioni di stile del blocco in diversi modi.
Innanzitutto, possiamo registrare gli stili dei blocchi utilizzando la funzione PHP register_block_style(). Ad esempio, possiamo registrare la seguente variazione di stile nel file delle funzioni del tema:
if ( function_exists( 'register_custom_block_style' ) ) {
register_block_style(
'core/image',
array(
'name' => 'custom',
'label' => __( 'Custom', 'text-domain' ),
'inline_style' => '.wp-block-image.is-style-custom img { border-radius: 12px; }',
)
);
}
add_action( 'init', 'register_custom_block_style' ); register_block_style() accetta due argomenti:
$block_name: il nome di un tipo di blocco o di un array di tipi di blocco$style_properties: un array contenente le proprietà dello stile. In questo esempio, abbiamo utilizzatoname,labeleinline_style.
Il codice qui sopra genera una variazione di stile del blocco con una singola proprietà CSS. Una volta aggiunto questo codice al file functions.php del tema o del child theme, viene visualizzato un pulsante nel pannello degli stili del blocco per consentire all’utente di impostare lo stile con un solo clic.
L’immagine che segue mostra la variazione di stile del blocco nel front-end. Il tema è sempre Twenty Twenty-One.
Possiamo aggiungere gli stili in linea nel codice PHP, come nell’esempio precedente, ma il codice può diventare rapidamente difficile da mantenere quando gli stili diventano più complessi ed elaborati. In questi casi, possiamo registrare la variazione di stile come abbiamo visto in precedenza, ma definire gli stili nel file theme.json.
Nell’esempio che segue, creiamo una variazione di stile blu scuro per il blocco Intestazione.
Per prima cosa, registriamo la variazione di stile nel file delle funzioni del tema:
add_action('init', 'register_block_style_labels');
function register_block_style_labels() {
$block_types = ['core/heading'];
if (function_exists('register_block_style')) {
foreach ($block_types as $block_type) {
register_block_style(
$block_type,
array(
'name' => 'dark-blue-bg',
'label' => __('Dark Blue', 'twentytwentyone')
)
);
}
}
}Quindi definiamo gli stili della variazione nel file theme.json:
"settings": {
"styles": {
"blocks": {
"core/heading": {
"variations": {
"dark-blue-bg": {
"color": {
"background": "#2860a6",
"text": "#ffffff"
},
"spacing": {
"padding": {
"top": "0.3em",
"right": "0.4em",
"bottom": "0.3em",
"left": "0.4em"
}
}
}
}
}
}
}
}Ora gli utenti del tema possono scegliere tra due variazioni di stile per il blocco Intestazione, come mostrato nella seguente immagine.
Variazioni di blocco
Le variazioni di blocco sono versioni alternative di qualsiasi blocco registrato. Mentre le variazioni di stile dei blocchi (o stili di blocco) sono versioni personalizzate di uno stile di blocco che gli utenti possono aggiungere ai contenuti con un solo clic, le variazioni di blocco sono versioni alternative delle impostazioni di un blocco. Queste consentono agli utenti di inserire rapidamente un blocco con impostazioni preconfigurate senza dover impostare le stesse configurazioni per ogni istanza di blocco.
La Block Variations API consente ai temi ibridi di registrare variazioni di blocco tramite JavaScript. Nei casi più semplici, la creazione di uno script e la sua registrazione possono essere sufficienti, ma se si lavora molto con JavaScript e con i blocchi di Gutenberg, sarebbe meglio utilizzare strumenti di build. (Lettura consigliata.)
Supponiamo di voler creare una variazione di blocco con una serie di opzioni preconfigurate in modo che la variazione possa essere inserita rapidamente nei post o nelle pagine del sito con una minima configurazione.
Il primo passo è creare un file JavaScript vuoto e caricarlo nell’editor. Dovremo inserirlo nel file functions.php del tema utilizzando wp_enqueue_script() e l’hook enqueue_block_editor_assets.
add_action( 'enqueue_block_editor_assets', function () {
wp_enqueue_script(
'my-block-variations',
get_theme_file_uri( 'assets/js/block-variations.js' ) . '?cache_bust=' . time(),
array(
'wp-blocks',
'wp-dom-ready',
'wp-i18n',
'wp-edit-post'
),
wp_get_theme()->get( 'Version' ),
true
);
} );Nel codice qui sopra, abbiamo utilizzato ?cache_bust=' . time() per aggiungere un timestamp univoco all’URL di block-variations.js (ad esempio, block-variations.js?cache_bust=1698765432). Questo è utile durante lo sviluppo, in quanto garantisce che il browser, il server o il CDN carichino sempre l’ultima versione dello script, evitando che una versione obsoleta presente nella cache blocchi la visualizzazione delle modifiche.
QUindi dovremo registrare la variazione di blocco nello script utilizzando la funzione registerBlockVariation fornita dalla Block Variations API.
Ecco la firma della funzione:
const registerBlockVariation = ( blockName, variation )blockName: il nome del blocco (ad esempio,core/query.)variation: un oggetto che descrive una variazione del tipo di blocco.
L’oggetto variation può includere uno dei seguenti parametri:
name: (stringa) un identificatore univoco della variazione.title: (stringa) un titolo della variazione leggibile dall’uomo.description: (stringa) una descrizione dettagliata.category: (stringa) una categoria utilizzata nelle interfacce di ricerca.keywords: (Array) un array di termini che aiutano gli utenti a scoprire la variazione.icon: (WPIcon) un’icona da visualizzare nell’inseritore di blocchi.isDefault: (booleano) se la variante corrente è quella predefinita. Il valore predefinito è false.isActive: (Function/Array) una funzione o un array di attributi del blocco utilizzati per stabilire se la variante è attiva quando il blocco viene selezionato. SenzaisActive, WordPress non saprebbe come distinguere la variante da un blocco standard o da altre varianti, causando un comportamento incoerente nell’editor.attributes: (Object) valori degli attributi che sovrascrivono i valori predefiniti del blocco.innerBlocks: (Array[]) configurazione iniziale del blocco annidato.example: (Object) dati strutturati per l’anteprima del blocco. Imposta a undefined per disabilitare l’anteprima.scope: (WPBlockVariationScope[]) l’elenco degli ambiti in cui la variazione è applicabile. Se non viene fornito, assume tutti gli ambiti disponibili. Le opzioni disponibili sonoblock,inserteretransform. L’impostazione predefinita èblockeinserter.
Ora possiamo aggiungere il codice JavaScript al file block-variations.js:
wp.blocks.registerBlockVariation( 'core/heading', {
name: 'custom-centered-text',
title: 'Custom Centered Text',
description: 'This is a block variation with custom attributes.',
attributes: {
level: 2,
textAlign: 'center',
placeholder: 'Add your text here',
style: {
color: {
text: '#1e73be',
background: '#81d742'
}
}
},
isActive: ( blockAttributes ) => {
return (
blockAttributes.level === 2 &&
blockAttributes.textAlign === 'center' &&
blockAttributes.style?.color?.text === '#1e73be' &&
blockAttributes.style?.color?.background === '#81d742'
);
},
icon: 'airplane',
scope: [ 'inserter' ]
} );Questo codice aggiunge un nuovo tipo di blocco con l’icona di un aeroplano al block inserter. Quando si fa clic sull’aeroplano, una nuova variazione del blocco Intestazione viene aggiunta alla pagina con le nostre impostazioni personalizzate. Abbiamo impostato il livello dell’intestazione (H2), centrato il testo, impostato un segnaposto e definito i colori del testo e dello sfondo dell’intestazione.
Nota: affinché questo codice funzioni come previsto, bisogna assicurarsi che il tema ibrido supporti le funzioni dell’editor come 'editor-color-palette', 'editor-styles' e altre. Per un elenco completo dei supporti, si veda la documentazione della Block Variations API.
Block pattern
I block pattern sono gruppi precostituiti di blocchi che possiamo aggiungere ai contenuti e personalizzare utilizzando l’interfaccia dell’editor di blocchi.
I temi a blocchi di solito forniscono un numero variabile di block pattern che possiamo aggiungere ai contenuti direttamente dal block inserter. I temi ibridi possono aggiungere il supporto dei block pattern in modo che gli utenti dei temi classici possano beneficiarne.
Possiamo creare una cartella patterns nella root del tema e inserire i block pattern, oppure possiamo registrarli nei file functions.php o altro file .php del tema.
Per mantenere l’ordine, possiamo creare un file inc/block-patterns.php e inserirlo nella cartella function.php del tema con il seguente codice:
require get_template_directory() . '/inc/block-patterns.php';Una volta fatto, possiamo creare il block pattern nell’editor, copiare il codice e registrare il block pattern e la categoria di pattern in inc/block-patterns.php utilizzando le funzioni register_block_pattern_category e register_block_pattern():
if ( function_exists( 'register_block_pattern_category' ) ) {
function my_hybrid_theme_register_block_pattern_category() {
register_block_pattern_category(
'myhybridtheme',
array( 'label' => esc_html__( 'My Hybrid Theme', 'myhybridtheme' ) )
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern_category' );
}
if ( function_exists( 'register_block_pattern' ) ) {
function my_hybrid_theme_register_block_pattern() {
// My pattern
register_block_pattern(
'myhybridtheme/huge-heading',
array(
'title' => esc_html__( 'Huge heading', 'myhybridtheme' ),
'categories' => array( 'myhybridtheme' ),
'viewportWidth' => 1440,
'blockTypes' => array( 'core/heading' ),
'content' => '<!-- wp:heading {"textAlign":"center","align":"wide","fontSize":"gigantic","style":{"typography":{"lineHeight":"1.2"}}} --><h2 class="alignwide has-text-align-center has-gigantic-font-size" style="line-height:1.2">' . esc_html__( 'A simple Heading in a pattern', 'myhybridtheme' ) . '</h2><!-- /wp:heading -->',
)
);
}
add_action( 'init', 'my_hybrid_theme_register_block_pattern' );
}Possiamo vedere l’anteprima del block pattern nella bacheca di WordPress in Aspetto > Design > Modelli > Il mio tema ibrido e utilizzarlo nei contenuti.
Possiamo anche duplicare ed esportare il block pattern e importarlo in altri siti WordPress.
Parti di template
Sebbene i temi ibridi utilizzino i classici template e parti di template PHP, possiamo aggiungere il supporto delle parti di template a blocchi nel file functions.php del tema:
function my_hybrid_theme_setup() {
add_theme_support( 'block-template-parts' );
}
add_action( 'after_setup_theme', 'my_hybrid_theme_setup' );Una volta aggiunto il supporto delle parti di template a blocchi, possiamo includerle in qualsiasi template file del tema ibrido utilizzando la funzione block_template_part.
Vediamo un esempio pratico. Iniziamo creando una cartella /parts nella root del tema e caricandovi un file footer.html. Per questo esempio, abbiamo copiato il footer del tema Twenty Twenty-Five:
<!-- wp:group {"align":"full","className":"is-style-section-5","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull is-style-section-5" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:group {"style":{"spacing":{"blockGap":"var:preset|spacing|10"}},"layout":{"type":"flex","orientation":"vertical","justifyContent":"stretch"}} -->
<div class="wp-block-group">
<!-- wp:site-title {"level":2,"textAlign":"center","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"}},"fontSize":"x-large"} /-->
<!-- wp:navigation {"overlayMenu":"never","style":{"typography":{"textTransform":"uppercase","fontStyle":"normal","fontWeight":"400"},"spacing":{"blockGap":"var:preset|spacing|20"}},"fontSize":"x-large","layout":{"type":"flex","justifyContent":"center"},"ariaLabel":"Social media"} -->
<!-- wp:navigation-link {"label":"Facebook","url":"#"} /-->
<!-- wp:navigation-link {"label":"Instagram","url":"#"} /-->
<!-- wp:navigation-link {"label":"X","url":"#"} /-->
<!-- /wp:navigation -->
</div>
<!-- /wp:group -->
<!-- wp:spacer {"height":"var:preset|spacing|30"} -->
<div style="height:var(--wp--preset--spacing--30)" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->
<!-- wp:paragraph {"align":"center","fontSize":"small"} -->
<p class="has-text-align-center has-small-font-size">
Designed with <a href="https://wordpress.org" rel="nofollow">WordPress</a>
</p>
<!-- /wp:paragraph -->
</div>
<!-- /wp:group -->Ora possiamo includere questa parte del template in un template classico con la funzione block_template_part:
<?php block_template_part( 'footer' ); ?> Possiamo, ad esempio, includerlo nel file footer.php di Twenty Twenty-One. L’immagine che segue mostra il risultato sullo schermo.
Possiamo anche includere parti di template in un template a blocchi utilizzando il seguente codice:
<!-- wp:template-part {"slug":"footer"} /-->
Possiamo, ad esempio, copiare il codice del template page.html da Twenty Twenty-Five:
<!-- wp:template-part {"slug":"header"} /-->
<!-- wp:group {"tagName":"main","style":{"spacing":{"margin":{"top":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<main class="wp-block-group" style="margin-top:var(--wp--preset--spacing--60)">
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"var:preset|spacing|60","bottom":"var:preset|spacing|60"}}},"layout":{"type":"constrained"}} -->
<div class="wp-block-group alignfull" style="padding-top:var(--wp--preset--spacing--60);padding-bottom:var(--wp--preset--spacing--60)">
<!-- wp:post-featured-image {"style":{"spacing":{"margin":{"bottom":"var:preset|spacing|60"}}}} /-->
<!-- wp:post-title {"level":1} /-->
<!-- wp:post-content {"align":"full","layout":{"type":"constrained"}} /-->
</div>
<!-- /wp:group -->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer"} /-->Possiamo salvare questo template nella cartella /templates e chiamarlo page.html. WordPress lo caricherà automaticamente secondo la gerarchia dei template. Questo template includerà automaticamente le parti dei template header.html e footer.html dalla cartella /parts del tema ibrido.
Quando scegliere i temi ibridi rispetto ai temi a blocchi
Un tema ibrido può essere la soluzione migliore nei seguenti casi:
- Quando vogliamo utilizzare alcune caratteristiche moderne dei temi a blocchi senza ristrutturare completamente un sito esistente.
I temi ibridi permettono di sfruttare le funzionalità dei blocchi come l’editor di blocchi, gli stili globali e i block pattern. I temi ibridi supportano anche le API dell’editor di blocchi come la Block Bindings API, l’Interactivity API e l’HTML API. Questo significa che possiamo creare siti moderni senza dover fare i conti con una complessa migrazione. - Quando vogliamo mantenere la compatibilità con i plugin o i widget classici ma non vogliamo rinunciare ad alcune potenti funzioni dei temi a blocchi.
Le vecchie versioni di alcuni plugin possono avere problemi di compatibilità con i temi a blocchi, come ad esempio le vecchie versioni di Contact Form 7, NextGEN Gallery, Custom Post Type UI e altri plugin. Sebbene sia consigliabile aggiornare i plugin alle versioni più recenti per evitare vulnerabilità, alcuni siti WordPress potrebbero avere installate versioni precedenti di un plugin. Se non siamo ancora pronti ad aggiornare tutti i plugin, potremmo prendere in considerazione un tema ibrido. - Quando cerchiamo di trovare il miglior compromesso tra design e prestazioni.
Alcuni noti temi ibridi sono ottimizzati per essere veloci e possono fornire prestazioni significativamente migliori rispetto ai temi a blocchi. Tuttavia, supportano l’approccio no-code/low-code dei temi a blocchi, offrendo un’esperienza di design migliore rispetto ai temi classici. I temi ibridi ottimizzati per le prestazioni, come Neve o Kadence, permettono di creare siti web dall’aspetto moderno senza compromettere le prestazioni. - Quando vogliamo passare senza problemi al FSE.
A volte il passaggio dalla vecchia alla nuova logica di design può richiedere tempo, soprattutto quando si lavora in team su siti di grandi dimensioni e la curva di apprendimento è un problema. Un tema ibrido permette al team di sperimentare le funzionalità dei blocchi mantenendo gli strumenti di design più familiari, come il Customizer e i classici template PHP.
Ma ci sono anche situazioni in cui i temi ibridi non sono la soluzione migliore. Ad esempio:
- Quando gli strumenti di progettazione del sito hanno la precedenza sulle prestazioni generali.
Quando vogliamo utilizzare alcune funzioni specifiche del Full Site Editing, come l’Editor del sito, la modifica completa dei template tramite blocchi e l’interfaccia degli Stili globali, un tema ibrido non è una soluzione praticabile perché queste funzionalità non sono supportate o lo sono solo parzialmente nei temi ibridi. - Con i siti WordPress headless basati sulla REST API di WordPress.
In questo scenario, i temi a blocchi sono da preferire perché i dati dei blocchi sono facilmente esposti tramite l’API REST (vedi, ad esempio, l’endpoint/wp/v2/blocks) o WPGraphQL, laddove i temi ibridi potrebbero aggiungere complessità. - Quando si preferisce un approccio “no code” alla costruzione di un sito.
I temi ibridi non supportano la creazione o la modifica di template tramite l’editor del sito. Sebbene sia possibile aggiungere il supporto delle parti dei template, al momento questo supporto è limitato e la gestione dei template è basata principalmente su PHP.
In conclusione, non esiste una regola ferrea per scegliere tra i temi ibridi e quelli a blocchi. Dipende da molti fattori, come le competenze del team, il tipo di sito che stiamo sviluppando, le prestazioni richieste, la retrocompatibilità e molto altro.
Riepilogo
Il Full Site Editing e i temi a blocchi hanno cambiato radicalmente il modo di costruire i siti web WordPress. La filosofia dei blocchi offre agli utenti maggiori possibilità di creare layout complessi e di mettere a punto ogni aspetto di un sito web.
Ma se non siamo ancora pronti a fare il salto perché il sito potrebbe non essere completamente compatibile con i temi a blocchi o perché richiede specifiche caratteristiche di un tema classico, i temi ibridi sono una soluzione che permette di avere il meglio di entrambi i mondi, consentendoci di utilizzare alcune potenti caratteristiche dei temi a blocchi pur mantenendo la compatibilità con le caratteristiche dei plugin e dei temi classici.
Per non parlare delle prestazioni. I temi a blocchi possono richiedere molte risorse a causa del rendering dei blocchi e dell’uso di JavaScript. I temi ibridi ottimizzati per le prestazioni possono rendere il sito più leggero e performante riducendo il carico di JavaScript necessario.
Carlo è cultore appassionato di webdesign e front-end development. Gioca con WordPress da oltre 20 anni, anche in collaborazione con università ed enti educativi italiani ed europei. Su WordPress ha scritto centinaia di articoli e guide, pubblicati sia in siti web italiani e internazionali, che su riviste a stampa. Lo trovate su LinkedIn.
