Geekissimo

Modifichiamo il menu del nostro WordPress con uno più web 2.0!

 
@mister6339 (Michele Laganà)
20 Settembre 2008
2 commenti
Menu WordPress

In questi ultimi mesi, ci sono sempre più amici blogger che mi chiedono qualche consiglio su come migliorare il tema del loro blog. Molte volte mi viene naturale dirgli di inserire elementi Web 2.0, come per esempio bottoni, immagini e tanto altro. Oggi voglio segnalare a tutti i lettori di Geekissimo, come creare un menu a due linee, sul vostro tema WordPress.

Le cose fondamentali da sapere prima di iniziare con il tutorial, è che in questa guida andremo a modificare il file CSS del tema, e quello Header.php sempre del tema di WordPress. Prima di iniziare con le modifiche, vi consiglio di effettuare un Bakcup del tema completo, in modo da poterlo rimettere in caso di problemi. A questo punto, iniziamo con la guida, dopo il salto trovate tutte le informazioni su come creare il vostro Menu a due linee.


Iniziamo con l’aprire il file CSS del vostro tema. A fine foglio inserite il seguente codice:

* {
margin:0;
padding:0
}
#nav {
background:#577da2;
border-bottom:1px solid #FFF;
height:32px;
}
#nav li {
margin-right:25px;
}
#nav li, #subnav li {
float:left;
list-style:none
}
#nav a, #nav a:visited {
color:#FFF;
text-decoration:none;
font-weight:bold
}
#nav a:hover, #nav a:active,
li.current_page_parent a,
li.current_page_parent a:visited,
#nav li.current_page_item a,
#nav li.current_page_item a:visited
{
background:#295887
}
#subnav {
background:#e6eef7;
border-top:2px solid #577da2;
border-bottom:2px solid #cad8e6;
height:28px;
}
#subnav li {
border-right:1px solid #295887;
padding:0 7px;
}
#subnav a, #subnav a:visited {
color:#295887;
text-decoration:none;
font-weight:bold
}
#subnav a:hover, #subnav a:active,
#subnav li.current_page_item a,
#subnav li.current_page_item a:visited {
text-decoration:underline
}

Una volta salvato il file, non ci resta che aprire il file Header.php e sostituire l’attuale menu con il seguente:

<ul id="nav">
< ?php wp_list_pages('title_li=&depth=1'); ?>
</ul>
< ?php if($post->post_parent)
$children = wp_list_pages("title_li=&child_of=".$post->post_parent."&echo=0"); else
$children = wp_list_pages("title_li=&child_of=".$post->ID."&echo=0");
if ($children) { ?>
<ul id="subnav">
< ?php echo $children; ?>
</ul>
< ?php } else { ?>
< ?php } ?>

Adesso, salvate anche questo file e godetevi il vostro nuovo menu a due linee. Ovviamente, ogni modifica a colori e altro va fatta sul file CSS!

Categorie: Css, Wordpress
Tags: Css,  Internet,  menu,  modifiche,  theme,  Wordpress, 
Potrebbe interessarti anche
Articoli Correlati
Due nuovi temi per WordPress in stile Vintage!

Due nuovi temi per WordPress in stile Vintage!

Sono tanti i designer WEB che ogni giorno si dilettano a creare dei nuovi temi per diverse piattaforme. C’è chi lavora sul semplice HTML o PHP, c’è chi invece, si […]

CSSEZ, nuovo ottimo generatore on-line di temi per WordPress e MovableType

CSSEZ, nuovo ottimo generatore on-line di temi per WordPress e MovableType

Come già giustamente sottolineato più volte, oltre i contenuti (che sono la cosa fondamentale), in un blog anche l’occhio vuole la sua parte e quindi un tema grafico bello da […]

Come creare e gestire un sito con strumenti free ed open source

Come creare e gestire un sito con strumenti free ed open source

Se avete intenzione di mettere su un bel sito web, senza voler spendere praticamente nulla (a parte l’eventuale acquisto del dominio ovviamente!) avete proprio trovato quello che fa per voi! […]

72 risorse gratuite “Must Have” per il web-design

72 risorse gratuite “Must Have” per il web-design

Si sa, la vita da web design non è certo la più facile in cui orientarsi per trovare risorse valide. Noi di Geekissimo, come sempre, pensiamo a tutti i nostri […]

Guida: come avere più CSS [style/grafica] in un solo sito e cambiarlo con un click

Guida: come avere più CSS [style/grafica] in un solo sito e cambiarlo con un click

Oggi, come sempre, noi di Geekissimo pensiamo atutti gli amici che gestiscono un sito/blog e vogliono abbellirlo in modo originale senza troppe difficoltà. Che ne dite di uno stile grafico […]

Lista Commenti
Aggiungi il tuo commento

Fai Login oppure Iscriviti: è gratis e bastano pochi secondi.

Nome*
E-mail**
Sito Web
* richiesto
** richiesta, ma non sarà pubblicata
Commento

  • #1Anel

    è un casino sto codice dell’articolo, l’unico che funziona è quello della fonte

    7 Nov 2008, 10:50 pm Rispondi|Quota
  • #2ema

    ma come faccio se ne volessi 3 di linee?

    8 Gen 2010, 8:12 pm Rispondi|Quota