Vai al contenuto principale

Come aggiungere correttamente il codice jQuery su WordPress

Divi: il tema WordPress più semplice da usare

Divi: il miglior tema WordPress di tutti i tempi!

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

Vuoi padroneggiare come aggiungere correttamente il codice jQuery su WordPress? Quindi continua a leggere per saperne di più.

Nonostante WordPress sia disponibile da un po 'di tempo e l'aggiunta di script a tema e plugin sia presente da un po' di tempo, c'è ancora qualche confusione su quale metodo utilizzare. utilizzare per aggiungere script su WordPress.

Quindi cercheremo di chiarire le cose.

Poiché jQuery è il framework JavaScript più utilizzato, ti mostreremo come aggiungerlo a un tema o plugin di WordPress.

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.

Modalità compatibilità JQuery

Prima di iniziare ad aggiungere script su WordPress, esploriamo la modalità di compatibilità di jQuery. WordPress viene fornito con una copia di jQuery, che puoi utilizzare con il tuo codice. Quando viene caricato WordPress jQuery, utilizza la modalità di compatibilità, che è un meccanismo per evitare conflitti con altre librerie.

Scopri se lui JQuery dovrebbe essere rimosso dai tuoi temi e plugin WordPress ?

Ciò significa che non è possibile utilizzare il simbolo del dollaro direttamente come in altri progetti. Quando scrivi jQuery su WordPress, devi invece usare jQuery.

Dai un'occhiata al codice qui sotto per vedere cosa intendo:

/ * Modalità normale * / $ ('. Hideable'). On ('click', function () {$ (this) .hide ();}) / * Modalità compatibilità * / jQuery ('. Hideable'). On ('clic', function () {jQuery (this) .hide ();})

Quello che devi sapere è che con alcune modifiche puoi usare di nuovo il simbolo del dollaro. Usare ogni volta "jQuery" su tutto il codice complicherà molto la scrittura.

Guarda il editor di codice 10 per gli sviluppatori di WordPress

Per ricapitolare, se conosci jQuery, il simbolo $ è solo un alias per jQuery (), quindi un alias per una funzione. La sintassi di base è: $ (Selector) .action () :

  • Un simbolo di dollaro per definire jQuery
  • Un (selettore) per "trovare" elementi HTML
  • Un'azione jQuery () da eseguire su questi elementi

Se carichi il tuo script a piè di pagina, sarai in grado di racchiudere il tuo codice in una funzione anonima. Ecco come farlo:

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]

(function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})}) (jQuery);

Se vuoi aggiungere il tuo script nell'intestazione (cosa dovresti evitare se possibilePuoi avvolgerlo in una funzione che viene eseguita quando il documento è pronto.

Scopri anche a proposito Come facilement codice su WordPress senza rompere il tuo sito web

jQuery (document) .ready (function ($) {$ ('. hideable'). on ('click', function () {$ (this) .hide ();})});

Come collegare i tuoi script a jQuery

Ora che puoi scrivere un codice jQuery valido su WordPress, collegheremo il nostro lavoro al nostro sito Web. In WordPress il processo si chiama ' enqueueing "(sistema di coda). Per un normale sito Web HTML, dovremmo utilizzare il tagcopione> per aggiungere script.

WordPress può fare la stessa cosa, ma useremo le caratteristiche speciali di WordPress per raggiungere questo obiettivo. In questo modo, WordPress gestisce tutte le nostre dipendenze per noi.

Se stai lavorando su un tema, puoi usare la funzione wp_enqueue_script () nel tuo file functions.php file. Ecco come puoi farlo:

