Wordpress, PHP, CSS e Javascript tips!

Superfish. Un menu dropdown con jQuery per il vostro tema, e senza usare un plugin

di  /  A- A A+
  Attenzione! Questo post non è stato più aggiornato da almeno 90 giorni. Potrebbe contenere dati, notizie e scripts non aggiornati o non in linea con gli attuali standard!

superfish-550x160Esistono parecchi plugin sul repository di WordPress che installano automaticamente un menu verticale con effetti javascript. Molti di questi sono ottimi e persino comodi. Ma è chiaro che per chi ama personalizzare il proprio tema a mano, quella del plugin non può essere la strada prescelta.

Dunque, eccomi qui a scrivere una piccola guida su come implementare un plugin jQuery che crea un menu verticale per le nostre categorie o le nostre pagine.

Prima di tutto, il vostro tema WordPress deve prevedere i menu, tramite wp_nav_menu(), perché diversamente la guida qui illustrata non fa per voi. Se le pagine e le categorie vengono richiamate con il vecchio metodo (esempio wp_list_categories()) il lavoro è in parte diverso. Facciamo conto però che il nostro tema preveda di default wp_nav_menu. La prima cosa da fare, è aggiungere una classe al tag <ul>, avendo cura di scrivere la seguente voce nell’array: 'menu_class' => 'sf-menu'. Ecco:

Bene, a questo punto è necessario scaricare il plugin Superfish dal repository ufficiale.

Una volta scaricato, è necessario caricare i file sul nostro spazio: superfish.js e hoverIntent.js dentro la cartella js del vostro tema (se non c’è, potete crearne una o caricare i file nella directory principale del tema). Stesso discorso per quanto riguarda il foglio di stile superfish.css.

Nel file function.php o in un file collegato tramite un include (dipende dal tema), dovete richiamare i file javascript e il file css attraverso l’api wp_enqueue_script:

Così come per il file css. E’ meglio che il foglio di stile venga caricato prima dei file javascript.

Una volta fatto questo dobbiamo richiamare la funzione javascript di superfish. Solitamente questa funzione viene richiamata nell’header (all’interno dei tag <head>) o nel footer (prima della chiusura del tag <body>). A voi la scelta, così come il metodo:

E ora lo style. Propongo quello standard del plugin, che voi poi potete modificare a vostro piacimento, quanto meno nei colori e negli stili:

A questo punto, il più è fatto. Non resta che armonizzare il menu con lo stile del tema e implementare tutte le caratteristiche che offre il plugin e che potete trovare illustrate nella documentazione.

© 2016 Il Jester – Note Legali
Archiviato in: Javascript, Wordpress  /  Tags: , ,