Hoe noem WordPress sekondêre/multi-vlak navigasiebalk gepasmaakte spyskaart?

baie van网络 营销mense kiesWordPresskom'n webwerf te bou, maar die navigasiebalk van sommige temas ondersteun nie sekondêre/multivlakkieslyste nie. As jy nie tevrede is nie, kan jy probeer om die spyskaartstyl van die tema handmatig by te voeg en te wysig.

Die wysiging begin vanaf header.php 'n Belangrike funksie in hierdie sjabloonlêer is die vertoon van die spyskaart.

As jy die kode gebruik om die kategorie as 'n spyskaart te noem, is dit ook moontlik, maar dit is nie gerieflik om die menu-items te sorteer nie.

Gidse met sub-kategorieë is nie maklik om te hanteer nie, so ek wil ook pasgemaakte spyskaartfunksies by my tema voeg, net soos ander temas.

Dit is nie moeilik om spyskaartaanpassingsfunksie by die nuutgemaakte tema te voeg nie, daar is hoofsaaklik 2 stappe.

Die eerste stap, WordPress-kieslysregistrasie

Om die spyskaart te gebruik, moet jy eers registreer, die funksieslêer onder die tema oopmaak en die volgende kode byvoeg ▼

<?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' => __('底部菜单') ) );
}
?>

• As daar geen functions.php-lêer onder die tema is nie, skep 'n nuwe een en kopieer die bogenoemde kode om dit te stoor.

登录WordPress-agterkant, en gaan dan na Voorkoms→ Kieslys.

As jy die skerm hieronder kan sien, beteken dit dat jy as ▼ geregistreer het

Bogenoemde registreer 2 spyskaarte:

1. 'n Topkieslys Topkieslysbalk.
2. 'n hoof spyskaart Main spyskaartbalk.

Die tweede stap, die WordPress-kieslysoproep

Nadat die spyskaart geregistreer is, kan dit in die tema sjabloon lêer geroep word.Sit die volgende kode in die header.php lêer, en jy kan dit noem waar jy die spyskaart wil vertoon.

In die header.php-lêer, roep die "topmenu"▼

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

In die header.php-lêer, roep die "hoofkieslys"▼

//主菜单调用
<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')); ?>

Roep die "bottom menu" in die footer.php-lêer▼

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

Die derde stap, die instellingsmenu

Nadat die spyskaart geregistreer is en die vertoonposisie van die spyskaart in die temalêer gedefinieer is, kan u 'n nuwe menu-item in die WordPress-agtergrond skep.

Ken dan die nuutgeskepte spyskaart-item toe aan die geregistreerde spyskaart, en stel die ooreenstemmende verhouding voor ▼

Maak wordpress multi-vlak spyskaart navigasiebalk

Kom ons praat nou oor hoe om 'n WordPress multi-vlak spyskaart te maak:

Vee eers die oorspronklike spyskaartkode uit in die funksieslêer van jou eie WordPress-tema.

of voeg hierdie kode direk by ▼

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

• Let wel: moet in weesBuite bygevoeg.

Soek dan die PHP-kode vir die tema om die spyskaart te noem, as dit rou is, is dit gewoonlik so ▼

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

verwyder dit en vervang dit met ▼

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

• Let wel: Maak seker dat hierdie kode nie ander divs bevat nie, anders sal dit deur die buitenste div begrens word.

Die volgende stap is om die aftreklys JS-funksiekode by te voeg en die volgende kode by die tema se JS-lêer te voeg ▼

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

WordPress Menu CSS Styles

Ten slotte, CSS-styl verfraaiing.

Watter soort effek moet wees, gee volle spel aan jou verbeelding, CSS kan dit doen ▼

#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;}

• Voeg die bogenoemde CSS-kode by die tema se style.css-lêer en stoor dit.

Nadat u gestoor het, verfris die voorblad van u webwerf, u kan die effek sien, is dit baie eenvoudig?