La nuova funzione wp_nav_menu di Wordpress 3.0, tra drag & drop e menu su misura.
Una delle funzioni più interessanti del prossimo WordPress 3.0 permette di creare menu di navigazione personalizzati direttamente dal pannello di amministrazione.
E’ possibile infatti creare dei menu contenenti contemporaneamente:
pagine
categorie
link diretti ad url specifiche
Questa novità facilita le possibilità di personalizzazione: non è più necessario nemmeno modificare nel template funzioni come wp_list_pages() o wp_page_menu, alle quali andavano passate come parametri le pagine da escludere.
I menu personalizzati sono gestiti in maniera simile alle widget: si selezionano le pagine e con il drag & drop è possibile ordinarle anche su sottolivelli. Il problema più grave di questo metodo riguarda l’accessibilità: non c’è stato alcun miglioramento dalle versioni precedenti di WordPress. E’ infatti impossibile ordinare gli elementi senza usare il mouse.
Rendere compatibile un tema con i menu personalizzati
E’ possibile adattare un tema esistente con i nuovi custom menu senza troppe difficoltà. E’ stata infatti introdotta una nuova funzione, che inserisce automaticamente sul sito il primo menu personalizzato che viene creato:
<?php wp_nav_menu(); ?>
Trovate la documentazione relativa ed i parametri opzionali in questa pagina del Codex. L’unica cosa necessaria da sapere è che se non è stato creato nessun menu personalizzato, la funzione wp_nav_menu va in fallback direttamente su wp_page_menu, di cui avevo già parlato in passato. Questo garantisce sempre la presenza di un menu di navigazione, permettendo agli utenti con esigenze particolari di poterlo personalizzare.
Aggiornamento: in attesa dell’uscita della versione ufficiale, potete scaricare la beta 2 di WordPress 3.0 dal blog.
Un confronto tra le due soluzioni disponibili per creare un menu di navigazione.
Su WordPress esistono due funzioni php essenziali per la gestione dei menu di navigazione: wp_list_pages e wp_page_menu. Che abbiate un semplice blog o un sito più complesso, in ogni caso avrete quasi sempre bisogno di un menu di navigazione, anche solo per includere i link alla homepage, alla pagina about ed a quella dei contatti.
Le due funzioni hanno alcune differenze: wp_page_menu è stata introdotta dalla versione 2.7 e va ad estendere wp_list_pages, che comunque fa ancora egregiamente il suo dovere. Recentemente mi sono imbattuto in queste funzioni per un aggiornamento al tema Stardust, ed ho deciso di condividere quello che ho scoperto.
La funzione wp_list_pages
Se lavorate con WordPress, conoscerete bene questo template tag, esistente ormai da anni:
<?php wp_list_pages(); ?>
Il suo punto di forza sono le possibilità di personalizzazione.
Escludere una pagina dal menu
Una delle opzioni più usate è quella che consente di nascondere dal menu alcune pagine. Per farlo è sufficiente usare il parametro exclude (in questo caso elimina dall’elenco le pagine con ID 1 e 7:
<?php wp_list_pages('exclude=1,7'); ?>
Mostrare solo le pagine di primo livello
Un altro parametro molto utile è depth, che permette di nascondere tutte le sottopagine e controllare la profondità del menu:
<?php wp_list_pages('depth=1'); ?>
In questo caso, depth=1 mostra solo le pagine di primo livello.
Nascondere il titolo
Se invece non avete bisogno del titolo prima dell’elenco delle pagine, ad esempio perché il menu non è nella sidebar ma disposto in orizzontale, potete usare il parametro title_li:
<?php wp_list_pages('title_li='); ?>
La funzione wp_list_pages offre ottime possibilità di personalizzazione, e spesso è più che sufficiente. Per tutti i dettagli vi consiglio di consultare anche la pagina ufficiale su WordPress.org, dove sono illustrati i parametri utilizzabili ed i rispettivi valori.
La funzione wp_page_menu
Dalla versione 2.7 di WordPress è stato introdotta la funzione wp_page_menu, che aumenta le possibilità a disposizione degli sviluppatori. La differenza principale con wp_list_pages è nel codice che viene generato, e nella possibilità di mostrare un link alla homepage.
Non c’è quindi bisogno di aggiungere codice HTML intorno alla funzione php, tutto il necessario viene generato automaticamente.
Cambiare la classe associata al menu
Per cambiare la classe del menu, è sufficiente usare il parametro menu_class:
<?php wp_page_menu('menu_class=navigation'); ?>
Mostrare un link alla home nel menu
La novità principale però riguarda il parametro per includere automaticamente un link alla homepage:
<?php wp_page_menu('show_home=1'); ?>
Utilizzando wp_list_pages questo era possibile solo inserendo manualmente nel template un link alla home, ma è una soluzione poco elegante. Inoltre possono esserci problemi quando la prima pagina del blog è una pagina statica: il link alla homepage apparirebbe duplicato.
Con wp_page_menu questo non accade: con un parametro è possibile gestire tutto senza problemi.
Altri parametri
Una caratteristica non è specificata sulla documentazione ufficiale, ma è fondamentale: la funzione wp_page_menu supporta tutti i parametri di wp_list_pages, essendo un’estensione di quest’ultima.
Se ad esempio volete creare un menu con classe “nav”, mostrando anche la homepage e solo un livello di profondità, questa è la funzione:
La presenza di due funzioni simili potrebbe confondere le idee, ed in effetti viene da chiedersi quale sia l’utilità del conservarle entrambe. La risposta è da cercare nella retrocompatibilità per le vecchie versioni di WordPress.
Se però dovete sviluppare un nuovo tema e non avete problemi di questo tipo, il mio consiglio è di sfruttare fin da subito wp_page_menu. I vantaggi non sono incredibili ma ci sono: i vostri visitatori non noteranno niente di diverso, ma voi avrete un codice più facile da mantenere.
Le regole da seguire nella creazione di un dropdown menu usabile.
I menu a tendina sono un’ottima soluzione per rendere accessibili più pagine ai visitatori del sito. Possono essere realizzati usando solo i CSS o anche JavaScript, ma è comunque necessario rispettare alcune regole:
Le voci devono avere un’area estesa, comodamente selezionabile, per consentire una navigazione facile. Sono sconsigliate le etichette di testo troppo lunghe.
E’ utile un ritardo di qualche frazione di secondo su apertura e chiusura del menu, per evitare attivazioni involontarie spostando il mouse
Il menu deve potersi riposizionare a seconda delle dimensioni della finestra del browser, spostandosi in un’area visibile quando si trova vicino ai margini della stessa. Un classico errore è mostrato nell’immagine:
All’apertura della tendina, l’utente deve vedere tutte le voci insieme, senza necessità di effettuare scroll della pagina
I link di primo livello devono avere una destinazione, che sarà utilizzata anche se il menu non è accessibile (ad esempio JavaScript disabilitato)
Un menu a tendina non è una mappa del sito, è inutile e dannoso elencare tutte le pagine
Le voci selezionate dall’utente all’interno del menu dovrebbero rimanere evidenti
Il menu dovrebbe essere perfettamente navigabile anche da tastiera
I menu realizzati esclusivamente con i CSS spesso sono poco usabili: a volte è meglio evitarli. Senza JavaScript infatti non è possibile gestire alcuni aspetti come il ritardo sull’apertura e sulla chiusura.
Con JavaScript disabilitato il sito deve essere comunque navigabile
Le voci dei sottomenu è bene che siano accessibili agli screen reader senza nasconderle con display: none (ma con position: absolute)
Queste regole andrebbero rispettate in ogni occasione: per alcune potrebbe essere concessa qualche eccezione a seconda delle circostanze, ma alcuni requisiti come l’usabilità sono fondamentali. Un menu a tendina deve essere facile da utilizzare, perchè è il mezzo principale per far navigare gli utenti nel vostro sito. In certi casi conviene mantenere un menu classico, se l’alternativa deve essere poco usabile.
Esempi di menu a tendina
Esistono diverse risorse disponibili per realizzare un menu a tendina senza troppi problemi. Non tutte però seguono i principi elencati: ve ne segnalo un paio. Potete usarle come un ottimo punto di partenza per i vostri siti:
Una guida completa per organizzare la navigazione di un sito, evitando gli errori più comuni.
Realizzare un sito usabile è un obbligo per ogni web designer professionista. Spesso però non viene riservata sufficente attenzione alla navigazione, dimenticando che un visitatore non tornerà mai su un sito dove non è capace di trovare ciò che cerca.
A questo proposito mi sono permesso di prendere spunto e reinterpretare un interessante post di ifohdesigns, per approfondire la questione suddividendola per argomenti.
Vincoli
Prima ancora di affrontare l’organizzazione della navigazione, è bene analizzare i vincoli presenti. Inutile pensare ad una soluzione se questa non è praticabile, ogni modello deve essere costruito in base al sito.
I limiti più evidenti, che spesso impediscono di seguire una scelta piuttosto che un’altra, sono:
il numero di pagine del sito
la gerarchia delle pagine e la struttura generale
lo stile grafico ed il layout
Consigli e divieti
Per migliorare la navigazione di un sito, è fondamentale non incorrere in gravi problemi di accessibilità ed usabilità. Alcune regole sono ovvie, ma non è mai scontato ricordarle:
non usare Flash per i menu
utilizzare JavaScript solo se i menu restano accessibili anche senza script abilitati
se usate delle immagini, fatelo tramite CSS con una tecnica di image replacement, senza inserirle direttamente nel codice html
cambiando le immagini di sfondo con i CSS, create degli sprite per evitare fastidiosi ritardi al caricamento
Posizione dei menu
I menu di navigazione possono essere posizionati in maniera più o meno originale, ma le collocazioni standard sono tre. Ci possono essere altre soluzioni, ma è meglio non esagerare con la fantasia:
menu orizzontale sotto l’header, se non ci sono troppe voci
menu orizzontale sopra l’header, per link secondari
menu verticale, solitamente a sinistra, facendo attenzione che le voci importanti siano visibili a colpo d’occhio e non scendano oltre i 600-700 pixel
Coerenza
La navigazione dovrebbe essere coerente su tutte le pagine del sito. Una volta decisa la struttura, è fondamentale non cambiare la posizione dei menu o modificarne l’aspetto a seconda della pagina, perchè il visitatore potrebbe rimanere disorientato.
A volte capita di trovare siti con sezioni dove manca la navigazione, con un semplice link “torna alla homepage”. Una soluzione simile non è sufficiente.
Attributi title
E’ importante non dimenticare di fornire maggiori informazioni sui link tramite gli attributi title dell’HTML. Alcune pagine possono avere nomi convenzionali e autoesplicativi, ma è sempre meglio semplificare la vita dell’utente.
Inoltre usare dei title coerenti può favorire una corretta indicizzazione sui motori di ricerca, rendendo anche il sito più accessibile.
Gerarchia
Se un sito contiene numerose pagine, non è mai conveniente metterle tutte sullo stesso livello. Meglio organizzarle in gruppi, suddividendo la navigazione per facilitare la comprensione.
A volte potrebbe bastare raccoglierle in un menu secondario, da mostrare solo quando necessario.
Breadcrumb (Briciole di pane)
Se il sito è complesso, è essenziale avere sempre visibile il percorso della pagina corrente. In certi casi può essere utile visualizzare il path anche su un blog, se esistono molte pagine distribuite su più livelli.
Come si può intuire dal nome, le briciole di pane aiutano l’utente a ritrovare la strada, capire quali pagine ha visitato e decidere quali visitare successivamente.
Footer
Fino a qualche anno fa era considerato un elemento di scarsa importanza, finchè non hanno iniziato ad apparire footer alti, ricchi di link. E’ un modo per permettere all’utente di continuare la visita del sito una volta arrivato a fine pagina.
Il footer non è ovviamente da utilizzare per la navigazione principale, ma non va sottovalutato.
Conclusioni
Organizzare la navigazione non è cosa semplice. Le variabili da considerare sono numerose e non tutte facili da gestire, soprattutto su siti con una struttura complessa.
La cosa più importante è curarsi di tutti gli aspetti, tenendo presente il target di utenti, la coerenza dei menu di navigazione e l’accessibilità degli stessi. Un menu in flash per quanto possa essere attraente impedirà a tutti i visitatori senza plugin di visitare le vostre pagine.
Se ne avete la possibilità fate dei test di usabilità, anche con parenti o amici: scoprirete cose impensabili. Con un minimo di buon senso potrete ottenere ottimi risultati.
