WordPress è il CMS (Content Ma­na­ge­ment System) più popolare al mondo. Inoltre, essendo una piat­ta­for­ma open source, il CMS vi permette di ef­fet­tua­re modifiche alla vostra in­stal­la­zio­ne di WordPress con facilità. Questo livello di fles­si­bi­li­tà è uno dei prin­ci­pa­li vantaggi di WordPress. Tuttavia, quasi ogni sito su WordPress richiede alcune modifiche perché possa fun­zio­na­re nel migliore dei modi. Sup­po­nia­mo, ad esempio, che si voglia integrare Google Analytics o uno script di mo­ni­to­rag­gio com­pa­ra­bi­le. A questo scopo, bisognerà ag­giun­ge­re dei frammenti di codice alla struttura del proprio tema. Questo tipo di compito am­mi­ni­stra­ti­vo spesso comporta la modifica dell’header del vostro sito su WordPress. In questo articolo vi mo­stre­re­mo passo dopo passo i modi migliori per farlo.

Cos’è un header WordPress e di quali elementi è composto?

Il termine “WordPress header” può con­fon­de­re. Quando si tratta di un sito web, l’header di solito descrive l’area visibile nella parte superiore di una pagina web. Di solito questa coincide con il punto in cui si trovano il logo del sito web e il menu della pagina prin­ci­pa­le. La maggior parte dei siti web possiede un’header. D’altra parte, un documento HTML, col­lo­quial­men­te chiamato “pagina”, comprende due com­po­nen­ti: la testa HTML (<head>) e il corpo HTML (<body>). Gli elementi visibili sono contenuti solo nel corpo HTML, mentre gli elementi in­vi­si­bi­li appaiono solo nella testa HTML.

Consiglio

Pub­bli­ca­te il vostro sito WordPress con IONOS ap­pro­fit­tan­do dei servizi di un Hosting per WordPress pro­fes­sio­na­le.

Su WordPress, l’header comprende sia la testa HTML che l’header della pagina. Quindi, quando si parla di cambiare l’header WordPress, ci si riferisce a due tipi di elementi:

  1. Elementi in­vi­si­bi­li nella testa HTML
  2. Elementi visibili nell’header della pagina

Offriremo una spie­ga­zio­ne su entrambi gli elementi nelle sezioni seguenti.

Elementi in­vi­si­bi­li nella testa HTML

Gli elementi nella testa HTML non sono visibili ai vi­si­ta­to­ri della pagina web, ma sono invece valutati da un browser e dai motori di ricerca. Gli elementi più comuni situati in una testa HTML includono:

  • Col­le­ga­men­ti a fogli di stile
  • Col­le­ga­men­ti a file di script
  • Col­le­ga­men­ti ai font
  • Col­le­ga­men­ti a favicon
  • Vari tipi di meta tag
N.B.

I tag script po­si­zio­na­ti nella testa HTML possono osta­co­la­re le pre­sta­zio­ni, ad esempio, ral­len­tan­do il ca­ri­ca­men­to della pagina. A seconda dell’ap­pli­ca­zio­ne, il problema può essere risolto ag­giun­gen­do gli attributi “async” e “defer”. È con­si­glia­bi­le includere tali tag script nel footer di WordPress.

Elementi visibili nell’header della pagina

L’header della pagina contiene gli elementi visibili all’inizio della pagina stessa. A partire da HTML5, si è soliti im­ple­men­ta­re l’header della pagina con un elemento <header>, che non è però ob­bli­ga­to­rio. In linea di principio, può essere usato anche un elemento <div>. Gli elementi riportati di seguito si trovano spesso in un header di pagina:

  • Logo
  • Menu
  • Immagine dell’header
  • Barra di ricerca

Come mo­di­fi­ca­re un header su WordPress

