1 第一步、WordPress菜單注冊

• 2 第二步、WordPress菜單調(diào)用
• 3 第三步、設(shè)置菜單
• 4 制作wordpress多級菜單導航欄
• 5 WordPress菜單CSS樣式

 

很多網(wǎng)絡(luò)營銷人選擇用WordPress來建站，但是有些主題的導航欄，不支持二級/多級菜單，不滿意可嘗試手動添加、修改主題的菜單樣式。

修改要從header.php開始，該模板文件里面一個重要的功能就是菜單的顯示了。

如果用代碼調(diào)用分類作為菜單也可以，但是不方便對菜單項排序。

有子分類的目錄也不好處理，所以也想像別人的主題一樣，給我的主題添加自定義菜單功能。

要給新制作的主題添加菜單自定義功能， 也不是很難的事情，主要有2個步驟。

第一步、WordPress菜單注冊

要使用菜單，先要進行注冊，打開主題下面的functions文件，追加下面代碼?▼

<?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. 一個頂部菜單 Top Menubar。
2. 一個主菜單 Main menubar 。

第二步、WordPress菜單調(diào)用

菜單注冊之后就可以在主題模板文件中調(diào)用了，把下面的代碼放到header.php文件中，想顯示菜單地方就可以調(diào)用了。

在header.php文件里，調(diào)用“頂部菜單”▼

//頂部菜單調(diào)用
<?php wp_nav_menu(array('theme_location' => 'top_navi')); ?>

在header.php文件里，調(diào)用“主菜單”▼

//主菜單調(diào)用
<div id="menu"><?php?if(function_exists('wp_nav_menu')) {
wp_nav_menu(array('theme_location'=>'menu_navi','menu_id'=>'nav','container'=>'ul'));
} ?>?</div>

<?php wp_nav_menu(array(‘theme_location’ => ‘menu_navi’)); ?>

在footer.php文件里調(diào)用“底部菜單”▼

//底部菜單調(diào)用
<?php wp_nav_menu(array('theme_location' => 'foot_navi')); ?>

第三步、設(shè)置菜單

菜單注冊好了，菜單的顯示位置也在主題文件中定義好了，就可以在WordPress后臺新建菜單項目。

然后，把新建的菜單項目指定給注冊的菜單，建議對應(yīng)的關(guān)系?▼

制作wordpress多級菜單導航欄

現(xiàn)在讓我們來談?wù)勚谱鱓ordPress多級菜單方法：

首先刪除你自己的WordPress主題的functions文件中的原始菜單代碼。

或直接添加此代碼?▼

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

• 注意：必須在<?php ?>在外面添加。

然后找到主題調(diào)用菜單的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函數(shù)代碼，并將以下代碼添加到主題的JS文件中?▼

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

WordPress菜單CSS樣式

最后，CSS風格美化。

具體應(yīng)該是什么樣的效果，充分發(fā)揮你的想象力，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?文件并保存起來。

保存之后，刷新你的網(wǎng)站前臺頁面，就可以看到效果了，是不是很簡單？

希望我們網(wǎng)站（ http://news.qtyiliao.cn/ ） 分享的《WordPress如何調(diào)用二級/多級導航欄自定義菜單？》，對您有幫助。