Vuoi padroneggiare come aggiungere 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 a WordPress Plugin.

Ma prima, se non hai mai installato WordPress, scopri Come installare un blog WordPress in 7 passaggi 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:

(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 può essere utilizzato per fare riferimento allo 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

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

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

Mappe del mondo interattive è a WordPress Plugin che ti aiuta a creare tutte le mappe che desideri, con indicatori interattivi e colorati, continenti, paesi o regioni.

È pienamente compatibile con la nuova versione di WordPress e tanta tanta 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

Ce WordPress Plugin 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.

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

Download | Demo | Web 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. 

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

Altre risorse consigliate

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

• Come utilizzare le categorie e tag in modo efficace su WordPress
• Come creare un menu reattivo per WordPress cellulare
• Come creare un Intranet WordPress per la tua organizzazione
• Come installare un plugin in WordPress

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.

...