Как 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. главно меню Main лента с менюта.

Втората стъпка, извикването на менюто на 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 файла на темата и го запазете.

След като запазите, обновете началната страница на уебсайта си, можете да видите ефекта, много ли е просто?