Come già accennato bre­ve­men­te, quando si modifica un header WordPress bisogna di­stin­gue­re tra l’aggiunta di codice ag­giun­ti­vo alla testa HTML e la modifica dell’aspetto visivo del sito. Di seguito, ci con­cen­tria­mo sull’in­te­gra­zio­ne di elementi ag­giun­ti­vi non visivi nella testa HTML.

Le modifiche visive all’header della pagina sono molto più complesse. Come eseguirle dipende dal tema uti­liz­za­to. Inoltre, queste modifiche di solito ri­chie­do­no alcune com­pe­ten­ze di design e coding.

N.B.

Alcuni tag script aggiunti possono ri­chie­de­re il consenso dell’utente prima di essere caricati. Ciò avviene se, ad esempio, vengono uti­liz­za­ti dei cookie o vengono raccolti dati personali. Sarà quindi ne­ces­sa­rio con­si­de­ra­re come integrare ogni script ag­giun­ti­vo in una soluzione esistente di consenso ai cookie.

Di seguito ri­por­tia­mo tre metodi per inserire un codice ag­giun­ti­vo nella testa HTML dell’header del vostro sito web su WordPress:

  1. Uti­liz­za­re un plugin
  2. Mo­di­fi­ca­re il codice del tema
  3. Uti­liz­za­re il Tag Manager di Google

I vantaggi e gli svantaggi di ogni metodo sono riassunti nella seguente tabella:

Metodo Vantaggi Svantaggi
UtiĀ­lizĀ­zaĀ­re un plugin ApĀ­pliĀ­caĀ­zioĀ­ne semplice I frammenti di codice sono meĀ­moĀ­rizĀ­zaĀ­ti nel database; difficile da integrare con il consenso dei cookie; mancanza di controllo; puĆ² causare problemi di preĀ­staĀ­zioĀ­ne
MoĀ­diĀ­fiĀ­caĀ­re il codice del tema I frammenti di codice diventano parte della base di codice; sono possibili modifiche visive; pieno controllo su apĀ­pliĀ­caĀ­zioĀ­ni complesse Richiede la modifica del codice del tema e comĀ­peĀ­tenĀ­ze di coding
UtiĀ­lizĀ­zaĀ­re il Tag Manager di Google ApĀ­pliĀ­caĀ­zioĀ­ne semplice; i frammenti di codice sono gestiti cenĀ­tralĀ­menĀ­te fuori dal sito web; si integra bene con il consenso dei cookie; in linea di principio, ĆØ anche possibile imĀ­pleĀ­menĀ­taĀ­re apĀ­pliĀ­caĀ­zioĀ­ni complesse Richiede unā€™unica imĀ­poĀ­staĀ­zioĀ­ne

Uti­liz­za­re un plugin per mo­di­fi­ca­re l’header su WordPress

La directory dei plugin di WordPress consente l’accesso a vari plugin per favorire l’in­se­ri­men­to di un codice nella testa HTML. Questi plugin sono prin­ci­pal­men­te adatti per ag­giun­ge­re meta tag, fogli di stile o script a una pagina. L’aggiunta di elementi visibili all’header della pagina non è so­li­ta­men­te possibile. I plugin sono facili da usare e la maggior parte di questi può essere aggiunta senza la necessità di com­pe­ten­ze di coding pregresse. Tuttavia, a seconda del plugin, il controllo sul codice inserito è limitato. Vi mostriamo una pa­no­ra­mi­ca dei plugin di codice per l’header più uti­liz­za­ti:

Di seguito, vi mo­stre­re­mo passo dopo passo come uti­liz­za­re il plugin “Header and Footer Scripts” per inserire un codice ag­giun­ti­vo nella testa HTML dell’header del vostro sito su WordPress.

