wordpress移动端插件

wordpress网站模板开发中，怎样创建自定义导航菜单？#学浪计划#

在前面的章节中，我们介绍了wordpress网站模板开发中，使用wp_list_pages()和wp_list_categories()这2个函数来创建基于page页面的导航菜单和基于分类目录的导航菜单。但是，这2种方式创建出来的菜单不够灵活，基于页面的导航菜单就添加不了分类目录，基于分类目录的导航菜单也添加不了page页面作为菜单。那么，wordpress有没有提供灵活一点的创建导航菜单的方法，能包含page页面、分类目录，甚至其它的选项。答案是肯定的。通过wordpress提供的方法，我们可以为wordpress网站模板创建自定义导航菜单。下面，就随我一起来看看吧。

第一步：给主题注册菜单功能。

wordpress网站后台默认情况下，没有提供菜单选项，需要我们在wordpress主题模板中来添加这个功能。这个，我们可以进入到wordpress后台的外观去看看，如下图：

所以，我们要先在wordpress主题的functions.php文件中注册菜单，代码如下：

//菜单register_nav_menus( array('menu_top' => '头部导航','menu_bottom' => '底部导航',) );

添加完上面的代码，我们再到wordpress网站后台的外观中看一下，这时，我们会发现多了一个“菜单”，这就是我们需要的自定义菜单。如下图：

第二步：后台创建菜单。

给wordpress网站后台添加了菜单功能后，我们就可以在wordpress后台的菜单中创建前台网页的自定义导航菜单了。点击“外观”中的“菜单”，右侧内容栏进入到菜单界面，如下图：

点击上图中的“创建新菜单”，进入到创建界面，如下图：

填写菜单名，点击“创建菜单”，进入到菜单结构界面，如下图：

在这个菜单结构界面，我们可以选择左侧的“添加菜单项”中的页面、分类目录、文章、自定义链接这几个选项中的子项，然后点击“添加到菜单”，就添加到右侧的菜单结构中，想在wordpress网站前台导航菜单中显示什么，就选择什么。如下图：

?然后，勾选“显示位置”，再点击保存菜单按钮，就可以了。

第三步：在头部调用这个菜单。

wordpress后台创建好了菜单后，我们要想在wordpress网站前台显示，还需要我们在wordpress网站模板中调用它。在给functions.php文件添加菜单功能时，我们设置了2个菜单位置：头部菜单和底部菜单。这里，我们以头部菜单为例，在wordpress网站模板的头部模板header.php中添加如下代码：

