Gestire al meglio i menu di wordpress
Tweet
Uno dei tanti problemi che molti web designer che usano wordpress per la prima volta è quello di saper gestire al meglio i menu di wordpress e tutte le sue voci.
Oggi analizzeremo al meglio come utilizzare la funzione di wordpress wp_nav_menu() che ci permette di creare dei menu nel nostro tema.
1) Creiamo un menu in wordpress
Per menu in wordpress si intende la lista delle pagine presenti del cms, elencate in un <ul> con i rispettivi link alle pagine.
Per creare un menu dinamico attraverso wordpress dobbiamo scrivere tale funzione:
1 | <?php wp_nav_menu(); ?> |
Quello che ci ritroveremo davanti sarà un elenco di pagine con link. Il tutto in maniera automatica.
2) Aggiungiamo l’homepage nel menu
Una delle prime cose che noteremo sicuramente sarà il fatto che si abbiamo creato un elenco di pagine di wordpress, con l’assenza del link alla homepage. Per aggiungere questo link dobbiamo inserire un argomento all’interno della nostra funzione:
1 | <?php wp_nav_menu('show_home=1'); ?> |
Con il numero abbiamo indicato la posizione del link all’interno del menu
3) La formattazione del menu
Se abbiamo delle validi basi di css avanzato possiamo tranquillamente formattare il nostro menu nel seguente modo attraverso i fogli di stile:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | /* eliminiamo i pallini dall'elenco pagine */ div.menu ul { list-style: none; } /* disponiamo in orizzontale le voci del nostro menu */ div.menu ul li { float: left; margin: 0px 10px 0 10px; } /* formattiamo le voci del nostro menu nel loro stato base */ div.menu ul li a { text-decoration: none; font: Normal 12px Arial; color: #cc0000; } /* formattiamo le vocidel nostro menu quando si ritroveranno il mouse sopra */ div.menu ul li a:hover { text-decoration: underline; } |
4) Evidenziamo le pagine correnti nel menu
Solitamente è una buona norma di usabilità sottolineare nel menu l’attuale pagina dove si è in quel momento, contrassegnandola con un link in hover. WordPress ci facilita il lavoro in quanto associa quella voce del menu con la classe current_page_item.
Ovviamente noi possiamo interagire sempre grazie ai css in poche righe di codice:
1 2 3 | div.menu ul li.current_page_item a { text-decoration: underline; } |
5) Includere solo determinate pagine all’interno del menu
Può capitare di voler elencare all’interno del nostro menu solamente determinate pagine cercando di nasconderne altre. Per questo dobbiamo interagire di nuovo con php lavorando su un altro argomento, include.
1 | <?php wp_nav_menu('include=2,4,10,20,1'); ?> |
Ad ogni pagina è associata un determinato numeretto che viene chiamato id Pagina. Per scoprire a che numero è associata la tua pagina devi andare nel pannello di controllo di wordpress, nell’area pagine.
Ora posizionati sopra il nome e infondo dovrebbe comparti l’id della nostra pagina come in nell’immagine qui sotto.
6) Utilizzare più argomenti in wp_nav_menu
Ora che abbiamo scoperto che esistono gli argomenti possiamo pensare ad usarne più contemporaneamente. Poniamo il caso di voler utilizzare sia una inclusione di pagine come visto nell’esempio precedente e di inserire il link alla homepage:
1 | <?php wp_nav_menu('show_home=1&include=2,4,5,9,10'); ?> |
Come avete visto abbiamo utilizzato una semplice & per unire più argomenti alla nostra funzione.
7) Ordinare le pagine da pannello di controllo
Se volessimo ordinare le pagine del nostro menu attraverso il pannello di controllo , e non attraverso php il metodo è semplice.
Andiamo su:
Pagina >> Nome_pagina
E poi mettere il numero ( Come in questa immagine ) assegnando così una posizione univoca con all’interno del menu.
LINK
Ovviamente ci sono tanti altri tips e tricks per gestire i menu. Se sei interessato a questo argomento qua ho raccolto per te una serie di utili link:
- Codex di wordpress sui menu
- Tip & Tricks sui menu di ThemeSharper
- Extend the WordPress Menu
Vi è piaciuto l’articolo ? Vuoi sapere di più ? Scrivi un commento 
Potresti trovare interessante anche
5 commenti per Gestire al meglio i menu di wordpress
Ciao ti scrivo per la prima volta ho un problema che non riesco a risolvere e spero che mi possa dare una mano…. sto rifacendo il sito http://www.primomaggioafornaci.it in wordpress ho un problema su come modificare le classi del menu , ho bisogno di assegnare ad agni bottone una classe diversa. leggendo un pò su internet ho modificato nella pagina header.php
<?php wp_nav_menu( array( ‘Menu sito’ , ‘container_class’ => ‘nav-home’) ); ?>
il problema mio e che mi visualizza lo stesso colore su titti i bottoni….. non so come aggiungere le diverse classi per ogni item.
Spero che tu abbia capito il mo problema
Ti ringrazio anticipatamente . Ciao
Scusami mi dimenticavo uso wordpress 3.3.1 ho abilitato la visuaòizzazione delle classi nella pagina di amministrazione dei men ho assegnato nav-home in ” home” ma come ti ho scritto precedentemente non so come aggiungere le altre classi per i rispettivi bottoni. Grazie!!!
@luigi puoi allora materialmente gestire il tutto attraverso i css , oppure attraverso php.
Se vuoi usare php devi scrivere tale codice :
http://themeshaper.com/2009/02/09/adding-class-wordpress-page-menu/
Mentre con css è un pò più lungo ma dovresti applicare uno stile a ogni tag <li> così da poterli manipolare con più facilitÃ
GRAZIE!!!!
Una serie di guide ben fatte ed utili come sempre! Grande Rocco!