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 backend, анан Көрүнүү→Менюга өтүңүз.

Төмөнкү экранды көрүп жатсаңыз, бул сиз ▼ катары катталганыңызды билдирет

Жогорудагы 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')); ?>

XNUMX-кадам: Орнотуулар менюсу

Меню катталгандан жана менюнун дисплей орду тема файлында аныкталгандан кийин, 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)});});

WordPress менюсунун CSS стилдери

Акыр-аягы, 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;}

• Теманын style.css файлына жогорудагы CSS кодун кошуп, аны сактаңыз.

Сактоодон кийин веб-сайтыңыздын алдыңкы барагын жаңыртыңыз, эффектти көрө аласыз, бул абдан жөнөкөйбү?