Як WordPress выклікае карыстацкае меню другаснай/шматузроўневай панэлі навігацыі?

шмат网络 营销людзі выбіраюцьWordPressДавайстварыць вэб-сайт, але панэль навігацыі некаторых тэм не падтрымлівае другаснае/шматузроўневае меню. Калі вы не задаволены, вы можаце паспрабаваць уручную дадаць і змяніць стыль меню тэмы.

Мадыфікацыя пачынаецца з header.php Важнай функцыяй у гэтым файле шаблона з'яўляецца адлюстраванне меню.

Калі вы выкарыстоўваеце код для выкліку катэгорыі як меню, гэта таксама магчыма, але не зручна сартаваць пункты меню.

Дырэкторыі з падкатэгорыямі няпростыя ў звароце, таму я таксама хачу дадаць карыстальніцкія функцыі меню ў сваю тэму, як і ў іншыя тэмы.

Дадаць функцыю наладкі меню ў новую тэму нескладана, гэта ў асноўным 2 этапы.

Першы крок, рэгістрацыя меню WordPress

Каб выкарыстоўваць меню, вы павінны спачатку зарэгістравацца, адкрыць файл функцый у тэме і дадаць наступны код ▼

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

• Калі ў тэме няма файла functions.php, стварыце новы і скапіруйце прыведзены вышэй код, каб захаваць яго.

登录Бэкэнд WordPress, а затым перайдзіце да Знешні выгляд → Меню.

Калі вы бачыце экран ніжэй, гэта азначае, што вы зарэгістраваны як ▼

Вышэй рэгіструе 2 меню:

1. Верхняе меню Верхняя панэль меню.
2. Галоўнае меню Мain радок меню.

Другі крок, выклік меню WordPress

Пасля таго, як меню зарэгістравана, яго можна выклікаць у файле шаблона тэмы. Змесціце наступны код у файл header.php, і вы зможаце выклікаць яго там, дзе вы хочаце адлюстраваць меню.

У файле header.php выклічце «верхняе меню»▼

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

У файле header.php выклічце «галоўнае меню»▼

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

Выклічце «ніжняе меню» ў файле footer.php▼

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

Трэці крок, меню налад

Пасля таго, як меню зарэгістравана і пазіцыя адлюстравання меню вызначана ў файле тэмы, вы можаце стварыць новы пункт меню ў фонавым рэжыме WordPress.

Затым прызначце толькі што створаны пункт меню да зарэгістраванага меню і прапануйце адпаведную сувязь ▼

Зрабіць шматузроўневую панэль навігацыі па меню WordPress

Зараз давайце пагаворым аб тым, як зрабіць шматузроўневае меню WordPress:

Спачатку выдаліце ​​зыходны код меню ў файле функцый вашай тэмы WordPress.

або дадайце гэты код непасрэдна ▼

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

• Заўвага: павінен быць уДададзена звонку.

Затым знайдзіце PHP-код для тэмы, каб выклікаць меню, калі ён неапрацаваны, звычайна такі ▼

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

выдаліць яго і замяніць на ▼

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

• Заўвага: пераканайцеся, што гэты код не ўтрымлівае іншых div, інакш ён будзе абмежаваны вонкавым div.

Наступны крок - дадаць выпадальны код функцыі JS і дадаць наступны код у файл JS тэмы ▼

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

Стылі CSS меню WordPress

Нарэшце, упрыгожванне ў стылі CSS.

Які павінен быць эфект, дайце поўную волю сваёй фантазіі, CSS можа зрабіць гэта ▼

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

• Дадайце прыведзены вышэй код CSS у файл style.css тэмы і захавайце яго.

Пасля захавання абновіце галоўную старонку вашага сайта, вы можаце ўбачыць эфект, гэта вельмі проста?