怎么添加菜單功能？ – WordPress開發(fā)

一款主題的核心功能之一，就是菜單，一款優(yōu)秀的主題，總會(huì)有一份優(yōu)秀的菜單，一起來看看菜單功能是如何實(shí)現(xiàn)的吧。

• 參考鏈接：CNblogs
• 官方文檔：詳情

步驟一：

首先我們先要激活 WordPress 3.0 以后的自定義菜單功能，也就是要注冊(cè)菜單。在主題的 functions.php文件中添加下面的代碼：

wp_nav_menu//添加導(dǎo)航
        register_nav_menus(array(
          'left-menu' => '左邊欄菜單',
          'top-menu' => '頂部菜單',
        ));

wp_nav_menu這樣我們就注冊(cè)了 左邊欄菜單 和頂部菜單，你可以在 外觀-菜單 中查看。

如果使用鉤子

/*----------------
開啟自定義菜單
----------------*/
function register_my_menus() {
  register_nav_menus(
    array(
      'header-menu' => '我的頂部導(dǎo)航',
      'footer-menu' =>'我的底部導(dǎo)航',
      'top-nav'=>'網(wǎng)站上部導(dǎo)航'
    )
  );
}
add_action( 'init', 'register_my_menus' );

步驟二：

在后臺(tái)創(chuàng)建菜單，并設(shè)置菜單項(xiàng)目，將菜單項(xiàng)目和第一步注冊(cè)的菜單建立關(guān)系

步驟三：

在模版文件中調(diào)用導(dǎo)航菜單

1/默認(rèn)版：

 wp_nav_menu(); ?>

2/簡(jiǎn)單版：

  wp_nav_menu(array( 'menu' => 'nav', 'depth' => 1,'menu_class'=>'navcontainer')); ?>

獲取的菜單名稱為nav，只列出一級(jí)菜單，樣式名為navcontainer

3/完整版參數(shù)：

wp_nav_menu( array(
  'theme_location'  => '',
  'menu'            => '',
  'container'       => 'div',
  'container_class' => '',
  'container_id'    => '',
  'menu_class'      => 'menu',
  'menu_id'         => '',
  'echo'            => true,
  'fallback_cb'     => 'wp_page_menu',
  'before'          => '',
  'after'           => '',
  'link_before'     => '',
  'link_after'      => '',
  'items_wrap'      => '
%3$s
',
  'depth'           => 0,
  'walker'          => ''
) );

參數(shù)說明：

theme_location	導(dǎo)航別名，如步驟一functions.php設(shè)置的：header_menu
menu	期望顯示的菜單
container_id	ul父節(jié)點(diǎn)id值
container_class	ul父節(jié)點(diǎn)class值
menu_class	ul節(jié)點(diǎn)class值
menu_id	ul節(jié)點(diǎn)id值
before	菜單鏈接前的文本
after	菜單鏈接后的文本
link_before	每個(gè)菜單鏈接文本前的文本
link_after	每個(gè)菜單鏈接文本后的文本
depth	菜單深度
container	false 時(shí)去除div標(biāo)簽
items_wrap	值為 ‘%3$s’ 去ul保持li不變

控制當(dāng)前樣式：

.current-menu-item{…}

幫助文檔：

• 中文官方參考文檔：詳情
• 英文官方參考文檔：詳情

利用Walker_Nav_Menu自定義菜單結(jié)構(gòu)：

http://devework.com/wp-nav-menu-walker-nav-menu.html

例：

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

顯示：

<!--菜單-->
<div class="navbar-menu">
<div class="menu-1-container"><ul id="menu-1" class="menu"><li class="current-menu-item"><a >首頁</a></li>
<li><a >示例頁面</a>
<ul class="sub-menu">
<li><a >第一篇日志</a></li>
<li><a >分類2</a></li>
</ul>
</li>
<li><a >未分類</a></li>
</ul></div>	</div>

若：

<?php wp_nav_menu( array( 'theme_location' => 'nav' ,
								 'menu' =>'test1',/*期望顯示的菜單*/
								 'container_id' =>'test2' ,/*ul父節(jié)點(diǎn)id值*/
								 'container_class' =>'test3',/*<!ul父節(jié)點(diǎn)class值*/
								 'menu_class' =>'test4',/*ul節(jié)點(diǎn)class值*/
								 'menu_id' =>'test',/*ul節(jié)點(diǎn)id值*/
								) ); ?>

則：

<!--菜單-->
<div class="navbar-menu">
<div id="test2" class="test3"><ul id="test" class="test4"><li class="current-menu-item"><a >首頁</a></li>
<li><a >示例頁面</a>
<ul class="sub-menu">
<li><a >第一篇日志</a></li>
<li><a >分類2</a></li>
</ul>
</li>
<li><a >未分類</a></li>
</ul></div>	</div>