WordPress主題開發：開啟導航菜單功能

 

步驟一：開啟導航菜單功能

<?php 
/*
register_nav_menu( $location, $description )
函數功能：開啟導航菜單功能
@參數 string $location, 導航菜單的位置
@參數 string $description, 導航菜單的描述
開啟多個位置的導航菜單，只需要重復調用此函數即可
*/
register_nav_menu( 'header-menu', '我的頂部導航' );     //注冊一個菜單
?>

多個菜單可以這樣寫

<?php
register_nav_menus( array(
    'header_menu' => '我的頂部導航',
    'footer_menu' => '我的底部導航'
) );
?>

如果使用鈎子

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

然后后台就會出現

 

步驟二：在后台創建菜單，並設置菜單項目，將菜單項目和第一步注冊的菜單建立關系

 

 

步驟三：早模版文件中調用導航菜單

1/默認版：

<?php wp_nav_menu(); ?>

 

2/簡單版：

<?php  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'      => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  '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{...}

============

幫助文檔：

中文官方參考文檔：http://codex.wordpress.org/zh-cn:%E4%B8%BB%E9%A2%98%E7%89%B9%E6%80%A7

英文官方參考文檔：http://codex.wordpress.org/Theme_Features

 

利用Walker_Nav_Menu自定義菜單結構：

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