WordPress, personalizzare i menu

19 febbraio 2014

Da un punto di vista strutturale, per WordPress un menu di navigazione è una semplice lista non ordinata di collegamenti ipertestuali. Naturalmente, esigenze specifiche di sviluppo possono richiedere la creazione di menu complessi, per i quali la struttura predefinita non è sufficiente. A partire da WordPress 3 è, però, possibile personalizzare i menu predefiniti in modo avanzato e senza grandi difficoltà.

Il framework permette infatti di creare sistemi di navigazione alternativi, mega-menu, ed elenchi arricchiti da elementi grafici non gestibili con i soli fogli di stile.

Aggiungere un menu ad un tema di WordPress

Quando si sviluppa o si modifica un tema, per inserire un menu in una specifica area della pagina, bisogna eseguire due operazioni: per prima cosa il menu va registrato nel file functions.php, grazie alla funzione register_nav_menu:

function register_my_custom_menu() {
	register_nav_menu( 'custom', __( 'Custom Menu' ) );
}
add_action( 'init', 'register_my_custom_menu' );

Una volta registrato, il menu appare nel pannello di amministrazione, nell’elenco delle posizioni del tema.

Figura 1. Le impostazioni del menu con un menu personalizzato

Le impostazioni del menu con un menu personalizzato

La seconda operazione consiste nella collocazione del menu nell’area della pagina stabilita. La funzione wp_nav_menu genera l’output HTML, composto da una semplice lista non ordinata. Per creare un menu di navigazione personalizzato, bisogna invocare wp_nav_menu all’interno del file header.php.

La funzione accetta come argomento un array di parametri, strutturato come segue:

$defaults = array(
	'theme_location' => '',
	'menu' => '',
	'container' => 'div',
	'container_class' => '',
	'container_id' => '',
	'menu_class' => 'menu',
	'menu_id' => '',
	'echo' => true,
	'fallback_cb' => 'wp_page_menu',
	'before' => '',
	'after' => '',
	'link_before' => '',
	'link_after' => '',
	'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
	'depth' => 0,
	'walker' => ''
);

Il parametro theme_location imposta la posizione del menu, già registrata nel file functions.php con register_nav_menu, e gestita dal pannello di amministrazione (Aspetto → Menu).

Il parametro menu permette di associare manualmente il menu alla posizione stabilita in theme_location: se non impostato, questo viene gestito nel pannello di amministrazione.container imposta invece il contenitore della lista del menu: l’impostazione predefinita prevede una div, ma potrebbe essere un elemento nav o section, o essere anche del tutto assente.

Il parametro items_wrap imposta il contenitore dei singoli elementi, mentre depth stabilisce il numero di liste annidate possibili, ossia i livelli di sottomenu ammessi.

Il parametro walker, infine, imposta la classe che itera tra le voci del menu per generare l’output a video. Lasciando invariato il valore predefinito, la classe Walker_Nav_Menu genera le singole voci così come create dall’amministratore.

Se vuoi aggiornamenti su WordPress, personalizzare i menu inserisci la tua e-mail nel box qui sotto:
 
X
Se vuoi aggiornamenti su WordPress, personalizzare i menu

inserisci la tua e-mail nel box qui sotto:

Ho letto e acconsento l'informativa sulla privacy

Acconsento al trattamento di cui al punto 3 dell'informativa sulla privacy