Sconti Amazon fino al 60

In quest’articolo vedremo diverse modalità di utilizzo di jQuery all’interno di WordPress.

1. Usando la funzione wp_enqueue_script()

Il modo tradizionale di includere jQuery all’interno di un pagina HTML è tramite il tag script. Tuttavia lavorando in WordPress questa pratica è sconsigliata, poichè potrebbe portare a conflitti, problemi di dipendenze ed altri problemi. Per evitare ciò possiamo caricare jQuery usando il seguente codice:

function my_init() {
 if (!is_admin()) {
 wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');

Il nome della funzione (in questo caso my_init) può essere sostituito con uno a nostro piacimento facendo attenzione a scegliere un nome univoco che non causi conflitti. Questo codice va aggiunto all’interno del file functions.php.

Il controllo is_admin() ne previene il caricamento dalla pagina di amministrazione.

Riferimenti WordPress:
wp_enqueue_script()
add_action()
is_admin()

2. Caricando jQuery dalle Google Hosted Libraries

WordPress include già jQuery che può essere caricato invocando wp_enqueue_script(‘jquery’) (wp-includes/js/jquery/jquery.js).

Se vogliamo caricare jQuery dalle librerie di Google va usato il seguente codice:

function my_init() {
 if (!is_admin()) {
 // comment out the next two lines to load the local copy of jQuery
 wp_deregister_script('jquery');
 wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2');
 wp_enqueue_script('jquery');
 }
}
add_action('init', 'my_init');

Caricare jQuery (come qualsiasi altra libreria) da Google offre forti vantaggi:

  1. risparmio di banda del nostro server
  2. prestazioni in termini di velocità di caricamento della pagina (infatti una volta in cache la libreria non viene ricaricata una seconda volta)

3. Caricare jQuery nel footer

Usando i codici suggeriti nei punti 1 o 2 jQuery sarà caricato nell’head dell’ HTML della pagina. Se lo si preferisce caricato in basso alla pagina va usato il paramentro $in_footer nella funzione wp_enqueue_script(). Ecco il codice:

function my_init() {
 if (!is_admin()) {
 wp_deregister_script('jquery');
// load the local copy of jQuery in the footer
 wp_register_script('jquery', '/wp-includes/js/jquery/jquery.js', false, '1.3.2', true);
// or load the Google API copy in the footer
 //wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
wp_enqueue_script('jquery');
 }
 }
add_action('init', 'my_init');

Le ragioni di questa operazione sono sempre legati a motivi prestazionali.

4. Aggiungere jQuery come dipendenza

Supponiamo di aver caricato jQuery ed ora di voler includere uno script che lo richiede. La funzione wp_enqueue_script() ci viene d’aiuto, infatti, tra i parametri si può passare un array di dipendenze $deps. WordPress automaticamente gestirà per voi l’ordine e la posizione dei tag script in base alle dipendenze impostate.

Esempio:

function my_init() {
 if (!is_admin()) {
 wp_deregister_script('jquery');
 wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js', false, '1.3.2', true);
 wp_enqueue_script('jquery');
// load a JS file from my theme: js/theme.js
 wp_enqueue_script('my_script', get_bloginfo('template_url') . '/js/theme.js', array('jquery'), '1.0', true);
 }
 }
 add_action('init', 'my_init');

Il codice carica jQuery dalle librerie di Google lo posizione nel footer e poi include il file theme.js. Altra cosa importante, l’array $deps consente le dipendenze multiple.

5. Usare correttamente le convenzioni di codifica jQuery

Tutti i punti precedenti posso essere inutili se usiamo le convenzioni di codifica jQuery in modo errato. Errore comune è quello di usare la variabile $ e ricevere lo spiacevole messaggio “$ is not defined”. Le versioni di jQuery in WordPress automaticamente invocano  jQuery.noConflict()  per evitare conflitti con altre librerie, in tal modo la variabile  $, che di fatto è un alias a jQuery, non viene riconosciuta come tale.

In questo caso si può procedere usando jQuery in sostituzione di $:

jQuery(document).ready(function(){
     jQuery(#selector) ...
});

oppure, per usare in modo sicuro la variabile $, si può usare il seguente codice:

jQuery(function ($) {
/* You can safely use $ in this code block to reference jQuery */
});

o anche:

(function($) {
    // You can use $() inside of this function
    $(#selector) ...
})(jQuery);

o ancora:

jQuery(document).ready(function($) {
    // You can use $() inside of this function
    $(#selector) ...
});

1 commento

  1. […] Attenzione è un plugin jQuery e non un plugin WordPress! Una volta entrati sul sito effettuiamo il download del javascript, meglio se è in versione minified, nel mio caso ho scaricato il file con il nome jquery.lazyload.min.js Per poter applicare il lazy loading sul nostro WordPress, dobbiamo accertarci che stiamo utilizzando jQuery. Se non abbiamo jQuery occorre caricarlo sul proprio sito WordPress, a tal proposito vi rimando a quest’articolo: 5 suggerimenti per usare jQuery in WordPress. […]

Lascia una risposta

Please enter your comment!
Please enter your name here