Come aggiungere Javascript (file o script) senza rompere il tuo sito WordPress (functions.php, template o plugin)

Aggiungi Javascript a WordPress

In genere ci sono molte ragioni per cui vuoi aggiungere Javascript a WordPress, sia una piccola modifica a una funzione 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 rovinare il tuo sito web.

C'è un buon modo per aggiungere Javascript a WordPress. E poi ci sono i modi sbagliati, che potrebbero danneggiare il tuo sito web o creare un impatto negativo sulle prestazioni.

In questo articolo, suggeriremo diversi modi per aggiungere codice Javascript ai siti web e quali dovrebbero essere usati nelle diverse circostanze che potresti incontrare.

 

 

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.

(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.)

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, 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.

Se non sei sicuro di modificare il codice da solo, potresti dare un'occhiata a questo articolo per imparare come reclutare il miglior sviluppatore WordPress per la tua attività: https://www.collectiveray.com/wordpress-developers-for-hireo scopri le 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

logo fiverr

Fai clic qui per trovare esperti economici sulle correzioni di WordPress

 

Come aggiungere JavaScript a WordPress

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

  1. Aggiungi lo script a una pagina specifica o singola di tua scelta, o più pagine usando functions.php
  2. Aggiungi uno script nelle pagine selezionate utilizzando plug-in come intestazioni e piè di pagina
  3. Aggiungi un file Javascript all'intestazione del tema

1. Utilizzando functions.php

Pagina singola o post

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 la funzione IS_PAGE che puoi trovare qui: https://developer.wordpress.org/themes/basics/conditional-tags/. 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 preferisci guardare un video su YouTube su come farlo, questo breve video è abbastanza buono, su come aggiungere Javascript a una singola pagina:

Fw6VDOZYqrM

