Facebook noscript Pixel

Come inserire uno script JS o PHP in WordPress?

Come inserire uno script JS o PHP in WordPress?
WordPress è senza dubbio alcuno il miglior CMS di sempre, ricco di temi professionali, soluzioni software infinite e sempre in continua evoluzione. Quasi per tutto infatti, esiste l’opportunità di scegliere il plugin già fatto e finito da installare sul nostro Sito Web.
Cosa troverai in questo articolo
Argomenti Correlati
Articolo | 13 Marzo 2019

Come inserire uno script JS o PHP in WordPress? Attraverso l’uso corretto del Tema Figlio o Child Theme e il plugin Header and Footer Scripts. Vediamo come.

WordPress è senza dubbio alcuno il miglior CMS di sempre, ricco di temi professionali, soluzioni software infinite e sempre in continua evoluzione. Quasi per tutto infatti, esiste l’opportunità di scegliere il plugin già fatto e finito da installare sul nostro Sito Web.

Ottimo certo, ma attenzione sempre al peso globale del pacchetto completo dato dal CMS, dal peso dei file media come immagini, video e da quello dei file come quelli di stile, JS o PHP.

Il problema del peso dei plugin installati

Ho bisogno di avere un plugin che mi permetta di visualizzare una data (GG-MM-AAA) fissa su ogni pagina o articolo.” – semplice necessità e di facile implementazione. Nel repository di WordPress, scelgo il plugin migliore o comunque compatibile, lo installo, attivo e lo configuro (se richiesto).

Argomenti Correlati
Articolo | 25 Marzo 2019

Nulla di più semplice e pratico se non fosse per il fatto che anche lui contribuisca ad aumentare il peso del tuo Sito Web e, quindi, a farti scendere il punteggio (score) che, ad esempio, rilevi su GTmetrix. Ogni singolo accessorio che installi è composto da uno o più file anche per eseguire una sola piccola funzione.

Ti ricordo che ottimizzare il tuo Sito Web in fatto di velocità e prestazioni, è pratica quanto mai fondamentale ai fini SEO e per un ottimale tuo Ritorno sull’Investimento (ROI).

Quindi, qualora non lo avessi già fatto, ti consiglio vivamente di utilizzare WP Rocket quanto prima per portare il tuo Sito in classe A seguendo la mia guida completa che trovi qui a fianco.

GTmetrix | Basso Score 

Problema in sintesi

Plugin a volte utili a volte no, pieni di file che incidono sulla pesantezza del Sito.

Soluzione in sintesi

Se possibile, iniettare il codice JS o PHP in modo da ridurre il peso del Sito.

Il problema dei codici da inserire manualmente

Altra questione è data dall’occasionale inserimento di codici javascript o php come quelli per tracciare a attivare determinate funzionalità.

  • AddThis: strumenti per la condivisione social.
  • Facebook Ads Pixel: misura le tue campagne pubblicitarie, ottimizzale e definisci il pubblico.
  • iubenda: generatore di Privacy e Cookie Policy
  • Google Analytics: acquisisci una conoscenza più approfondita dei tuoi clienti.
  • Google TAG Manager: gestisci tutti i tuoi tag senza modificare il codice.
  • ShareThis: strumenti per la condivisione social.

Prendiamo ad esempio il codice di Google TAG Manager. Questo è scritto in linguaggio JS e deve essere inserito in ogni parte del Sito Web:

<!– Google Tag Manager –>
<script async=”async”>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’XXXXXXXX’);</script>
<!– End Google Tag Manager –>

Altro ancora, ma sempre in questa categoria, script o meta informazioni che dovrebbero essere inserite nella parte superiore di una pagina/articolo (head). Un esempio su tutti il codice html per la verifica della proprietà del tuo Sito Web sulla Search Console di Google:

<meta name=”google-site-verification” content=”xxxxxxxxxxxx” />

In tal senso, il problema nasce non dalla pesantezza di inutili plugin piuttosto dal fatto che dovresti andare a modificare il core del tuo tema. Ora, ammesso di avere lo skill per sapere dove intervenire, la cosa grave riguarderebbe i futuri update. Ogni aggiornamento modificherebbe i file e, quindi, perderesti tutti i dati inseriti a mano.

Problema in sintesi

Codici JS o PHP da iniettare nel tema con il rischio di perdere le modifiche dopo eventuali aggiornamenti

Soluzione in sintesi

Se possibile, iniettare il codice JS o PHP senza perdere le modifiche.

Tema figlio e il plugin Header and Footer Scripts

