−Indice
Supporto ai menu a tendina (dropdown) nei temi Wordpress
Autore: Fabio Di Matteo
Ultima revisione: 22/02/2012
In questo articolo vedremo come inserire il supporto ai menu dropdown (a tendina) nei nostri temi wordpress. I menu' saranno ovviamente editabili dal pannello di amministrazione.
La procedura qui esposta crea in automatico la barra dei menu direttamente dall'editor dei menu. Cio' non è consigliato in quanto non c'è abbastanza flessibilita' nella disposizione dei menu, piuttosto conviene usare i widgets. Ovvero prima si creano i menu' tramite l'editor dei menu e poi si inseriscono in un apposito widget, il quale a sua volta verra richiamato tramite la funzione dynamic_sidebar(); dalla nostra barra dei menu nel tema.
Attivare il supporto ai menu nel nostro tema
Prima di tutto dobbiamo inserire nel file functions.php del nostro tema la funzione che abilita il supporto ai menu'.
... //Registriamo il menu register_nav_menus(array('menu0')); ...
Creazione della navbar con i menu
Una navbar con i menu' a tendina di solito si realizza inscatolando una serie di elementi nel DOM della pagina. Si comincia con un <div>
che fa da contenitore della navbar, poi si inserisce un <ul>
i cui elementi <li>
sono i menu a tendina, i quali questi ultimi sono ancora delle liste <ul></ul>
con i rispettivi <li>
.
Ecco un esempio di struttura
<div class="menu-container"> <ul class="menus"> <li><a href="#">Titolo primo menu</a> <ul> <li><a href="http://esempio.com">Prima voce</a></li> <li><a href="http://esempio.com">Seconda voce</a></li> <li><a href="http://esempio.com">Terza voce</a></li> </ul> </li> <li><a href="#">Titolo secondo menu</a> <ul> <li><a href="http://esempio.com">Prima voce</a></li> <li><a href="http://esempio.com">Seconda voce</a></li> <li><a href="http://esempio.com">Terza voce</a></li> </ul> </li> ...(altri menu)... <ul> </div>
navbar.php
<?php // Scandisce l'elenco dei menu' e li stampa //$menus è un'array di oggetti di voci di menu' $menus = wp_get_nav_menus(); //Il div che include il menu ("Superfish" in questo caso) echo'<div class="sf-navbar">'; //La voce statica "Home" echo '<ul class="sf-menu"><li><a href="index.php">Home</a></li></ul>'; //Ciclo che scandisce tutti i menu for ($i=0 ; $i<=count($menus)-1; $i++) { $menu_items = wp_get_nav_menu_items($menus[$i]); //Nome del menu echo '<ul class="sf-menu"><li><a href="#">'.$menus[$i]->name.'</a><ul>'; //Ciclo che scandisce il contenuto del menu foreach ($menu_items as $menu_item): echo "<li><a href='$menu_item->url' target='$menu_item->target' >$menu_item->title</a></li>"; endforeach; //Tag html di chiusura del menu echo'</ul></li></ul>'; } echo '</div> '; //Solo per debug //var_dump($menu_item); ?>