Vuoi imparare a caricare JavaScript su WordPress?

Tutti tema WordPress è solitamente composto da file PHP, HTML, CSS e JavaScript. JavaScript è un linguaggio di programmazione popolare tra gli sviluppatori. tema WordPress. È un linguaggio che rende interattiva una pagina HTML e può anche permetterti di interagire con il server.

Sapere come usarlo sul tuo sito web sarà un enorme vantaggio.

Per poter effettivamente utilizzare JavaScript, devi sapere come caricarlo sul tuo sito web.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog Wordpress passi 7 et Come trovare, installare e attivare un tema WordPress sul tuo blog 

Quindi torniamo al perché siamo qui.

Come caricare JavaScript WordPress

Facciamo un passo indietro e diamo una prima occhiata a come WordPress carica script e stili. Hai imparato che quando crei i file JavaScript, puoi aggiungerli alla tua pagina nella sezione dell'intestazione o nel piè di pagina.

Scopri anche il nostro tutorial su Come comprimere i file CSS, HTML e Javascript

WordPress fa esattamente la stessa cosa, ma non puoi semplicemente rilasciare questi tag di script nel file di intestazione o nel piè di pagina del tuo file tema WordPress. WordPress utilizza un meccanismo di caricamento intelligente chiamato “ enqueueing '.

Questo meccanismo è necessario per dare significato alle dipendenze. Se stai scrivendo il codice jQuery per il tuo tema WordPress, devi prima caricare lo stesso jQuery.

Scrivi il codice che si basa su un plugin jQuery. In questo caso, è necessario caricare prima jQuery, quindi il plug-in jQuery, quindi il codice.

Come "accodare" gli script (Aggiungi alla coda)

Puoi mettere in coda gli script nella tua cartella del tema di WordPress o nella tua WordPress Plugin. Ecco il codice completo per includere uno script che si basa su jQuery:

