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')); ?>

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

• Жоғарыдағы CSS кодын тақырыптың style.css файлына қосыңыз және оны сақтаңыз.

Сақтағаннан кейін веб-сайтыңыздың алдыңғы бетін жаңартыңыз, сіз әсерді көре аласыз, бұл өте қарапайым ма?