Per inserire jQuery in un tema di WordPress è possibile utilizzare diverse tecniche in base alle proprie finalità. Le stesse tecniche possono essere utilizzate per inserire qualsiasi altra libreria javascript, plugin e fogli di stile css. 

Scrivere i percorsi in modo assoluto

I percorsi ai file css e javascript possono essere inseriti direttamente all’interno del codice html del tema nel punto della pagina in cui si intende utilizzarli, purché siano assoluti. Nell’esempio successivo il percorso di jQuery viene scritto in modo assoluto all’interno del file footer.php, subito prima della chiusura dell’elemento body.

<!-- ... -->
<script src="http://www.sintesi-design.it/wp-content/themes/test/js/jquery-1.11.2.min.js">
</script>
</body>
</html>

Se il tema viene installato in un altro sito o se si modifica il percorso del blog sarà necessario però modificare tutti i percorsi assoluti presenti nel tema.

La funzione bloginfo()

Una soluzione migliore della precedente consiste nell’usare la funzione bloginfo() con il parametro template_url. Il risultato sarà lo stesso, al posto della funzione WordPress inserirà il percorso assoluto di jQuery.

<!-- ... -->
<script src="<?php bloginfo('template_url');?>/js/jquery-1.11.2.min.js"></script>
</body>
</html>

La differenza è che il percorso viene ricavato dalla funzione bloginfo() sarà sempre quello del sito in cui WordPress è installato. In questo caso se il tema viene installato in un altro sito non sarà necessaria nessuna modifica. Anche questo modo di inserire jQuery nel tema di WordPress presenta una controindicazione: nel caso si installi un plugin che utilizza jQuery è molto probabile che venga inclusa un altra copia di jQuery (quella usata dal plugin) oltre a quella inserita nel tema.

La funzione wp_enqueue_script()

La funzione wp_enqueue_script() consente di inserire direttamente la libreria javascript passata come argomento, nell’esempio jQuery.

<!-- ... -->
<?php
 wp_enqueue_script( 'jquery');
 wp_footer();
?>
</body>
</html>

In questo caso sarà WordPress a inserire la libreria indicata e perciò non ci saranno due copie di jQuery nella stessa pagina.

L’elenco delle librerie javascript registrate in WordPress che possono essere incluse in questo modo è disponibile nella pagina wp enqueue script della documentazione ufficiale di WordPress. Con la stessa funzione possiamo inserire una particolare versione di jQuery.

La funzione wp_deregister_script() rimuove la versione predefinita di jQuery mentre la funzione wp_enqueue_script() registra la propria versione di jQuery in WordPress in modo che venga utilizzata anche dagli eventuali plugin installati.

<!-- ... -->
<?php
 wp_deregister_script( 'jquery' );
 wp_enqueue_script( 'jquery',get_template_directory_uri() .'/js/jquery-1.11.2.min.js','','1.11.2',true);
 wp_footer();
?>
</body>
</html>

Nella funzione wp_enqueue_script() dovrà essere indicato il percorso del file da includere ottenuto mediante la funzione get_template_directory_uri().

La funzione wp_enqueue_script() prevede diversi argomenti, di cui solo il primo è obbligatorio:

  1. il nome dello script (nell’esempio jQuery)
  2. il percorso del file
  3. un array di file da cui la libreria dipende cioè, che devono essere caricati prima di questo
  4. la versione della libreria
  5. con il valore true il file viene inserito nel footer, subito prima del tag di chiusura dell’elemento body, e non nell’intestazione (head)

La soluzione ottimale per inserire jQuery nel tema di WordPress

La soluzione ottimale per inserire jQuery nel tema di WordPress sembra essere però quella di usare la funzione wp_enqueue_script() all’interno del file functions.php.

function my_scripts() {
 wp_deregister_script( 'jquery' );
 wp_enqueue_script( 'jquery',get_template_directory_uri() .'/js/jquery-1.11.2.min.js','','1.11.2',true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Utilizzare il file functions.php consente di inserire jQuery e tutti gli altri file javascript necessari senza dover modificare i file del template. Ad esempio, per inserire jQuery, un file con tutti i plugin e uno per le proprie istruzioni si può scrivere la funzione my_script() come mostrato nell’esempio.

function my_scripts() {
 wp_deregister_script( 'jquery' );
 wp_enqueue_script( 'jquery',get_template_directory_uri() .'/js/jquery.js','','1.11.2',true);
 wp_enqueue_script( 'plugin',get_template_directory_uri() .'/js/plugin.js','','1.0.0',true);
 wp_enqueue_script( 'main',get_template_directory_uri() .'/js/main.js','','1.0.0',true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );

Il risultato è visibile nella seguente immagine.

Inserire jQuery nel tema di WordPress

Inserire jQuery nel tema di WordPress

Altre informazioni per inserire jQuery nel tema di WordPress e sulla funzione wp_enqueue_script()  consultare la documentazione ufficiale di WordPress.