Tema Blocksy per WordPress: configurazione, Companion, header, blog

Questo articolo è un'edizione localizzata dell'originale giapponese. Leggi l'originale in giapponese

Blocksy è un tema WordPress gratuito e ricco di funzioni. Gran parte delle impostazioni si fa da «Aspetto» (Appearance) → «Personalizza» (Customize, il Customizer) con l'anteprima dal vivo, e header e footer si compongono con il trascinamento. In questo articolo, seguendo l'ordine delle impostazioni, vediamo come installare il tema e il plugin di supporto «Blocksy Companion», i colori e i font da decidere subito, come costruire l'header, la visualizzazione dell'elenco del blog e delle pagine degli articoli e la preparazione di un tema figlio.

Com’è fatto Blocksy

Blocksy è composto da queste tre parti.

• Blocksy (il tema vero e proprio): si ottiene gratuitamente da WordPress.org. Ha le impostazioni di design nel Customizer e i builder di header e footer
• Blocksy Companion (plugin gratuito): si occupa di importare i siti iniziali (dati demo) e di aggiungere funzioni estese
• Blocksy Pro (a pagamento): aggiunge elementi extra per l'header, visualizzazioni condizionali, funzioni di layout più dettagliate e altro

La strada più logica è iniziare con la combinazione di tema e Companion e valutare Pro solo quando ti accorgi che le funzioni gratuite non bastano (la suddivisione delle funzioni e i prezzi possono cambiare, quindi verifica sulle informazioni del sito ufficiale a ottobre 2026).

Inoltre Blocksy è più vicino a un tema classico e supporta anche l'editor a blocchi. Il punto in cui si lavora è diverso da quello dei temi a blocchi, che si compongono per intero con l'editor del sito («Aspetto» → «Editor», Site Editor). Per non confonderti ricordati questa regola: «il design generale si fa nel Customizer, il contenuto di articoli e pagine nell'editor a blocchi».

Installazione e Companion

1. Da «Aspetto» → «Temi» → «Aggiungi nuovo tema» (Appearance → Themes → Add New Theme) cerca «Blocksy», installalo e attivalo
2. Dalla guida che compare dopo l'attivazione, oppure dalla bacheca di Blocksy aggiunta all'amministrazione, installa e attiva Blocksy Companion

Con WP-CLI puoi installarli così.

wp theme install blocksy --activate
wp plugin install blocksy-companion --activate

Se cambi il tema di un sito esistente, prima fai un backup dell'intero sito. Cambiando tema, shortcode e widget specifici del tema precedente, la posizione di visualizzazione dei menu e simili possono non essere ereditati.

Usare o no un sito iniziale

Dopo aver installato Companion, dalla bacheca di Blocksy puoi importare un «sito iniziale». Pagine già progettate, impostazioni del Customizer e plugin necessari vengono installati in un colpo solo, quindi in un nuovo sito ti fai subito un'idea del risultato finale.

Tuttavia è meglio evitare di importarlo in un sito che ha già articoli. Vengono aggiunti pagine, immagini e menu demo e vengono sovrascritte anche le impostazioni del Customizer, quindi non capisci più quali fossero le impostazioni originali. Se vuoi usarlo, ti consiglio di farlo all'inizio di un nuovo sito, oppure di provarlo in un ambiente di staging e poi replicare solo le impostazioni che ti servono.

Le impostazioni generali da decidere subito

Aprendo «Aspetto» → «Personalizza» compaiono le voci di impostazione di Blocksy. I nomi delle voci sono spesso tradotti, ma a seconda della versione la dicitura può cambiare. Le prime due cose da toccare sono queste, che hanno effetto su tutto il sito.

Colori (tavolozza)

Nelle impostazioni dei colori, dentro le impostazioni generali, stabilisci la tavolozza dei colori di base del sito. In Blocksy il colore del testo, dei link, dei pulsanti e così via fanno riferimento ai colori di questa tavolozza, quindi cambiandola si cambia in un colpo solo la combinazione di colori dell'intero sito.

Se indichi i colori direttamente nei singoli punti, quando poi vorrai cambiare la combinazione dovrai correggerli uno a uno. Il modo più facile da gestire è decidere i colori nella tavolozza e indicare un colore diverso solo nei punti in cui è davvero necessario.

Font (tipografia)

Nelle impostazioni della tipografia decidi font, dimensione dei caratteri e interlinea di testo e titoli. In un sito in giapponese bisogna fare attenzione al fatto che, anche scegliendo un font latino, non viene applicato ai caratteri giapponesi. Le parti in giapponese vengono mostrate con i font del dispositivo del visitatore, quindi per il testo lascia il font predefinito, come «Font di sistema», oppure indica un font che supporti il giapponese.

Caricando font giapponesi come web font i file sono grandi e possono incidere sulla velocità di visualizzazione. Se li usi, limita le varianti di spessore e verifica l'effetto sulla velocità con strumenti come PageSpeed Insights.

Costruire l’header

