Logo Froglab Agenzia di Comunicazione

Tutorial: script nell'header e nel footer senza plugin su WordPress

Scritto da francesco nella categoria   il giorno 25 Giugno 2021
Schema di markup HTML

Per aumentare le potenzialità di WordPress o anche semplicemente per inserire il codice di tracciamento per Google Analytics è necessario apportare delle modifiche all'header e al footer del nostro sito. Utilizzando il CMS non è immediato capire come inserire questi codici: ad ora non esiste una funzione out-of-the-box che ci consenta di copiare e incollare gli script che desideriamo nella giusta posizione. Per ovviare a questo problema è possibile percorrere tre strade: modificare il template del sito, utilizzare un plugin oppure inserire da soli gli script utilizzando il file functions.php.

Modificando il template del sito

È possibile inserire i propri codici customizzati nell'header e nel footer modificando il template nel tema: modificare il tema non è raccomandato se non si è assolutamente sicuri di quello che si sta facendo, soprattutto se il tema è attivo. Bisogna inoltre tenere conto che, a meno che non siamo in controllo del tema, il primo aggiornamento ripristinerà lo status iniziale e le nostre modifiche riscritte. Per questo, nel caso di temi scaricati o acquistati, è necessario assicurarsi di utilizzare un child-theme per il proprio sito: in questo modo possiamo essere sicuri che nessun aggiornamento rimuoverà il nostro codice e che avremo totale controllo sui nostri script e sulle eventuali modifiche di CSS. Questo non toglie che teoricamente sia possibile inserire script ed altri elementi su un tema attivo e senza child-theme, ma significa anche che è un procediemnto troppo pericoloso per parlarne in questa sede.

Utilizzando un plugin di terze parti

Utilizzare un plug-in per inserire del codice nell'header e nel footer è senz'altro la soluzione più a basso rischio: esistono decine di plug-in in circolazione che permettono di farlo, forse il più diffuso è Insert Header and Footers di WPBeginner, e il rischio di rompere qualcosa è relativo, dato che basta disattivare il plugin per rimuovere i nostri script. Tuttavia non la ritengo una soluzione soddisfacente, perché in WordPress, come in tante altre situazioni, less is more: non vogliamo gestire un altro plugin che si aggiunga a quelli sulla nostra lista e soprattutto non vogliamo rischiare che un aggiornamento sbagliato da parte del developer rischi di rompere tutti i nostri siti, o che qualche hacker sfrutti del codice su cui non abbiamo controllo per scopi illeciti. Detto questo, qual'è la soluzione?

Modificando il file function.php del tema

La soluzione più elegante è senz'altro quella di modificare il file function.php del nostro sito, collocato all'interno della cartella del nostro child-theme. L'esempio nelle immagini è stato realizzato utilizzando Elementor con tema-figlio basato su Hello Elementor, un tema gratuito che è possibile scaricare dalla repository di WordPress, ma si può applicare a qualsiasi tema a patto che si tratti di un child-theme. È possibile raggiungere function.php navigando in Aspetto > Editor del tema e scegliendo funtion.php dalla colonna di sinistra.

Schermata dell'editor WordPress
Functions.php all'interno di un tema figlio

Non tocchiamo il codice già presente, che potrebbe variare su altri temi, e limitiamoci ad aggiungere il nostro codice sotto e senza modificare nient'altro.

/* SCRIPT NELL'HEADER */ add_action('wp_head', 'script_head'); function script_head(){ ?> <!--SCRIPT HEADER--> <?php }; /* SCRIPT NEL FOOTER */ add_action('wp_footer', 'script_footer'); function script_footer(){ ?> <!--SCRIPT FOOTER--> <?php };
Code language: HTML, XML (xml)

A questo punto potremo semplicemente sostituire i placeholder <!--SCRIPT HEADER--> e <!--SCRIPT FOOTER--> con i nostri script, senza mai doverci preoccupare di aggiornare plug-in oppure di non essere in controllo del nostro sito.

Share