Temi a blocchi WordPress: personalizzare header e footer

temi a blocchi WordPress
Vota questo post

Con i temi a blocchi WordPress puoi modificare header e footer dall’Editor del sito, senza intervenire necessariamente sui file del tema. Queste aree sono parti di template condivise: una modifica può comparire in tutte le pagine che le utilizzano.

Per questo consiglio di partire dalla struttura, prima di cambiare colori o spaziature. Il primo passo è riconoscere il tema attivo e capire quali elementi stai modificando.

Come riconoscere un tema a blocchi WordPress

L’Editor del sito distingue il tema dall’editor dei contenuti

Gutenberg, l’editor di blocchi, gestisce articoli e pagine anche nei temi classici. Un page builder è invece uno strumento distinto.

Con un tema a blocchi, normalmente trovi Aspetto > Editor e puoi modificare template, navigazione e stili del sito. L’editing dell’intero sito è arrivato con WordPress 5.9, con le prime funzioni basate su Gutenberg.

Se la voce manca, considera anche i permessi dell’account: la sua assenza non identifica sempre il tipo di tema.

Template, parti e contenuti hanno ruoli diversi

Il template stabilisce la struttura di una pagina. Le parti di template gestiscono aree condivise, come intestazione e footer. Il contenuto della pagina contiene invece testi e immagini specifici.

Per esempio, modificare il logo nell’header condiviso può aggiornare molte pagine. Cambiare una fotografia nel contenuto di una pagina riguarda soltanto quella pagina.

Prima di un restyling, chiarisco questa distinzione per evitare interventi involontari sull’intero sito.

Quale tema scegliere per un sito aziendale

Per un sito aziendale o un blog WordPress, valuto struttura dei contenuti, leggibilità, aggiornamenti e gestione futura. La scelta del tema WordPress va fatta in base a questi criteri. Il numero di demo, da solo, dice poco.

Questi temi sono punti di partenza per esigenze differenti.

TemaCaratteristica utile
Twenty Twenty-FiveTema predefinito di WordPress 6.7, con oltre 70 pattern.
GroundWPTema a blocchi gratuito con un’impostazione essenziale.
WonderThemeTema a blocchi sviluppato da YITH, orientato anche a WooCommerce.

GroundWP è un tema gratuito; per scegliere tra i temi WordPress gratuiti, valuta i contenuti effettivi, non la somiglianza con una demo.

Astra, OceanWP, Hestia, Zakra, Blocksy, Neve, Kadence e Sydney compaiono spesso nelle raccolte per blog. Tuttavia, non vanno classificati automaticamente come temi a blocchi: supportare Gutenberg è un’altra cosa. Anche le oltre 65 demo di Zakra non identificano la sua architettura.

Per siti web destinati alle PMI preferisco confrontare anche navigazione mobile, dipendenze e compatibilità con i plugin necessari.

Fogli di wireframe su un tavolo di legno con campioni di colore e una matita.

Come personalizzare l’header dall’Editor del sito

Prima di iniziare, prepara un backup completo di file e database. Per cambiamenti strutturali consiglio una copia di staging, separata dal sito pubblico.

  1. Apri Aspetto > Editor e raggiungi i pattern o le parti di template. Le etichette possono variare tra versioni.
  2. Individua l’intestazione utilizzata dal template interessato e aprila in modifica.
  3. Usa la Vista elenco per riconoscere contenitori, logo, titolo del sito e navigazione.
  4. Seleziona il blocco da modificare e intervieni sulle sue impostazioni.
  5. Salva e leggi il riepilogo: WordPress indica quali elementi stai aggiornando.

Per il marchio utilizza il blocco Logo del sito. Per il menu usa Navigazione, con collegamenti chiari e una gerarchia comprensibile. Evita di ricostruire tutto con immagini contenenti testo.

Se modifichi una navigazione riutilizzata altrove, anche quelle occorrenze possono cambiare. Inoltre, una stessa intestazione può comparire in homepage, articoli e pagine servizi.

