WordPress中自定义导航菜单
任务：已知菜单样式，把该菜单样式搬移到WordPress的主题中
比如，我需要使用WordPress制作一个网站，类似damienhirst.com。首先看一下该网站的样子：
本文的目标，就是制作该网站的导航菜单部分，并把它放到我们自定义的WordPress主题中，供该主题使用。
- 我们不能直接把该网站的HTML，CSS代码写到WordPress的主题文件中。这样会导致无法使用Wp的函数来获取菜单对象。
- 我们应该在后台创建菜单，然后在主题的header.php文件中使用wp内置函数来生成菜单的HTML代码
-----------------------------------------华丽分割------------------------------------
Step1.为主题注册菜单
- 进入后台，选择Appearance->Theme
可以看到，WordPress的默认主题Twenty Ten 是支持Menus的。（OPTIONS后面有Menus）
而如果你自定义一个主题，那我的例子来说：
可以看到，我的主题名字叫 Damien，它和其他两个WP已有主题twentyten和twentyeleven位于同一目录下。我这个主题里面文件很少，几个文件夹全部是图片和Javascript文件，与wp主题相关的主要有：
- index.php
- style.css (注意文件头部的描述信息，否则WP后台无法识别加载)
- header.php(本例只演示头部，其他footer.php sidebar.php未添加)
- functions.php（空的，里面无代码）
上述文件中 index.php代码如下:
style.css的头部需要加上描述信息，我的是：
/*
Theme Name: Damien
Theme URI: http://wordpress.org/extend/themes/twentyeleven
Author: David
Author URI: http://wordpress.org/
Description: NULL
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: Artist
Text Domain: Damien
*/此时，保存后，再次进入后台，我们就可以在主题页面看到主题 Damien了。
我们在后台激活主题：Damien，可以看到如下图：
可以看到，在Options中，我们看不到Menus条目。说明该主题目前还不支持导航菜单。。
为什么呢？
因为我们要为该主题注册菜单，否则无法使用。
具体方法是：
在functions.php中写如下代码：
__( 'Damien-Menu' ),));
?>此时我们保存文件，再次进入后台查看：
可以看到，现在支持菜单啦！！
我们点击Menus，在里面创建一个菜单。
-----------------------------------------华丽分割------------------------------------
Step2.添加菜单项
在本文第一张图中，damienhirst网站的菜单有以下选项：Home，News...等，我们把它完善到新建的菜单里即可，如下图所示：
OK，添加完成后，下面就是写主题的PHP代码了。
-----------------------------------------华丽分割------------------------------------
Step3.编写PHP代码显示菜单
要学习如何写WordPress中的代码，我们可以拿默认的主题作为参考。首先，进入WordPress3.4的默认主题，我们只关注导航菜单部分。
可以看到，该菜单有两项，分别是Home ，Sample Page。我们看一下它的源码：
发现它是一个
标签里面嵌套一个
- 。
我们再看一下该主题的 header.php文件，
其实和该Menu相关的代码就下面这一句话：
'menu-header', 'theme_location' => 'primary' ) ); ?>可见， wp_nav_menu()函数完成了一切工作。
我们，查看该函数的源码：
function wp_nav_menu( $args = array() ) {
static $menu_id_slugs = array();
$defaults = array( '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' => '' );
$args = wp_parse_args( $args, $defaults );
$args = apply_filters( 'wp_nav_menu_args', $args );
$args = (object) $args;
// Get the nav menu based on the requested menu
$menu = wp_get_nav_menu_object( $args->menu );
// Get the nav menu based on the theme_location
if ( ! $menu && $args->theme_location && ( $locations = get_nav_menu_locations() ) && isset( $locations[ $args->theme_location ] ) )
$menu = wp_get_nav_menu_object( $locations[ $args->theme_location ] );
// get the first menu that has items if we still can't find a menu
if ( ! $menu && !$args->theme_location ) {
$menus = wp_get_nav_menus();
foreach ( $menus as $menu_maybe ) {
if ( $menu_items = wp_get_nav_menu_items($menu_maybe->term_id) ) {
$menu = $menu_maybe;
break;
}
}
}
// If the menu exists, get its items.
if ( $menu && ! is_wp_error($menu) && !isset($menu_items) )
$menu_items = wp_get_nav_menu_items( $menu->term_id );
// If no menu was found or if the menu has no items and no location was requested, call the fallback_cb if it exists
if ( ( !$menu || is_wp_error($menu) || ( isset($menu_items) && empty($menu_items) && !$args->theme_location ) )
&& $args->fallback_cb && is_callable( $args->fallback_cb ) )
return call_user_func( $args->fallback_cb, (array) $args );
// If no fallback function was specified and the menu doesn't exists, bail.
if ( !$menu || is_wp_error($menu) )
return false;
$nav_menu = $items = '';
$show_container = false;
if ( $args->container ) {
$allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) );
if ( in_array( $args->container, $allowed_tags ) ) {
$show_container = true;
$class = $args->container_class ? ' class="' . esc_attr( $args->container_class ) . '"' : ' class="menu-'. $menu->slug .'-container"';
$id = $args->container_id ? ' id="' . esc_attr( $args->container_id ) . '"' : '';
$nav_menu .= '<'. $args->container . $id . $class . '>';
}
}
// Set up the $menu_item variables
_wp_menu_item_classes_by_context( $menu_items );
$sorted_menu_items = array();
foreach ( (array) $menu_items as $key => $menu_item )
$sorted_menu_items[$menu_item->menu_order] = $menu_item;
unset($menu_items);
$sorted_menu_items = apply_filters( 'wp_nav_menu_objects', $sorted_menu_items, $args );
$items .= walk_nav_menu_tree( $sorted_menu_items, $args->depth, $args );
unset($sorted_menu_items);
// Attributes
if ( ! empty( $args->menu_id ) ) {
$wrap_id = $args->menu_id;
} else {
$wrap_id = 'menu-' . $menu->slug;
while ( in_array( $wrap_id, $menu_id_slugs ) ) {
if ( preg_match( '#-(\d+)$#', $wrap_id, $matches ) )
$wrap_id = preg_replace('#-(\d+)$#', '-' . ++$matches[1], $wrap_id );
else
$wrap_id = $wrap_id . '-1';
}
}
$menu_id_slugs[] = $wrap_id;
$wrap_class = $args->menu_class ? $args->menu_class : '';
// Allow plugins to hook into the menu to add their own 's
$items = apply_filters( 'wp_nav_menu_items', $items, $args );
$items = apply_filters( "wp_nav_menu_{$menu->slug}_items", $items, $args );
$nav_menu .= sprintf( $args->items_wrap, esc_attr( $wrap_id ), esc_attr( $wrap_class ), $items );
unset( $items );
if ( $show_container )
$nav_menu .= 'container . '>';
$nav_menu = apply_filters( 'wp_nav_menu', $nav_menu, $args );
if ( $args->echo )
echo $nav_menu;
else
return $nav_menu;
} 发现，该函数可以附带很多参数，因此，我们可以设置div ,ul ,li 标签的class ,id 以及其他很多参数。
下面，贴一下每个参数的说明：
'' //指定显示的导航名，如果没有设置，则显示第一个
'menu' => 'header-menu',
'container' => 'nav', //最外层容器标签名
'container_class' => 'primary', //最外层容器class名
'container_id' => '',//最外层容器id值
'menu_class' => 'sf-menu', //ul标签class
'menu_id' => 'topnav',//ul标签id
'echo' => true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false
'fallback_cb' => 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用
'before' => '',//显示在导航a标签之前
'after' => '',//显示在导航a标签之后
'link_before' => '',//显示在导航链接名之后
'link_after' => '',//显示在导航链接名之前
'items_wrap' => '%3$s
',
'depth' => 0,////显示的菜单层数，默认0，0是显示所有层
'walker' => ''// //调用一个对象定义显示导航菜单 )); ?>
最后的最后，回到我们的目标样式：
它的HTML代码如下：
然后，我们对应一下上面给出的参数表，发现我们需要设置4个参数：
- 1. 'theme-location' =>'header-menu' (见functions.php)
- 2. 'container-class' =>'grid_28 prefix_1'（容器div类型）
- 3. 'menu-class' =>'nav' (ul的样式类型）
- 4. 'after' =>'/' (标签后面的 / 符号)
OK，最后是PHP代码：
'header-menu',
'container_class' => 'grid_28 prefix_1', 'menu_class' =>'nav', 'after' =>'/'
)
);
?>
-----------------------------------------华丽分割------------------------------------
本来详细介绍了如何在WordPress中使用自定义菜单。感谢您的阅读。