Modificare l’header di un sito WordPress senza plugin

Si dice che sia importante fare una buona prima impressione. Quando i visitatori arrivano sul vostro sito web, la prima impressione inizia dall’alto, dall’header della pagina.

Gli sviluppatori di temi WordPress non sono obbligati a includere un template di header, ma è raro che un sito non ne abbia uno. Sin dagli albori del web, il termine “header” è stato utilizzato per indicare un blocco di HTML che racchiude gli elementi essenziali che i visitatori si aspettano di trovare nella parte superiore delle pagine. Questi elementi includono spesso:

• Branding: può includere il nome del sito e, spesso, un logo. L’uso di colori, immagini o video nell’header può rafforzare il marchio.
• Navigazione primaria: se il vostro sito web ha più di una pagina, i visitatori probabilmente cercheranno un menu di navigazione vicino alla parte superiore di ogni pagina.
• Navigazione secondaria: la navigazione secondaria può essere costituita da qualsiasi link indipendente dalla posizione attuale dell’utente nella gerarchia del menu primario. Pensate al pulsante “login” e alle icone che collegano agli account dei social media o al carrello.
• Ricerca: se il vostro sito web supporta la ricerca, non è necessario che la casella di ricerca si trovi nell’header, ma sicuramente i visitatori non la cercheranno nel footer.

Il CMS WordPress è in grado di generare dinamicamente componenti come gli header combinando il markup dei template dei temi con i contenuti presenti in un database, come i link a un logo e le voci del menu, e di inserirli in ogni pagina.

L’ecosistema dei temi di WordPress offre una ricca selezione di design per quasi tutti i siti web. Con decine di migliaia di temi tra cui scegliere su vari mercati, scegliere il migliore per il vostro scopo può essere scoraggiante.

Ma quando finalmente sceglierete e installerete un tema, dovrete personalizzare almeno alcuni componenti, come l’header, per imprimere il vostro marchio sul sito e renderlo vostro.

Vediamo come fare.

Blocco vs classico: la storia di due temi

Il modo in cui personalizzate l’header del vostro sito WordPress dipende da come è stato costruito il suo tema (e, a volte, dalla quantità di personalizzazioni che volete apportare). Esistono tre modi per modificare l’header di un sito nativo di WordPress:

• Utilizzando l’editor del sito: WordPress 5.0 ha introdotto un editor a blocchi per i contenuti del sito web noto come Gutenberg. Con il rilascio di WordPress 5.9, il concetto di blocco si è esteso alla tematizzazione ed è diventato un’opzione solida per il full site editing. L’Editor del sito e la possibilità di costruire le varie parti di un tema del sito web con componenti basati su HTML hanno portato una flessibilità senza precedenti alla personalizzazione nativa di WordPress.
• Usare il Personalizza di WordPress: non vogliamo farvi sentire vecchi, ma i temi che possono essere modificati solo utilizzando il Personalizza e i widget associati, un tempo rivoluzionari, adesso vengono chiamati temi “classici”. Nonostante il nome dal sapore retrò, vengono rilasciati sempre nuovi temi in stile classico, che si aggiungono alle migliaia già presenti sul mercato. Rispetto ai temi Editor del sito e a blocchi, i temi Personalizza e Classico offrono meno opzioni per la personalizzazione dell’header.
• Modificare direttamente i file del tema: per modificare il codice all’interno dei file dei temi classici di WordPress è necessaria una conoscenza di base del PHP, ma è una soluzione quando il Personalizza non è in grado di fornire ciò che serve per l’header del vostro sito.

Non ci occupiamo della personalizzazione dell’header nei page builder di WordPress di terze parti, come Divi, né di una serie di plugin progettati appositamente per gestire gli header (e i footer) dei siti web. Questi plugin potrebbero valere la pena di essere esplorati se la vostra unica opzione richiede la modifica diretta dei file del tema e volete evitare la programmazione PHP.

Come modificare l’header di un tema a blocchi

Se avete utilizzato Gutenberg per creare contenuti, saprete che WordPress comprende una vasta collezione di blocchi che potete inserire nelle pagine per comporre qualsiasi cosa, dai titoli, paragrafi ed elenchi ai media, alla navigazione e ai moduli. Esiste una classe di blocchi che svolgono compiti simili a quelli dei widget nei temi classici, tra cui la generazione di link agli ultimi post e commenti, la visualizzazione di una tag cloud o l’inserimento di un calendario.

I blocchi multipli possono essere combinati, personalizzati e salvati come pattern. Potete anche aggiungere questi componenti alle parti di un tema WordPress che aiutano a definire il layout di una pagina, compresi gli header.