Tema figlio o Child Theme

Argomenti Correlati
Articolo | 15 Marzo 2019

Dunque, come inserire uno script JS o PHP in WordPress?

Per risolvere questo problema ci vengono in aiuto due splendide soluzioni. La prima riguarda l’uso di quello che viene comunemente definito Tema Figlio o Child Theme. Questa versione ridotta del tema principale è ormai pratica comune ed è molto difficile non trovarla. Un tema professionale di un certo calibro (ti invito a leggere quali sono i migliori temi professionali in circolazione), di default, offre sempre questa possibilità.

Applicarla è molto semplice, si installa come fosse un normalissimo tema quindi devi scaricare il pacchetto compresso dal tuo fornitore e poi caricarlo su WordPress come faresti per qualsiasi altro template.

Aspetto → Aggiungi nuovo tema → Carica tema → Scegli file

Una volta installato, attivalo come tema principale ed il gioco è fatto.

Child Theme 

Il tema figlio è collegato direttamente a quello principale, precedentemente installato, e contiene un file CSS per gestire gli stili e un file functions-php per la modifica degli script. Sarà proprio questa la nostra soluzione per capire come inserire uno script JS o PHP in WordPress. La sua utilità estrema sta proprio qui, ovvero nel suo utilizzo al fine di apportare modifiche al Sito senza rischiare di perderle in futuro.

[bctt tweet=”In WordPress, per sicurezza, accertati sempre di avere solo tre temi installati. quello che hai scelto, il suo child e l’ultimo default disponibile del CMS.” username=”glpartengo”]

Dove si trova?

Il file functions.php (raggiungibile ovviamente anche tramite un Client FTP) è modificabile semplicemente raggiungendolo dal backend di WirdPress

Aspetto → Editor del tema → functions.php

Child Theme | functions.php 

Come si usa?

Questo file è stato realizzato per l’inserimento manuale di codici in linguaggio PHP; da non utilizzare per script JS!

Richiede certamente uno skill particolare ma è pur vero che in rete, si trovino milioni di tutorial che spiegano passo a passo eventuali implementazioni dei codici.

Ad esempio, torniamo a quello relativo alla meta informazione per la Search Console. Avremmo dovuto aprire la pagine dinamica del nostro tema principale, copiarlo dentro e non aggiornare MAI PIU’ il tema. Impossibile!

Con questa soluzione basta aprire l’editor del file come sopra descritto e copiarvi dentro il codice seguente che verrà così, “iniettato” in modo silente in tutto il Sito.

<?php
function google_header_metadata() {
?>
<meta name=”google-site-verification” content=”xxxxxxxxxxxx” />
}
add_action( ‘wp_head’, ‘google_header_metadata’ );
?>

Header and Footer Scripts

Questa soluzione, un semplice plugin, ti permette di inserire in modo dinamico e semplice, tutti i codici JS necessari al tuo Sito Web, senza dover modificare nessuna pagina del tema e senza appesantire ulteriormente il CMS.

Plugin → Aggiungi nuovo → Cerca nel repository

Plugin Header and Footer Scripts 

Dove si trova?

Una volta installato e attivato, raggiungerlo è facilissimo.

Impostazioni → Header and Footer Scripts

Plugin Header and Footer Scripts 

Come si usa?

In modo analogo a quanto detto per il file functions.php, anche in questo caso è sufficiente prendere il codice che ci interessa, come quello ad esempio di Google TAG Manager ad inizio articolo ed inserirlo (incolla) nella relativa sezione; in questo caso HEADER.

Plugin Header and Footer Scripts 

Conclusioni

Come inserire uno script JS o PHP in WordPress? Ora lo sappiamo, due piccoli trucchetti, due piccole ma potenti soluzioni per garantire al tuo Sito Web un controllo totale sulla pulizia e velocità del codice. Non immagini quanto sia possibile fare con questi due, quindi … non ti rimane altro che provare. 😉

Per ora … a presto e grazie.

Gian Luca Partengo

Gian Luca Partengo

Professionista del Web e del Marketing da oltre 20 anni. Ha lavorato per importanti Agenzie e Aziende italiane e ha creato e seguito passo a passo il Brand di numerosi Clienti. Oggi sviluppa progetti altamente professionali a partire da un'analisi sullo stato di salute di un Sito Web e della sua SEO Organica, fornendo anche consulenza a privati e aziende.

SEO AUDIT Tool

Verifica GRATIS la salute della SEO del tuo Sito Web!

Potrebbero Interessarti anche ...