Come abilitare e creare un menu personalizzato dropdown

menu personalizzati wordpress Come abilitare e creare un menu personalizzato dropdown


Dalla versione 3.0 di WordPress è possibile sfruttare la nuova e utilissima funzione per la creazione di menu personalizzati. In diverse discussioni nei forum ho riscontrato che molti utenti trovano difficoltà sia nella creazione del menu lato amministrazione che nell’implementazione del codice qualora il tema non lo supporti. Bene…è giunto il momento di fare un po di chiarezza su questi benedetti Menu una volta per tutte.

Il mio tema supporta i Menu Personalizzati?

Come detto in precedenza nonostante le ultime versioni di WordPress abbiano implementato questa funzione e appaia di default nel widget Aspetto > Menu la risposta è dipende dal tema che stai usando. In effetti se il tuo tema non supporta questa funzione potrai usarli solamente nei widget nella sidebar e non come menu orizzontale di navigazione solitamente posto nell’header del sito. Come fare a capire se il tuo tema li supporta? Con un semplice gioco delle differenze mettendo a confronto le immagini qui sotto icon smile Come abilitare e creare un menu personalizzato dropdown

MENU NON SUPPORTATO DAL TEMA IN USO
Verrà visualizzato il messaggio “Questo tema non ha il supporto nativo…”. Per verificare ulteriormente prova a creare un menu, l’operazione avrà successo ma come vedi nel box Posizione dei temi potrà essere visibile solamente nei widget laterali.

menu wordpress disabilitato Come abilitare e creare un menu personalizzato dropdown
menu wordpress widget Come abilitare e creare un menu personalizzato dropdown

MENU SUPPORTATO CORRETTAMENTE DAL TEMA
In questo caso non verrà visualizzato nessun messaggio di limitazione e creando il nostro menu sarà visibile nel solito box Posizione dei temi la conferma che il nostro tema supporta questa funzione.

menu wordpress abilitato Come abilitare e creare un menu personalizzato dropdown

crea menu wordpress Come abilitare e creare un menu personalizzato dropdownImplementazione del codice in functions.php

Per attivare la funzione register_nav_menus nel tuo tema agirai come al solito inserendo delle stringhe in functions.php quindi apri il file con un editor e incolla il codice che vedi qui sotto:

if ( function_exists( 'register_nav_menus' ) ) {
	register_nav_menus(
		array(
		'navtop' => 'Menu Top',
		'navbottom' => 'Menu Bottom',
		)
	);
}

Il codice appena visto ti da la possibilità di inserire più di un Menu, in questo caso 2. Per comodità di apprendimento ho chiamato i menu: Menu Top e Menu Bottom presupponendone un eventuale inserimento nell’header e l’altro nel footer del sito. Naturalmente potrai usarne uno solo, entrambi o anche aggiungerne degli altri a tua indiscrezione, l’importante sarà come vedremo in seguito richiamarli correttamente nel punto dove verranno visualizzati. Da precisare che il numero di menu attivati tramite la funzione in functions.php (nell’esempio citato 2) non ha nulla a che vedere con il numero di menu che si possono creare in amministrazione (Aspetto > Menu). Potrai crearne anche 100 in amministrazione ma nella struttura del sito ne verranno posizionati solo 2 o comunque tanti quanti ne avrai implementati in function.php, capirai meglio questo concetto semplicemente visualizzando il box Posizione dei temi.

Implementazione del codice in header.php

Perché il menu possa essere visualizzato sarà necessario inserire un richiamo alla nostra funzione nel file header.php in questo modo:

<div id="access">
<?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'navtop' ) ); ?></div>

Per richiamare il secondo menu per esempio posizionato nel footer ti basterà cambiare navtop con navbottom.

Un po di style e al funzione Drop-down

Ora che la struttura è stata inserita non ti resta che dare un po di style al menu e magari aggiungere la funzione Drop-down o menu a tendina in modo da visualizzare eventuali sottopagine o sottocategorie a cascata. Questo è il codice:

/* =Menu
-------------------------------------------------------------- */

