WordPress assembla più file modello PHP per rendere il contenuto leggibile all'utente nel browser.I temi WordPress contengono file header.php, footer.php, single.php (per i post), page.php (per le pagine) e sidebar.php, i temi più recenti utilizzano sezioni di modello aggiuntive per generare il contenuto principale.
Tutti questi modelli sono ben assemblati e visualizzati quando visualizzi la pagina di WordPress nel tuo browser.In genere, non è necessario modificare questi file e sono disponibili plug-in per inserire funzionalità personalizzate.Tuttavia, in alcuni casi, è necessario inserire del codice nelle sezioni di intestazione e piè di pagina di WordPress.
In questo articolo spiegheremo come farlo senza e con i plugin.
Perché inserire il codice nell'intestazione o nel piè di pagina?
Le sezioni di intestazione e piè di pagina sono utili per varie integrazioni di codice e per aggiungere funzionalità extra al tuo sito.Ecco alcuni dei migliori esempi che richiedono l'inserimento di codice nell'intestazione e nel piè di pagina del tuo sito WordPress.
Inserisci il codice dell'annuncio automatico da Google AdSense o il codice dell'annuncio dell'offerta masthead da qualsiasi altro programma pubblicitario.
Installa il codice di monitoraggio dei pixel di Google Analytics e Facebook.
Inserisci captcha da Bing Webmaster Tools, Google Search Console, Baidu, Yandex e qualsiasi altra piattaforma come Pinterest.
Aggiungi CSS personalizzati all'intestazione, come i fogli di stile di Google Fonts e JavaScript nel piè di pagina.
Inserisci componenti personalizzati come breadcrumb nell'intestazione quando utilizzi plugin come Yoast SEO.
Come puoi vedere, l'elenco sarà più lungo a seconda delle tue esigenze.
Aggiungi codice alle sezioni di intestazione e piè di pagina in WordPress
Per impostazione predefinita, WordPress non fornisce alcuna opzione per inserire codice nelle sezioni di intestazione e piè di pagina.L'opzione più semplice è modificare direttamente il file e inserire il codice.Tuttavia, ci sono anche plugin disponibili per questo scopo.In questo articolo, spiegheremo due modi per aggiungere codice alle sezioni di intestazione e piè di pagina di qualsiasi sito WordPress.
Modifica manualmente i file header.php e footer.php del tema WordPress.
Usa il plug-in Inserisci intestazione e piè di pagina per aggiungere codice senza modificare i file.
Inoltre, spiegheremo l'uso di alcuni temi per inserire codice nelle intestazioni e nei piè di pagina usando gli hook wp_head e wp_footer.
Inserisci manualmente il codice di intestazione e piè di pagina di WordPress
Questa opzione richiede la modifica del file header.php o footer.php nel tema del tuo sito WordPress e potrebbe non essere adatta ai principianti.
Innanzitutto, inizia preparando frammenti di codice o copiando da siti di terze parti.Una volta che hai pronto il codice di intestazione e piè di pagina, passa con il mouse sul menu Aspetto nella dashboard del sito e fai clic sulla scheda Editor temi.
Ignora tutti i messaggi di avviso che ricevi e seleziona l'argomento attivo dall'elenco a discesa "Seleziona argomento da modificare:".
Seleziona il file "header.php" o "footer.php" a destra della vista corrente.
Per l'intestazione, assicurati di incollare il codice sotto il tag di chiusura "", quindi il codice per il piè di pagina dovrebbe essere sotto "" Etichetta.A volte, potrebbe essere necessario inserire il codice anche prima del tag di chiusura.
Infine, fai clic sul pulsante "Aggiorna file" per salvare le modifiche al tuo sito con lo snippet aggiunto.
Assicurati di testare il tuo sito e controlla che le funzionalità che hai collegato funzionino come previsto.
Inserisci il codice di intestazione e piè di pagina di WordPress usando i plugin
Per impostazione predefinita, WordPress ti consente di aggiungere CSS personalizzati al tuo sito Web nella sezione Aspetto > Personalizzazione > CSS aggiuntivi.Tuttavia, non puoi inserire JavaScript in questa sezione.Sono disponibili molti plug-in e plug-in gratuiti per l'inserimento del codice, qui spiegheremo l'utilizzo di "WPBeginner Inserisci intestazione e piè di pagina".Il plugin ha un'interfaccia semplicissima che i principianti possono facilmente usare.
Innanzitutto, installa e attiva il plug-in "Inserisci intestazione e piè di pagina".Dalla dashboard del tuo sito WordPress, passa con il mouse sul menu Plugin e fai clic su Aggiungi nuovo.
Usa la funzione del plug-in di ricerca per trovare "Inserisci intestazione e piè di pagina" e fai clic sul pulsante "Installa ora".Al termine del processo di installazione, "Attiva" il plug-in.
Installa il plugin
Vai al menu Impostazioni, trova e fai clic sul sottomenu Inserisci intestazione e piè di pagina.
Il plug-in fornisce tre caselle per inserire gli script nell'intestazione, nel corpo e nel piè di pagina per inserire il codice.Fino ad allora, fornitori di terze parti come Google Analytics ti indicano su quale casella posizionare i loro snippet.Altrimenti, assicurati di sapere esattamente dove vuoi inserire il codice.
Incolla questi codici nei codici appropriati e fai clic su Salva per completare le modifiche al sito.
Gli script di codice ora vengono caricati automaticamente nella posizione specifica in cui è in esecuzione il sito.
Puoi sempre modificare ulteriormente il codice e mantenere attivo il plug-in, poiché la sua disattivazione impedirà l'aggiunta di funzionalità personalizzate e disabiliterà tutti gli script precedentemente aggiunti al tuo sito.
Inserisci il codice usando i plugin
Tieni presente che se per caso il plug-in "Inserisci intestazione e piè di pagina" viene disattivato o disinstallato per errore, il tuo codice rimarrà nel database del tuo sito.Basta reinstallare o riattivare il plug-in per far funzionare il codice precedente.Inoltre, ti consigliamo di svuotare la cache del tuo sito WordPress quando aggiungi e salvi le modifiche agli snippet di codice di intestazione e piè di pagina nel plug-in.
Modifica intestazioni e piè di pagina con temi
Indipendentemente dal fatto che modifichi i file del tema manualmente o utilizzi un plug-in, il codice inserito influisce sull'intero sito Web.È necessario utilizzare plug-in come Inserisci frammenti di codice HTML o provare blocchi HTML personalizzati nell'editor Gutenberg per inserire codice personalizzato solo in post o pagine specifici.Tuttavia, puoi inserire codice nelle intestazioni e nei piè di pagina con i temi più recenti come GeneratePress Premium e Astra Pro.Questi temi utilizzano gli hook standard wp_head e wp_footer e consentono l'applicazione di restrizioni personalizzate.Ad esempio, puoi semplicemente inserire i breadcrumb in un singolo post senza influire sulla pagina.
Qui useremo il tema Astra Pro per le istruzioni, puoi eseguire passaggi simili nel tema GeneratePress Premium usando l'opzione "Elementi".
Dopo aver installato il componente aggiuntivo Astra Pro, vai su Aspetto > Opzioni Astra.
Attiva l'opzione Layout personalizzato e fai clic sul collegamento Impostazioni per tale opzione.
Fare clic sul pulsante "Aggiungi nuovo" e incollare il codice che si desidera inserire nella casella.
Nella sezione Impostazioni layout personalizzati, fai clic sul menu a discesa Layout e seleziona l'opzione Hooks.
Inserisci il codice dell'intestazione nel tema Astra
Nell'elenco a discesa Azione, seleziona wp_head per la sezione dell'intestazione e wp_footer per la sezione del piè di pagina.
Se stai utilizzando solo uno snippet, lascia vuoto "priorità".Tuttavia, quando inserisci più codici nella stessa posizione di hook, assicurati di impostare l'ordine di priorità per inserire i codici.Puoi usare 10, 20, 30, ecc. come priorità, la più bassa avrà la precedenza sulle altre.
Fornisci i dettagli della spaziatura superiore e inferiore in pixel, se necessario.
Seleziona dove vuoi visualizzare il codice nel menu a tendina Display On.Puoi selezionare post, pagine, categorie specifici o inserire l'intero sito Web o inserire tipi di post specifici come post, pagine o qualsiasi tipo di post personalizzato utilizzato nel tuo sito Web.
Nell'elenco a discesa Ruolo utente, seleziona il ruolo utente per il quale desideri che il codice sia attivo.
Una volta completate tutte le impostazioni, fai clic sul pulsante Pubblica per rendere effettive le modifiche.
Motivi per utilizzare il plug-in Inserisci intestazione e piè di pagina
Ci sono così tanti aspetti negativi nella modifica dei file del tema o nell'utilizzo di un tema personalizzato che rimarrai fedele all'approccio del plug-in.Ecco alcuni dei vantaggi che puoi ottenere dall'utilizzo del plugin, tranne per il fatto che potresti non essere un tecnico o potresti essere un principiante.
Poiché il plugin store aggiunge gli script in una posizione separata, non devi preoccuparti della cancellazione del codice durante gli aggiornamenti o la modifica dei temi.Inoltre, non hai bisogno di temi figlio, poiché il plug-in funziona indipendentemente dal tema del tuo sito.
Rende facile e veloce l'aggiunta di codice personalizzato nelle intestazioni e nei piè di pagina.Inoltre, questo aiuta a mantenere l'organizzazione dei frammenti di codice in un'unica posizione.
È possibile riscontrare errori quando si sceglie di modificare il tema WordPress, quindi l'utilizzo di un plug-in può aiutare a ondeggiare, prevenire ed evitare tali errori.
Pensieri finali
In molti casi, devi cambiare l'aspetto, cambiare il modo o aggiungere altre funzionalità al tuo sito WordPress.In entrambi i casi, quando non sei tecnicamente propenso, ricorda di utilizzare il metodo del plug-in per inserire il codice di intestazione e piè di pagina.Mentre temi come Astra e GeneratePress possono aiutarti in questo, dovrai acquistare la versione premium.Inoltre, può rendere difficile la modifica dei temi, a quel punto dovrai cercare i plug-in da utilizzare.