Immagine: Installare un nuovo plugin su WordPress
Se­le­zio­na­te “Plugin” dal menu sulla sinistra e fate clic su “Installa”
Immagine: Cercare il plugin “Header and Footer Script”
Digitate “Header and Footer Script” nel campo di ricerca sulla destra
Immagine: Installare il plugin “Header and Footer Script”
Se­le­zio­na­te il plugin de­si­de­ra­to e fate clic su “Installa ora”
Immagine: Attivare il plugin “Header and Footer Script”
Fate clic su “Attiva” per il plugin se­le­zio­na­to
Immagine: Navigare al plugin “Header and Footer Scripts”
Fate clic su “Im­po­sta­zio­ni” nel menu sulla sinistra e se­le­zio­na­te “Header and Footer Scripts”
Immagine: Inserire i meta tag robot nella testa HTML
Copiate il codice che de­si­de­ra­te inserire nell’header WordPress nella finestra di testo “Scripts in header” e fate clic su “Salva im­po­sta­zio­ni”

Mo­di­fi­ca­re il codice del tema per mo­di­fi­ca­re l’header su WordPress

Mo­di­fi­can­do il codice del tema, si riesce a mantenere il controllo sul contenuto dell’header WordPress. Tutte le modifiche apportate diventano parte del codice base del tema e sono quindi soggette al controllo di versione. Questa è l’opzione preferita dagli utenti esperti e dagli am­mi­ni­stra­to­ri. Nor­mal­men­te si dispone di diverse opzioni per mo­di­fi­ca­re il codice del tema:

  1. Ag­giun­ge­re il codice al file template header.php
  2. Ag­giun­ge­re funzioni ag­giun­ti­ve nel file functions.php
  3. Creare un tema child e ag­giun­ge­re le modifiche
Metodo Vantaggi Svantaggi
AgĀ­giunĀ­geĀ­re il codice a header.php ConĀ­cetĀ­tualĀ­menĀ­te semplice da capire; controllo preciso dellā€™ordine delle inĀ­serĀ­zioĀ­ni di codice; funziona anche per le modifiche visibili CamĀ­biaĀ­menĀ­ti a codifica fissa; se i camĀ­biaĀ­menĀ­ti sono costanti vi ĆØ un rischio maggiore che diventino confusi
Creare delle funzioni in functions.php Chiara seĀ­paĀ­raĀ­zioĀ­ne tra preĀ­senĀ­taĀ­zioĀ­ne e funĀ­zioĀ­naĀ­liĀ­tĆ ; lā€™ordine in cui il codice viene inserito puĆ² essere speĀ­ciĀ­fiĀ­caĀ­to maggiore comĀ­plesĀ­siĀ­tĆ ; puĆ² conĀ­fonĀ­deĀ­re i prinĀ­ciĀ­pianĀ­ti
Creare un tema child Le modifiche sono a prova di agĀ­giorĀ­naĀ­menĀ­to e possono essere faĀ­cilĀ­menĀ­te annullate se neĀ­cesĀ­saĀ­rio sforzo legĀ­gerĀ­menĀ­te superiore; richiede una modifica una tantum al tema

Ag­giun­ge­re un codice al file header.php

Il modo più diretto per ag­giun­ge­re un codice all’header del vostro sito su WordPress è quello di mo­di­fi­ca­re il file “header.php”. Questo file di WordPress è un template uni­ver­sa­le che viene uti­liz­za­to in quasi tutti i temi. Nel seguente esempio lo esem­pli­fi­chia­mo guardando al tema ufficiale “Twen­tyT­wen­ty” per vedere come è strut­tu­ra­to un tipico file header.php:

<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" >
    <link rel="profile" href="https://gmpg.org/xfn/11">
    <?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
    <?php
    wp_body_open();
    ?>
    <header id="site-header" class="header-footer-group" role="banner">

Il codice mostra l’header WordPress. La testa HTML si trova tra il tag di apertura <head> e quello di chiusura </head>. Oltre ad alcuni meta tag, la testa HTML contiene una chiamata alla funzione WordPress wp_head, il co­sid­det­to hook di WordPress. Pro­gram­ma­ti­ca­men­te, questi vengono collegati in modo che altri elementi possano essere inseriti nella testa HTML. Questi elementi sono aggiunti prima del tag di chiusura </head>. L’hook wp_head è quindi adatto solo per ag­giun­ge­re elementi non visibili.