Prima di salvare, considera dove viene utilizzata quella parte di template: il nome della pagina aperta non delimita necessariamente l’effetto della modifica.

Monitor con anteprima di un sito web, campioni di colore e una pianta su una scrivania di legno.

Il procedimento è analogo: apri la parte di template del footer, seleziona i blocchi e modifica contenuti e impaginazione.

Io partirei dalle informazioni necessarie: contatti, collegamenti ai servizi, informazioni aziendali e pagine legali pertinenti. Le icone social hanno senso soltanto se portano a profili effettivamente utilizzati.

Per un’impaginazione semplice puoi usare Gruppo, Riga o Colonne. Mantieni però un ordine comprensibile anche quando gli elementi si dispongono verticalmente sullo smartphone.

Non affidare alla sola anteprima la verifica dei collegamenti. Apri il sito pubblico e prova telefono, email, pagine informative e pulsanti.

Se stai creando una landing page, puoi prevedere un template con intestazione o footer differenti. Occorre però assegnarlo alla pagina corretta: cambiare il footer condiviso per adattarlo a una campagna coinvolgerebbe anche altre pagine.

Per una progettazione completa, Scopri la realizzazione di siti WordPress.

Blocchi e stili per mantenere un design coerente

Scegliere i blocchi secondo la funzione

Il blocco colonne organizza testo e altri blocchi in strutture da due a sei colonne. Verifica come si impilano su mobile.

Introdotto con WordPress 5.4 il 31 marzo 2020, il blocco pulsanti raggruppa più blocchi Pulsante. Il singolo Pulsante resta distinto e si trova al suo interno.

Nell’interfaccia italiana, il blocco corrispondente al termine blocco copertura si chiama Copertina. Permette di sovrapporre contenuti a uno sfondo, mantenendo un contrasto adeguato. Il blocco galleria consente di scegliere il numero di colonne e ritagliare le immagini in modo uniforme.

Nell’header preferisco strutture semplici: fotografie grandi e contenitori annidati possono complicare leggibilità e manutenzione.

Impostare prima gli stili generali

Colori, tipografia e spaziature dovrebbero seguire regole comuni. Il pannello Stili dell’Editor del sito permette di intervenire sull’aspetto generale e sui singoli tipi di blocco.

Il file theme.json definisce impostazioni e stili del tema. Le personalizzazioni salvate nell’interfaccia possono prevalere sui valori dei file.

Perciò, se una modifica al codice sembra inefficace, considero anche gli stili già salvati nel database. Aggiungere altro CSS senza individuare la causa rende più difficile la gestione successiva.

Pattern sincronizzati e non sincronizzati: cosa cambia

Riutilizzare una composizione senza confondere gli elementi

I block pattern, introdotti con WordPress 5.5, sono composizioni precostituite di blocchi. Puoi personalizzarli con gli stessi strumenti usati per i blocchi Gutenberg.

I pattern sincronizzati propagano le modifiche a tutte le loro occorrenze. Nei pattern non sincronizzati, invece, le modifiche a un’istanza non si propagano alle altre.

Una parte di template, come il footer, definisce un’area strutturale del sito. Un pattern permette di riutilizzare una composizione, per esempio una sezione contatti.

I pattern forniti dal tema possono convivere con quelli della raccolta pubblica. Dopo averne inserito uno, verifica che colori, caratteri e larghezze siano coerenti con il progetto.

Creare un pattern e usare le sovrascritture

Da WordPress 6.3 puoi selezionare i blocchi, aprire il menu con i tre puntini e scegliere Crea pattern. Assegna un nome e scegli se sincronizzarlo.

I pattern personalizzati vengono memorizzati come tipo di contenuto wp_block; il metadato wp_pattern_sync_status gestisce la sincronizzazione.

WordPress 6.6 ha introdotto la sovrascrittura dei pattern, detta anche block pattern override, tramite la Block Bindings API. Permette di aggiornare contenuti selezionati mantenendo sincronizzata la struttura.

Al debutto, la funzione supportava Titolo, cioè il blocco Heading, Paragrafo, Immagine e Pulsante. La compatibilità non è garantita per tutti i blocchi o le proprietà.

