Molte volte c'è bisogno di inserire del codice javascript oppure altro nella sezione WordPress Head. In questo WordPress Tutorial cerchiamo di capire come è possibile farlo, aiutandoci con l'esempio di Google Analytics, ma in pratica si può inserire qualsiasi tipo di codice che sia necessario ai nostri scopi.
Dopo aver realizzato un sito in WordPress e magari averlo subito pubblicato, una delle cose basilari e più importanti da fare è sicuramente quella di monitorare gli accessi e il comportamento degli utenti che visitano il blog o sito Web WordPress, perchè conoscere chi visita e come interagisce con i contenuti che hai creato ti aiuterà enormemente a migliorare il tuo sito web in generale e ad aumentare visite e vendite se hai un sito web ecommerce.
Google Analytics è, di sicuro, lo strumento più utilizzato e tra i più apprezzati a livello globale, ma non solo, Tag Manager, Facebook Pixel e altri strumenti di monitoraggio ti serviranno per capire e valutare ed anche cambiare, se stai sbagliando qualcosa, e vuoi ottenere più audience.
Tutti questi strumenti ti chiederanno di inserire codice nel tuo sito web e se non sai come fare dovrai usare un plugin che lo faccia per te, ma c'è però anche da dire che, per il posizionamento nella serp, Google ormai tiene conto anche della velocità di caricamento del sito ed è cosa nota che, più elevato è il numero dei plugin installati, maggiore sarà il rallentamento avvertito dall’utente nel caricamento delle pagine del nostro blog.
Ed allora vediamo come semplicemente, in poche mosse, si può inserire il codice nei punti indicati senza l'aiuto di plugin.
Questa operazione, se avete voglia di farla, porta via poco tempo ed aiuta ad imparare molte cose, tra le quali importanti sono:
- come funzionano in pratica gli hook di WordPress.
- come si può inserire del codice in WordPress in maniera corretta.
Intanto voglio dirti che qualsiasi template tu stia usando puoi effettuare queste operazioni, perchè utilizzeremo degli hook messi a disposizione da WordPress stesso, e che non interferiscono con l'utilizzo del template grafico, qualsiasi esso sia.
Molti sviluppatori o webmaster preferiscono inserire manualmente il codice di monitoraggio di Google, ma lo fanno in molti modi per la maggior parte non corretti, che all'atto pratico possono funzionare, ma poi potrebbero creare in futuro dei problemi che sul momento non sono stati valutati correttamente da chi fa questa operazione.
In realtà la procedura, fatta nella maniera corretta, è breve, semplice ed in futuro non creerà problemi.
Per non avere problemi, in assoluto, bisognerebbe operare con un child theme, per non toccare il codice del tema principale e questo per la verità bisognerebbe farlo sempre.
Le poche righe di codice che ci viene richiesto di inserire da Google o Facebook vanno inserite nel file functions.php che, se si tratta del tema principale, potrebbe essere sovrascritto in un futuro aggiornamento, con, purtroppo la perdita del lavoro fatto, ma se inserite nel file functions.php del tema child si possono conservare per sempre senza problemi se il child, come credo succeda nella maggior parte dei casi, non viene aggiornato.
Vediamo in pratica come si fa nella maniera corretta.
Wp_head: inserire codice in WordPress Head
In genere i codici di monitoraggio che ci viene richiesto di inserire, dovrebbero essere inseriti tra i tags HTML <head> e </head>. In WordPress questo si può fare in modo corretto e semplice utilizzando l'action hook wp_head che ci viene fornito direttamente dal CMS e da la possibilità di avere un "aggancio" alla WordPress Head, e questo ripeto, funziona su qualsiasi template wordpress.
Non mi dilungo sul codice fornito da Google o Facebook, le spiegazioni su esso e su dove inserirlo in genere le forniscono in modo esauriente gli stessi fornitori.
Quindi per "piazzare" del codice javascript che ci viene ad esempio fornito da Google Analytics nel punto giusto basta semplicemente usare questo hook, scrivendo il codice nel file functions.php cosi:
Il codice è diviso in due parti: l'hook vero e proprio, e la function dove si inserisce il codice.
Questi due punti sono interessanti perchè in pratica ti consentono di inserire qualsiasi tipo di codice accettato in HTML Head, sia esso javascript o ad esempio CSS e quindi in pratica si potrebbero inserire molte cose.
Ad esempio se volessimo inserire dello styling CSS:
Ma tornando alle richieste di inserimento di codice di monitoraggio in genere si tratta di javascript per cui il codice che ci forniranno va inserito tra i tags HTML <script> e </script> e per inserirlo proprio alla fine prima della chiusura del tag HTML </head> è sufficiente aggiungere un parametro all'hook vero e proprio, ad esempio: add_action('wp_head', 'hook_javascript', 99); che semplicemente mette in coda e inietta dopo tutti gli altri, proprio per ultimo il codice che noi vogliamo inserire.
Capito questo, si può intuire che in questa maniera possiamo inserire in pratica qualsiasi snippet di codice javascript nell'HTML head, Google, Facebook o altro, quello che ci serve.
Facciamo un esempio pratico con il codice completo:
Wp_body_open: Inserire codice nel body HTML
Non finisce qui, nel caso per esempio di Google Tag Manager, ma può succedere anche per altri monitoraggi, viene richiesto l'inserimento di codice subito dopo il tag HTML <body> e allora ci viene in aiuto un altro action hook di WordPress wp_body_open e cosi come abbiamo usato il precedente possiamo usare questo semplicemente cambiando il nome dell'hook (ed ovviamente la funzione), vediamo come con un codice completo di esempio:
La cosa interessante è che questi due hooks si possono usare su qualsiasi template WordPress senza inserire plugins e senza interferire minimamente sul caricamento di WordPress stesso con evidenti benefici in termini di velocità e praticità.
