Aggiungi Javascript al sito WordPress - 7 metodi passo-passo

In genere ci sono molte ragioni per cui vuoi aggiungere Javascript a WordPress, sia una piccola modifica a una funzionalità o forse stai cercando di aggiungere uno script di terze parti. Considerareless del motivo per cui vuoi farlo, vuoi assicurarti di non sbagliare, perché potresti danneggiare il tuo sito Web o creare un collo di bottiglia delle prestazioni.

L'aggiunta diretta di Javascript alle pagine e ai post di WordPress non è possibile, quindi suggeriremo diversi modi per aggiungere codice Javascript ai siti Web e quali dovrebbero essere utilizzati nelle diverse circostanze che potresti incontrare. 

Se hai fretta, usa il sommario qui sotto per scorrere fino alla parte pertinente dell'articolo.

Questo articolo include modifiche al codice di WordPress. Se non sei sicuro di modificare il codice da solo, potresti volerlo scopri come reclutare il miglior sviluppatore WordPress per la tua azienda oppure dai un'occhiata alle seguenti opzioni di sviluppo economiche. 

Se non sei sicuro che sia giusto per te e cosa fare in fretta, dai un'occhiata ad alcuni concerti di Fiverr che possono farlo per te rapidamente

Fai clic qui per trovare esperti economici sulle correzioni di WordPress

Cos'è JavaScript?

Se stai leggendo questo post, probabilmente conosci già cos'è JavaScript.

Tuttavia, per renderlo accessibile a tutti, descriveremo rapidamente cos'è JavaScript e cosa fa. Sentiti libero di saltare questa parte se già lo sai.

JavaScript è un linguaggio di programmazione che viene eseguito in un browser. Può essere richiamato dal server Web ma viene eseguito all'interno del browser del visitatore.

Ciò offre un ampio margine per fargli fare cose interessanti come l'incorporamento di video e l'aggiunta di funzioni.

Ad esempio, puoi utilizzare JavaScript per incorporare un lettore video in modo che il tuo server web non debba farlo.

Ciò migliora l'esperienza dell'utente includendo video, senza aggiungere oneri al server Web per riprodurre il video.

JavaScript viene utilizzato anche in app mobili, giochi, applicazioni server, sviluppo front-end e, più recentemente, sviluppo relativo all'IA.

Puoi usare JavaScript in WordPress?

Sì, puoi usare JavaScript in WordPress. Data la flessibilità intrinseca del CMS, puoi utilizzare JavaScript per aggiungere elementi interattivi o posizionare API di terze parti su una pagina.

Gli usi sono molti e vari, ma poiché JavaScript viene eseguito dal browser dell'utente, può fare molto senza rallentare il server web.

Puoi aggiungere script in diversi modi, come discuteremo tra poco.

Prima di apportare modifiche ai file, ti consigliamo di creare un tema figlio e/o eseguire prima il backup del tuo sito web.

Non puoi essere troppo attento!

Come aggiungere JavaScript a WordPress

Esistono diversi modi per aggiungere codice Javascript personalizzato al tuo sito WordPress, ciascuno con i propri usi:

1. Aggiungi uno script in pagine selezionate utilizzando un plug-in come WPCode
2. Aggiungi lo script a una pagina specifica o singola di tua scelta, o più pagine usando functions.php
3. Aggiungi JavaScript a tutte le pagine
4. Aggiungi un file Javascript all'intestazione del tema
5. Utilizzo dell'hook wp_head per aggiungere JavaScript personalizzato
6. Aggiungi JavaScript al footer di WordPress
7. Aggiunta di JavaScript al video di WordPress
8. Aggiungi JavaScript a un widget di WordPress

Esaminiamo ciascuno di questi metodi in dettaglio.

Quindi condivideremo rapidamente come eseguire il debug di JavaScript dopo averlo aggiunto a una pagina.

Note:: alcune di queste tecniche comportano modifiche ai file core. Sebbene di solito non sia una buona idea modificare functions.php e altri file principali di WordPress, vogliamo mostrarti tutti i modi per aggiungere codice.

