Hur kallar WordPress den anpassade menyn för sekundär/flera nivåer i navigeringsfältet?

massor网络 营销människor väljerWordpressKommabygga en webbplats, men navigeringsfältet för vissa teman stöder inte sekundära/flernivåmenyer. Om du inte är nöjd kan du försöka att manuellt lägga till eller ändra temats menystil.

Ändringen startar från header.php.En viktig funktion i denna mallfil är visningen av menyn.

Om du använder koden för att kalla kategorin som en meny är det också möjligt, men det är inte bekvämt att sortera menyalternativen.

Katalogen med underkategorier är inte lätt att hantera, så jag vill också lägga till en anpassad menyfunktion till mitt tema som andra teman.

Det är inte svårt att lägga till menyanpassningsfunktion till det nygjorda temat, det finns huvudsakligen 2 steg.

Det första steget, WordPress-menyregistrering

För att använda menyn måste du först registrera dig, öppna funktionsfilen under temat och lägga till följande kod ▼

<?php
//自定义菜单
if (function_exists('register_nav_menus')) {
register_nav_menus( array( 'top_navi' => __('顶部菜单') ) );
register_nav_menus( array( 'menu_navi' => __('站点导航') ) );
register_nav_menus( array( 'foot_navi' => __('底部菜单') ) );
}
?>

• Om det inte finns någon functions.php-fil under temat, skapa en ny och kopiera ovanstående kod för att spara den.

登录WordPress backendoch gå sedan till Utseende→ Meny.

Om du kan se skärmen nedan betyder det att du har registrerat dig som ▼

Ovanstående registrerar 2 menyer:

1. En toppmeny Toppmenyraden.
2. en huvudmeny Main menyraden.

Det andra steget, WordPress-menyanropet

Efter att menyn är registrerad kan den anropas i temamallfilen Lägg följande kod i header.php-filen, så kan du anropa den där du vill visa menyn.

I header.php-filen, anropa "toppmenyn"▼

//顶部菜单调用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

I filen header.php, anropa "huvudmenyn"▼

//主菜单调用
<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

'menu_navi')); ?>

Anropa "bottenmenyn" i footer.php-filen▼

//底部菜单调用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

Steg XNUMX: Inställningsmeny

Efter att menyn har registrerats och visningspositionen för menyn har definierats i temafilen, kan du skapa ett nytt menyalternativ i WordPress-bakgrunden.

Tilldela sedan det nyskapade menyalternativet till den registrerade menyn och föreslå motsvarande relation ▼

Gör wordpress menynavigeringsfält på flera nivåer

Låt oss nu prata om hur man gör en WordPress flernivåmeny:

Ta först bort den ursprungliga menykoden i funktionsfilen för ditt eget WordPress-tema.

eller lägg till denna kod direkt ▼

<?php if ( function_exists('register_nav_menus') ) {register_nav_menus(array('primary' => '主导航菜单'));}?>

• Obs: måste vara medTillagd utanför.

Hitta sedan PHP-koden för temat att anropa menyn, om den är rå så brukar den vara så här ▼

<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>

ta bort den och ersätt den med ▼

<div id="menu"><?php if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'primary','menu_id'=>'nav','container'=>'ul'));
} ?> </div>

• Obs: Se till att den här koden inte innehåller andra div, annars kommer den att begränsas av den yttre div.

Nästa steg är att lägga till rullgardinsmenyn JS-funktionskod och lägga till följande kod till temats JS-fil ▼

jQuery(document).ready(function($) {
$('#nav li').hover(function() {
$('ul', this).slideDown(200)},
function() {$('ul', this).slideUp(300)});});

WordPress-meny CSS-stilar

Slutligen, försköning i CSS-stil.

Vilken typ av effekt ska vara, ge full spel åt din fantasi, CSS kan göra det ▼

#menu {position:relative;width:99%;margin:0 5px 0 5px;height:36px;background: #f6f6f6 url("images/jtyu.jpg");}
#menu li{border-right:0px #ace solid;}
#nav{margin-left:30px;width:900px;height:36px;}
#nav li{font-size:14px;width:100px;line-height:30px;float:left;background: #f6f6f6 url("images/iol.jpg");border-bottom:0px #fff solid}
#nav li a{line-height:36px;color:#fff;text-align:center;display:block;background:url("images/beg.png") no-repeat;margin:0;}
#nav li a:hover{background:url("images/oilu.png") no-repeat center;color:#f03;}
.sub-menu {height:36px;float:left;position:absolute;text-align:center;display:none;}
.sub-menu a {border-top:0px #fff solid;height:36px;color:#fff; text-decoration:none; line-height:36px; text-align:center; padding:0 20px; display:block; _width:48px;}

• Lägg till ovanstående CSS-kod i temats style.css-fil och spara den.

Efter att ha sparat, uppdatera framsidan på din webbplats, du kan se effekten, är det väldigt enkelt?