Come i singoli blocchi, le parti del template possono essere definite in file HTML. I temi a blocchi sono facili da personalizzare perché le informazioni che descrivono le modifiche vengono salvate nel database di WordPress e applicate ai vari componenti quando viene generata una pagina.

Quindi, quando parliamo di “modificare” un’header in un tema a blocchi, raramente stiamo parlando di modificare un file memorizzato nella directory del tema di WordPress.

Dietro le quinte: l’header di un tema a blocchi

L’ispezione dell’HTML dietro una parte di template come l’header aiuta a spiegare cosa succede quando si personalizza un tema.

Per questo tutorial utilizzeremo il tema Seedlet, disponibile sia come Seedlet (Blocks) che come Seedlet (Classic). Seedlet (Blocks) utilizza il tema Blockbase come suo genitore e questo è l’intero contenuto del file header.html nelle directory del tema Seedlet:

<!-- wp:pattern {"slug":"blockbase/header-centered"} /-->
<!-- wp:spacer {"height":60} -->
<div style="height:60px" aria-hidden="true" class="wp-block-spacer"></div>
<!-- /wp:spacer -->

La maggior parte della magia dei blocchi di WordPress avviene nei commenti HTML. I commenti possono trasmettere informazioni sullo stile e altre direttive durante la creazione della pagina. L’HTML qui sopra aggiunge un po’ di spaziatura verticale al nostro header predefinito, ma l’azione principale è la richiesta di includere un modello nel tema Blockbase che (una volta aggiunto .html ) si trova nel file header-centered.html.

La directory dei template all’interno del tema Blockbase include questi file relativi all’header:

header-centered.html
header-default.html
header-linear.html
header-minimal.html
header-rounded-logo.html
header-wide.html

Ad esempio, il file header-rounded-logo.html include un commento HTML che aggiunge una classe CSS per il ritaglio circolare dell’immagine del logo. Se volessimo seguire questo approccio, potremmo modificare il nostro file Seedlet header.html per includere header-rounded-logo.html invece di header-centered.html. Ma non è necessario farlo perché possiamo applicare questa parte del template nell’Editor del sito WordPress e lasciare intatti i file del tema sul disco rigido.

Usare l’Editor del sito per personalizzare un’header

Con un tema a blocchi attivo sul nostro sito web, possiamo accedere all’Editor del sito nel pannello di amministrazione di WordPress selezionando Aspetto > Editor:

La vista iniziale dell’Editor del sito è un layout a pagina intera che include l’header, il footer e qualsiasi altra parte del template già aggiunta dallo sviluppatore del tema. Possiamo cliccare sull’area dell’header per iniziare subito a modificarla.

Qui sotto, il nostro header include un placeholder per il logo e mostra già il nome del sito e la navigazione principale (che ora consiste solo in “Chi siamo” e “Pagina di esempio”). Se aggiungiamo una tagline alle informazioni di base del sito, questa apparirà anche qui.

Questi elementi di identità del sito sono già presenti nel nostro header perché la parte del template header-centered.html menzionata in precedenza include questi commenti:

<!-- wp:site-logo {"align":"center","width":128} /-->
<!-- wp:site-title {"textAlign":"center","style":{"spacing":{"padding":{"top":"30px","bottom":"20px"}}}} /-->
<!-- wp:site-tagline {"textAlign":"center","fontSize":"small"} /-->

La navigazione principale è generata da questo commento:

<!-- wp:navigation {"layout":{"type":"flex","setCascadingProperties":true,"justifyContent":"center","orientation":"horizontal"}} /-->

Aggiungiamo il nostro logo:

1. Selezioniamo il placeholder del logo.
2. Clicchiamo sul pulsante Aggiungi media.
3. Scegliamo il logo nella libreria multimediale di WordPress o carichiamolo da disco.

La personalizzazione dell’header di un sito web con l’aggiunta di un logo è un’operazione talmente comune che anche la maggior parte dei temi WordPress classici rende il lavoro semplice nel Personalizza. Quindi, aggiungiamo un blocco che non è già previsto nel template: un menu secondario vicino alla parte superiore della pagina con la voce: Shop.

Per prima cosa, attiviamo la visualizzazione del Block Inserter cliccando sull’icona a forma di levetta nell’angolo in alto a sinistra dell’Editor del sito:

Con il Block Inserter attivo:

1. Troviamo il blocco di navigazione (possiamo cercarlo).
2. Trasciniamo il blocco sul margine superiore dell’header.

Ora modifichiamo il blocco di navigazione creando un link personalizzato (staccato dalla navigazione principale) che visualizzi il testo Shop e contenga l’URL del nostro sottodominio e-commerce:

Per impostazione predefinita, tutto ciò che è presente in questa parte del template dell’header è centrato sulla pagina. Vogliamo che il link allo Shop sia fluttuante a destra. Per farlo:

1. Clicchiamo sul nuovo blocco di navigazione.
2. Clicchiamo sull’icona Cambia giustificazione degli elementi nella barra degli strumenti.
3. Selezioniamo Giustifica gli elementi a destra.

Ecco l’header completato:

Come modificare l’header di un tema classico con il Personalizza

Quando la prima versione del Personalizza dei temi è stata rilasciata nel 2012, insieme a WordPress 3.4, ha rappresentato un passo avanti nell’aiutare gli amministratori a modificare l’aspetto dei loro siti web senza dover ricorrere al codice.

Da allora il Personalizza è stato notevolmente migliorato, ma una cosa rimane vera: lo sviluppatore di un tema determina cosa può o non può essere personalizzato con questo strumento. Questo è un contrasto con il libero arbitrio che i proprietari dei siti hanno con l’Editor del sito basato su blocchi.

Usare il Personalizza di WordPress

Quando un tema classico che supporta il Personalizza è attivo su un sito, è possibile accedervi tramite la bacheca di WordPress selezionando Aspetto > Personalizza.

Dal menu principale del Personalizza, selezioniamo Identità del sito per accedere ai componenti personalizzabili dell’header:

Nella sezione Identità del sito di questo tema, possiamo aggiungere o cambiare un logo e modificare il titolo del sito ed eventuali tagline. (Il titolo del sito e la tagline sono inizialmente popolati dalle voci presenti nella pagina delle Impostazioni generali della bacheca).

Questo tema posiziona anche la navigazione principale del sito nell’header. C’è anche una posizione per la navigazione nel footer e per un menu di link ai social media. Il Personalizza permette di scegliere quale menu assegnare a ciascuna di queste posizioni, ma le posizioni stesse sono essenzialmente fisse.

Dopo aver fatto clic sul pulsante Seleziona logo evidenziato in precedenza, possiamo scegliere un logo dalla Libreria multimediale di WordPress o caricarne uno nuovo da disco.

Qui sotto, con il logo inserito, il Personalizza ci permette di rimuovere l’immagine o di sostituirla con un’altra:

Dietro le quinte: cosa può personalizzare il Personalizza?

Come fa il Personalizza a stabilire se possiamo caricare un logo e dove posizionarlo?

Il tutto inizia con questa voce nello script functions.php del tema:

/**
* Add support for core custom logo.
*
* @link https://codex.wordpress.org/Theme_Logo
*/
add_theme_support(
    'custom-logo',
    array(
        'height' => 240,
        'width'           => 240,
        'flex-width'  => false,
        'flex-height' => false,
     )
);

Questo blocco di codice attiva il pulsante Seleziona logo nella scheda Identità del sito del Personalizza e il suo collegamento alle funzioni della Libreria multimediale.

Poi, all’interno del codice PHP utilizzato per creare l’header del sito, viene aggiunto questo breve frammento di codice nella posizione in cui dovrebbe apparire il logo:

<div class="site-logo"><?php the_custom_logo(); ?></div>

Il risultato:

Modificare l’header di WordPress modificando i file del tema

Sopra, quando abbiamo personalizzato l’header di un tema a blocchi utilizzando l’Editor del sito, abbiamo aggiunto un menu secondario con un link allo Shop. Eravamo liberi di posizionare il blocco di navigazione ovunque volessimo all’interno del nostro header. La nostra versione classica del tema non ha una posizione riservata a questo menu, quindi dovremo modificare il codice PHP relativo all’header per apportare la modifica.

Potremmo semplicemente aprire il file del tema appropriato e aggiungere manualmente l’HTML per il nostro menu secondario, ma sarebbe poco lungimirante. In seguito, potremmo voler aggiornare il testo del nostro link agli acquisti (Acquista ora?), cambiare il suo URL o aggiungere un’altra voce a quel menu (Accedi?).

Vogliamo aggiungere una nuova navigazione all’header che sia registrata nel Personalizza, consentendo di modificare il contenuto del menu secondario nell’editor dei menu di WordPress senza dover tornare al codice del tema.

Prima di iniziare: Backup

Scavare nel codice PHP del tema classico di WordPress per personalizzare l’header del sito viene spesso descritto come una modifica del file header.php. Questo è il caso di molti temi, ma altri possono combinare più file per creare un’unico header.

Prima di apportare modifiche ai file del tema, eseguiamo dei backup. Ecco come eseguire un backup e come ripristinarli.