Non consigliamo necessariamente di apportare modifiche in questo modo, ma crediamo nel darti tutte le informazioni e quindi prendere la tua decisione.

1. Usa un plugin come WPCode

Se desideri semplicemente utilizzare un plug-in per incorporare un riferimento javascript al file di intestazione o piè di pagina del tema WordPress, il plug-in WPCode è un'opzione facile e gratuita.

Ti consigliamo di utilizzare un plug-in per tutte le modifiche al codice in quanto mantiene tutto pulito e può evitare qualsiasi problema lungo la strada.

Invece di modificare direttamente i file del tema con il codice Javascript personalizzato, un plugin ti permette di inserire il codice, che verrà poi aggiunto all'intestazione o al piè di pagina del tuo sito, a seconda delle opzioni che hai scelto. 

Questo plugin supporta diverse opzioni, quindi descriveremo solo quelle più comuni che dovrai utilizzare.

Puoi scarica WPCode qui o installalo utilizzando la funzione Install Plugins di WordPress.

Installa il plugin WPCode:

• Accedi al backend o all'amministratore del tuo sito.
• Vai su plugin > Aggiungi nuovo
• Cerca il plug-in "WPCode" e fai clic su Ora l'installazione.
• Una volta installato, fare clic su Attivare

Ora puoi caricare uno script personalizzato senza un file (ad esempio per aggiungere uno script che ti è stato fornito come Google Analytics) o caricare un file Javascript personalizzato. 

L'opzione più comune che puoi utilizzare con questo plugin è l'opzione per aggiungere il codice direttamente in WordPress.

Questo può essere utilizzato quando si utilizza un servizio di terze parti, come Google Analytics, Drip o un altro strumento che richiede l'aggiunta di uno script al tuo sito. Prendi lo script e rilascialo nel file Intestazione e piè di pagina globali finestra.

Puoi scegliere di aggiungere lo script a Intestazione, Corpo o Piè di pagina. Dovresti ricevere indicazioni dal fornitore dello script in quale di queste sezioni è necessario aggiungere lo script.

Diciamo che vuoi aggiungerlo all'intestazione:

Clicchi Salva modifiche finire.

Il plug-in WPCode ora aggiungerà il codice a ogni pagina del tuo sito web.

Ricarica il front-end e controlla la fonte del tuo sito web per assicurarti che il codice sia ora visualizzato. È anche una buona idea sfogliare alcune pagine per confermare che tutto funzioni ancora bene.

WPCode ti consente anche di creare i tuoi frammenti di codice.

Puoi anche inserire frammenti di codice in qualsiasi punto del tuo sito Web, ad esempio all'interno di post o pagine, prima o dopo un post, prima o dopo il contenuto o una serie di altre opzioni di cui potresti aver bisogno.

Naviga semplicemente verso Frammenti di codice > Aggiungi frammento e quindi selezionare Crea il tuo.

Ora verrai indirizzato a a Crea uno snippet personalizzato dove puoi dare un titolo al tuo codice e incollarlo nel file Anteprima del codice scatola.

Quindi, dal Tipo di codice menu a tendina, scegli Frammento JavaScript.

Quindi, scorri semplicemente verso il basso fino a raggiungere il Inserimento la zona.

Non resta che scegliere una posizione per il codice dal menu a tendina. Individuare Pagina, Post, Tipo di post personalizzato e specifica dove vuoi che il codice venga visualizzato nella pagina o nel post.

Se vuoi che WPCode metta lo snippet prima o dopo un paragrafo, puoi specificare quale paragrafo nel post deve apparire prima o dopo.

Se inserisci 1 nel campo "Inserisci numero", ad esempio, lo snippet di codice apparirà prima o dopo il primo paragrafo. Per il secondo paragrafo, usa 2 e così via.

Dopodiché, sposta semplicemente l'interruttore nella parte superiore dello schermo su Attivoe quindi fare clic su Salva frammento opzione accanto.

Questo è tutto ciò che serve per aggiungere JavaScript a WordPress!