Aprendo la voce dell'header nel Customizer, in basso nella schermata compare l'header builder. L'header è diviso in righe superiore, centrale e inferiore e gli elementi come logo (titolo del sito), menu, ricerca e pulsanti si trascinano a sinistra, al centro o a destra di ciascuna riga.

Il punto in cui ci si inciampa più facilmente è che gli header per computer e per smartphone sono impostati separatamente. Se nel builder passi alla visualizzazione per smartphone, compare una disposizione diversa. Su smartphone la configurazione di base prevede il menu dentro un «off-canvas» che si apre dall'icona hamburger (trigger). Se imposti solo l'header per computer e pubblichi, può capitare per esempio che su smartphone il menu non compaia, quindi controlla entrambe le visualizzazioni.

Cliccando su un elemento, a sinistra compaiono le impostazioni di quell'elemento (dimensione del testo, colore, margini e così via). Le voci da mostrare nel menu si creano da «Aspetto» → «Menu» (Appearance → Menus) e si assegnano all'elemento menu dell'header.

Il footer si compone con un footer builder basato sulla stessa idea. Se vuoi cambiare la disposizione delle aree widget o l'indicazione del copyright, modificali dalla voce del footer.

Elenco del blog e pagine degli articoli

Il Customizer ha voci di impostazione per ogni tipo di pagina, come l'elenco degli articoli (blog), il singolo articolo e le pagine.

• Elenco degli articoli: la disposizione a schede o a elenco, il numero di colonne per riga, la proporzione dell'immagine in evidenza, la lunghezza del riassunto e le informazioni dell'articolo da mostrare (data, categorie e così via)
• Singolo articolo: la larghezza dell'area dei contenuti, presenza e posizione della barra laterale, il modo di mostrare il titolo, articoli correlati e informazioni sull'autore
• Pagine: come per il singolo articolo, si impostano la larghezza e la presenza della barra laterale

Sulla leggibilità delle pagine degli articoli incide molto la larghezza del testo. Nei testi lunghi in giapponese, se una riga è troppo lunga si legge male, quindi senza barra laterale imposta una larghezza del testo piuttosto stretta e controlla che i caratteri non diventino troppo piccoli nemmeno su smartphone.

Se vuoi cambiare il layout solo di un articolo specifico, dalle impostazioni di Blocksy che compaiono nella barra laterale della schermata di modifica dell'articolo puoi per esempio togliere la barra laterale solo per quell'articolo.

Preparare un tema figlio

Se modifichi direttamente i file del tema, le modifiche spariscono con l'aggiornamento del tema. Per aggiungere solo un po' di CSS basta il «CSS aggiuntivo» del Customizer. Quando servono personalizzazioni PHP o la sovrascrittura dei template, crea un tema figlio.

Sul sito ufficiale di Blocksy viene distribuito un modello di tema figlio. Se lo crei da solo, metti in wp-content/themes/blocksy-child/ il seguente style.css,

/*
Theme Name: Blocksy Child
Template: blocksy
*/

e nel functions.php della stessa cartella carica lo stile del tema figlio.

<?php
add_action( 'wp_enqueue_scripts', function () {
	wp_enqueue_style(
		'blocksy-child-style',
		get_stylesheet_uri(),
		array(),
		wp_get_theme()->get( 'Version' )
	);
}, 20 );

Passando al tema figlio, le impostazioni del Customizer vengono salvate separatamente da quelle del tema padre, quindi le impostazioni fatte nel tema padre possono sembrare sparite. Se hai installato Companion, le impostazioni del Customizer si possono trasferire con la funzione di esportazione e importazione, quindi esportarle prima di passare al tema figlio evita di dover rifare il lavoro.

Aggiornamenti e note operative

Blocksy e Companion vengono aggiornati spesso. Prima di aggiornare fai un backup e dopo l'aggiornamento controlla a grandi linee header, pagine degli articoli e visualizzazione su smartphone. Se la visualizzazione si rovina, svuota la cache dei plugin di cache e della CDN e controlla di nuovo. Se usi plugin di velocizzazione che uniscono e comprimono i CSS, possono restare vecchi CSS e il sito sembrare rotto.

Riepilogo

• Inizia a usare Blocksy con la combinazione di tema e Blocksy Companion e valuta Pro solo dopo aver capito quali funzioni mancano
• Usa il sito iniziale in un nuovo sito o in un ambiente di staging e, in un sito esistente, fai attenzione alla sovrascrittura delle impostazioni
• Decidi l'insieme con la tavolozza per i colori e la tipografia per i caratteri. Ricorda che i font latini non agiscono sul giapponese
• L'header builder è separato per computer e smartphone. Controlla entrambe le visualizzazioni e, se tocchi PHP, usa un tema figlio

• Come creare un footer personalizzato con Blocksy
• Come cambiare tema di WordPress in sicurezza

Domande su WordPress? Chi pubblica questo sito ha sede in Giappone e risponde in giapponese. Contatti (in giapponese)