Come aggiungere codice di intestazione e piè di pagina in WordPress

Personalizzare il tuo sito Web WordPress utilizzando il codice può essere spaventoso. Spesso, dovrai scavare nei file principali per modificare le configurazioni o aggiungere nuovi parametri, che possono danneggiare il tuo sito se lo fai nel modo sbagliato.

Tuttavia, l'aggiunta di codice di intestazione e piè di pagina tende a essere molto più semplice. Spesso, dovrai solo copiare e incollare frammenti di codice specifici. Ciò significa che se sai come accedere ai file di intestazione e piè di pagina, hai superato la parte più spaventosa.

In questo articolo, ti insegneremo come aggiungere codice di intestazione e piè di pagina in WordPress sia manualmente che con un plug-in. Entrambi gli approcci sono molto semplici, quindi andiamo subito al punto!

Perché potresti dover aggiungere codice di intestazione e piè di pagina in WordPress

Se gestisci un sito Web, probabilmente conosci almeno un servizio di terze parti che richiede l'incorporamento del codice per la connessione.

Alcuni degli esempi più popolari includono Google Analytics, Search Console, Facebook Pixel e molti altri strumenti che coinvolgono il monitoraggio del sito web.

Tutti questi servizi richiedono l'aggiunta di script specifici tra i tag head del tuo sito web. L'intestazione del tuo sito è un componente cruciale che include elementi come script, titoli, file di stile e altro.

I tag footer funzionano in modo simile alle loro controparti head . Tecnicamente, se aggiungi frammenti di codice al piè di pagina del tuo sito, dovrebbero funzionare come se li includessi nell'intestazione.

Tuttavia, è importante capire che il tuo sito web eseguirà gli script nell'ordine in cui li includi. Inoltre, il codice dell'intestazione lo farà   eseguito prima del caricamento della pagina, mentre il codice del piè di pagina verrà eseguito dopo di essa.

Se hai la possibilità di scegliere e ti interessa l'ottimizzazione del sito web, spostare JavaScript nel footer del tuo sito può aiutare a velocizzare i tempi di caricamento. Tuttavia, alcuni servizi ti chiederanno esplicitamente di aggiungere il loro codice all'intestazione per evitare problemi di esecuzione.

Come regola generale, se un servizio te lo chiede, ti consigliamo di seguirne i consigli. Per altri frammenti di codice JavaScript, inseriscili nel piè di pagina del tuo sito WordPress. Il codice CSS va sempre nell'intestazione.

Come aggiungere codice di intestazione e piè di pagina in WordPress (2 metodi)

Come spesso accade con WordPress, puoi raggiungere lo stesso obiettivo modificando i file manualmente o utilizzando un plug-in.

Iniziamo parlando dell'approccio dei plugin.

1. Utilizzare un plug-in come Head, Footer e Post Injection

L'utilizzo di un plug-in per aggiungere codice ai file di intestazione e piè di pagina in WordPress è l'approccio più sicuro. Con un plug-in, non è necessario modificare manualmente i file del tema o assicurarsi di aggiungere gli script nel posto giusto.

Sebbene ci siano molti buoni plug-in tra cui scegliere, la nostra raccomandazione per il lavoro è il plug-in Head, Footer e Post Injections.

Questo plugin ti dà molto controllo su dove nel tuo codice vuoi aggiungere i tuoi frammenti di codice. Offre anche la possibilità di aggiungere diversi script per i rendering mobili e desktop del tuo sito.

Per aggiungere il plug-in, vai su Plugin > Aggiungi nuovo nella dashboard e utilizza la funzione di ricerca per trovare il plug-in. Fare clic su Installa, quindi attivare il plug-in.

Una volta che il plug-in è attivo, puoi passare direttamente a Impostazioni > Intestazione e piè di pagina. Vedrai più campi in cui puoi aggiungere frammenti di codice.

Se approfondisci le opzioni del plug-in, vedrai che offre molti posizionamenti aggiuntivi per i frammenti di codice. Tuttavia, nella maggior parte dei casi, puoi attenerti alla scheda Testa e piè di pagina.

Per il codice globale, assicurati di inserire quei frammenti nel campo Su ogni pagina . Tuttavia, se hai solo bisogno del codice da eseguire sulla tua home page, usa l'opzione Solo nella home page .

Una volta che hai finito di aggiungere il codice al tuo sito web, salva le modifiche al plugin e sei a posto!

2. Aggiungi frammenti di codice tramite il tuo file functions.php

L'aggiunta manuale di codice di intestazione e piè di pagina in WordPress non è complicata, ma richiede più considerazioni rispetto all'approccio plug-in.

Puoi aggiungere il codice direttamente ai file header.php o footer.php del tuo tema attivo. Puoi trovare questi file all'interno della directory /public_html/wp-content/themes/ aprendo la cartella del tema attivo e guardando all'interno:

Puoi accedere a quei file tramite File Transfer Protocol (FTP) e modificarli utilizzando il tuo editor di codice preferito. Tuttavia, la modifica diretta dei file di intestazione e piè di pagina può essere disordinata. Tenendo presente questo, abbiamo due consigli se prevedi di utilizzare l'approccio manuale:

1. Crea un tema figlio per il tuo tema. In questo modo, non perderai alcuna personalizzazione quando aggiorni il tema principale.
2. Usa gli hook per aggiungere il codice tramite il tuo file functions.php . Ciò offre un approccio più pulito alla modifica manuale dei file di intestazione e piè di pagina.

Idealmente, dovresti sempre usare un tema figlio se prevedi di eseguire qualsiasi tipo di personalizzazione del tema. Puoi accedere al file functions.php del tuo tema figlio nella sua cartella all'interno della directory /wp-content/themes .

Apri il file functions.php nel tuo editor di codice. Per aggiungere il codice che desideri, devi utilizzare il file wp_head   o wp_footer   gancio.

Il seguente snippet di codice aggiunge il tuo codice personalizzato all'intestazione del tuo sito:

 add_action('wp_head', 'test_script'); function test_script() { ?> <!-- Here comes your custom code in HTML format. --> <?php }

Puoi usare l'hook wp_footer invece di wp_head se vuoi inserire il codice nel tuo footer. Puoi anche cambiare il nome della funzione (test_script) se lo desideri.

Quando hai finito di modificare il tuo file functions.php , ricorda di salvare le modifiche e il gioco è fatto. Qualunque sia il codice che hai aggiunto dovrebbe funzionare ora!

Conclusione

Molti servizi di terze parti come Google Analytics o Facebook Pixel richiedono l'aggiunta di frammenti di codice al tuo sito Web in modo che possano connettersi ad esso. Tuttavia, questo è solo uno dei tanti casi in cui dovrai aggiungere codice all'intestazione e al piè di pagina in WordPress, quindi vale la pena sapere come farlo.

Esistono due modi per aggiungere frammenti di codice all'intestazione e al piè di pagina. Puoi utilizzare un plug-in come "Head, Footer e Post Injections" o aggiungere frammenti di codice tramite il tuo file functions.php .

Hai domande su come aggiungere codice di intestazione e piè di pagina in WordPress? Parliamo di loro nella sezione commenti qui sotto!