Il vantaggio principale dell'utilizzo di un plug-in è che è un'opzione adatta ai principianti. Non devi preoccuparti di modificare i file del tuo tema. Il plugin WPCode potrebbe anche tornare utile se stai cercando una cucituraless modo di aggiungere altri tipi di codice e CSS personalizzati.

Tuttavia, lo svantaggio di questo metodo è che comporta l'installazione di un plug-in di terze parti, che alcuni proprietari di siti cercano di evitare.

Se vuoi mantenere le tue estensioni al minimo, potresti stare meglio usando uno degli altri metodi.  

Anche se sembra abbastanza semplice, potrebbe essere fuori dalla tua zona di comfort, quindi se vuoi farlo rapidamente, dai un'occhiata ad alcuni sviluppatori su Fiverr chi può farlo per te.

Fai clic qui per trovare esperti economici sulle correzioni di WordPress

2. Aggiungi JavaScript a una specifica pagina o post di WordPress

Questo tweak del codice utilizzerà l'estensione funzioni file trovato nella cartella dei modelli per aggiungere un file .JS di tua scelta solo a una singola pagina di tua scelta.

Questo utilizza il È_PAGINA funzione che puoi trovare qui: 

Puoi effettivamente utilizzare varie altre opzioni se desideri aggiungere lo script solo in condizioni specifiche come:

• is_single(),
• is_front_page(),
• is_home,
• is_admin ecc. 

Se è necessario aggiungere il file a tutte le pagine, continuare a scorrere per trovare altre alternative a questo metodo di seguito.

• Innanzitutto, dovrai identificare l'ID della pagina a cui desideri aggiungere lo script.
• Puoi farlo andando alla pagina a cui vuoi aggiungere il file, fai clic Modifica quindi prendi l'ID della pagina dall'URL come puoi vedere di seguito. L'ID è il numero che si trova nell'URL della barra del browser.

• Ora che hai l'ID della pagina, dovrai caricare il file .js in una posizione. Ti consigliamo di caricare il file .js nella cartella dei modelli, magari nella directory figlio.
• Dopo averlo caricato, devi prendere nota esattamente della directory e del nome del file .JS, che usiamo al posto di PATH_TO_JS_FILE di seguito. Ad esempio, il tuo file potrebbe essere in: https://www.yourwebsite.com/wp-content/themes/twentynineteen/js/myjsfile.js
• Prendi nota dell'URL completo e sostituisci PATH_T_JS_FILE di seguito. Dovrai anche sostituire l'ID che hai trovato dall'alto.
• Aggiungi il codice completo di seguito alla fine del file funzioni file del tuo modello.

function collectiveray_carica_js_script() {
  if (is_page (ID)) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // o usa la versione seguente se sai esattamente dove si trova il file
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  }
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Se sai esattamente dove hai posizionato il file JS, puoi utilizzare una leggera variazione di wp_enqueue_script: 

wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');

In questo caso, il file /js/mysript.js è il percorso del file che desideri aggiungere.

Una volta ricaricata la pagina, scoprirai che il file è stato aggiunto. Puoi confermarlo facendo clic su Visualizza sorgente della pagina.

Se invece di aggiungere il file Javascript a una pagina, vuoi aggiungerlo a una singola pagina, possiamo usare un leggero aggiustamento di questa funzione, per farlo applicare a un singolo post. Puoi utilizzare qualsiasi variazione di quanto segue:

• is_single ('17') - utilizza l'ID del post
• is_single ("Titolo del mio post") - utilizza il titolo del post per verificare se questo è il post a cui aggiungere il file
• is_single ('my-post-title') - controlli contro lo slug del post
• is_single (array (17, 'my-post-title', 'My Post Title')) - questo controlla se una delle condizioni l'ID del post è "17", lo slug è "my-post-title" o il titolo è "My Post Title"
• è single() - altre varianti della funzione is_single che utilizzano un array di valori da confrontare

Il codice, in questo caso, sarebbe il seguente o una leggera variazione a seconda dei parametri della funzione is_single. 

