Spaghetti Wordpress

Jquery è una delle librerie grazie a cui Javascript è riuscito negli ultimi tempi a “tornare nel cuore” di molti sviluppatori. Molti dei problemi che affliggevano Javascript sono stati superati e grazie ad una sintassi molto semplice e integrata con quella dei CSS, è ora possibile creare facilmente  (e in maniera accessibile) animazioni e elementi di interazione con poche e semplici linee di codice.

L’integrazione tra Wordpress e jQuery è semplicissima, poichè la libreria è già inclusa di default con l’installazione – la potete trovare all’interno della cartella wp-includes\js\jquery – e può essere richiamata con la seguente linea di codice:

<?php wp_enqueue_script('jquery'); ?>

Quest’ultima deve essere inserita all’interno dell’header, prima della seguente linea di codice per poter funzionare:

<?php wp_head(); ?>

Altre librerie Javascript sono anche incluse di default nell’installazione di Wordpress, per una lista completa vi rimando alla documentazione ufficale.

Per creare i nostri script in jQuery dovremo utilizzare un file esterno con estensione .js , che verrà collegato attraverso il seguente codice – da inserire subito dopo il richiamo della libreria jQuery ma prima del già nominato wp_head:

<script src="<?php bloginfo('stylesheet_directory'); ?>/javascript/scripts.js" type="text/javascript"></script>

In questo caso il file con il mio codice jQuery si chiama scripts.js ed è collocato nella cartella javascript, ma voi potete scegliere sia il nome della cartella che del file a piacimento.

Una nota importante per tutti gli sviluppatori: se scrivete codice jQuery che deve essere utilizzato con Wordpress, ricordate di utilizzare la forma estesa jquery()  per la sintassi, poichè la forma contratta $() è riservata in Wordpress di default per Prototype, e se usata vi darebbe un errore nello script (per maggiori informazioni vi consiglio la lettura di questo articolo).

Risorse per jQuery

Poichè probabilmente molti di voi non conoscono jQuery  – o magari non hanno ancora imparato ad usarlo – ecco alcune risorse (purtroppo solo in inglese) per iniziare ad utilizzare questa ottima libreria per creare animazioni (e molto altro) in Wordpress:

• jQuery.com – sito ufficiale dove potete scaricare anche l’ultima versione rilasciata.
• Learning jQuery – un blog con guide sia per principianti che esperti, scritte dall’autore dell’omonimo libro su jQuery.
• jQuery Tutorials for Designers – alcuni esempi spiegati passo passo di utilizzo di jQuery in un sito web o blog.
• jQuery for Absolute Beginners Video Series – una videoguida in 15 parti per jQuery dalle basi fino a concetti avanzati.

Alcuni plugin basati su jQuery:

Per invogliarvi ad imparare ad usare Jquery, o semplicemente per mostrarvi che cosa è possibile creare utilizzando questa libreria, ecco una piccola selezione di plugin per Wordpress basati su Jquery :

1. WP Wall

Un’interessante plugin che crea un spazio per i commenti nella barra laterale, su cui i visitatori possono lasciare un messaggio che apparirà immediatamente quando inviato.

Maggiori informazioni | Download

2. Wordpress Post Information Plugin

Questo plugin permette di inserire un box all’intero di ogni post con informazioni sulla data, categoria, tag, commenti e altro.

Maggiori informazioni | Download

3. Wordpress jQuery Lightbox Plugin

Una trasposizione in formato “plugin” del noto script di jQuery per visualizzare immagini a grande naturale in una gradevole cornice.

Maggiori informazioni | Download

4. Live Blogroll

Questo plugin rende “viva” la lista dei link ad altri blog visualizzando al passggio del mouse una lista degli ultimi post dai siti linkati (utilizzando il loro feed Rss).

Maggiori informazioni | Download

5. jQuery Comment Preview WordPress Plugin

Un plugin che permette di vedere un’anteprima di un commento senza dover ricaricare la pagina, con la possibilità quindi di fare eventuali modifiche.

Maggiori informazioni | Download

Se avete ancora domande su jQuery non esitate a lasciare commenti! Alla prossima!