my_theme_scripts of function () {

 wp_enqueue_script ('my-script ", get_template_directory_uri ().' /js/my-script.js ', array (' jquery '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Prima di tutto, una funzione deve essere " adunco Su WordPress (Utilizzando Ganci WordPress). Il primo argomento della funzione add_action () dice a WordPress dove dovrebbero essere posizionati questi script:

• Sullo spazio pubblico
• Sul cruscotto

Se usi " wp_enqueue_scripts Verranno caricati nello spazio pubblico, se si utilizza " admin_enqueue_scripts Saranno caricati sul cruscotto.

Nella funzione « add_action Puoi usare " wp_enqueue_script Per aggiungere gli script necessari. La funzione accetta un parametro richiesto e quattro parametri opzionali:

• Il primo parametro è il nome del tuo script. Puoi scegliere quello che vuoi, ma assicurati di usare un nome univoco.
• Il secondo parametro dovrebbe contenere la posizione del file sul tuo tema WordPress o WordPress Plugin.
• Il terzo parametro contiene una matrice di dipendenze. Nell'esempio sopra ho detto che jQuery è una dipendenza. Tutte le dipendenze vengono caricate prima dello script in questione.
• Il quarto parametro è un numero di versione
• Il quinto e ultimo parametro indica se si desidera caricare lo script nell'intestazione o nel piè di pagina. Utilizza "true" per caricare il piè di pagina o "false" per caricare lo script nell'intestazione (non è inoltre possibile riempire questo parametro).

le dipendenze

WordPress offre una copia di jQuery, motivo per cui puoi aggiungerla come dipendenza senza problemi. Esistono numerosi altri script e plug-in jQuery offerti da WordPress. Se il tuo codice dipende da uno di essi, non devi usare una delle tue copie, devi semplicemente aggiungerla come dipendenza. Ecco un elenco degli script che WordPress offerte.

Se includi più script indipendenti, puoi aggiungerli come dipendenze esattamente nello stesso modo. Dai un'occhiata all'esempio qui sotto:

my_theme_scripts of function () {

 wp_enqueue_script ("script my-base", get_template_directory_uri (). '/js/my-base-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ("my-script-extension", get_template_directory_uri (). '/js/my-script-extension.js', array ("my-script-base '),' 1.0.0 ', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Poiché il primo script dipende da jQuery, anche lo script successivo dipende da esso. Quindi non è necessario aggiungere jQuery come dipendenza per entrambi. Ciò semplifica la gestione delle dipendenze.

Caricamento in corso condizionale

A volte vorrai usare il tuo script su ogni pagina, ma spesso vorrai caricare uno script su una pagina specifica. Ciò è particolarmente vero quando si considera l'aggiunta di script al dashboard. Un buon esempio è l'uso di codici brevi. Gli shortcode consentono agli utenti di creare visualizzazioni avanzate sull'editor di testo visivo utilizzando alcuni semplici trucchi.

my_theme_scripts of function () {

 wp_register_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

 wp_enqueue_script ('my-script');

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

Abbiamo salvato lo script in modo che WordPress venga a conoscenza dello script, ma utilizziamo il " enqueue ". In questo modo, lo script viene aggiunto alla pagina solo se lo shortcode viene utilizzato in questa pagina.

Un altro metodo per caricare script con condizioni consiste nell'usare funzioni condizionali. Se vuoi caricare uno script su tutte le pagine di archivio della categoria, puoi usare la funzione is_category ().

Ad esempio, potresti creare un carosello di immagini che gli utenti possono aggiungere all'articolo in questo modo: [carousel ids = '42,124,123,331,90, XNUMX ′]. Verrà creato un carosello nella pagina dell'articolo utilizzando le immagini designate dai loro ID.

Per fare ciò, è necessario creare un file " carousel.js Che si basa su jQuery. Ecco un codice per arrivarci (non crea una giostra, ma ti consente di vedere come avviene il processo di caricamento):

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

my_theme_scripts of function () {

 wp_register_script ('my-carousel', get_template_directory_uri (). '/js/my-carousel.js', array ('jquery'), '1.0.0', true);

}

add_shortcode ('carousel', 'my_carousel');

funzione my_carousel ($ args) {

 $ atts = shortcode_atts (array (

 'Ids' => ",

 ), $ Atts, 'carousel');

 wp_enqueue_script ('my-carousel');

 // Codice per visualizzare la giostra qui

}

Rimozione e sostituzione degli script

Questo è di gran lunga uno scenario comune, ma a volte potrebbe essere necessario rimuovere o sostituire uno script. Sono caduto in situazioni in cui uno script aggiunto da un plugin (ma non utilizzato dal tema) stava causando problemi di compatibilità. "Ritiro" era l'opzione migliore, poiché l'errore era completamente scomparso.

Puoi anche sostituire jQuery con una versione più recente se stai testando qualcosa per assicurarti che sia compatibile con le versioni più recenti.

In queste situazioni le funzioni wp_deregister_script () "E" wp_dequeue_script () Sono utili. Ecco come modificare il codice già aggiunto su WordPress.

my_theme_scripts of function () {

 wp_deregister_script ('jquery');

 wp_enqueue_script ('jquery', get_template_directory_uri (). '/js/jquery3.0.0.js', array (), '3.0.0', true);

 wp_enqueue_script ('my-script', get_template_directory_uri (). '/js/my-script.js', array ('jquery'), '1.0.0', true);

}

add_action ('wp_enqueue_scripts', 'my_theme_scripts');

considerazioni finali

Questo metodo di caricamento su WordPress è ottimo perché ti consente di aggiungere i tuoi script in modo modulare. Ciò consentirà di garantire che le dipendenze vengano aggiunte in modo modulare.

Scopri anche alcuni plugin WordPress premium  

Puoi usare altro plugin di WordPress per dare un aspetto moderno e per ottimizzare la gestione del tuo blog o sito web.

Ti offriamo qui alcuni plugin WordPress premium che ti aiuteranno a farlo.

1. Pacchetto premium SEO

Premium SEO Pack è un WordPress Plugin che ottimizza il tuo SEO e comprime i CSS per migliorare la velocità di caricamento del tuo sito web.

Il plugin ti consente anche di gestire il design del tuo sito web in pochi clic. Le sue funzionalità sono tra le altre: compressione CSS e JS, integrazione di sitemap di video e snippet, formattazione di file HTML e XML, reindirizzamento di pagine 404 e 301, condivisione sui social network, fornitura di Etichetta 'ALT, layout altamente personalizzabile

Download | Demo | Web hosting

2. Woocommerce Delivery Time Picker per la spedizione

Woocommerce Delivery Time Picker for Shipping è un'estensione di WooCommerce che consente ai clienti di scegliere la data e l'ora di consegna nella pagina di pagamento. 

I clienti saranno in grado di selezionare i tempi di consegna del pacco a casa. Il tempo di consegna sarà visibile agli amministratori del sito Web e verrà anche inviato via e-mail agli amministratori del sito Web o del negozio online.

Download | Demo | Web hosting

3. eroe Menu

Questo plugin ti consente di creare il tuo menu WordPress personalizzato in pochi passaggi abbastanza semplici. In particolare, consente di creare in modo semplice e intuitivo un menu WordPress elegante e professionale. 

Dal mega menu più complesso e ricco di funzionalità, al menu più semplice con menu a discesa, il plugin WordPress HeroMenu imposta qualsiasi tipo di menu e lo rende attivo e funzionante in pochi minuti.

In termini di funzionalità che offre tra l'altro: funzionamento perfetto su PC, tablet e smartphone, da CSS personalizzato per aggiungere i tuoi stili al menu, un megamenu builder, diversi browser supportati: Chrome, Firefox, Safari, Opera, IE9 e altro ancora.

Download | Demo | Web hosting

Risorse raccomandate

Consulta altre risorse consigliate che ti aiuteranno a risolvere altri errori comuni di WordPress. 

• Come risolvere errori di reindirizzamento su WordPress
• Come creare un layout personalizzato con Elementor
• Come creare un Intranet WordPress per la tua organizzazione
• Come creare una pagina di login su WordPress

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti abbia aiutato a capire come caricare JavaScript su WordPress. Non esitare a condividerlo con i tuoi amici sul tuo i social network preferito. 

Tuttavia, sarai anche in grado di consultare il nostro risorse, se hai bisogno di più elementi per realizzare i tuoi progetti di creazione di siti Internet, consultando la nostra guida su Creazione di blog WordPress.

Ma intanto parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

...