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.

 

 

 

 

One thought on “Tutorial.

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.