$menu = array( 'container' => false, //最外层标签名 'theme_location' => 'menu_top', //菜单类名 'depth' => 0, //菜单深度);wp_nav_menu( $menu );

这样，我们就可以在wordpress网站的前台头部看到我们添加的导航菜单，如下图：

?有点难看，是吧，我们可以给这个菜单添加CSS样式，来让它好看一点，这里就不演示了。上面的代码中，我们用到了wordpress的一个函数——wp_nav_menu()，这个函数的功能，就是把后台创建好的菜单在前台打印出来。这个函数的参数跟wp_list_pages()和wp_list_categories()这2个函数的参数类似，可以是字符串类型，也可以是数组类型。

wp_nav_menu()函数的参数如下：

wp_nav_menu( array('theme_location' => '',//导航别名'menu' => '', //期望显示的菜单'container' => 'div', //容器外层标签'container_class' => '',//ul父节点class类名'container_id' => '', //ul父节点id名'menu_class' => 'menu', //ul节点class类名'menu_id' => '', //ul节点id名'echo' => true,//是否输出菜单，默认为真，true或1时，打印输出；false或0时，不输出。'fallback_cb' => 'wp_page_menu', //菜单不存在时，返回默认菜单，设为false则不返回'before' => '', //链接前文本'after' => '', //链接后文本'link_before' => '', //链接文本前'link_after' => '',//链接文本后'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>', //如何包装列表'depth' => 0, //菜单深度，默认0'walker' => '' //自定义walker) );

可见，wp_nav_menu()函数的参数还是挺多的，但实际使用中，不需要全部设置，往往我们只需要使用其它的几个常规参数就可以了，如上例中，我们就只用了3个参数，就打印出了wordpress网站的头部导航菜单。

通过以上这几步，我们就为wordpress网站模板添加好了自定义导航菜单的功能，看起来有点复杂，是吧。的确，跟wp_list_pages()和wp_list_categories()这2导航菜单相比，是要复杂一点。但是，多做几次后，你会发现，这种自定义导航菜单使用起来更加灵活多变。不管怎样，这3种添加导航菜单的方式我们都要掌握，可以在不同的需求中使用不同的方式。

网站如何添加导航菜单？只需wp_list_categories就可搞定

在前面的章节中，我们介绍了基于page页面的wordpress网站导航菜单的函数——wp_list_pages()。今天，我们再来介绍第二种导航菜单的方式——基于wordpress网站的文章分类目录的导航菜单，这种wordpress导航菜单是通过wp_list_categories()函数来实现的，它可以将wordpress网站的分类目录展示在wordpress网站前台的导航菜单中。下面，我们一起来看看如何使用wp_list_categories()来创建wordpress网站导航菜单吧。

一、wp_list_categories()函数用法。

wp_list_categories( string|array $args = '' );

这个函数有一个参数，它的参数既可以是字符串类型的数据，也可以是一个数组类型的数据，这点跟wp_list_pages()函数类似。

二、wp_list_categories()函数的参数详解。

$args = array('show_option_all' => '',//是否列出分类链接；'orderby' => 'name',//按名称排列；'order' => 'ASC',//分类目录的排序。升、降序；'style' => 'list',//是否用列表（ul>li）标签；'show_count' => 0,//是否显示文章数量；'hide_empty' => 1,//是否显示没有文章的分类；'use_desc_for_title' => 1,//是否显示分类描述；'child_of' => 0,//是否限制子分类 ；'exclude' => '',//排除分类的ID，多个用',（英文逗号）'分隔；'exclude_tree' => '',//排除分类树，即父分类及其下的子分类；'include' => '',//包括哪些分类的ID；'title_li' => 'Categories',//导航菜单的列表标题名称；'show_option_none' =>'No categories',//网站没有分类时显示的标题；'number' => null,//显示分类的数量；'echo' => 1,//是否打印到前台页面显示，1显示，0不显示而是返回字符串；'hierarchical' => true,//是否将子、父分类分级；'depth' => 0,//层级限制；'current_category' => 0,//指定分类ID，在前台页面链接添加current-cat的CSS类，方便修改样式；'pad_counts' => 0,//计算包括子分类的链接或文章数；'taxonomy' => 'category',//使用的文章分类类型；'walker' => null//生成列表 Walker 类；);

以上，我们列举了wp_list_categories()函数的主要的参数，以及它们都代表什么。其实，在我们的实际使用中，并不是每一个参数都会用到，一般情况下，我们只会使用其中的某几个。我们会在下面的案例中具体解说。

三、wp_list_categories()案例。

案例1：分类目录导航列表按层级来排列。

$menu = array( 'depth' =>0, 'title_li'=>'', 'echo'=>1,);wp_list_categories($menu);

如下图，子分类会按层级的关系，缩进去2格；并且没有显示列表的标题。

案例2：只显示顶级分类，不显示子分类，并显示列表标题。

$menu = array( 'depth' =>1, 'title_li'=>'这是分类列表的标题', 'echo'=>1,);wp_list_categories($menu);

这里，我们把depth参数的值设成1，就表示只显示一级分类目录，子分类就不会显示；如果设成2，就会显示2级分类，子分类就会显示；如果设成3，就会显示3级分类，子分类和子分类的子分类都会显示出来；以此类推。设成0，表示所有分类都显示，并且按层级显示。另外，我们这里也添加了分类菜单的列表标题，这样，如果在侧边伴，这个标题还是非常管用的；如果是顶部导航菜单，这个标题还是省略比较好。效果如下图：

案例3：排除某些分类。也就是不让某些分类显示出来。代码如下：

$menu = array( 'depth' =>1, 'title_li'=>'', 'echo'=>1, 'exclude' => '52,81,103',);wp_list_categories($menu);

这里，我们设置了排除3个分类，它们的ID号分别是：52（亲子）,81（养生）,103（家居）。这样，我们在wordpress网站的前台页面的导航菜单中就看不到这几个分类目录。如下图，可以对比一下上图：

?好了，关于wordpress网站分类目录导航菜单函数wp_list_categories()，这里我们就只举这几个案例，在实际应用中，我们可以根据不同的需求，来设置不同的参数，要做到灵活多变。这些参数还是很好理解的，只需多练习，就可轻松掌握。

wordpress删除菜单多余的CLASS和ID沉余

1wordpress增加模板菜单方法

在functions.php文件加上以下代码，

if(function_exists('register_nav_menus')){

register_nav_menus(

array(

'header-menu' => __( '菜单名字A' ),

'footer-menu' => __( '菜单名字B' ),

'sider-menu' => __('菜单名字C')

)

);

}

最简单的调用方式，前台加上下面代码

<?php wp_nav_menu; ?>

也可以对这个菜单进行更多的控制，代码如下

<?php wp_nav_menu(

array(

'theme_location' => '' //指定显示的导航名，如果没有设置，则显示第一个

'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' => '<ul id="%1$s">%3$s</ul>',

'depth' => 0,////显示的菜单层数，默认0，0是显示所有层

'walker' => ''// //调用一个对象定义显示导航菜单 ));

?> 2如何删除菜单选择器沉余

默认Wordpress菜单生成的Html代码

代码在菜单列表中li有多个Id,也有多个Class的类，而且定义整个菜单样式，根本不需要这么多选择器，下面介绍删除Wordpress沉余选择器的方法，代码如下

add_filter('nav_menu_css_class', 'my_css_attributes_filter', 100, 1); //删除Class选择器

add_filter('nav_menu_item_id', 'my_css_attributes_filter', 100, 1); //删除Id选择器

add_filter('page_css_class', 'my_css_attributes_filter', 100, 1);

function my_css_attributes_filter($var) {

return is_array($var) ? array_intersect($var, array('current-menu-item','current-post-ancestor','current-menu-ancestor','current-menu-parent')) : ''; //删除当前菜单的四个选择器

}

效果如下：