Registrare pattern e gestire le personalizzazioni nei file

Funzioni e proprietà per gli sviluppatori

Per registrare composizioni tramite codice si usano register_block_pattern e register_block_pattern_category. La registrazione va eseguita nel momento appropriato, normalmente sull’hook init.

Per esempio, register_block_pattern_category( 'azienda', array( 'label' => 'Azienda' ) ); registra una categoria denominata Azienda.

Per register_block_pattern, title e content sono obbligatori: il secondo contiene il markup dei blocchi. Le proprietà facoltative comprendono description, categories, keywords, viewportWidth, blockTypes, postTypes, templateTypes, inserter e source. templateTypes è disponibile da WordPress 6.2.

Da WordPress 6.0 puoi registrare automaticamente pattern anche attraverso file PHP con intestazione appropriata nella cartella patterns del tema. Un plugin dedicato è preferibile quando la composizione deve restare disponibile cambiando tema.

Modificare soltanto i file necessari

Nei temi a blocchi i template sono normalmente in templates, mentre header e footer si trovano in parts, per esempio parts/header.html.

Per interventi nei file consiglio un tema child WordPress, duplicando soltanto gli elementi necessari. Ogni copia aggiunge infatti un elemento da mantenere.

Un theme.json nel child permette personalizzazioni selettive delle strutture elaborate da WordPress. Tuttavia, le versioni salvate nell’Editor possono prevalere sui file.

Il plugin ufficiale Create Block Theme offre strumenti per creare ed esportare temi a blocchi. Non sostituisce backup, controllo del codice e test.

Controlli prima della pubblicazione

Un design reattivo richiede verifiche reali. Prova il menu con la tastiera e su smartphone, controlla che il focus sia visibile e assicurati che l’intestazione non copra contenuti o comandi.

Per ottimizzare la velocità, considero il peso del logo, delle immagini, dei font e degli script aggiunti. Un tema a blocchi non garantisce automaticamente buoni Core Web Vitals.

Anche la SEO tecnica WordPress è distinta dalla grafica. Gerarchia dei titoli, collegamenti interni e indicizzazione richiedono attenzione. Rifare l’header non garantisce un miglior posizionamento del sito.

Su un e-commerce WooCommerce, prova anche il carrello, l’account e la navigazione fino al checkout. Queste verifiche rientrano nella manutenzione WordPress e nell’assistenza al sito, soprattutto dopo gli aggiornamenti che possono modificare il markup o il comportamento dei blocchi.

Domande frequenti sui temi a blocchi

No. Con un tema a blocchi puoi usare l’Editor del sito. Elementor segue strumenti e condizioni differenti.

Perché la modifica compare su molte pagine?

Probabilmente hai aggiornato una parte di template condivisa o un pattern sincronizzato. La modifica riguarda tutte le occorrenze collegate.

Cambiare tema conserva ogni personalizzazione?

Non necessariamente. Contenuti, template, stili e impostazioni del tema hanno ruoli diversi. Prima del cambio preparo una copia di lavoro e valuto cosa trasferire.

Personalizzare senza perdere il controllo del sito

La scelta decisiva è distinguere contenuti locali e strutture condivise. Da questa distinzione dipendono modifiche ordinate e una gestione più semplice.

Come sviluppatore WordPress freelance, consiglio di definire struttura e controlli prima dell’intervento. Costi e tempi dipendono da obiettivi, contenuti, pagine, funzionalità, integrazioni e condizioni iniziali.

Se vuoi personalizzare il tema o pianificare un restyling, Parliamo del tuo progetto web.

Categorie

Ultimi articoli

ricerche brand Search Console
Ricerche brand in Search Console: come separarle
errori REST API WordPress
WordPress: correggere gli errori REST API al salvataggio
file llms.txt per PMI
File llms.txt per PMI: utilità, limiti e pubblicazione
aggiornare contenuti SEO
Come aggiornare i contenuti SEO senza perdere traffico
Powered by Joinchat