Qanday qilib WordPress ikkinchi darajali/ko'p darajali navigatsiya panelining maxsus menyusini chaqiradi?

juda ko'pInternet-marketingodamlar tanlaydiWordPressKelinglarStansiya qurish, lekin baʼzi mavzularning navigatsiya paneli ikkinchi darajali/koʻp darajali menyularni qoʻllab-quvvatlamaydi. Agar qoniqmasangiz, mavzuning menyu uslubini qoʻlda qoʻshish yoki oʻzgartirishga urinib koʻrishingiz mumkin.

O'zgartirish header.php dan boshlanadi.Ushbu shablon faylidagi muhim funksiya menyuni ko'rsatishdir.

Agar siz toifani menyu sifatida chaqirish uchun koddan foydalansangiz, bu ham mumkin, lekin menyu elementlarini saralash qulay emas.

Pastki toifalari bo'lgan katalogni boshqarish oson emas, shuning uchun men boshqa mavzular kabi o'z mavzusimga maxsus menyu funksiyasini qo'shmoqchiman.

Yangi yaratilgan mavzuga menyuni sozlash funksiyasini qo'shish qiyin emas, asosan 2 bosqich mavjud.

Birinchi qadam, WordPress menyusini ro'yxatdan o'tkazish

Menyudan foydalanish uchun avval roʻyxatdan oʻtishingiz, mavzu ostidagi funksiyalar faylini ochishingiz va quyidagi kodni qoʻshishingiz kerak ▼

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

• Mavzu ostida hech qanday functions.php fayli bo'lmasa, yangisini yarating va uni saqlash uchun yuqoridagi koddan nusxa oling.

KirishWordPress backendni bosing va undan so‘ng Tashqi ko‘rinish → Menyu ga o‘ting.

Agar siz quyidagi ekranni ko'rsangiz, demak siz ▼ sifatida ro'yxatdan o'tgansiz

Yuqorida 2 ta menyu qayd etilgan:

1. Yuqori menyu Yuqori menyu paneli.
2. asosiy menyu Main menyu paneli.

Ikkinchi qadam, WordPress menyusi chaqiruvi

Menyu ro'yxatga olingandan so'ng, uni mavzu shablon faylida chaqirish mumkin.Quyidagi kodni header.php fayliga qo'ying va menyuni ko'rsatmoqchi bo'lgan joyga qo'ng'iroq qilishingiz mumkin.

Header.php faylida "yuqori menyu" ni chaqiring▼

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

Header.php faylida "asosiy menyu" ni chaqiring▼

//主菜单调用
<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 faylidagi "pastki menyu" ga qo'ng'iroq qiling▼

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

Uchinchi qadam, sozlamalar menyusi

Menyu ro'yxatga olingandan so'ng va mavzu faylida menyuning displey pozitsiyasi aniqlangandan so'ng, WordPress fonida yangi menyu elementini yaratishingiz mumkin.

Keyin, ro'yxatdan o'tgan menyuga yangi yaratilgan menyu bandini belgilang va tegishli munosabatni taklif qiling ▼

Wordpress ko'p darajali menyu navigatsiya panelini yarating

Keling, WordPress ko'p darajali menyusini qanday qilish haqida gapiraylik:

Avval o'zingizning WordPress mavzuingizning funktsiyalar faylidagi asl menyu kodini o'chirib tashlang.

yoki to'g'ridan-to'g'ri ushbu kodni qo'shing ▼

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

• Eslatma: bo'lishi kerakTashqarida qo'shilgan.

Keyin menyuga qo'ng'iroq qilish uchun mavzu uchun PHP kodini toping, agar u xom bo'lsa, odatda shunday bo'ladi ▼

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

olib tashlang va ▼ bilan almashtiring

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

• Eslatma: Ushbu kodda boshqa divlar mavjud emasligiga ishonch hosil qiling, aks holda u tashqi div bilan chegaralanadi.

Keyingi qadam, ochiladigan JS funksiya kodini qo'shish va mavzuning JS fayliga quyidagi kodni qo'shishdir ▼

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

WordPress menyusi CSS uslublari

Nihoyat, CSS uslubini obodonlashtirish.

Qanday effekt bo'lishi kerak, tasavvuringizga to'liq o'yin bering, CSS buni qila oladi ▼

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

• Yuqoridagi CSS kodini mavzuning style.css fayliga qo'shing va uni saqlang.

Saqlaganingizdan so'ng, veb-saytingizning old sahifasini yangilang, effektni ko'rishingiz mumkin, bu juda oddiymi?