WordPress自定义导航插件Simple Sidebar Navigation
想过为你的博客添加自定义的导航没，Simple Sidebar Navigation这款插件可以帮你实现这个想法，它可以让你的博客导航看上去更加的明朗，方便访客的访问，当插件安装好后，你不需要修改、添加任何代码，就可以使用了。
Simple Sidebar Navigation特点：
多层次的显示链接导航的结构
添加导航链接
自定义标题、URL、target属性
无限量导航部件
设置导航下拉列表
支持自定义下拉菜单的CSS
Simple Sidebar Navigation插件安装：
下载，将压缩包解压后，把文件夹上传到wp-content/plugins/目录下，登录WordPress管理后台，点击&Plugins&找到上传的插件，激活该插件。
插件激活后，在后台的左侧栏中&setting&---&&Simple Navigation&链接，点击链接对其进行设置，如下图()：
设置的内容都在图中进行了标示，这款插件其实也没有什么要设置的，无法就是添加CSS、导航列表之类的，你可以根据自己的情况进行选择
设置好相关内容后，在后台的左侧栏中的找到&Appearance&---&&Widgets&中把它添加到侧栏中去，添加成功后，显示如下页面：
如上图所示，要设置的内容也就那么多，添加好就可以了，这里就多说了，，感兴趣的话，就安装个吧！O(&_&)O~
Simple Sidebar Navigation插件下载地址：
Simple Sidebar Navigation插件作者地址：
* 版权声明：作者WordPress啦！ 转载请注明出处。
太帅了！！谢谢清竹！！
客气，客气，有空多来逛逛，有好的插件也欢迎分享
这东西怎么都是鸟语？
拿走了~多谢分享
这是神马？
导航栏怎么添加，还是不明白。我的是中文版的。能否再详细一些啊。谢谢。域名在备案中。先用的这个。
你点击大图就能看明白了。
还是不明白
Appearance
单页调用栏目文章怎么设置的？是用这个插件吗？
强烈支持~~
不错，收下了
用不了啊！！！！
怎么中文的插件那么的少啊。。。
我还想问下就是可不可以实现文章分类作为导航？
不错不错，标记下备用
很强大的说
随机推荐文章15788人阅读
WordPress（1）
任务：已知菜单样式，把该菜单样式搬移到WordPress的主题中
比如，我需要使用WordPress制作一个网站，类&#。首先看一下该网站的样子：
本文的目标，就是制作该网站的导航菜单部分，并把它放到我们自定义的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.phpstyle.css (注意文件头部的描述信息，否则WP后台无法识别加载)header.php(本例只演示头部，其他footer.php sidebar.php未添加)functions.php（空的，里面无代码）
上述文件中 index.php代码如下:
get_header();
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中写如下代码：
//Register Nav Menus
register_nav_menus(array('header-menu' =& __( 'Damien-Menu' ),));
此时我们保存文件，再次进入后台查看：
可以看到，现在支持菜单啦！！
我们点击Menus，在里面创建一个菜单。
-----------------------------------------华丽分割------------------------------------
Step2.添加菜单项
在本文第一张图中，damienhirst网站的菜单有以下选项：Home，News...等，我们把它完善到新建的菜单里即可，如下图所示：
OK，添加完成后，下面就是写主题的PHP代码了。
-----------------------------------------华丽分割------------------------------------
Step3.编写PHP代码显示菜单
& & & &要学习如何写WordPress中的代码，我们可以拿默认的主题作为参考。首先，进入WordPress3.4的默认主题，我们只关注导航菜单部分。
可以看到，该菜单有两项，分别是Home ，Sample Page。我们看一下它的源码：
&div class=&menu&&
&li class=&current_page_item&&
&a title=&Home& href=&http://localhost/BE/wp/&&Home&/a&
&li class=&page_item page-item-2&&
&a href=&http://localhost/BE/wp/?page_id=2&&Sample Page&/a&
发现它是一个&div&标签里面嵌套一个&ul&。
我们再看一下该主题的
header.php文件，其实和该Menu相关的代码就下面这一句话：
&?php wp_nav_menu( array( 'container_class' =& '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_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' =& '' );
$args = wp_parse_args( $args, $defaults );
$args = apply_filters( 'wp_nav_menu_args', $args );
$args = (object) $
// 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_
// 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) )
$nav_menu = $items = '';
$show_container =
if ( $args-&container ) {
$allowed_tags = apply_filters( 'wp_nav_menu_container_allowedtags', array( 'div', 'nav' ) );
if ( in_array( $args-&container, $allowed_tags ) ) {
$show_container =
$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_
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_
$wrap_id = 'menu-' . $menu-&
while ( in_array( $wrap_id, $menu_id_slugs ) ) {
if ( preg_match( '#-(\d+)$#', $wrap_id, $matches ) )
$wrap_id = preg_replace('#-(\d+)$#', '-' . ++$matches[1], $wrap_id );
$wrap_id = $wrap_id . '-1';
$menu_id_slugs[] = $wrap_
$wrap_class = $args-&menu_class ? $args-&menu_class : '';
// Allow plugins to hook into the menu to add their own &li&'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 .= '&/' . $args-&container . '&';
$nav_menu = apply_filters( 'wp_nav_menu', $nav_menu, $args );
if ( $args-&echo )
echo $nav_
return $nav_
发现，该函数可以附带很多参数，因此，我们可以设置div ,ul ,li 标签的class ,id 以及其他很多参数。
下面，贴一下每个参数的说明：
&?php wp_nav_menu(
'theme_location'
=& '' //指定显示的导航名，如果没有设置，则显示第一个
=& 'header-menu',
'container'
=& 'nav', //最外层容器标签名
'container_class' =& 'primary', //最外层容器class名
'container_id'
=& '',//最外层容器id值
'menu_class'
=& 'sf-menu', //ul标签class
=& 'topnav',//ul标签id
=& true,//是否打印，默认是true，如果想将导航的代码作为赋值使用，可设置为false
'fallback_cb'
=& 'wp_page_menu',//备用的导航菜单函数，用于没有在后台设置导航时调用
=& '',//显示在导航a标签之前
=& '',//显示在导航a标签之后
'link_before'
=& '',//显示在导航链接名之后
'link_after'
=& '',//显示在导航链接名之前
'items_wrap'
=& '&ul id=&%1$s&&%3$s&/ul&',
=& 0,////显示的菜单层数，默认0，0是显示所有层
=& ''// //调用一个对象定义显示导航菜单 )); ?&
最后的最后，回到我们的目标样式：
它的HTML代码如下：
&div class=&grid_28 prefix_1 &&
&ul class=&nav&&
&li class=&selected&&
&a href=&/home&&Home&/a&/
&a href=&/news&&News&/a&/
&a href=&/artworks&&Artworks&/a&/
&a href=&/exhibitions&&Exhibitions&/a&/
&a href=&/projects&&Projects&/a&/
&a href=&/biography&&Biography&/a&/
&a href=&/audio-video&&Audio & Video&/a&/
&a href=&/texts&&Texts&/a&/
&a href=&/live-feed&&Live Feed&/a&/
&a href=&/&&Shop&/a&
然后，我们对应一下上面给出的参数表，发现我们需要设置4个参数：
'theme-location'
=&'header-menu' &(见functions.php)2.
'container-class'
=&'grid_28 prefix_1'（容器div类型）3.
'menu-class'
(ul的样式类型）4.
(&a&标签后面的 / 符号)
OK，最后是PHP代码：
&?php wp_nav_menu( array( 'theme_location'=& 'header-menu',
'container_class' =& 'grid_28 prefix_1',
'menu_class'
完成后的样子：
-----------------------------------------华丽分割------------------------------------
本来详细介绍了如何在WordPress中使用自定义菜单。感谢您的阅读。
参考知识库
* 以上用户言论只代表其个人观点，不代表CSDN网站的观点或立场
访问：469959次
积分：3017
积分：3017
排名：第7941名
原创：22篇
评论：311条
(2)(1)(1)(9)(4)(7)(1)您的举报已经提交成功，我们将尽快处理，谢谢！
大家还关注
(window.slotbydup=window.slotbydup || []).push({
id: '2081942',
container: s,
size: '1000,60',
display: 'inlay-fix'WordPress为导航菜单添加个性图标字体-陌小雨博客主题推荐：
& 自定义导航菜单函数wp_nav_menu()怎样使用？
使用，我们通常都会用到自定义导航菜单函数。大多数都会在 header.php 文件中调用一个导航栏，自定义导航菜单函数wp_nav_menu()就是首选。但是更为重要的是，wp_nav_menu()能够放在主题的任何位置，如底部。
调用自定义导航菜单的最简单形式为：
wp_nav_menu();
该语句将会加载用户创建的菜单或者如果导航菜单不存在的话就调用一个标准的页面列表。
但是，我们做站往往想对这个调用进行更多的控制，显示不同的效果。如下例：
&?php wp_nav_menu( array( 'theme_location' =& 'primary','container'=&'&ul&','menu_class'=&'menu','link_before' =& '&span&','link_after' =& '&/span&',)); ?&
wp_nav_menu() 参数详解：
theme_location: 调用一个与特定的主题位置相关联的菜单。
menu: 调用指定ID、别名或名称的菜单。
container: 封装该菜单的元素。默认是 div，但是如果你使用HTML 5的话，你也可以改为nav。
container_class: 封装元素的CSS类（指定其显示样式）。
menu_class: 指定无序列表的CSS类，默认是 menu。
fallback_cb: 指定不存在菜单项目时要调用的函数。默认情况下会调用wp_list_pages() 函数（WordPress的静态页面列表）。
before: 要显示在链接文字之前的文字（也是链接的一部分）。
after: 要显示在链接文字之后的文字（也是链接的一部分）。
link_before: 要显示在链接前面的文字（不是链接的一部分）。
link_after: 要显示在链接后面的文字（不是链接的一部分）。
depth: 指定显示菜单的层次深度，这在定义下拉式菜单的比较有用。默认情况是0（所有层次）。
walker: 允许自定义一个walker（巡游？）PHP 类来创建菜单。
echo: 定义是显示该菜单还是仅仅返回数据供PHP程序使用。默认是真，直接显示该菜单。
注意：'theme_location' =& 'primary',这句代码调用的是主菜单的意思。所以，要使用上面这句代码，还要在后台设置主菜单（如下图），否则会显示错位或调用页面菜单。我就出现过这样的情况，因为要用多语言插件Polylang来实现网站菜单的多语言，所以必须用到这句代码，搞了半天才弄明白是怎么回事。
这样，wp_nav_menu()函数才能显示它最大的功能了。
文章作者：
本文地址：
版权所有 & 转载时必须以链接形式注明作者和原始出处！
或许你会感兴趣的文章：
ssmay主题专题