function collectiveray_carica_js_script() {
  if (is_single ('17 ')) {
    wp_enqueue_script ('js-file', 'PATH_TO_JS_FILE', array ('jquery'), '', false);
    // o usa la versione seguente se sai esattamente dove si trova il file
    // wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
  } 
}

add_action('wp_enqueue_scripts', 'collectiveray_load_js_script');

Se hai il titolo del post, puoi usarlo al posto del parametro "17". Ancora una volta wp_enqueue_script può anche essere ottimizzato per:

wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');

3. Aggiungi JavaScript a tutte le pagine

Come abbiamo visto, il metodo più semplice e pulito per aggiungere un file javascript al tuo tema WordPress è usare functions.php file con wp_enqueue_script.

In questo caso, invece di creare una condizione per aggiungere il contenuto a pagine specifiche, aggiungeremo una funzione generica.

Ecco come farlo:

Apri il tuo functions.php file e copia lo snippet di codice qui sotto. Assicurati di sostituire l'URL del modello con il tuo prima di salvare.

function collectiveray_temi_script_funzione() {
  wp_enqueue_script ('js-file', get_template_directory_uri (). '/js/myscript.js');
}
add_action('wp_enqueue_scripts','collectiveray_theme_scripts_function');

Se tu sei utilizzando un tema figlio, dovrai usare get_stylesheet_directory_uri () invece di get_template_directory_uri () 

Usando questo metodo non è necessario installare un altro plugin se modifichi il tuo file functions.php. Questo metodo può essere utilizzato anche per aggiungere funzionalità e funzionalità sia al tuo tema che a WordPress stesso. Questo approccio, ad esempio, può installare JavaScript in un singolo post o pagina o in tutte le pagine.

Lo svantaggio principale di questa strategia è che richiede di gestire il codice e aggiornare i file del tuo sito web. Di conseguenza, se non hai esperienza in questo campo, potrebbe non essere l'alternativa ideale.

Fai clic qui per trovare esperti economici sulle correzioni di WordPress

4. Aggiungi JavaScript all'intestazione del tema

In alcuni casi, potresti volere che il file JavaScript sia utilizzato in tutto il tuo sito, ma non vuoi usare un plugin per farlo.

Ad esempio, se desideri aggiungere uno script di terze parti a tutte le tue pagine (ad esempio lo script instantpage.js per rendere più veloce il tuo sito Web), puoi inserire lo script o aggiungere lo stesso file di script di riferimento nel file head del header.php file modello. 

QUESTO NON È IDEALE. Se aggiorni il tuo tema, potresti perdere queste modifiche. Se desideri comunque farlo direttamente, ti consigliamo vivamente di creare un tema figlio.

Per questo scenario, in cui desideri che questo script venga aggiunto ovunque, puoi aggiungere il file direttamente al modello secondo le istruzioni seguenti:

Questa chiamata al file (o script) dovrebbe essere aggiunta tra i meta tag e il collegamento al foglio di stile. È esattamente lo stesso come se si aggiungesse codice Javascript in qualsiasi pagina HTML. 

Per "aggiungere" il file Javascript nel tuo sito, nel file head, utilizzi il codice seguente:

Assicurati di aver definito il file type correttamente, altrimenti il ​​tuo sito non sarà valido. Assicurati anche che la directory / scripts esista nel tema e di aver aggiunto myscript.js.

È quindi possibile aggiungere qualsiasi riferimento alle funzioni utilizzate all'interno del file appena aggiunto all'HTML in cui è necessario utilizzarlo. 

Ad esempio, questo è un esempio dell'utilizzo della funzione appena aggiunta.

" >La voce va qui

4. Utilizzo dell'hook wp_head per aggiungere JavaScript personalizzato

Puoi anche aggiungere JavaScript personalizzato alla tua intestazione usando il file wp_head gancio d'azione. Anche in questo caso, questa soluzione non è preferita perché genera un numero eccessivo di script. Lo è, mailess, preferibile all'inserimento manuale degli script nel file header.php.