#access {
	background: #000;
	display: block;
	float: left;
	margin: 0 auto;
	width: 940px;
}
#access .menu-header,
div.menu {
	font-size: 13px;
	margin-left: 12px;
	width: 928px;
}
#access .menu-header ul,
div.menu ul {
	list-style: none;
	margin: 0;
}
#access .menu-header li,
div.menu li {
	float: left;
	position: relative;
}
#access a {
	color: #aaa;
	display: block;
	line-height: 38px;
	padding: 0 10px;
	text-decoration: none;
}
#access ul ul {
	box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-moz-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	-webkit-box-shadow: 0px 3px 3px rgba(0,0,0,0.2);
	display: none;
	position: absolute;
	top: 38px;
	left: 0;
	float: left;
	width: 180px;
	z-index: 99999;
}
#access ul ul li {
	min-width: 180px;
}
#access ul ul ul {
	left: 100%;
	top: 0;
}
#access ul ul a {
	background: #333;
	line-height: 1em;
	padding: 10px;
	width: 160px;
	height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
	background: #333;
	color: #fff;
}
#access ul li:hover > ul {
	display: block;
}
#access ul li.current_page_item > a,
#access ul li.current-menu-ancestor > a,
#access ul li.current-menu-item > a,
#access ul li.current-menu-parent > a {
	color: #fff;
}
* html #access ul li.current_page_item a,
* html #access ul li.current-menu-ancestor a,
* html #access ul li.current-menu-item a,
* html #access ul li.current-menu-parent a,
* html #access ul li a:hover {
	color: #fff;
}

Creazione del menu lato admin

Per la creazione del menu puoi vedere questo semplice video (non metterti a ridere per la qualità, è il primo in assoluto che faccio :-)). L’unico passo importante, a volte non molto intuitivo nella creazione del menu, può essere quello della creazione dell’effetto Drop-down (menu a tendina). Come vedi dal video basta eseguire un semplice drag and drop della sottocategoria spostandola nella posizione della categoria principale che desideri trascinandola verso destra.



