State impazzendo per aggiungere codice all’header (testata) o al footer di WordPress? Molti strumenti e script di tracciamento richiedono l’aggiunta di frammenti di codice all’header o al footer del sito WordPress. Ma di default WordPress non rende molto semplice la modifica di questi file.
In questo articolo, vi mostreremo come aggiungere codice all’header o al footer di WordPress, sia utilizzando un plugin di WordPress, sia aggiungendo manualmente il codice al file functions.php. Per la maggior parte degli utenti, è consigliato ricorrere ad un plugin. Ma gli utenti intermedi e avanzati di WordPress potrebbero invece preferire inserire il codice manualmente.
Potete cliccare sui link sottostanti per passare direttamente al vostro metodo preferito:
- Come aggiungere codice all’header e al footer di WordPress con un plugin
- Come aggiungere manualmente il codice all’header o al footer di WordPress
Come Aggiungere Codice all’Header e al Footer di WordPress con un Plugin
Per la maggior parte degli utenti, il modo più semplice per aggiungere codice all’header e al footer di WordPress è tramite un plugin. I vantaggi dell’utilizzo di un plugin rispetto al metodo manuale mostrato nella prossima sezione sono i seguenti:
- I vostri frammenti di codice rimarranno intatti se cambiate tema.
- Il plugin rende facile aggiungere solo frammenti di codice all’header o al footer della vostra homepage, il che può essere utile in alcuni casi d’uso.
- Il plugin è più adatto ai principianti perché non rende necessario scavare nel codice.
Anche se ci sono diversi plugin che offrono questa funzionalità, consigliamo il plugin Head, Footer e Post Injections di Stefano Lissa perché vi offre maggiore controllo rispetto a molte alternative. Al momento conta oltre 200.000 installazioni attive, con un rating di 5 stelle su 5.
Passo 1: Installare e Attivare Head, Footer and Post Injections
Head, Footer e Post Injections è disponibile gratuitamente su WordPress.org, quindi è possibile installarlo e attivarlo direttamente dal cruscotto di WordPress andando su Plugins → Aggiungi Nuovo:
Passo 2: Aggiungere un Frammento di Codice in Head, Footer and Post Injections
Una volta attivato il plugin, potrete accedere all’interfaccia andando in Impostazioni → Header and Footer nella bacheca di WordPress. Nell’interfaccia del plugin vedrete una serie di schede. Ma per quel questa guida, lavorerete per lo più nella scheda predefinita Head and footer:
Per aggiungere codice all’header del sito, è necessario incollarlo in una delle caselle nell’area <HEAD> SECTION INJECTION:
- Every page – aggiunge il frammento di codice all’header di ogni singola pagina del vostro sito. Questo è quello che dovreste utilizzare la maggior parte delle volte.
- Only home page – aggiunge il frammento di codice solo all’header della vostra homepage.
Ad esempio, per aggiungere il codice di tracciamento di Google Analytics a WordPress, basta incollarlo nella casella Every page e salvare le modifiche:
Per aggiungere codice al footer del sito, potete scorrere fino all’opzione BEFORE THE </BODY> CLOSING TAG (FOOTER). Anche in questo caso, avete due opzioni, anche se sono diverse dalla sezione dell’header:
- Desktop – nonostante il nome, questo aggiunge codice al footer sia della versione desktop che della versione mobile del vostro sito, a meno che non selezioniate specificamente la casella per il Mobile.
- Mobile – quando è selezionato, questo consente di aggiungere un diverso frammento di codice alla versione mobile del vostro sito.
Se volete aggiungere un frammento di codice alla sezione footer per tutti gli utenti, indipendentemente dai loro dispositivi, incollatelo nel box Desktop e lasciate Mobile deselezionato:
Se necessario, potete aggiungere più frammenti di codice ad ogni box.
BONUS – Aggiungere Codice all’Header e al Footer delle Pagine di Google AMP
Un’altra cosa interessante di questo plugin è che, se si utilizza Google AMP per WordPress, il plugin consente di aggiungere in modo specifico frammenti di codice all’header e al footer delle versioni di Google AMP delle vostre pagine (purché si utilizzi il plugin ufficiale AMP di Automattic).
Per farlo, andate alla scheda AMP in Header and Footer e incollate il vostro frammento di codice nella casella appropriata:
Se avete solo bisogno di aggiungere diverse funzioni PHP in tutto il sito, vi raccomandiamo anche di dare un’occhiata al plugin gratuito Code Snippets. Questo elimina la necessità di aggiungere frammenti personalizzati al file functions.php del tema. Attualmente conta oltre 100.000 installazioni attive con un rating di 5 stelle su 5.
Come Aggiungere Manualmente il Codice all’Header e al Footer di WordPress
Se non avete familiarità con le basi di PHP, consigliamo di attenervi al metodo del plugin descritto sopra. Il metodo manuale potrebbe essere troppo complicato.
In questa sezione, scoprirete come aggiungere manualmente frammenti di codice all’header e al footer del vostro tema tramite il file functions.php.
Se preferite questo metodo rispetto al precedente del plugin, è essenziale che utilizziate un child theme di WordPress per effettuare le modifiche. Se non utilizzate un child theme, qualsiasi codice aggiungiate all’header o al footer verrà sovrascritto se aggiornate il tema di WordPress.
Molti sviluppatori forniscono un child theme. Ma se non è il caso del vostro sviluppatore, ecco una guida per creare un child theme WordPress. Una volta che il vostro child theme è pronto, potete procedere con i seguenti passaggi per aggiungere codice all’header o al footer del vostro tema.
Anche se potete aggiungere frammenti di codice direttamente ai file header.php e footer.php, un modo migliore è quello di utilizzare il file functions.php e l’apposito hook di WordPress. Questo consente di mantenere tutti i frammenti in un unico posto ed evitare di modificare i file del tema principale.
Passo 1: Preparare i Frammenti di Codice
Per iniziare, vi offriremo una struttura approssimativa per aggiungere codice sia all’header che al footer.
Per aggiungere codice all’header, utilizzate questo frammento:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
?>
PASTE HEADER CODE HERE
<?php
};
Per aggiungere codice al vostro footer, utilizzate questo frammento:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_footer', 'your_function_name');
function your_function_name(){
?>
PASTE FOOTER CODE HERE
<?php
};Per ogni frammento, assicuratevi di cambiare:
- La descrizione del commento (utile quando si ha bisogno di ricordare dopo un anno cosa fa un frammento di codice)
- Il segnaposto con your_function_name (in entrambi i casi)
- Il segnaposto PASTE X CODE HERE
Passo 2: Aggiungere Frammenti di Codice al File functions.php in un Child Theme
Una volta che sono pronti i relativi frammenti di codice, è necessario aggiungerli al file functions.php del vostro child theme. Potete modificare questo file collegandovi al vostro sito via FTP. Oppure, potete andare su Aspetto → Editor e selezionare il file functions.php. Incollate, quindi, il codice alla fine del file:
Salvate le modifiche e il gioco è fatto!
BONUS: Aggiungere Codice all’Header o al Footer Solo per Specifiche Pagine
Se desiderate un maggiore controllo su dove vengono aggiunti i frammenti di codice dell’header o del footer, potete utilizzare dichiarazioni if per aggiungere il codice solo a pagine specifiche del vostro sito WordPress.
Ad esempio, per aggiungere solo frammenti di codice all’header o al footer della vostra homepage, potreste usare:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_front_page()) { ?>
PASTE HEADER CODE HERE
<?php }
};
Un’altra opzione è quella di aggiungere i frammenti di codice solo a specifici post o pagine. Per farlo, potete utilizzare questo frammento di codice:
/* Describe what the code snippet does so you can remember later on */
add_action('wp_head', 'your_function_name');
function your_function_name(){
if(is_single(73790)) { ?>
PASTE HEADER CODE HERE
<?php }
};
Sostituite il numero di esempio – 73790 – con l’ID effettivo del post o della pagina a cui volete aggiungere i frammenti di codice.
In Caso di Dubbio, Utilizzate il Plugin
Questo conclude la nostra guida su come aggiungere codice all’header o al footer del vostro sito WordPress. Se gli esempi di codice manuale sono complicati, consigliamo di utilizzare il metodo del plugin. È molto più adatto ai principianti e, il più delle volte, offre le stesse funzionalità.
