WordPress orta/çoxsəviyyəli naviqasiya çubuğuna xüsusi menyunu necə çağırır?

Bir çox onlayn marketinq mütəxəssisi veb saytlarını yaratmaq üçün WordPress-dən istifadə etməyi seçir , lakin bəzi mövzular naviqasiya panellərində iki səviyyəli/çoxsəviyyəli menyuları dəstəkləmir. Əgər məmnun deyilsinizsə, mövzunun menyu stilini əl ilə əlavə etməyə və ya dəyişdirməyə cəhd edə bilərsiniz.

Dəyişiklik header.php-dən başlayır.Bu şablon faylında vacib funksiya menyunun göstərilməsidir.

Kateqoriyaya menyu kimi zəng etmək üçün kodu istifadə etsəniz, bu da mümkündür, lakin menyu elementlərini çeşidləmək rahat deyil.

Alt-kateqoriyaları olan qovluqları idarə etmək asan deyil, ona görə də mən də digər mövzular kimi mövzuma xüsusi menyu funksiyaları əlavə etmək istəyirəm.

Yeni hazırlanmış mövzuya menyu fərdiləşdirmə funksiyasını əlavə etmək çətin deyil, əsasən 2 addım var.

İlk addım, WordPress menyu qeydiyyatı

Menyudan istifadə etmək üçün əvvəlcə qeydiyyatdan keçməli, mövzu altında funksiyalar faylını açmalı və aşağıdakı kodu əlavə etməlisiniz ▼

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

• Mövzu altında functions.php faylı yoxdursa, yenisini yaradın və onu saxlamaq üçün yuxarıdakı kodu kopyalayın.

WordPress admin panelinə daxil olun və "Görünüş" → "Menyu" bölməsinə keçin.

Aşağıdakı ekranı görürsünüzsə, bu o deməkdir ki, siz ▼ kimi qeydiyyatdan keçmisiniz

Yuxarıdakılar 2 menyunu qeyd edir:

1. Üst menyu Üst menyu çubuğu.
2. əsas menyu Main menyu çubuğu.

İkinci addım, WordPress menyu çağırışı

Menyu qeydiyyatdan keçdikdən sonra onu tema şablon faylında çağırmaq olar.Aşağıdakı kodu header.php faylına qoyun və menyunu göstərmək istədiyiniz yerə zəng edə bilərsiniz.

header.php faylında "yuxarı menyu"nu çağırın▼

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

header.php faylında "əsas menyu"ya zəng edin▼

//主菜单调用
<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 faylında "alt menyu"ya zəng edin▼

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

Üçüncü addım, parametrlər menyusu

Menyu qeydə alındıqdan və menyunun ekran mövqeyi mövzu faylında müəyyən edildikdən sonra WordPress fonunda yeni menyu elementi yarada bilərsiniz.

Sonra, qeydiyyatdan keçmiş menyuya yeni yaradılmış menyu elementini təyin edin və müvafiq əlaqəni təklif edin ▼

Wordpress-də çox səviyyəli menyu naviqasiya çubuğu olun

İndi WordPress çoxsəviyyəli menyunu necə etmək barədə danışaq:

Əvvəlcə öz WordPress temanızın funksiyalar faylındakı orijinal menyu kodunu silin.

və ya bu kodu birbaşa əlavə edin ▼

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

• Qeyd: daxil olmalıdırXaricdən əlavə edildi.

Sonra menyuya zəng etmək üçün mövzunun PHP kodunu tapın, əgər xamdırsa, adətən belə olur ▼

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

çıxarın və ▼ ilə əvəz edin

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

• Qeyd: Bu kodun başqa divləri ehtiva etmədiyinə əmin olun, əks halda o, xarici div ilə məhdudlaşacaq.

Növbəti addım açılan JS funksiya kodunu əlavə etmək və mövzunun JS faylına aşağıdakı kodu əlavə etməkdir ▼

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

WordPress Menyu CSS Üslubları

Nəhayət, CSS stilinin gözəlləşdirilməsi.

Nə cür effekt olmalıdır, təxəyyülünüzə tam oyun verin, CSS bunu edə bilər ▼

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

• Yuxarıdakı CSS kodunu mövzunun style.css faylına əlavə edin və onu yadda saxlayın.

Yadda saxladıqdan sonra veb saytınızın ön səhifəsini yeniləyin, təsirini görə bilərsiniz, çox sadədir?