funzione my_theme_scripts () {wp_enqueue_script ('my-great-script', get_template_directory_uri (). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('wp_enqueue_scripts', 'my_theme_scripts');

La funzione accetta cinque argomenti. Il primo che puoi usare per denotare lo script, il secondo è la posizione del file di script, il terzo parametro è un array di dipendenze.

Ho aggiunto jQuery come dipendenza perché lo script lo usa. Se crei uno script che dipende da "my-grande-script È necessario aggiungerlo all'elenco delle dipendenze in modo che WordPress sappia quali file deve caricare per primi.

Scopri anche Come caricare JavaScript su WordPress

Il quarto parametro è un numero di versione e il quinto parametro consente a WordPress di sapere dove mettere lo script. Per impostazione predefinita, gli script verranno caricati nell'intestazione, il che è una cattiva pratica, poiché rallenta il caricamento della pagina del tuo sito web (i browser interrompono il caricamento di tutte le pagine, ogni volta che si blocca est rencontré). Devi caricare tutti i tuoi script nel piè di pagina, se possibile facendo il quinto parametro " vero '.

Come aggiungere uno script sul cruscotto

aggiungi correttamente il codice jQuery su WordPressÈ inoltre possibile aggiungere script su cruscotto. Le funzioni utilizzate sono esattamente le stesse, devi solo usare un " gancio " diverso. Dai un'occhiata all'esempio qui sotto:

function my_admin_scripts () {wp_enqueue_script ('my-great-script', plugin_dir_url (__FILE__). '/js/my-great-script.js', array ('jquery'), '1.0.0', true); } add_action ('admin_enqueue_scripts', 'my_admin_scripts');

Invece di usare wp_enqueue_scripts dobbiamo usare admin_enqueue_scripts, e questo è tutto !

L'uso di tag condizionali

Utilizza i tag condizionali in modo da caricare i tuoi script solo quando necessario. Viene utilizzato più spesso nella dashboard, dove desideri utilizzare uno script solo su una pagina specifica. Ciò consente di risparmiare larghezza di banda e tempo di elaborazione, il che significa tempi di caricamento più rapidi per il tuo sito web.

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]

Scopri anche il nostro Plugin 10 WordPress per migliorare la velocità di caricamento del tuo blog

Dai un'occhiata le admin_enqueue_scripts documentazione nel codice WordPress per ulteriori informazioni.

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. Mappe del mondo interattive

Interactive World Maps è un plugin per WordPress che ti aiuta a creare tutte le mappe che desideri, con indicatori, continenti, paesi o regioni interattivi e colorati.

Mappe del mondo interattive

È pienamente compatibile con la nuova versione di WordPress e di Visuale Compositore. Grazie a questo plugin, puoi visualizzare diversi tipi di regioni come: una mappa di tutto il mondo, un continente o un subcontinente (Africa, Europa, Americhe, Asia, Oceania e tutti i loro sub-continenti), un paese, un paese diviso per le sue regioni, uno stato degli Stati Uniti, gli Stati Uniti divisi per aree metropolitane, uno stato degli Stati Uniti diviso per aree metropolitane.

Download | Demo | Web hosting

2. Modulo di contatto AJAX con tracciamento

Questo plugin per WordPress ti consente di aggiungere facilmente moduli di contatto o di commento al tuo blog WordPress. Viene fornito con un gestore delle impostazioni a cui è possibile accedere direttamente tramite la dashboard di WordPress.wp-ajax-contatto-form-tracking-plugin-wordpress-to-sicurezza

Le sue caratteristiche principali sono tra le altre: a fper email, il supporto di Matematica CAPTCHA su moduli, personalizzazione e configurazione tramite la dashboard di WordPress, la possibilità di ddefinire un autorisponditore personalizzato, supporto per CSS personalizzati e altro

DownloadDemoWeb hosting 

3. Gateway di pagamento standard PayPal per moduli Ninja

PayPal Standard Gateway per Ninja Forms ti consente di creare moduli che si integrano perfettamente con il gateway di pagamento PayPal. 

Gateway di pagamento standard Paypal per moduli ninja

Potrai creare moduli d'ordine personalizzati e ricevere pagamenti utilizzando account Paypal standard. Le sue caratteristiche principali sono: integrazione facile e veloce, integrazione IPN, possibilità di attivare / disattivare il gateway PayPal su singoli moduli, supporto per pagamenti regolari, ecc.

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]

Altre risorse consigliate

Ti invitiamo inoltre a consultare le risorse seguenti per approfondire la presa e il controllo del tuo sito Web e blog.

Conclusione

Ecco ! Questo è tutto per questo tutorial. Spero che ora tu sappia come aggiungere script a WordPress. Non esitate a condividi il suggerimento con i tuoi amici sui tuoi social network.

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, nel frattempo, parlaci del tuo commentaires e suggerimenti nella sezione dedicata.

... 

Questo articolo contiene 1 commento

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
2 azioni
quota2
Tweet
Enregistrer