Abbiamo istruzioni dettagliate sulla pagina, quindi una volta visto il video, puoi utilizzare questo articolo come riferimento.

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. A tale scopo, vai alla pagina in cui desideri aggiungere il file, fai clic su 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.
  • ID pagina wordpress

  • 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_load_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_load_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');

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_theme_scripts_function() {
  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 () 

2. Utilizzo di plugin

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

Come dice il nome, ti consente di aggiungere script ai file di intestazione e piè di pagina collegandoti a wp_head e wp_footer funzioni di WordPress. 

Questo plugin è una buona opzione perché ti consente di aggiungere qualsiasi script senza correre il rischio di rompere le cose. Inoltre, non è necessario modificare o modificare alcun codice da soli (se non ti senti a tuo agio nel farlo), come abbiamo dovuto fare nell'esempio precedente.

La modifica diretta del codice è in genere un'opzione migliore per i web designer. Il metodo che utilizza questo plugin è più semplice.

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

Questo plugin supporta due opzioni:

  1. Aggiunta del percorso a un file Javascript specifico che carichi
  2. Aggiunta diretta dello script (ad es. Per Analytics o altri script di terze parti)

Iniziamo: 

Puoi scarica Inserisci intestazioni e piè di pagina 

Installa il plugin:

  • Accedi al backend o all'amministratore del tuo sito.
  • Vai a Plugin> Aggiungi nuovo
  • Cerca il plug-in "Intestazioni e piè di pagina" e fai clic su Installa ora.
  • Una volta installato, fare clic su Attiva
Intestazioni e piè di pagina
A seconda del tuo scenario, ora devi seguire l'opzione 1 o 2. Ad esempio, per aggiungere Google Analytics, devi seguire l'opzione 2.

Opzione 1: carica un file Javascript personalizzato

  • Innanzitutto, è necessario preparare il file per l'inclusione
  • Salva il tuo codice o file JavaScript in un nuovo file di prova con l'estensione . Js estensione.
  • Caricalo nel tuo sito nella seguente cartella: wp-content / themes / / js /
  • Vai a Impostazioni> Inserisci intestazioni e piè di pagina.

Ora abbiamo un paio di scelte per caricare il nostro file:

  1. Script nell'intestazione (carica dentro etichetta)
  2. Script a piè di pagina (caricare prima di chiudere etichetta)

Utilizza la posizione che meglio si adatta alle tue esigenze specifiche utilizzando quanto segue come esempio. Notare che deve essere cambiato con il nome della directory del tema che stai utilizzando, ad es. Twentytwenty

/js/file.js">
 
Inserisci lo script in testa
  • Fare clic sul pulsante "Salva" per terminare e salvare.

Opzione 2: carica lo script personalizzato senza un file

La seconda opzione che puoi utilizzare con questo plugin, è l'opzione per aggiungere il codice direttamente in WordPress senza la necessità di utilizzare un file specifico.

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 Script nell'intestazione finestra:

aggiungi script / codice direttamente
 
Ancora una volta, fai clic su "Salva" per terminare.

 

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.

 

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

logo fiverr

Fai clic qui per trovare esperti economici sulle correzioni di WordPress

 

Se hai trovato utile questo suggerimento, potresti voler controllare altri nostri suggerimenti su WordPress nel menu pertinente nella parte superiore della pagina.

3. 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 in 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 referenziato, nel head del header.php file modello. 

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

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 rubrica va qui

 

Scarica l'elenco dei 101 trucchi per WordPress che ogni blogger dovrebbe conoscere

101 trucchi per WordPress

Fare clic qui per eseguire il download ora
 

DOMANDE FREQUENTI

Come aggiungo un file Javascript a WordPress?

Il modo più semplice per aggiungere un file Javascript a WordPress è utilizzare il plug-in Inserisci intestazioni e piè di pagina. 

  • Accedi al tuo sito e installa il plug-in Intestazioni e piè di pagina.
  • Una volta installato, fare clic su Attiva
  • Salva il tuo codice o file JavaScript in un nuovo file con l'estensione . Js estensione.
  • Caricalo nel tuo sito nella seguente cartella: wp-content / themes / / js /
  • Vai a Impostazioni> Inserisci intestazioni e piè di pagina.
  • Aggiungere quanto segue agli script nell'intestazione:  <script src="https://www.website.com/wp-content/themes/<theme-you-are-using>/js/file.js"></script>

 

Posso usare Javascript in WordPress?

Sì, ci sono molti modi per utilizzare Javascript in WordPress. Se si desidera aggiungere uno script semplice, è possibile utilizzare il plug-in Inserisci intestazioni e piè di pagina per aggiungere lo script all'intestazione, quindi chiamare lo script da qualsiasi parte del tema, del post o del 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

logo fiverr

Fai clic qui per trovare esperti economici sulle correzioni di WordPress

 

L'autore
David Attard
Autore: David AttardSito web: https://www.linkedin.com/in/dattard/
David ha lavorato nel o intorno al settore online / digitale negli ultimi 18 anni. Ha una vasta esperienza nei settori del software e del web design utilizzando WordPress, Joomla e le nicchie che li circondano. 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 disponibili oggi.

Un'altra cosa... Sapevi che anche le persone che condividono cose utili come questo post sembrano FANTASTICHE? ;-)
Fatti un favore: lasciare un utile commenta con i tuoi pensieri, quindi condividi questo articolo sui tuoi gruppi di Facebook che lo troverebbero utile e raccogliamo insieme i frutti. Grazie per la condivisione e per essere gentile!

Disclosure: Questa pagina può contenere collegamenti a siti esterni per prodotti che amiamo e consigliamo vivamente. Se acquisti prodotti che ti suggeriamo, potremmo guadagnare una commissione per segnalazione. Tali commissioni non influenzano le nostre raccomandazioni e non accettiamo pagamenti per recensioni positive.

Autore / i in primo piano su:  Inc Magazine Logo   Logo di Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   e molti altri ...