Anche con i backup, è possibile incorrere in problemi quando un aggiornamento di un tema di terze parti sovrascrive le nostre modifiche. Le modifiche potrebbero scomparire dal sito fino a quando non potremo ripristinare i file del tema modificati da un backup. Ecco perché consigliamo vivamente di creare un tema child solo per i file modificati e di testare gli aggiornamenti su un sito WordPress in fase di allestimento.

Modificare l’header di WordPress in un tema classico

Il nostro tema classico di esempio ha una posizione riservata nell’header per la navigazione primaria. Nel Personalizza, possiamo selezionare il menu di WordPress che vogliamo assegnare a quella posizione. Nel nostro caso, questo menu è stato chiamato “Menu primario”.

Nel tema sono presenti anche posizioni per la navigazione nel footer e nei link social, ma come potete vedere qui sotto, al momento non sono abilitate:

Se diamo un’occhiata allo script functions.php del tema, vediamo dove si trovano le posizioni dei menu:

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

Di seguito, aggiungiamo a quel blocco una voce per il nostro nuovo menu “Navigazione secondaria”:

// This theme uses wp_nav_menu() 
register_nav_menus(
    array(
        'primary' => __( 'Primary Navigation', 'seedlet' ),
        'secondary' => __( 'Secondary Navigation', 'seedlet' ),
        'footer'  => __( 'Footer Navigation', 'seedlet' ),
        'social'  => __( 'Social Links Navigation', 'seedlet' ),
    )
);

Quando torniamo al Personalizza, la nuova opzione di navigazione secondaria viene visualizzata nell’area Posizioni del menu:

Possiamo dare un nome al nostro menu (Menu secondario) e iniziare ad aggiungervi dei link. Come abbiamo fatto con l’Editor del sito nel tema a blocchi, creeremo una voce per lo Shop.

Nel file del tema per l’header, abbiamo aggiunto del codice che conferma l’esistenza del menu di navigazione secondario e che ha almeno una voce nell’elenco dei link. Poi analizziamo il contenuto del menu e lo visualizziamo:

<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
<div id="secondary-navigation" class="secondary-navigation" role="navigation">
<?php
// Get menu slug
$location_name = 'secondary;
$locations         = get_nav_menu_locations();
$menu_id           = $locations[ $location_name ];
$menu_obj          = wp_get_nav_menu_object( $menu_id );
wp_nav_menu(
    array(
        'theme_location'  => 'secondary',
        'menu_class'          => 'menu-wrapper',
        'container_class' => 'secondary-menu-container',
        'items_wrap'          => '<ul id="%1$s" class="%2$s">%3$s</ul>',
    )
);
?>
</div><!-- #secondary-navigation -->
<?php endif; ?>        
<div class="menu-button-container">
<?php if ( $has_secondary_nav && $has_secondary_nav_items ) : ?>
    <button id="secondary-open-menu" class="button open">
        <span class="dropdown-icon open"><?php _e( 'Menu', 'seedlet' ); ?> <?php echo seedlet_get_icon_svg( 'menu' ); ?></span>
        <span class="hide-visually expanded-text"><?php _e( 'expanded', 'seedlet' ); ?></span>
    </button>
<?php endif; ?>
</div>

Ora l’header include il link allo Shop (evidenziato in rosso) nella posizione preferita per la navigazione secondaria.

Con questo approccio, possiamo modificare il testo di ancoraggio utilizzato per il nostro link al negozio o addirittura aggiungere altre voci di menu alla navigazione secondaria, semplicemente modificando il nostro menu di navigazione secondaria nella bacheca di WordPress.

Riepilogo

Se volete modificare l’header del vostro sito WordPress senza ricorrere a plugin o page builder di terze parti, i temi a blocchi offrono una flessibilità quasi illimitata in combinazione con l’Editor del sito. L’Editor del sito permette di posizionare una serie di blocchi praticamente ovunque nel layout di una pagina. Le modifiche apportate alle definizioni dei blocchi e allo stile vengono memorizzate nel database di WordPress, evitando di modificare i file del tema su disco.

Il Personalizza, che utilizziamo da oltre un decennio per gestire i temi classici, consente di modificare gli elementi che lo sviluppatore del tema ha identificato e registrato come “personalizzabili”. Le modifiche che desiderate apportare al di fuori di questo ambito potrebbero richiedere la modifica dei file del tema e, quasi certamente, una conoscenza di base del linguaggio di scripting PHP.

Cercate un modo migliore per creare siti WordPress? Date un’occhiata a DevKinsta, una suite di sviluppo locale gratuita basata su Docker e utilizzata da 60,000+ sviluppatori, web designer e freelance.

Steve Bonisteel Kinsta

Steve Bonisteel is a Technical Editor at Kinsta who began his writing career as a print journalist, chasing ambulances and fire trucks. He has been covering Internet-related technology since the late 1990s.