Questo metodo, che può essere utilizzato anche per il footer, utilizza gli hook di azione per inserire script inline nel tuo sito. A differenza della funzione wp enqueue script, che accoda gli script personalizzati, il metodo wp head stampa gli script nel modello di intestazione (e nel piè di pagina, se si utilizza il wp_footer gancio).

Per iniziare, vai al tuo file functions.php e copia e incolla il seguente codice:

funzione collettivo_custom_javascript() { ?>

<?php } add_action('wp_head', 'collective_custom_javascript');

Vale la pena notare che il wp head hook funziona solo sul front-end del tuo sito web. Ciò implica che qualsiasi JavaScript personalizzato aggiunto tramite questo approccio non verrà visualizzato nelle aree di amministrazione o di accesso. Tuttavia, se si desidera aggiungere JavaScript a tali posizioni, è possibile farlo utilizzando gli hook di azione admin head e login head.

Agli sviluppatori piace la funzione script wp enqueue perché evita i conflitti che possono verificarsi con altre soluzioni, come l'aggiunta diretta di script al file header.php. Inoltre, questa soluzione non genera script dipendenti.

Il problema principale con l'aggiunta di JavaScript WordPress personalizzato all'intestazione del tuo sito è che può interferire con altri plug-in che caricano i propri script. Questa configurazione può anche causare il caricamento di più script più volte, il che potrebbe rallentare la velocità e le prestazioni complessive del tuo sito web.

5. Aggiungi JavaScript al piè di pagina di WordPress

L'aggiunta di JavaScript al footer di WordPress è relativamente semplice. Puoi aggiungere codice al file di intestazione o piè di pagina, utilizzare un elemento di codice personalizzato all'interno del generatore di pagine o del tema o utilizzare uno specifico plug-in di intestazione e piè di pagina.

Dato che dovresti evitare di aggiungere JavaScript ai tuoi file header.php o footer.php, useremo un plugin.

Raccomando il WPCode – Inserisci intestazioni e piè di pagina + frammenti di codice personalizzati .

Seleziona Impostazioni profilo e la Intestazioni e piè di inserimento menu.

Quindi incolla il codice JavaScript nella sezione a piè di pagina della pagina.

Salva le modifiche quando hai finito.

6. Aggiunta di JavaScript al video di WordPress

WordPress è così estensibile che ti consente di aggiungere facilmente nuove caratteristiche e funzionalità al tuo sito Web senza dover ridisegnare o sostituire l'intero tema. Invece di ricreare il tema WordPress da zero, puoi aggiungere la funzionalità semplicemente aggiungendo plug-in.

E se la funzionalità che desideri aggiungere è piuttosto piccola e non è necessario creare o installare un plug-in, puoi utilizzare il file functions.php o vari altri modi per aggiungere Javascript a WordPress senza dover creare un plug-in separato.

La cosa migliore circa il file di funzioni è che agisce come un plug-in, che può essere utilizzato per aggiungere funzionalità ed estendere le funzionalità sia del tema che di WordPress stesso.

Sebbene tu possa facilmente aggiungere Codice Javascript direttamente al tuo file header.php, ma c'è un problema con questo metodo.

Può effettivamente causare conflitti con altri plugin quando caricano i propri script JS.

In questo articolo di CollectiveRay, diamo un'occhiata al modo giusto per aggiungere javascript ai temi di WordPress. Come sviluppatori di WordPress, questa è una delle cose che dovremo fare molto spesso.

(Nota speciale: Stai cercando un elenco di modifiche / trucchi che puoi facilmente apportare sul tuo sito WordPress senza utilizzare un plug-in? Puoi fare riferimento alla nostra guida qui: 101 trucchi per WordPress che ogni blogger serio deve conoscere.)

7. Aggiungi JavaScript a un widget di WordPress

Se vuoi aggiungere un po' di JavaScript in un widget di WordPress, non potrebbe essere più semplice.

Aggiungi un widget, seleziona il menu e seleziona Modifica come HTML.

Aggiungi il tuo JavaScript all'interno tags and select Aggiornanento.