Per ag­giun­ge­re altri elementi alla testa HTML, mettete sem­pli­ce­men­te il vostro codice prima o dopo la chiamata wp_head (). Bisogna fare par­ti­co­la­re at­ten­zio­ne all’ordine degli elementi, spe­cial­men­te quando si tratta di fogli di stile e script, mentre per quanto riguarda i meta tag l’ordine di solito non ha im­por­tan­za. Inoltre, i tag di fogli di stile e script non do­vreb­be­ro essere po­si­zio­na­ti ma­nual­men­te nell’header WordPress. Questo sarà spiegato in dettaglio nella sezione seguente.

La testa HTML è seguita dal corpo HTML dove il tag <body> di apertura è seguito da un elemento di header

. Questo header di pagina contiene gli elementi visibili come l’immagine dell’header, il logo e il menu. Qualsiasi codice HTML o PHP inserito in questo punto verrà vi­sua­liz­za­to nel browser.

In linea di principio, è possibile ag­giun­ge­re più elementi visibili nell’header della pagina. Tuttavia, bisogna fare at­ten­zio­ne poiché nel caso in cui si inserisse un codice sbagliato, il sito potrebbe non caricarsi più o mostrare degli errori. Poiché il file header.php è un template globale, ogni singola pagina è in­fluen­za­ta dalle modifiche ad esso apportate.

Creare funzioni su functions.php

Il functions.php, simile al file header.php, si trova nella maggior parte dei temi di WordPress. Non si tratta però di un template PHP tradotto di­ret­ta­men­te in HTML. Piuttosto, il codice in functions.php è usato per con­fi­gu­ra­re il tema e il sito. È possibile definire le funzioni e col­le­gar­le agli hook di WordPress. Di seguito ri­por­tia­mo un semplice esempio in cui ag­giun­gia­mo un meta tag robots nella testa HTML:

function robots_meta() {
    echo '<meta name="robots" content="index, follow, noarchive">';
}
add_action( 'wp_head', 'robots_meta' );

Per prima cosa, bisognerà definire una nuova funzione in functions.php, che emetta il codice HTML del meta tag, qui de­no­mi­na­to robots_meta (). Si può scegliere un nome qualsiasi, tuttavia si consiglia di se­le­zio­nar­ne uno che rifletta ciò che la funzione fa. La funzione WordPress add_action () prende il nome dalla de­fi­ni­zio­ne della funzione. In questo esempio, chiamiamo l’hook di WordPress “wp_head”, e lo useremo per collegare la nostra funzione de­no­mi­na­ta “robots_meta”. Una chiamata a wp_head () porta quindi a una chiamata a robots_meta (); il codice HTML contenuto in robots_meta () viene emesso nella testa HTML.

Mo­di­fi­chia­mo ora il nostro esempio per abilitare l’in­clu­sio­ne di “is_front_page ()” nella cache di Google omettendo “noarchive” sulla homepage di WordPress. Vogliamo inoltre escludere le pagine in cui sono attivati i commenti WordPress (“is_single () && comments_open ()”) dall’essere in­di­ciz­za­te ag­giun­gen­do “noindex”:

function robots_meta() {
    if ( is_front_page() ) {
        echo '<meta name="robots" content="index, follow">';
    }
    else if ( is_single() && comments_open() ) {
        echo '<meta name="robots" content="noindex, follow, nocache">';
    }
    else {
        echo '<meta name="robots" content="index, follow, nocache">';
    }
}
add_action( 'wp_head', 'robots_meta' );

Come ag­giun­ge­re ulteriori script e fogli di stile su WordPress

