Tutorial.

As vrea sa prezint un mic tutorial in care sa invatam cum se face la o tema inca un meniu in plus.Temele pro majoritatea au binenteles 2 meniuri.Unul cu paginile personale,gen acasa(home),contact,si altele.Iar celalalt meniul cu categoriile in care sunt scrise articolele de pe blog.La tema pe care o am acum am vrut sa-mi fac una cu cele 2 meniuri mentionate mai sus.Cei care aveti o tema simpla cu un singur meniu iata ce trebuie sa faceti pentru a adauga un al doilea meniu la tema.

Avem in tema continutul header.php care se deschide cu un editor text.De obicei se foloseste notepad++ care este foarte bun.

Dupa ce se deschide header.php trebuie sa gasiti divul cu primul meniu (vezi foto 1)

codul pentru meniu fiind acesta

<div id=”menu”><ul>
<li><a title=”Home” href=”<?php bloginfo(‘url’); ?>”>Acasa</a></li>
<li><?php wp_list_pages(‘title_li=&depth=1’); ?></li>

</div>

Dupa indentificarea primului meniu se adauga imediat dupa el acest cod pentru meniul 2 care va fi format din categoriile blogului tau.

<div id=”menu2″><ul>
<li><?php wp_list_categories(‘title_li=&depth=1’); ?></li>
</div>

Eu lam numit menu2 ca sal pot indentifica mai bine in css.Foto 2 cum va arata in header.php dupa introducerea codului.

In style.css trebuie sa dublati codurile pentru meniul 2 la fel ca cele pentru meniu 1 si sa adaugati un cod si pentru meniul 2 in loc de menu.Asa arata la mine in css la meniuri.Avem menu (care inseamna meniul 1) si menu2  (meniul 2)

#menu { background:#333 url(images/menu.jpg);
position:absolute;
line-height:49px;
top:140px;
width:1000px;
left: 0px;
font-family: verdana, monospace;

}

#menu ul {
top:0px;
float:left;
margin:0px;
padding:0px;
position: relative;
left: 4px;
}
#menu li {
display:inline;
}

#menu a { line-height:49px;
border-right:1px solid #000;
color: #fff;
display:inline;
margin:0px;
padding:5px 10px 0;
font-size: 10pt;
font-weight: bold;
text-decoration:none;
}
#menu a:hover {
text-decoration:underline;
color: #E8FF56;
}

#menu2 {margin:0px;
position:absolute;
line-height:30px;
width:1000px;
left: 0px;
font-family: verdana, arial;
}

#menu2 ul {
top:0px;
float:left;
margin:0px;
padding:0px;
position: relative;
left: 4px;
}
#menu2 li {
display:inline;
}

#menu2 a { border: 1px solid #F7FF89;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
line-height:30px;
color: #fff;
display:inline;
margin:0px;
padding:5px 5px;
font-size: 10pt;
font-weight: bold;
text-decoration:none;
}
#menu2 a:hover {border: 1px solid #F7FF89;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
text-decoration:underline;
color: #000;
background-color:#EFFA53;
}

Trebui setat meniul 2 sa fie sus si meniul 1 mai jos,exact cum vedeti la mine in tema.Treaba asta se face atunci cand se dau valorile margin-top:0px; respectiv margin-top:150px; Pentru nelamuriri va stau la dispozitie.