Vai al contenuto principale

Come caricare JavaScript su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

più Download di 600.000, Divi è il tema WordPress più popolare al mondo. È completo, facile da usare e viene fornito con oltre i modelli gratuiti 62. [Consigliato]

Qualsiasi tema WordPress è generalmente composto da file PHP, HTML, CSS e JavaScript. JavaScript è un linguaggio di programmazione molto famoso tra gli sviluppatori di temi WordPress. È una lingua che rende interattiva una pagina HTML e può anche permetterti di interagire con il server.

Sapere come usarlo sul tuo sito Web sarà una risorsa considerevole.

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 i suoi script e stili. Hai imparato che durante la creazione di file JavaScript, puoi aggiungerli alla tua pagina nella sezione intestazione o 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 trascinare questi tag di script nel file di intestazione o piè di pagina del tuo 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)

È possibile aggiungere script alla coda del tema WordPress o del plugin WordPress. 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');

Innanzitutto, 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 tema WordPress o sul plugin WordPress.
  • 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. Utilizzare "true" per caricare a 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 è possibile aggiungerlo come dipendenza senza preoccupazioni. Esistono molti altri script e plugin jQuery offerti da WordPress. Se il codice dipende da una di esse, non è necessario utilizzare una delle copie, ma semplicemente aggiungerla come dipendenza. Ecco a elenco degli script che WordPress offerte.

Se includi più script indipendenti l'uno dall'altro, puoi aggiungerli come dipendenze esattamente nello stesso modo. Dai un'occhiata all'esempio seguente:

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);

}

Crea facilmente il tuo sito Web con Elementor

Elementor ti consente di creare facilmente qualsiasi design di sito Web con un aspetto professionale. Smetti di pagare caro per quello che puoi fare da solo. [Free]

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 ti consigliamo di utilizzare lo script in ogni pagina, ma spesso ti consigliamo di caricare uno script in una pagina specifica. Ciò è particolarmente vero quando si considera l'aggiunta di script alla dashboard. Un buon esempio è l'uso di codici brevi. I codici brevi consentono agli utenti di creare viste avanzate sull'editor di testo visivo con alcuni semplici suggerimenti.

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 modo per caricare script condizionali è l'uso di funzioni condizionali. Se si desidera caricare uno script su tutte le pagine di archivio della categoria, è possibile utilizzare la funzione is_category ().

Ad esempio, potresti creare un carosello di immagini che gli utenti possono aggiungere anche all'articolo: [carousel ids = '42,124,123,331,90']. Un carosello verrà creato nella pagina dell'articolo usando 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) {

Stai cercando i migliori temi e plugin per WordPress?

Scarica i migliori plugin e temi WordPress su Envato e crea facilmente il tuo sito web. Già più di 49.720.000 download. [ESCLUSIVO]

$ 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) ha causato problemi di compatibilità. "Prelievo" è stata l'opzione migliore perché l'errore è completamente scomparso.

È inoltre possibile sostituire jQuery con una versione più recente se si verifica qualcosa per assicurarsi 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 è eccezionale perché ti consente di aggiungere i tuoi script in modo modulare. Ciò ti aiuterà a garantire che le dipendenze vengano aggiunte in modo modulare.

Scopri anche alcuni plugin WordPress premium

Puoi utilizzare altri plugin di WordPress per dare un aspetto moderno e ottimizzare la presa 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 plugin per WordPress che ottimizza il tuo SEO e comprime i CSS per migliorare la velocità di caricamento del tuo sito web.

Il plug-in può anche gestire il design del tuo sito Web in pochi clic. Le sue caratteristiche includono: compressione CSS e JS, integrazione di sitemap per video e snippet, formattazione di file HTML e XML, reindirizzamento di pagine 404 e 301, condivisione social, consegna e-mail Etichetta ALT, il layout altamente personalizzabile

Download | Demo | Web hosting

2. Woocommerce Delivery Time Picker per la spedizione

Il selettore dei tempi di consegna di Woocommerce per la spedizione è 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

Crea facilmente il tuo negozio online

Scarica gratuitamente WooCommerce, i migliori plug-in di e-commerce per vendere i tuoi prodotti fisici e digitali su WordPress. [Consigliato]

3. eroe Menu

Questo plugin ti consente di creare il tuo menu WordPress personalizzato in pochi semplici passaggi. Ti 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 funzionale 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

Scopri altre risorse consigliate che ti aiuteranno a risolvere altri errori comuni su WordPress.

Conclusione

Ecco ! Questo è tutto per questo tutorial, spero che ti abbia aiutato a capire come caricare JavaScript su WordPress. Sentiti libero di 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.

...

Questo articolo contiene i commenti 0

Lascia un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito utilizza Akismet per ridurre indesiderati. Ulteriori informazioni su come vengono utilizzati i dati dei commenti.

Torna in alto
12 azioni
quota8
Tweet2
Enregistrer2