A volte è ne­ces­sa­rio ag­giun­ge­re un software esterno a un sito WordPress, come uno script di mo­ni­to­rag­gio o una soluzione per il consenso dei cookie. Spesso si rac­co­man­da di incollare uno snippet di codice di­ret­ta­men­te nell’header del vostro sito web su WordPress per caricare script o fogli di stile ag­giun­ti­vi. Nel fare ciò però è ne­ces­sa­ria una certa cautela, poiché è fon­da­men­ta­le as­si­cu­rar­si che gli script e i fogli di stile vengano aggiunti nel giusto ordine!

Le proprietà di stile definite di recente com­ple­ta­no o so­vra­scri­vo­no quelle definite in pre­ce­den­za. Se l’ordine delle de­fi­ni­zio­ni di stile è invertito, ciò può portare a gravi errori di vi­sua­liz­za­zio­ne. Lo stesso vale per gli script. Se uno script accede a variabili o funzioni che sono state definite in un altro script, si crea una di­pen­den­za. Lo script di­pen­den­te deve quindi essere caricato per ultimo.

WordPress dispone di funzioni e hook speciali per per­met­te­re l’in­te­gra­zio­ne di ulteriori script e fogli di stile. Gli script e i fogli di stile sono accodati (“enqueue”) e questo si riflette nei nomi loro assegnati, ad esempio “wp_enqueue”. Il codice riportato di seguito è un esempio di come i fogli di stile e gli script sono caricati all’interno di functions.php:

function add_theme_scripts() {
  wp_enqueue_style( 'main-style', get_stylesheet_uri() );
 
  wp_enqueue_script( 'main-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'add_theme_scripts' );

Creare un tema child

Quando si adatta il codice di un tema WordPress, è con­si­glia­bi­le creare un tema child. Il tema child “eredita” il codice del “tema genitore”, o tema prin­ci­pa­le, ag­giun­gen­do e so­vra­scri­ven­do se­let­ti­va­men­te i com­po­nen­ti. Usare un tema child assicura che i cam­bia­men­ti siano separati dal codice del tema prin­ci­pa­le. Ciò significa anche che gli ag­gior­na­men­ti possono essere fatti senza so­vra­scri­ve­re il tema prin­ci­pa­le originale. I due metodi pre­ce­den­te­men­te discussi possono essere usati anche per creare un tema child.

Acquista e registra il tuo dominio con il provider n°1 in Europa
  • Domain Connect gratuito per una con­fi­gu­ra­zio­ne facile del DNS
  • Cer­ti­fi­ca­to SSL Wildcard gratuito
  • Pro­te­zio­ne privacy inclusa

Usare Google Tag Manager per mo­di­fi­ca­re un’header su WordPress

Oltre l’utilizzo di plugin o la modifica del codice del tema per inserire il codice in un’header WordPress, esiste un’altra opzione: usare il Tag Manager di Google. Per far ciò, basterà ag­giun­ger­lo solo una volta al vostro sito, ag­giun­gen­do il codice del tema o uti­liz­zan­do un plugin. A questo punto, sarà possibile tracciare il codice e i meta tag e in­te­grar­li nel vostro sito WordPress at­tra­ver­so un’in­ter­fac­cia separata nel vostro account Google. Questo è spesso il metodo preferito dai marketing manager, perché permette loro di ancorare il codice specifico nella testa HTML senza ri­chie­de­re l’aiuto di co­di­fi­ca­to­ri pro­fes­sio­ni­sti.

In sintesi

Se vi trovate a dover gestire ampie modifiche al codice dell’header su un sito WordPress com­mer­cia­le, è meglio usare il Tag Manager di Google. Se invece siete degli svi­lup­pa­to­ri o col­la­bo­ra­te con dei pro­gram­ma­to­ri, potete creare un tema child. L’uso di plugin è con­si­glia­to solo a chi desidera apportare delle modifiche semplici all’header del proprio sito web su WordPress.

Vai al menu prin­ci­pa­le