怎么添加菜單功能？ - WordPress開發

一款主題的核心功能之一，就是菜單，一款優秀的主題，總會有一份優秀的菜單，一起來看看菜單功能是如何實現的吧。

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

步驟一：

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

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

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

如果使用鉤子

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

步驟二：

在后臺創建菜單，并設置菜單項目，將菜單項目和第一步注冊的菜單建立關系

步驟三：

在模版文件中調用導航菜單

1/默認版：

 wp_nav_menu(); ?>

2/簡單版：

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

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

3/完整版參數：

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'          => ''
) );

參數說明：

theme_location	導航別名，如步驟一functions.php設置的：header_menu
menu	期望顯示的菜單
container_id	ul父節點id值
container_class	ul父節點class值
menu_class	ul節點class值
menu_id	ul節點id值
before	菜單鏈接前的文本
after	菜單鏈接后的文本
link_before	每個菜單鏈接文本前的文本
link_after	每個菜單鏈接文本后的文本
depth	菜單深度
container	false 時去除div標簽
items_wrap	值為 '%3$s' 去ul保持li不變

控制當前樣式：

.current-menu-item{...}

幫助文檔：

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

利用Walker_Nav_Menu自定義菜單結構：

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父節點id值*/
								 'container_class' =>'test3',/*<!ul父節點class值*/
								 'menu_class' =>'test4',/*ul節點class值*/
								 'menu_id' =>'test',/*ul節點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>