61 Commenti

  • [1]
    Niko → 16 aprile 2011

    Ciao uso l’ultima versione di wordpress , sto utilizzando un tema della wpzoom , questo tema supporta il menu ma dopo ogni voce di menu mi esce questo codice class=””> . Esempio ho creato la voce Informatica|class=””>|Cinema|class=””> e così vià . Come faccio a rimuovere class=””> ?
    Ti incollo il link del mio sito “test” http://dbsnet.no-ip.org/sito/

    Reply
  • [2]
    Walter → 16 aprile 2011

    Ciao Niko, quasi sicuramente si tratta di un errore nel codice. Se vuoi mandami via form Contatti o via mail a info@wpstyle.it il contenuto del file header.php che trovi nella cartella del tuo tema.

    Reply
  • Pingback: Menu Drop-Down con jQuery e Superfish | Wordpress Style

  • [3]
    Nicola → 19 maggio 2011

    Ciao :D
    Io ho fatto tutto per fili e per segno quello che hai detto tu e tutto funziona alla perfezione tranne qualche piccola cosina tipo:
    se non metto il “theme_location” il menu fa vedere tutte le pagine tranne la home ed il drop-down è perfetto ma se metto il “theme_location” il drop-down sballa e si sposta sulla stessa riga di circa 40 px mentre l’ ombreggiatura rimane li dove deve essere, un altra piccola cosa è che non riesco a mettere il menucompletamente a sx rimane sempre uno spazio di circa 60 px, il tema che uso è il classico di kubrick, Sto impazzendo aiutami ti prego :D :D

    Ti allego un’ immagine per farti capire meglio.
    http://imageshack.us/photo/my-images/88/senzaolo3.jpg/

    Reply
  • [4]
    Nicola → 20 maggio 2011

    Ok risolto grazie lo stesso e grazie per tutto il codice ;)

    Reply
  • [5]
    Walter → 20 maggio 2011

    Figurati ;)

    Reply
  • [6]
    Scaccomarco → 18 luglio 2011

    Ciao,
    volevo avvisarvi che il codice da inserire nel file header.php è errato:

    ‘menu-header’, ‘theme_location’ => ‘navbartop’ ) ); ?>

    il campo “navbartop” va sostituito con “navtop”, altrimenti il menù stamperà sia i contenuti del top menu che quelli del bottom menu.

    Reply
  • [7]
    Walter → 18 luglio 2011

    Oppss!!
    Grazie per la segnalazione Marco…non mi ero accorto dell’errore :-)

    Reply
  • Pingback: » Plugin "barra superiore"

  • [8]
    Pietro → 9 novembre 2011

    Ciao Walter, grazie ed ottimo tutorial.
    Io vorrei usarlo su http://www.automotivespace.eu.
    Vorrei che passando il mouse su Vision&Mission compaiono le due pagine What…e Who…, questa tua guida mi permette ciò?
    Grazie

    Reply
  • [9]
    Walter → 9 novembre 2011

    Ciao Pietro, benvenuto su WPStyle.
    Controlla visualizzando gli screenshot che ho inserito se il tuo tema supporta i menu personalizzati.
    Se li supporta e non lo hai già fatto crea un menu seguendo il video dove proprio verso la fine vedrai come ottenere i sottomenu…praticamente selezionando una voce e trascinandola verso destra.
    Fammi sapere ;)

    Reply
  • [10]
    Pietro → 10 novembre 2011

    Ciao Walter, purtroppo no, devo implementare il codice e mi viene fuori un pasticcio….riprovo von maggior calma. Una domanda: Io ho già creato la pagina Vision&Mission (vuota) che una volta andandoci sopra dovrà far vedere le due pagine che ora invece sono di fianco…ho iniziato fare bene? ma poi, quelle due pagine laterali scompariranno automaticamente oppure dovrò fare qualche altra modifica?
    Ciao e grazie

    Reply
  • [11]
    Walter → 10 novembre 2011

    Ciao, una volta implementato e creato il menu le 2 pagine verranno inserite sotto a Vision&Mission con il metodo spiegato nel video.

    Reply
  • [12]
    Pietro → 10 novembre 2011

    Grazie, ora ho dei problemi con il server, appena pronto seguirò la tua guida e poi ti faccio sapere…intanto +1 su tutti i SN ;)

    Reply
  • [13]
    Walter → 10 novembre 2011

    Grazie per i feedback ;)
    Fammi sapere

    Reply
  • [14]
    leonidas → 10 novembre 2011

    ciao
    bravo per la guida,,
    tutto mi va bene
    tranne che non so dove vanno posizionati gli codici
    ciò’è in quale posizione
    centro inizio o ala fine ??
    grazie

    Reply
  • [15]
    Walter → 11 novembre 2011

    Il primo in functions.php puoi inserirlo tranquillamente alla fine, il secondo quello in header.php al posto del codice del menu che hai ora, anche il css puoi inserirlo dove vuoi. Naturalmente controlla di non aver già implementata nel tuo tema questa funzione.

    Reply
  • [16]
    Pietro → 11 novembre 2011

    Scusami Walter nell’header dove va messo il codice

    io nel mio header non ho nessuna chiamata del genere….

    Reply
  • [17]
    Walter → 11 novembre 2011

    Che tema stai usando?
    Non tutti i temi sono uguali per cui molte funzioni e files possono differire da uno all’altro.

    Reply
  • [18]
    Pietro → 12 novembre 2011

    Walter,
    il tema è questo.
    http://www.highlandsbydesign.com/theme/silver-lexus-theme/

    Se tu mi dai un riferimento ti posso mandare l’header e così vedi se va bene oppure no

    Reply
  • [19]
    Walter → 12 novembre 2011

    È abbastanza vecchiotto il tema…non c’è più nemmeno nel download.
    Mandami l’intero tema via email: info@wpstyle.it
    Appena ho un attimo gli do un occhiata.

    Reply
  • [20]
    Pietro → 13 novembre 2011

    Grande lavoro….risultato perfetto!
    A presto!

    Reply
  • [21]
    Walter → 14 novembre 2011

    Bene ;)

    Reply
  • [22]
    gio → 13 febbraio 2012

    Piu chiaro di cosi!Grazie da “newbie” stavo impazzendo per fare un menu decente!ciao

    Reply
  • [23]
    Stefano065 → 6 aprile 2012

    Tutto perfetto, tranne che vorrei che il menu mi apparisse in orizzontale.

    Grazie

    Reply
  • [24]
    Walter → 6 aprile 2012

    Ma il menu appare in orizzontale seguendo questo tutorial…hai un sito di riferimento?

    Reply
  • [25]
    mattia → 27 aprile 2012

    Tutorial perfetto è quello che cercavo!

    grazie =)

    Reply
  • [26]
    Walter → 27 aprile 2012

    Felice di esserti stato di aiuto ;)

    Reply
  • [27]
    Silvia → 22 maggio 2012

    Nel mio blog avevo da tempo inserito un drop down menu, ma mi sono accorta da qualche giorno che ha dei problemi, riesco a vederlo solo con Chrome…

    Reply
  • [28]
    Walter → 23 maggio 2012

    Ciao Silvia,
    strano perchè io lo vedo bene anche con Firefox…con IE non poso testare perchè uso Linux come sistema operativo

    Reply
  • [29]
    pubblicita → 12 giugno 2012

    grazie per la lezione…ma esiste una lista di menu cosi da poter fare copia e incolla?

    Reply
  • [30]
    Walter → 12 giugno 2012

    Che io sappia no, anche perchè non tutti i temi sono uguali quindi potrebbero anche non funzionare.

    Reply
  • [31]
    giulio → 16 novembre 2012

    ciao non sono molto esperto ma ho seguito la tua guida. Tutto funziona bene se le voci del menu sono poche ma diventa illeggibile se le voci sono numerose.
    Consigli ? (sito http://www.sdsunder12.altervista.blog)
    Grazie

    Reply
  • [32]
    Walter → 17 novembre 2012

    Ciao Giulio,
    il tutorial è creato per siti sviluppati con WordPress quindi bisogna creare un menu ad-hoc, infatti cliccando una voce di menu, per esempio CALCIO i vari sottomenu si espandono verso l’alto e non verso il basso.

    Qualche consiglio: l’uso dei frame per sviluppare un sito non è deprecato ma nemmeno tanto consigliato.

    Idem per la parte “NEWS in breve”, molti (come me) non si scaricano un plugin Java per vedere le news dal sito, poniti la domanda come fossi tu un utente non direttamente interessato che magari per caso entra nel sito o in qualsiasi altro sito in circolazione scaricheresti un plugin ogni volta che ti fosse richiesto?

    La pagina nel menu AMICIZA 2012 non viene visualizzata o meglio si vede solo del codice.

    In breve dovresti dare una bella revisionata al sito o passare direttamente ad un CMS come Wordpess o Joomla o quant’altro.

    Reply
  • [33]
    giulio → 17 novembre 2012

    ciao intanto grazie per la risposta. Non mi sono spiegato. Il sito dove sei entrato è quello da me ereditato che sto tentando di rifare proprio per le ragioni che hai elencato. Credo che dovresti guardare http://www.sdsunder12.altervista/blog interamente sviluppato con wordpress. Ci sono alcune partivolutamente ancora da sistemare ma tieni conto che non è rilasciato

    Grazie
    Giulio

    Reply
  • [34]
    giulio → 17 novembre 2012

    scusa dimenticavo : guarda la sessione CALCIO e lascia perdere le altre

    Reply
  • [35]
    Walter → 18 novembre 2012

    Mi sembra tu sia riuscito a risolvere

    Reply
  • [36]
    giulio → 21 novembre 2012

    grazie alla fine ci sono riuscito

    Reply
  • [37]
    Leonardo → 4 dicembre 2012

    Il menù orizzontale viene visto diversamente su IE ed è più laargo rispetto a firefox.
    Come si può risolvere?

    Reply
  • [38]
    Walter → 4 dicembre 2012

    Ciao Leonardo, non sarebbe una novità…un motivo ci deve essere per cui tutti i webdeveloper odiano a morte questa sottospecie di browser.
    Purtroppo non posso testare personalmente in quanto uso Linux come S.O.
    Nei limiti vedo cosa posso fare.

    Reply
  • [39]
    Federico → 12 marzo 2013

    Ciao è da poco che mi cimento con il codice per personalizzare la grafica. Ho Seguito la giuida ma ho un problema. Dopo aver inserito tutto il codice nei relativi files, senza che selezioni alcun menu in “Posizione dei temi”, mi appare il menu non lincabile con le pagine già presenti nel sito. Quando invece creo il menù e lo seleziono in “Posizione dei temi”nel relativo Menu Top, non appare alcun menu. come mai? Dimenticavo uso firefox come browser.

    Reply
  • [40]
    Federico → 12 marzo 2013

    Ciao scusa ho risolto in parte il problema…Il menu compare correttamente però non è linkabile..

    Reply
  • [41]
    Walter → 13 marzo 2013

    Ciao Federico, che tema stai usando? Mi posti il link al sito?

    Reply
  • [42]
    Federico → 13 marzo 2013

    In realtà sto lavorando in locale con il server wamp. Comunque il tema è GamePress http://wordpress.org/extend/themes/gamepress

    Reply
  • [43]
    Walter → 13 marzo 2013

    Ho dato un occhiata veloce al tema, in pratica la funzione per la creazione del menu era già presente.
    Dovresti visualizzare un menu di default con le pagine, creando un menu personalizzato quello di default dovrebbe sparire…se il tema ha un pannello proprio per la configurazione controlla anche li se ci sono opzioni per il menu.

    Reply
  • [44]
    Federico → 20 marzo 2013

    Ciao, ho messo il tutto online come da indirizzo allegato… ho lasciato il menu di default per le categorie e il menu personalizzato per le pagine in alto a destra ma rimane non linkabile…come mai?

    Reply
  • [45]
    Federico → 20 marzo 2013

    Il mio browswer principale è firefox, ma ora ho installato altri browswer per prova…il problema me lo da con firefox e con chrome. Con Explore il link funziona correttamente.. http://ferdesign.altervista.org/blog/

    Reply
  • [46]
    Walter → 21 marzo 2013

    In effetti home e pagina2 non funzionano, se hai scelto le pagine dal dal widget Pagine dovrebbe funzionare…al limite prova a creare la voce di menu con “Link personalizzati” inserendo URL ed Etichetta.

    Reply
  • [47]
    Federico → 22 marzo 2013

    Il menù è creato inserendo le pagine normali di wordpress e home con Link personalizzati inserendo URL ed Etichetta.. La cosa strana è che, su firefox e chrome, l’unico link che funziona è la pagina 5, ma neanche tanto…ad intermittenza..

    Reply
  • [48]
    Walter → 23 marzo 2013

    Io su chrome vedo anche le pagine 3 e 4…

    Reply
  • [49]
    Niccolò → 29 ottobre 2013

    Salve, c’è modo di bloccare il top menu nello scroll della pagina? grazie!

    Reply
  • [50]
    Walter → 29 ottobre 2013

    Prova con position: fixed; al div #access nel CSS:

    #access {
    background: #000;
    display: block;
    float: left;
    margin: 0 auto;
    width: 940px;
    }

    Reply
  • [51]
    Shaman → 16 dicembre 2013

    Ciao, intanto grazie dello script, finalmente un menù che funzioni. :D

    Il mio problema è il seguente:

    - il primo tab del menù a tendina e gli altri a seguire scompaiono non appena scendo per cliccarci, e attualmente ho risolto riducendo l’altezza fra il menù e i submenu e rendendoli contigui;

    - il secondo tab scompare assieme al primo appena scendo con il mouse dal primo, ma stavolta il trucchetto non funziona.

    Potresti aiutarmi?

    Grazie sin da ora!!

    Reply
  • [52]
    Shaman → 16 dicembre 2013

    Aggiungo che ho rilevato il problema in Firefox, mentre su Chrome ed Explorer funziona. Sempreché non si usi lo zoom della pagina dal browser, allora dà problemi in tutti i casi.

    Reply
  • [53]
    Walter → 16 dicembre 2013

    Ciao Shaman, mi puoi linkare il sito in questione?

    Reply
  • [54]
    Shaman → 18 dicembre 2013

    Eccolo. :)

    http://www.e-gadget.it/wordpress/

    Reply
  • [55]
    Walter → 18 dicembre 2013

    A parte con Explorer che non uso essendo su SO Linux non ho riscontrato nessun problema, nemmeno usando lo zoom nella pagina.

    Reply
  • [56]
    Shaman → 18 dicembre 2013

    La cosa strana è che non lo dà sempre. A volte funziona, a volte no…!

    Reply
  • [57]
    Walter → 21 dicembre 2013

    Prova a svuotare la cache del browser o del plugin nel caso ne usassi uno

    Reply
  • [58]
    Caygri → 24 marzo 2014

    A me si vedono ma scompaiono appena sposto il mouse su un link della sottocategoria!

    Reply
  • [59]
    Walter Mason → 24 marzo 2014

    Hola Caygri ;-) Il tema che stai usando supporta già i menu dropdown…
    quindi il codice che ho postato non ti serve.

    Reply
  • Lascia un Commento