Menu orizzontale in WordPress
Posted August 13, 2005
Comments: 33
[Aggiornamento - 23/5/2007: Se vi interessa aggiungere un menu orizzontale al vostro sito WordPress, ora potete anche scaricare ed usare il plugin WordPress Menubar!]
In questo articolo proverò a spiegare come aggiungere un menu orizzontale ad una installazione WordPress con tema Kubrick, usando solo HTML e CSS; non è difficile, ma richiede qualche attenzione se vogliamo che il risultato venga visualizzato allo stesso modo da diversi browser. In particolare, ho provato queste istruzioni con Internet Explorer 6.0, Firefox 1.0.6 e Konqueror 3.2.3.
Partiamo quindi con il tema Kubrick di default (fig. 1), e cominciamo col sostituire la immagine di testa. Non fa parte dello scopo di questo articolo, ma è facile e il risultato è gradevole, così procediamo.
Fig. 1
Prima di tutto andiamo nella cartella wp-content/themes della nostra installazione WordPress, e copiamo la cartella default con tutto il suo contenuto in una nuova cartella newtheme, o il nome che preferiamo. Dal pannello di amministrazione di WordPress, attiviamo il tema newtheme.
Tutto ciò che ci occorre ora è una nuova immagine, di dimensioni 740 x 200 pixel, che inseriamo nella cartella newtheme/images con il nome kubrickheader.jpg, rimpiazzando l’omonimo file preesistente. Il risultato è visibile in fig. 2.
Fig. 2
Adesso cominciamo a costruire la barra di navigazione. Una barra di navigazione è essenzialmente un insieme di link, ciascuno dei quali punta ad una pagina del nostro sito, o ad un altro sito, o ad un indirizzo di posta. Aggiungiamo questi link alla fine del file header.php nella cartella newtheme, all’interno di una sezione div che possiamo chiamare ad esempio navbar.
<div id=”navbar”>
<a href=”http://www.dontdream.it”>Home</a>
<a href=”http://wordpress.org”>WordPress</a>
<a href=”http://www.dontdream.it/?p=20”>Oklahoma!</a>
<a href=”mailto:andrea@dontdream.it”>Contact us</a>
</div>
Il risultato è mostrato in fig. 3.
Fig. 3
Ovviamente dobbiamo migliorare l’estetica, così apriamo il file style.css nella cartella newtheme, e aggiungiamo alla fine (in fondo al file) le nuove regole CSS. Cominciamo con la regola #navbar, che definisce l’aspetto generale della barra:
#navbar {
margin: 0 10px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
background: pink;
}
Il risultato è mostrato in fig. 4.
Fig. 4
Se stiamo usando Internet Explorer, possiamo notare che la barra è disallineata di un pixel verso la sinistra dello schermo, ma ne riparleremo più avanti.
Ora possiamo aggiungere le regole CSS #navbar a, che definisce l’aspetto normale dei link sulla barra, e #navbar a:hover, che ne definisce l’aspetto quando il cursore del mouse ci passa sopra.
#navbar a {
padding-top: 3px;
padding-right: 12px;
padding-bottom: 3px;
padding-left: 12px;
background: #6f5590; color: #fff;
text-decoration: none;
}
#navbar a:hover {
background: white; color: #111;
}
Il risultato è mostrato in fig. 5.
Fig. 5
Forse il rosa stona col resto? Cambiamo pink con navy nella regola #navbar, ed ecco il risultato (fig. 6).
Fig. 6
Se vogliamo rendere l’aspetto di alcuni link diverso dagli altri, possiamo assegnare quei link ad una classe, e quindi aggiungere una regola CSS per quella classe. Ad esempio nel file header.php possiamo modificare la sezione div navbar in questo modo:
<div id=”navbar”>
<a href=”http://www.dontdream.it”>Home</a>
<a class=”special” href=”http://wordpress.org”>WordPress</a>
<a href=”http://www.dontdream.it/?p=20”>Oklahoma!</a>
<a href=”mailto:andrea@dontdream.it”>Contact us</a>
</div>
e nel file style.css aggiungiamo la regola #navbar a.special dopo la regola #navbar a, ad esempio:
#navbar a.special {
color: yellow;
}
Il risultato è mostrato in fig. 7.
Fig. 7
Ora la barra di navigazione è visualizzata correttamente da Konqueror e da Firefox, ma non è perfettamente centrata se visualizzata da IE 6.0. Dobbiamo andare alla seconda regola #header nel file header.php e cancellare la dichiarazione:
margin: 0 0 0 1px;
Quindi dobbiamo andare alla seconda regola #footer nel file style.css, e cancellare la dichiarazione:
padding: 0 0 0 1px;
Osserviamo il risultato finale, in fig. 8.
Fig. 8
Preferireste un aspetto diverso? Possiamo facilmente modificare colori, font, dimensioni, spaziatura, e anche la posizione della nostra barra di navigazione. Per esempio, se preferiamo una barra trasparente sovrapposta alla immagine di testa, possiamo impostare un margine superiore negativo nella regola #navbar, ed eliminare il colore di sfondo, cioè:
#navbar {
margin: 0 10px;
margin-top: -20px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
background: none;
}
La differenza si può vedere in fig. 9.
Fig. 9
Abbiamo così ottenuto una semplice barra di navigazione, facilmente modificabile, che viene visualizzata allo stesso modo da diversi browser. Spero che vi sia utile!
Grazie mille,era da un pò che cercavo informazioni chiare su come realizzare un menù orizzontale…direi che le ho trovate:in 5 minuti ho fatto tutto.Complimenti anche per il blog!Ciao.
Grazie Giancarlo, mi fa piacere che ti sia stato utile. In bocca al lupo per il tuo nuovo sito!
Ciao Andrea,
sto provando a seguire il tutorial per l’inserimento di una barra di navigazione orizzontale nel mio blog..
Seguo pedissequamente le tue istruzioni fino al punto 4°, dove mi fermo perchè nonostante le modifiche al file style.css nulla cambia nel layout della home del blog.
Ti andrebbe di darmi una mano?
Saluti!!!
Ciao Michele,
ti ho inviato una mail con qualche suggerimento, fammi sapere se il problema si risolve. Ciao!
Grande Andrea!!!!
Ho appena potuto provare a mettere in pratica i tuoi consigli, sono stati utilissimi:
il problema era proprio nel carattere dei doppi apici che avevo usato nel file header.php.
Avevo copiato e incollato le righe di comando da te proposte come esempio, senza degnarmi di scriverle di mio “pugno” nell’editor che uso.. il carattere dei doppi apici (ho notato oggi) è diverso.
Prima che per il risultato ottenuto, ti ringrazio tantissimo per la disponibilità!
Non mi rimane che augurarti… Buon Natale!!
Michele
Grazie Michele, ricambio gli auguri e aggiungo: in bocca al lupo per il tuo sito! Ciao.
Ciao Andrea,
stavo seguendo il tuo tutorial sulla barra di navigazione ….molto utile e ti ringrazio per averlo pubblicato, ho un problemino però non riesco a sistemare la posizione della barra in modo uguale su IE e Firefox, riesci a darmi qualche consiglio??? Grazie.
Questo è il mio sito: http://www.headwebsolution.com , se vuoi vedere come si differenzia la visualizzazione, non fare caso ai contenuti ci sto lavorando, e non so cosa ne verrà fuori….
Ancora una cosa….posso linkarmi al tuo sito?
Ciao.
Ciao Tommy,
ti ho inviato una mail con qualche idea, spero che ti sia di aiuto.
Per il link nessun problema, anzi lo considero un segno di apprezzamento da parte tua. Ciao!
ciao e complimenti x il Blog.. io tentavo di imbastirne uno ma NON sono assolutamente un programmatore (anzi, sembra che io e la programmazione siamo 2 opposti)
non capivo DOVE scrivere queste cose nel file style.css (intendo… in QUALE punto devo scrivere?)
_________________
Ovviamente dobbiamo migliorare l’estetica, così apriamo il file style.css nella cartella newtheme, e aggiungiamo alla fine le nuove regole CSS. Cominciamo con la regola #navbar, che definisce l’aspetto generale della barra:
#navbar {
margin: 0 10px;
padding-top: 3px;
padding-right: 0px;
padding-bottom: 3px;
padding-left: 0px;
font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif;
background: pink;
}
_________________
Grazie
Ciao Ale,
grazie, e complimenti anche a te per il tuo nuovo sito. Le modifiche vanno aggiunte “alla fine”, cioè in fondo al file. Ho corretto anche le istruzioni per eliminare la possibile ambiguità.
Ciao, e buon lavoro!
Ho notato che nel tuo sito la pagina corrente viene evidenziata e la “linguetta” cambia colore rispetto al resto del menu, ci dici il codice? Grazie
Ciao Emiliano,
ho seguito le istruzioni di Wordpress:
http://codex.wordpress.org/Dynamic_Menu_Highlighting
Non sono riuscito a trovare la traduzione italiana nel wiki di Wordpress Italy, ero convinto però di averla vista …
Ciao, e complimenti per il tuo nuovo sito!
innanzitutto complimenti!!!
ora c’è una speranza anche per me!!!
volevo chiederti una cosa, è possibile (sicuramente sì, ma non so fare) inserire nel menu orizzontale al posto del testo delle immagini cliccabili che linkano alle pagine del blog?
grazie
Ciao Francesco,
si potrebbe inserire, al posto del testo del link (ad esempio al posto della parola Home) un tag img, ad esempio:
<img src=’http://www.dontdream.it/images/home.gif’ alt=’Home’ title=’Home’ />
Poi occorre eventualmente ritoccare il CSS per migliorare l’aspetto della barra, ma su questo non ho fatto molte prove e non ho indicazioni precise da suggerirti.
Grazie dei complimenti, e buon lavoro!
Ottimi suggerimenti, molto precisi. Se non ho capito male, devo indicare io le pagine, non posso generare il menu’ automaticamente con le pagine create. E’ corretto? Grazie, Marco.
Sì Marco, i link del menu devono essere creati manualmente uno per uno. Questo permette di mescolare a piacere link a pagine, a post, a categorie, link esterni e indirizzi di posta ma, in cambio, si deve rinunciare alla comodità di un menu automatico.
Grazie!
Ciao Andrea, complimenti x la guida. Però ho un problema, aggiungendo i link
a header.php nessun problema ma quando vado a modificare il css nn cambia l’aspetto. Dove sbaglio?
Ciao Filippo,
assicurati ovviamente di salvare le modifiche che fai al file style.css, ed assicurati di riaggiornare la schermata del browser con il tasto Aggiorna, o Reload. Prova a controllare anche i doppi apici (“) nelle righe tipo:
div id=”navbar”
nel file header.php.
Se non si tratta di questo, puoi inviarmi, anche via e-mail, l’indirizzo della pagina che stai modificando, così provo a a darci una occhiata.
Ciao
Grazie della risposta, ho risolto ^^ nel comando font: 12px Verdana, Lucida Grande, Arial, Helvetica, Sans-Serif; dovevo mettere Lucida Grande fra gli apici.
Ciao.
Gran bel how-to.
Seguito passo passo senza alcun problema mi è stato di grande aiuto per inserire il menu orizzontale anche nel mio blog.
http://recensioni.aquileianews.it
Che ne dite del risultato?
Grazie Andrea
Complimenti, e auguri per il tuo nuovo sito! Ciao Davide!
Non riesco a mettere l’immagine come sfondo di intestazione che voglio io, eppure seguo le istruzioni abbastanza chiaramente… Perchè????
Ho caricato il mio file con nome kubrickheader, ma mi mette sempre quello che vuole lui…
Ciao Matteo,
controlla il nome della cartella “wp-content/themes/NOMETEMA/images” e del file “kubrickheader.jpg”, e assicurati che NOMETEMA sia il nome della cartella del tema attivo.
Per vedere qual è il tema attivo, vai nel pannello di amministrazione (Login), comando Presentation, Themes e leggi nelle prime righe il nome della cartella del tema (dovrebbe essere “default” se stai modificando la copia originale oppure, se hai creato una copia, il nome di questa copia).
Se ancora non riesci a risolvere, puoi dirmi dov’è il tuo sito e ci do una occhiata. Ciao!
Ciao andrea, ho usato anche io il tuo favoloso tutorial. Sono riuscito a fare la barra orizzontale, ma ho bisogno di un consiglio. Io uso come tema Kubrick, ho deciso di creare la navbar al di sotto dell’header, visto che non l’ho ancora dotata di una immagine. Volevo sapere da te, quali colori useresti come bg dei pulsanti, sia quando si è sopra che non. La barra è trasparente. Oppure mi consigli di metterla sopra l’header?
Ho provato quel discorso della linguetta che rimane bianca sulla pagina corrente, ma mi trasforma la barra in un elenco puntato.
Dimenticavo, è possibile arrotondare gli angoli dei pulsanti?
Ciao Inblog,
ti rispondo con qualche giorno di ritardo ma ero in ferie senza Internet. Ho visto che hai già risolto quasi tutto, la tua scelta di colori mi pare valida, resta solo la domanda sugli angoli arrotondati, ma su quella mi trovi impreparato. Comunque ti faccio gli auguri per il tuo nuovo blog!
Ciao!
Scusa…io faccio tutto quello che dici..ma mi succede come a Michele…nonostante io modifichi il file style.css, non mi visualizza il passo 4.
Potresti aiutarmi?
grazie
Ce l’ho fatta!!
Grazie!!
Ciao Emanuele,
sei stato velocissimo! Meglio così, e in bocca al lupo per il tuo Computer News!
ciao Andrea,
per quanto tu abbia spiegato passo passo ogni singolo passaggio … io non ce l’ho fatta a creare un menu. Ho un blog che per migliorarsi avrebbe veramente bisogno di un menu!!! Volevo chiederti se potresti darmi una mano, sono giorni che “navigo” per cercare di capire come fare a creare un menu … ma niente. Ti ho lasciato un mio indirizzo mail e l’indirizzo del mio blog! Se puoi darmi una mano te ne sarei infinitamente grata!
Ti ringrazio anticipatamente per la disponibilità e la gentilezza (che hai dimostrato nelle risposte ai post precedenti)
Ciao
Chiara
Ciao Chiara,
scusami per il ritardo ma il tuo messaggio mi era proprio sfuggito.
Il problema che incontri è dovuto al fatto che tu usi Blogger, mentre questo articolo si riferisce a WordPress, e i due sistemi sono diversi.
Purtroppo non conosco bene Blogger, e non so darti suggerimenti validi. Potresti provare a chiedere sul forum di Blogger, sicuramente ci sarà qualcuno in grado di darti una mano.
Ciao, e in bocca al lupo per il tuo blog!
sto facendo il mio primo blog wordpress ma non riesco a inserire sta barra….come faccio???
non riesco neanche a far apparire la parte rosa…al momento rimane ancora solo i link
Ciao Alain,
ricordati di svuotare la cache e ricaricare la pagina, ogni volta che cambi il CSS. Se preferisci una soluzione più rapida e flessibile, prova il plugin Menubar.