Il codice che hai aggiunto dovrebbe essere immediatamente visibile quando visualizzi il widget sul front-end del tuo sito.

Come eseguire il debug di un errore JavaScript su una pagina WordPress

Il debug di JavaScript è un processo che richiede tempo ma è inevitabile per i principianti.

Fortunatamente, hai gli strumenti a portata di mano per verificare la presenza di errori.

Apri una pagina nel tuo browser e premi F12 o seleziona Strumenti per sviluppatori dal menu (Chrome). Puoi anche usare Ctrl + Maiusc + J (Windows/Linux) o Cmd + Opzione + J (Mac).

Seleziona il consolle scheda della nuova parte dello schermo che si apre e vedrai eventuali errori JavaScript evidenziati in rosso.

Identifica da dove proviene l'errore e correggi la parte pertinente del codice JavaScript che hai aggiunto.

Fatti strada fino a quando tutti gli errori non sono stati risolti.

WordPress ha la sua modalità di debug ma può essere un po' complicato da usare. Consiglierei di dare un'occhiata al pagina di debug ufficiale per ulteriori informazioni.

Domande frequenti sull'aggiunta di Javascript a WordPress

Cos'è Javascript?

JavaScript è un linguaggio informatico che viene eseguito nel browser dell'utente anziché sul server. La programmazione lato client consente agli sviluppatori di ottenere una varietà di cose interessanti senza rallentare il tuo sito web. È possibile che ti venga spesso richiesto di copiare e incollare uno snippet di codice JavaScript nel tuo sito Web WordPress se desideri incorporare un lettore video, aggiungere calcolatrici o qualche altro servizio di terze parti.

Come aggiungo un file Javascript a WordPress?

Posso usare Javascript in WordPress?

Sì, ci sono molti modi per usare Javascript in WordPress. Se desideri aggiungere uno script semplice, puoi utilizzare il plug-in Inserisci WPCode per aggiungere lo script all'intestazione, quindi chiamare lo script da qualsiasi parte del tema, post o plug-in da cui è necessario utilizzarlo.

Come aggiungo il mio codice a WordPress?

Il modo migliore per aggiungere il tuo codice a WordPress è tramite il file functions.php. Si consiglia di creare un tema figlio e quindi aggiungere le proprie modifiche al tema figlio in modo da non interrompere l'aggiornamento del tema.

Come modifico Javascript in WordPress?

Il modo migliore per modificare Javascript in WordPress è creare un tema figlio, quindi aggiungere le modifiche di Javascript o la personalizzazione di altre funzioni nel tema figlio. Ciò ti consente di modificare Javascript come necessario senza interrompere il resto del tema o l'aggiornamento del tema.

Conclusione

I tre metodi precedenti sono il modo più pulito per aggiungere Javascript a WordPress. In generale, la modifica diretta del codice dovrebbe essere eseguita da utenti avanzati che hanno un'esperienza significativa nel codice e possono essere sicuri di sapere come annullare le modifiche apportate. Altrimenti, è meglio attenersi ai plugin. Se non ti senti a tuo agio nel modificare il codice da solo, sarebbe bello entrare in contatto con i nostri partner su Fiverr che possono farlo per il tuo oggi

Fai clic qui per trovare esperti economici sulle correzioni di WordPress

L'autore

Autore: Davide AttardSito web: https://www.linkedin.com/in/dattard/E-mail: davide@collectiveray.com

David ha lavorato nel settore online e digitale negli ultimi 21 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. Ha lavorato con agenzie di sviluppo software, società di software internazionali, agenzie di marketing locali e ora è responsabile delle operazioni di marketing presso Aphex Media, un'agenzia SEO. In qualità di consulente digitale, il suo obiettivo è aiutare le aziende a ottenere un vantaggio competitivo utilizzando una combinazione del loro sito Web e delle piattaforme digitali oggi disponibili. La sua miscela di esperienza tecnologica combinata con un forte senso degli affari conferisce un vantaggio competitivo ai suoi scritti.