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.

Procedura poco indicata per la creazione di menu standard .

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);	
?>