WordPress ikincil/çok seviyeli gezinme çubuğu özel menüsünü nasıl çağırır?

bir çokİnternet pazarlamacılığıinsanlar seçerWordPressGelBir istasyon inşa et, ancak bazı temaların gezinme çubuğu ikincil/çok seviyeli menüleri desteklemez.Memnun değilseniz, temanın menü stilini manuel olarak eklemeyi veya değiştirmeyi deneyebilirsiniz.

Değişiklik header.php'den başlar Bu şablon dosyasındaki önemli bir fonksiyon menünün görüntülenmesidir.

Kategoriyi menü olarak çağırmak için kodu kullanırsanız, bu da mümkündür, ancak menü öğelerini sıralamak uygun değildir.

Alt kategorileri olan dizinin kullanımı kolay değil, bu yüzden diğer temalar gibi temama da özel bir menü işlevi eklemek istiyorum.

Yeni yapılan temaya menü özelleştirme fonksiyonu eklemek zor değil, temelde 2 adım var.

İlk adım, WordPress menü kaydı

Menüyü kullanmak için önce kayıt olmanız, temanın altındaki işlevler dosyasını açmanız ve aşağıdaki kodu eklemeniz gerekir ▼

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

• Temanın altında function.php dosyası yoksa, yeni bir tane oluşturun ve kaydetmek için yukarıdaki kodu kopyalayın.

登录WordPress arka ucuve ardından Görünüm → Menü'ye gidin.

Aşağıdaki ekranı görüyorsanız ▼ olarak kayıt oldunuz demektir.

Yukarıdakiler 2 menüyü kaydeder:

1. Bir üst menü Üst Menü Çubuğu.
2. ana menü Main menü çubuğu.

İkinci adım, WordPress menü çağrısı

Menü kaydedildikten sonra tema şablon dosyasında çağrılabilir.header.php dosyasına aşağıdaki kodu koyun ve menüyü görüntülemek istediğiniz yere çağırabilirsiniz.

Header.php dosyasında "üst menüyü" çağırın▼

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

Header.php dosyasında "ana menüyü" çağırın▼

//主菜单调用
<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 dosyasındaki "alt menüyü" çağırın▼

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

XNUMX. Adım: Ayarlar menüsü

Menü kaydedildikten ve tema dosyasında menünün görüntülenme konumu tanımlandıktan sonra, WordPress arka planında yeni bir menü öğesi oluşturabilirsiniz.

Ardından, yeni oluşturulan menü öğesini kayıtlı menüye atayın ve ilgili ilişkiyi önerin ▼

Wordpress çok seviyeli menü gezinme çubuğu yapın.

Şimdi WordPress çok seviyeli bir menünün nasıl yapılacağı hakkında konuşalım:

Önce kendi WordPress temanızın işlevler dosyasındaki orijinal menü kodunu silin.

veya bu kodu doğrudan ekleyin ▼

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

• Not: içinde olmalıdırDışa eklendi.

Ardından, menüyü çağırmak için temanın PHP kodunu bulun, eğer ham ise, genellikle böyledir ▼

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

çıkarın ve ▼ ile değiştirin

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

• Not: Bu kodun başka div'ler içermediğinden emin olun, aksi takdirde dış div ile sınırlandırılacaktır.

Bir sonraki adım, açılır JS işlev kodunu eklemek ve aşağıdaki kodu temanın JS dosyasına eklemektir ▼

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

WordPress menü CSS stilleri

Son olarak, CSS stili güzelleştirme.

Nasıl bir efekt olmalı, hayal gücünüze tam anlamıyla yer verin, CSS bunu yapabilir ▼

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

• Yukarıdaki CSS kodunu temanın style.css dosyasına ekleyin ve kaydedin.

Kaydettikten sonra web sitenizin ön sayfasını yenileyin, etkisini görebilirsiniz, çok basit mi?