Aggiungere JavaScript alle tue pagine o ai tuoi post di WordPress può migliorare la funzionalità e l'interazione degli utenti. Tuttavia, WordPress non ti consente di inserire JavaScript direttamente nei tuoi contenuti per impostazione predefinita.
Comprendiamo che questa limitazione possa essere frustrante, soprattutto se desideri personalizzare il tuo sito con funzionalità interattive o script di tracciamento.
Fortunatamente, ci sono modi semplici per aggiungere JavaScript al tuo sito WordPress. Puoi applicarlo a pagine o post specifici, o persino all'intero sito web. Inoltre, puoi utilizzare un plugin per snippet di codice come WPCode, come facciamo noi su WPBeginner, per rendere tutto più facile.
In questo articolo, ti guideremo attraverso due metodi semplici per implementare JavaScript nelle tue pagine o nei tuoi post di WordPress.
Cos'è JavaScript?
JavaScript è un linguaggio di programmazione che viene eseguito nel browser dell'utente, non sul tuo server. Questa programmazione lato client consente agli sviluppatori di fare molte cose interessanti senza rallentare il tuo sito web.
Se vuoi incorporare un lettore video, aggiungere calcolatori o qualche altro servizio di terze parti, ti verrà spesso chiesto di copiare e incollare uno snippet di codice JavaScript nel tuo sito WordPress.
Un tipico snippet di codice JavaScript potrebbe apparire così:
<script type="text/javascript">
// Some JavaScript code
</script>
<!-- Another Example: --!>
<script type="text/javascript" src="/path/to/some-script.js"></script>
Tuttavia, se aggiungi uno snippet di codice JavaScript a un post o a una pagina, WordPress lo eliminerà quando tenterai di salvarlo.
Tenendo presente questo, ti mostreremo come aggiungere facilmente JavaScript alle pagine o ai post di WordPress senza compromettere il tuo sito web. Puoi utilizzare i collegamenti rapidi qui sotto per passare direttamente al metodo che desideri utilizzare.
- Metodo 1. Aggiungere JavaScript ovunque sul tuo sito WordPress usando WPCode (Consigliato)
- Metodo 2. Aggiungere codice JavaScript a WordPress manualmente usando il codice (Avanzato)
- Suggerimento bonus: Altre guide agli snippet di codice
Iniziamo!
Metodo 1. Aggiungere JavaScript ovunque sul tuo sito WordPress usando WPCode (Consigliato)
A volte un plugin o uno strumento richiederà di copiare e incollare uno snippet di codice JavaScript sul tuo sito web per funzionare correttamente.
Di solito, questi script vanno nella sezione header o footer del tuo blog WordPress, in modo che il codice venga caricato ad ogni visualizzazione di pagina.
Ad esempio, quando installi Google Analytics, il codice deve essere eseguito su ogni pagina del tuo sito web in modo da poter monitorare i visitatori del tuo sito.
Puoi aggiungere manualmente il codice ai tuoi file header.php o footer.php, ma queste modifiche verranno sovrascritte quando aggiorni o cambi il tuo tema.
Ecco perché ti consigliamo di usare WPCode per aggiungere JavaScript ovunque sul tuo intero sito WordPress.
WPCode è il plugin per snippet di codice più potente disponibile per WordPress. Ti permette di aggiungere facilmente codice personalizzato a qualsiasi area del tuo sito e, soprattutto, è gratuito.
Innanzitutto, devi installare e attivare il plugin gratuito WPCode. Per maggiori dettagli, consulta la nostra guida passo passo su come installare un plugin WordPress.
Una volta attivato, devi andare su Snippet di codice » Header e Footer.
Qui vedrai tre campi separati etichettati 'Header', 'Body' e 'Footer'.
Ora puoi aggiungere il tuo codice JavaScript in una di queste caselle e quindi fare semplicemente clic sul pulsante ‘Salva’. WPCode caricherà automaticamente il codice che hai aggiunto in ogni pagina del tuo sito web.
Puoi anche aggiungere snippet di codice in qualsiasi altro punto del tuo sito, come all'interno di articoli o pagine.
Per fare ciò, vai semplicemente su Snippet di codice » + Aggiungi snippet e quindi fai clic su ‘Crea il tuo’.
Successivamente, seleziona ‘Snippet JavaScript’ come tipo di codice dall'elenco di opzioni che appaiono sullo schermo.
Ora vedrai una pagina ‘Crea Snippet Personalizzato’ dove potrai aggiungere un titolo per il tuo codice. Questo può essere qualsiasi cosa per aiutarti a ricordare a cosa serve il codice.
Dopodiché, incolla il tuo codice nella casella ‘Anteprima Codice’.
Poi, dovrai scorrere fino a trovare la sezione ‘Inserimento’.
Ora, tutto ciò che devi fare è selezionare una ‘Posizione’ per il codice dal menu a discesa. Trova ‘Pagina, Post, Tipo di Post Personalizzato’ e scegli dove vuoi che il codice appaia nella pagina o nel post.
Se scegli di far inserire a WPCode lo snippet prima o dopo un paragrafo, potrai scegliere prima o dopo quale paragrafo specifico nel post apparirà.
Ad esempio, se inserisci 1 nel campo ‘Numero Inserimento’, lo snippet di codice apparirà prima o dopo il primo paragrafo. Usa 2 per il secondo paragrafo, e così via.
Dopodiché, devi solo fare clic sull’interruttore in cima allo schermo per passare a ‘Attivo’ e poi fare clic sul pulsante ‘Salva Snippet’ accanto ad esso.
Questo è tutto ciò che serve per rendere il tuo snippet di codice live sul sito!
Metodo 2. Aggiungere codice JavaScript a WordPress manualmente usando il codice (Avanzato)
Nota: I seguenti metodi sono per principianti e proprietari di siti web. Se stai imparando lo sviluppo di temi o plugin per WordPress, allora devi accodare correttamente JavaScript e fogli di stile ai tuoi progetti.
Con questo metodo, devi aggiungere codice ai tuoi file WordPress. Se non l'hai mai fatto prima, allora dovresti consultare la nostra guida su come copiare e incollare codice in WordPress.
Per prima cosa, ti mostreremo come aggiungere codice all'intestazione del tuo sito WordPress. Devi copiare il seguente codice e aggiungerlo al tuo functions.php.
function wpb_hook_javascript() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_head', 'wpb_hook_javascript');
Aggiungere JavaScript a un Post WordPress Specifico Utilizzando il Codice
Se desideri aggiungere JavaScript a un singolo post di WordPress, dovrai aggiungere la logica condizionale al codice.
Diamo prima un'occhiata al seguente snippet di codice:
function wpb_hook_javascript() {
if (is_single ('5')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Il codice sopra eseguirà JavaScript solo se l'ID del post corrisponde a '5'. Assicurati di sostituire '5' con il tuo ID post.
Per trovare l'ID del post, apri semplicemente il post in cui desideri eseguire JavaScript. Quindi, nell'URL della pagina, troverai l'ID del post.
Aggiungere JavaScript a una Pagina WordPress Specifica Utilizzando il Codice
Se desideri aggiungere JavaScript a una singola pagina di WordPress, dovrai aggiungere la logica condizionale al codice, proprio come sopra.
Dai un'occhiata al seguente esempio:
function wpb_hook_javascript() {
if (is_page ('10')) {
?>
<script type="text/javascript">
// your javscript code goes here
</script>
<?php
}
}
add_action('wp_head', 'wpb_hook_javascript');
Il codice sopra eseguirà JavaScript solo se l'ID della pagina è '10'. Assicurati di sostituire '10' con il tuo ID pagina.
Puoi trovare l'ID della pagina utilizzando lo stesso metodo di cui sopra. Apri semplicemente la pagina in cui desideri eseguire JavaScript e annota l'ID della pagina nell'URL.
Aggiungere JavaScript a un Post o Pagina WordPress Specifica Utilizzando il Codice nel Footer
Se desideri che JavaScript venga eseguito nel footer del tuo sito invece che nell'header, puoi aggiungere il seguente snippet di codice al tuo sito web.
function wpb_hook_javascript_footer() {
?>
<script>
// your javscript code goes
</script>
<?php
}
add_action('wp_footer', 'wpb_hook_javascript_footer');
Questo snippet di codice si aggancia a wp_footer invece che a wp_head. Puoi anche aggiungere tag condizionali per aggiungere JavaScript a post e pagine specifici come negli esempi precedenti.
Suggerimento bonus: Altre guide agli snippet di codice
Ora che hai imparato come aggiungere facilmente JavaScript a pagine o post di WordPress, vediamo alcuni altri snippet di codice personalizzati per espandere ulteriormente le funzionalità del tuo sito!
Aggiungere un Fisarmonica FAQ jQuery in WordPress
jQuery, una comoda libreria JavaScript, aggiunge funzionalità interattive al tuo sito.
L'utilizzo di un fisarmonica FAQ con jQuery in WordPress aiuta a mantenere organizzato il tuo contenuto. Visualizza domande e risposte in un formato comprimibile, rendendo più facile per i visitatori trovare informazioni senza scorrere testi lunghi.
Ma non è tutto.
Un fisarmonica FAQ può migliorare il tuo posizionamento sui motori di ricerca strutturando i contenuti in un modo che piace ai motori di ricerca. Su WPBeginner, abbiamo anche trovato utili le fisarmoniche FAQ con jQuery per affrontare domande comuni, attirare più visitatori e migliorare la SEO.
Per maggiori informazioni, puoi consultare il nostro articolo su come aggiungere un accordion FAQ jQuery in WordPress.
Incorporare codice iFrame in WordPress
Un iFrame, o inline frame, ti permette di incorporare video o altri contenuti sul tuo sito web senza dover ospitare tu stesso i file. Questo risparmia larghezza di banda e spazio di archiviazione, rendendolo una scelta migliore rispetto all'upload diretto di video su WordPress, cosa che non dovresti mai fare in primo luogo.
L'utilizzo di un iFrame può anche aumentare la velocità e le prestazioni del tuo sito, poiché recupera contenuti da una fonte esterna.
Per saperne di più, puoi consultare la nostra guida su come incorporare facilmente codice iFrame in WordPress.
Creare un feed RSS separato per ogni tipo di post personalizzato in WordPress
WordPress ti consente di creare tipi di post personalizzati su misura per le tue specifiche esigenze di contenuto, come recensioni di film, prodotti o testimonianze. Questa funzionalità ti aiuta a organizzare meglio il tuo sito e migliora l'esperienza utente.
Tieni presente che puoi configurare feed RSS per ogni tipo di post personalizzato, fornendo ai visitatori feed specializzati che consentono un coinvolgimento più personalizzato con i tuoi contenuti.
Se desideri maggiori informazioni, puoi leggere la nostra guida su come creare un feed RSS separato per ogni tipo di post personalizzato in WordPress.
Per altre idee su snippet personalizzati, sentiti libero di consultare le nostre selezioni di esperti dei snippet di codice WordPress più utili per principianti.
Speriamo che questo articolo ti abbia aiutato a imparare come aggiungere facilmente JavaScript alle pagine o ai post di WordPress. Potresti anche voler consultare la nostra guida su come aggiungere correttamente JavaScript e stili in WordPress e le nostre selezioni di esperti di trucchi estremamente utili per il file functions di WordPress.
Se ti è piaciuto questo articolo, iscriviti al nostro canale YouTube per tutorial video su WordPress. Puoi anche trovarci su Twitter e Facebook.
Mesht
Con il primo metodo (Wpcode), posso aggiungere uno script solo a 1 pagina?
Supporto WPBeginner
You can use the first method to add it to multiple pages not just one
Amministratore
Dennis Muthomi
Gestisco molti siti di clienti e WPCode è stato il mio strumento di riferimento. È super affidabile quando ho bisogno di aggiungere script di tracciamento o funzionalità personalizzate ai siti web dei clienti.
Una cosa che devo fare quando aggiungo codice è eseguire sempre un backup del sito prima di usare WPCode. Testo tutto prima su staging. Fidati, mi ha risparmiato tanti grattacapi! Soprattutto quando gli script entrano in conflitto con le funzionalità del tema.
E la parte migliore è che se qualcosa va storto, puoi semplicemente disattivare lo snippet di codice problematico. Così semplice!
Jiří Vaněk
WPCode mi ha salvato l'intero sito web in questo modo, che avevo già completato, ma alla fine abbiamo scoperto che il menu funziona molto male sui dispositivi mobili. Ho trovato una soluzione sotto forma di JavaScript, ma non sapevo dove o come inserirlo nel sito web. Questo mi ha risparmiato tutto il lavoro e ha risolto il problema della chiusura del menu sui dispositivi mobili.
Supporto WPBeginner
Lieto di sapere che il plugin è stato utile!
Amministratore
ala
Mi chiedo perché non usare il metodo più semplice, usare direttamente il blocco “HTML personalizzato” di WordPress per inserire codice JavaScript in un post o in una pagina. L'ho provato e testato. Nessun problema. Metodo molto, molto, molto semplice.
Supporto WPBeginner
Dipenderebbe dal codice specifico, i metodi che mostriamo in questa guida servono ad aggiungere il codice alla sezione head poiché la maggior parte dei JavaScript vuole essere eseguita nella sezione head.
Amministratore
Rejane
Ho un child theme attivo e ho usato il plugin “Insert Headers and Footer” per aggiungere un codice JavaScript per un servizio di email marketing. Ha funzionato! Ma sfortunatamente, ho dovuto annullare il mio account con questo servizio e ora vorrei rimuovere il codice JavaScript. Come posso farlo quando sto usando un child theme? C'è un modo semplice o un altro plugin per questo?
Supporto WPBeginner
You would remove the code from the Insert Headers and Footers plugin and it would remove the code from your site
Amministratore
Paul Liles
Non riesco a trovare il menu con i tre puntini da nessuna parte? Ho bisogno di aiuto.
Supporto WPBeginner
Dovrebbe trovarsi in cima alla pagina di modifica. Se stai usando l'editor classico, si troverebbe sotto Opzioni Schermata.
Amministratore
Eleni
Non vedo l'opzione Campi personalizzati nella scheda Opzioni Schermata. Sto usando un sito web self-hosted e ho installato e attivato il plugin Code Embed.
Supporto WPBeginner
Se stai usando l'editor a blocchi, l'impostazione si è spostata nell'area delle preferenze.
Amministratore
Ashley
Questo sito è FANTASTICO!!! Questo è il terzo post di fila in cui ho centrato il bersaglio trovando quello che mi serviva nel modo più semplice possibile. Grazie!!
Supporto WPBeginner
Glad our guides were helpful
Amministratore
Amico
Ehi, ottime cose WPbeginners! Il secondo metodo ha funzionato alla grande. Avevo una domanda però. Se volessi aggiungere un altro codice js per un altro scopo, come dovrebbe iniziare il codice? Perché tutto ciò che aggiungo dopo il codice è in grigio. Sono perso qui. Voglio che faccia la stessa cosa ma per un'altra pagina. Qualche idea sarà apprezzata.
Supporto WPBeginner
Dipenderebbe molto dal codice che stai usando, ma vorresti assicurarti che il codice sia prima del tag
/scriptAmministratore
Jonathan
Grazie. Questo articolo è stato estremamente utile. Ho optato per l'opzione functions.php. Ha funzionato bene.
Supporto WPBeginner
Glad our guide was helpful
Amministratore
Elise
Ha funzionato. Grazie mille!
Supporto WPBeginner
You’re welcome
Amministratore
Martin
Domanda sul Metodo 3:
Dopo aver inserito il valore e cliccato su “aggiungi campo personalizzato”, come faccio a visualizzare il codice sul frontend del mio sito web?
Devo inserire “{{CODEmyjscode}}” usando un widget di shortcode o un editor di testo nella pagina?
Supporto WPBeginner
per il momento vorresti usare l'editor di testo o di codice.
Amministratore
Bret Bernhoft
Quando ho iniziato a lavorare con WordPress, JavaScript mi sembrava un'impossibilità. Ma andando avanti fino ad oggi, scrivo il linguaggio ogni giorno; spesso in associazione con WordPress.
Vorrei che mi fosse stato più chiaro quanto sarebbe stato facile scrivere JavaScript, quando ho iniziato questo percorso. Grazie per gli strumenti e i consigli. Dovrò provarci.
Supporto WPBeginner
Glad we could share some easy methods for adding JavaScript to your site!
Amministratore
ibrahim
Ha funzionato e mi ha aiutato molto. Grazie!
Supporto WPBeginner
You’re welcome
Amministratore
Kat
Ho provato ad aggiungere JS personalizzato nel mio post, ma non succede nulla. Ho seguito le tue esatte istruzioni per il Metodo 3, ma quando vado ad anteprima la pagina c'è solo spazio vuoto dove dovrebbe esserci il JS. Hai idea del perché?
Supporto WPBeginner
Dovresti dare un'occhiata alle FAQ del plugin per i motivi più comuni di questo problema e come risolverlo.
Amministratore
Samuel
Come funziona questo con il nuovo sistema a blocchi di Wordpress?
Sto cercando di incorporare questo in una pagina, ma nella preview appare solo come {{code1}}
Supporto WPBeginner
Dipenderebbe dal metodo che stai usando sul tuo sito per il plugin, hanno un aggiornamento nella loro sezione FAQ su come usarlo al momento.
Amministratore
Akash
Grazie per queste informazioni. Post davvero incredibile e utile.
Supporto WPBeginner
You’re welcome, glad our article was helpful
Amministratore
Alex
Ciao, ottima guida! Il problema è che non ho "Campi personalizzati" nelle opzioni dello schermo… Hai idea del perché?
Supporto WPBeginner
Il tuo sito è su WordPress.com?
Amministratore
James
Ciao. Ho ingaggiato un programmatore per creare uno strumento, che ha realizzato in Javascript. Ho usato Weebly ma Weebly è diventato poco reattivo alle richieste di aiuto, come testimoniano centinaia di blog. Quindi, sto cercando alternative a Weebly. Wordpress potrebbe gestire uno strumento Javascript da 2 MB?
Grazie,
Supporto WPBeginner
Il tuo hosting determinerebbe se uno strumento del genere potesse essere utilizzato, non la piattaforma del tuo sito web, e a seconda di come è stato impostato lo strumento si determinerebbe se puoi trasferirlo.
Amministratore
Matt
E se avessi bisogno di aggiungere lo script solo in una singola pagina ma nell'head e non nel body? Sto cercando di aggiungere un pixel di conversione di Google solo alla mia pagina di ringraziamento per l'invio del modulo.
Supporto WPBeginner
You would want to take a look at the section of the article called: Adding JavaScript to a Specific WordPress Post or Page Using Code
Amministratore
quy
funziona come per magia. Grazie mille
Supporto WPBeginner
You’re welcome, glad our article could help
Amministratore
Manjeet Chhillar
Grazie per questo post molto utile.
La mia domanda è: come posso implementare il "Metodo 2" su più post? Devo aggiungere l'ID del post di ogni singolo post separato da virgola?
Supporto WPBeginner
sì, dovresti mettere le virgole fuori dalle virgolette singole e iniziare un nuovo set di virgolette per questo metodo
Amministratore
Deborah
Grazie per aver condiviso i tre metodi che gli utenti WordPress possono utilizzare per aggiungere JavaScript a post o pagine. Da quello che ho letto nella pagina del plugin Insert Headers and Footers nel repository, il plugin non utilizza il metodo enqueue per aggiungere gli script. Che è il metodo consigliato per aggiungere script in WordPress.
Ho capito male? O Insert Headers and Footers utilizza enqueue per aggiungere script? Se non utilizza enqueue, sai quando il plugin verrà aggiornato per utilizzare enqueue?
Supporto WPBeginner
Il plugin al momento non sta accodando gli script aggiunti ad esso poiché non tutto ciò che viene aggiunto con il nostro plugin potrebbe voler essere accodato. Se desideri accodare il codice aggiunto, dovresti usare un altro metodo.
Amministratore
Dave G
Bello, grazie. È successo che l'ID del post esatto su cui dovevo eseguire javascript era il numero 16. “`if (is_single (’16’)) { “`
Vieni dal futuro?
Supporto WPBeginner
Not yet at least
Amministratore
Golu Arjun
Grazie per questo post. È molto utile. È possibile personalizzare
Supporto WPBeginner
You’re welcome
Amministratore
Thomas
Devo aggiungere uno script a tutti i post del mio blog. Ho il plugin per ogni singolo post. Il problema è che ci sono migliaia di post e dobbiamo aggiungere lo script a tutti. Suggerimenti? Grazie in anticipo.
Supporto WPBeginner
L'opzione Inserisci intestazioni e piè di pagina inserirà un codice su ogni post e pagina per te se utilizzano lo stesso codice.
Amministratore
Thomas
Grazie per la tua rapida risposta.
Vogliamo che lo script venga eseguito solo sui Post. Non vogliamo che venga eseguito su tutte le pagine.
Supporto WPBeginner
Se avessi un widget che viene aggiunto solo ai post, potresti provare ad aggiungere il codice in un widget.
Ann
Ho provato a usare gli script di Intestazioni e Piè di pagina e il jQuery sembra non funzionare correttamente.
Supporto WPBeginner
Dipenderebbe dal codice specifico che stai aggiungendo al sito per i possibili motivi per cui potrebbe non funzionare. Potresti voler assicurarti con chi hai preso il codice che il codice stesso funzioni.
Amministratore
Andrew Golay
Si prega di correggere il tuo plugin Intestazioni / Piè di pagina o cambiare questo articolo, grazie.
Supporto WPBeginner
Il nostro plugin sta attualmente funzionando dai test, ma certamente daremo un'altra occhiata.
Amministratore
lynn
grazie!! Questo è stato molto utile.
Supporto WPBeginner
Glad it was helpful
Amministratore
Remco
Grazie per questo ottimo post!
È possibile implementare i dati strutturati sulle pagine di Woocommerce con questo metodo (JSON-LD)?
Supporto WPBeginner
Probabilmente potresti, ma se hai un plugin SEO che stai usando attualmente, dovresti verificare con quel plugin per vedere se il plugin lo fa già.
Amministratore
graham
Una raccolta ben presentata delle opzioni più conosciute per quella che sta diventando un'esigenza comune. Tuttavia, molti utenti di WordPress non sono (e non vogliono essere) programmatori. Per loro, JavaScript in qualsiasi forma è troppo spaventoso; ecco perché usano WordPress con la sua promessa di "nessuna programmazione richiesta".
C'è un'altra possibilità: usare script personalizzati invece di JavaScript e incorporarli direttamente nella pagina. Puoi metterli in qualsiasi componente, anche se preferisco .
Tutto ciò di cui hai bisogno è qualcosa che possa compilare ed eseguire lo script. È difficile trovare plugin che possano farlo; le mie ricerche non ne hanno ancora trovati. Tuttavia, come programmatore JavaScript, sono stato in grado di scriverne uno e metterlo nella libreria come EasyCoder. Gli script assomigliano all'inglese, hanno circa la stessa complessità di SQL e possono fare la maggior parte delle cose comunemente richieste per gestire contenuti e interattività in una pagina web. EasyCoder è anche completamente pluggable, quindi altri programmatori possono aggiungere moduli da soli.