Cum sa faci un al doilea meniu la o tema wordpress

In acest articol un pic cam lung cei drept o sa va invat cum poti administra si creea 2 meniuri la o tema wordpress.Dea lungul timpului am vazut la o tema wordpress 1,2,3 meniuri.Inca nu am vazut o tema cu 4 meniuri deja o cred o mica exagerare,dar e doar o parere personala.Asadar iata codurile pe care le folosesc la un singur meniu.

'menu', 'theme_location' => 'primary','menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu1' ) ); ?>

Codul se pune in header.php dupa tagul bady al temei.

Iata si codul pentru style.css

#foxmenucontainer{
border:1px solid #999;
float:left;
width: 960px;
height:40px;
display:block;
margin: 0px auto;
font-size: 14px;
font-family: verdana, Tahoma, Century gothic, sans-serif;
font-weight:normal;
background:#fff;
}

#menu {
float:left;
width:980px;
margin: 0 auto;
}

#menu ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
line-height:40px;
}

#menu li a {
border-right:1px solid #aaa;
height:40px;
color: #222;
display: block;
margin: 0;
padding: 0px 10px;
text-decoration: none;
position: relative;
font-weight:normal;
border-bottom:2px solid 888;
}

#menu li a:hover, #menu li a:active {
border-bottom:4px solid red;
color: #fff;
background:#555;
border-bottom:1px solid #777;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out
}

#menu li a.sf-with-ul {
padding-right: 20px;
}

#menu li a .sf-sub-indicator {

display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 19px;
right: 5px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #3C4550;
color: #A8B5C4;
width: 148px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 0px 10px;
line-height:35px;
border-left: 1px solid #2C333D;
border-right: 1px solid #2C333D;
border-bottom: 1px solid #2C333D;
text-transform: none;
position: relative;
}

#menu li li a:hover, #menu li li a:active {
background: #525C68;
color: #fff;
}

#menu li li a .sf-sub-indicator {

top: 10px;
}

#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#menu li ul a {
width: 150px;
}

#menu li ul a:hover,
#menu li ul a:active {
}

#menu li ul ul {
margin: -36px 0 0 169px;
}

#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfHover ul ul,
#menu li.sfHover ul ul ul {
left: -999em;
}

#menu li:hover ul, #menu li li:hover ul,
#menu li li li:hover ul,
#menu li.sfHover ul,
#menu li li.sfHover ul,
#menu li li li.sfHover ul {
left: auto;
}

#menu li:hover, #menu li.sfHover {
position: static;
}

Codul pentru functions.php de inregistrare a meniului


/* CUSTOM MENUS */

register_nav_menus( array(
'primary' => __( 'Primary Navigation', '' ),

) );

function fallbackmenu1(){ ?>

Cam atat pentru un singur meniu.Acum hai sa vedem cum se adauga un al doilea meniu fie tot in header (partea de sus a temei) fie in footer (partea de jos dupa continut al temei).
Un al doilea meniu prima data se inregistrata alaturi de primul meniu in function.php prin adaugarea acestui cod: 'secondary' => __( 'Secondary Navigation', '')

Iar codul final in functions.php arata asa:
 

 

register_nav_menus( array(
        'primary' => __( 'Primary Navigation', '' ),
            'secondary' => __( 'Secondary Navigation', '')
    ) );

function fallbackmenu1(){ ?>
            


Si la fel infooter.php se introduce codul pentru al doilea meniu:

'menu', 'theme_location' => 'secondary','menu_class'=>'sfmenu','fallback_cb'=> 'fallbackmenu1' ) ); ?>

si codul pentru style.css:


#foxmenucontainer2{
border:1px solid #999;
float:left;
width: 957px;
height:40px;
display:block;
margin: 0px auto;
font-size: 14px;
font: 14px/1.9 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-weight:normal;
background:#ddd;
}

#menu {
float:left;
width:980px;
margin: 0 auto;
}

#menu ul {
width: 100%;
float: left;
list-style: none;
margin: 0;
padding: 0;
}

#menu li {
float: left;
list-style: none;
margin: 0;
padding: 0;
line-height:40px;
}

#menu li a {
border-right:1px solid #aaa;
height:40px;
color: #222;
display: block;
margin: 0;
padding: 0px 10px;
text-decoration: none;
position: relative;
font-weight:normal;
border-bottom:2px solid 888;
}

#menu li a:hover, #menu li a:active {
border-bottom:4px solid red;
color: #fff;
background:#555;
border-bottom:1px solid #777;
-webkit-transition: all 0.3s ease-in-out;
-moz-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out
}

#menu li a.sf-with-ul {
padding-right: 20px;
}

#menu li a .sf-sub-indicator {

display: block;
width: 10px;
height: 10px;
text-indent: -9999px;
overflow: hidden;
position: absolute;
top: 19px;
right: 5px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background: #3C4550;
color: #A8B5C4;
width: 148px;
font-family: Arial, Tahoma, Verdana;
margin: 0;
padding: 0px 10px;
line-height:35px;
border-left: 1px solid #2C333D;
border-right: 1px solid #2C333D;
border-bottom: 1px solid #2C333D;
text-transform: none;
position: relative;
}

#menu li li a:hover, #menu li li a:active {
background: #525C68;
color: #fff;
}

#menu li li a .sf-sub-indicator {

top: 10px;
}

#menu li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}

#menu li ul a {
width: 150px;
}

#menu li ul a:hover,
#menu li ul a:active {
}

#menu li ul ul {
margin: -36px 0 0 169px;
}

#menu li:hover ul ul,
#menu li:hover ul ul ul,
#menu li.sfHover ul ul,
#menu li.sfHover ul ul ul {
left: -999em;
}

#menu li:hover ul, #menu li li:hover ul,
#menu li li li:hover ul,
#menu li.sfHover ul,
#menu li li.sfHover ul,
#menu li li li.sfHover ul {
left: auto;
}

#menu li:hover, #menu li.sfHover {
position: static;
}



un comentariu la “Cum sa faci un al doilea meniu la o tema wordpress

Faci un comentariu sau dai un răspuns?

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

Alte articole din aceiasi categorie

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.