Realizzare un semplice menù scorrevole utilizzando mootools per il vostro Wordpress è cosa semplice e da due minuti Il menu scorrevole che andremo a realizzare è molto semplice e in questo caso vi saranno inseriti: gli ultimi 5 commenti al blog, i post più letti e gli ultimi post pubblicati. Praticamente risparmierete lo spazio dei 3 widget più utilizzati nella sidebar e comunque anche se chiusi, i motori di ricerca continueranno a “vedere” il loro contenuto come sempre. Inoltre, grazie ai css, potrete personalizzare il menu scorrevole per adattarlo al vostro tema e farlo diventare il vostro menu scorrevole.

Innanzitutto guardiamo l’esempio del menu scorrevole, così se non vi piace potrete smettere di leggere e risparmierete tempo

Se state leggendo queste parole vuol dire che l’esempio vi è piaciuto, bene!

Guardiamo il codice, davvero molto semplice e leggero (il file slide.php non lo incollo perchè troppo lungo. Lo trovate comunque nel file .zip) :

stile.css

#menu {
margin-top:20px;
}
.voce_menu {
border-bottom:2px #fff solid;
padding:2px;
width:330px;
color:#fff;
font-weight:bold;
background:#00c0ff;
}
.voce_menu a:link, .voce_menu a:visited {
text-decoration:none;
color:#000;
}
#contenuto_commenti, #contenuto_piu_letti, #contenuto_ultimi_post {
margin:5px;
}
.voce_menu a:hover {
text-decoration:underline;
}

menu.js

window.addEvent(’load’, function() {
var commenti = new Fx.Slide(’contenuto_commenti’);
$(’commenti’).addEvent(’click’, function(e){
e.stop();
commenti.toggle();
});
var piuletti = new Fx.Slide(’contenuto_piu_letti’);
$(’piu_letti’).addEvent(’click’, function(e){
e.stop();
piuletti.toggle();
});
var post = new Fx.Slide(’contenuto_ultimi_post’);
$(’ultimi_post’).addEvent(’click’, function(e){
e.stop();
post.toggle();
});
commenti.hide();
piuletti.hide();
post.hide();
});

Ed ora, all’opera

1. Procuriamoci MooTools

Per prima cosa procuriamoci Mootools (lo trovate nello zip con tutti i file del progetto) con il supporto agli effetti Fx che sono quelli che andremo ad usare.

2. Includiamo il percorso agli script nell’header

Incollate le seguenti righe di codice all’interno del file header.php del template per wordpress che state utilizzando:

<script type=”text/javascript” src=”<?php echo bloginfo(’url’).”/script/mootools.js”;?>”></script>
<script type=”text/javascript” src=”<?php echo bloginfo(’url’).”/script/menu.js”;?>”></script>

Mi raccomando, effettuando l’upload della directory script posizionatela nella root del vostro spazio web (in genere www o public_http), altrimenti cambiate il percorso di riferimento.

3. Includiamo il file slide.php nel vostro template

Innanzitutto effettuate l’upload del file slide.php all’interno della directory del vostro template (es. /wp-content/themes/vostro_template ). Aprite poi il file sidebar.php e posizionate il seguente codice dove preferite:

<?php include(TEMPLATEPATH.”/slide.php”);?>

Questa stringa richiamerà il file slide.php e lo includerà nella vostra sidebar nel punto in cui è stato inserito il codice.

Aggiornate la pagina ed è fatta Il menu’ è servito!

Personalizzazioni:

Se volete che un menù sia sempre aperto al caricamento della pagina, vi basterà eliminare una di queste righe dal file menu.js, a seconda della tendina che volete lasciare aperta:

commenti.hide();
piuletti.hide();
post.hide();

Scarica tutti i file dell’esempio

Finito! Per qualsiasi cosa ci sono i commenti