WordPress自定义导航菜单操作使用方法_源码_站长之家
WordPress自定义导航菜单操作使用方法
[摘要]WordPress 3.0+ 新增的自定义导航菜单功能使得我们可以更加容易地对网站菜单进行可视化操作了，最重要的是可以把Pages(页面列表)和Categories(分类列表)在自定义菜单中混合显示了。本文就着重介绍WordPress 3.0+ 导航菜单的操作使用方法。
　　WordPress 3.0+ 新增的自定义导航菜单功能使得我们可以更加容易地对网站菜单进行可视化操作了，最重要的是，可以把Pages(页面列表)和Categories(分类列表)在自定义菜单中混合显示了。　　下面本站着重介绍WordPress 3.0+ 导航菜单的操作使用方法。1.首先，登录您的WordPress管理后台，依次进入【Appearance(外观) C Menus(菜单或叫做导航菜单)】模块，进入导航菜单设置页面；2.如果您之前没有使用或者没有设置过菜单的话，您需要点击右侧上方的“+”按钮，添加新的 Menu Name(菜单名)，之后，点击右侧的 Create Menu(创建菜单)按钮，激活新的菜单(本例新建菜单名称为header_menu)，如下图所示：3.建立新菜单header_menu后，默认状态的菜单是空的； 在这个页面左侧，你可以看到 Theme Locations(主题位置)、Custom Links(自定义链接)、Pages(页面列表)、Categories(分类列表)等内容。　　在左侧的这些内容中，选择你要显示的页面、分类或自定义链接等项目后，点击各个项目分别对应的 Add to Menu(添加到菜单)按钮，使得你选中的栏目添加到右侧的新建菜单header_menu中，以添加Pages(页面列表)项目为例，如下图所示：4.添加到右侧新建菜单header_menu中的栏目以列表形式出现，现在你需要在这里，用鼠标上下拖拽的方式排列菜单的显示顺序；需要注意的是添加进来的菜单都是一级显示的，如果你要建立二级（多级）菜单的话，你还需要同样适用鼠标上下左右标拖拽方式设置二级（多级）菜单，每右移一格为一级，如下图所示：细节操作：鼠标移至要移动的 菜单栏 上，鼠标指针变为移动状态时，就可以对该菜单进行上下左右的拖拽操作了。5.设置好自己的菜单顺序和级别后，记得最后点击右上角的 Save Menu(保存菜单)按钮，保存该菜单的内容设置。6.建立好菜单header_menu内容后，在左侧的下图位置，选择你要使用的该菜单项目，保存即完成了整个自定义菜单的设置了。　　保存完后， 您的自定义菜单就设置好了。WordPress下载 软件大小：6.28MB 软件类别：国外软件 |
软件语言：简体中文 运行环境：PHP/Mysql 软件授权：免费版 更新时间： 16:05:30 相关链接：本文转自：
本次DEDECMS教程小编为大家讲解DEDECMS列表页中随机调用缩略图的方法，默认的缩略图是取第一张图片，通过修...
热门源码下载推荐
最受关注报导
编辑推荐排行wordpress进阶教程(三十九)：wordpress输出bootstrap的菜单结构
您现在的位置:->->&&&&浏览数:10,223
现在自适应网页(即常说的响应式设计，一个网页在PC\平板\手机上显示不同的布局)用的越来越多，然而，对于大多数人来说，写一个自适应的网页并非易事，于是有了bootstrap。
Bootstrap是twitter的工程师利用业余时间制作推出的一个开源的用于前端开发的工具包，即里面已经写好了css js，你只需要引入它的js和css,然后根据要求，给网页的div添加相应的class属性，即可制作一个响应式网页。
说实话，bootstrap很方便，作者使用过一次，但是有一个缺点，那就是你需要引入bootstrap的框架的css和js，然而这个css里面，有很多代码都是你用不到的，这样就会产生很多冗余代码，而去除css的冗余代码绝对是个体力活，所以作者用过一次就不用了。
将bootstrap应用到wordpress上也很简单，唯一可能有困难的就是菜单，因为bootstrap的菜单有他自己的结构和属性，最新的菜单演示页面如下：/examples/navbar/
查看网页源文件，可以看到菜单的结构大概是这样
&ul class="nav navbar-nav"&
&li class="active"&&a href="#"&Link&/a&&/li&
&li class="dropdown"&
&a href="#" class="dropdown-toggle" data-toggle="dropdown"&Dropdown &b class="caret"&&/b&&/a&
&ul class="dropdown-menu"&
&li&&a href="#"&Action&/a&&/li&
&li&&a href="#"&Another action&/a&&/li&
要在wordpress上实现这个菜单结构看似不难，其实，里面Dropdown后面的&b class="caret"&&/b&对应网页中下拉菜单的那个到三角形，以及二级菜单的ul标签的class属性。除非你把菜单写死，否则使用wp_nav_menu函数是无法输出这两个内容的。
那要怎么办呢？
wordpress的wp_nav_menu函数参数如下：
$defaults = array(
'theme_location'
'container'
'container_class' =& '',
'container_id'
'menu_class'
=& 'menu',
'fallback_cb'
=& 'wp_page_menu',
'link_before'
'link_after'
'items_wrap'
=& '&ul id="%1$s" class="%2$s"&%3$s&/ul&',
wp_nav_menu( $defaults );
其中的walker参数是关键。
更改你的主题菜单输出函数wp_nav_menu的walker参数：
wp_nav_menu( array(
'theme_location' =& 'ashu_menu',
'depth' =& 2,
'container' =& false,
'menu_class' =& 'nav navbar-nav',
'fallback_cb' =& 'wp_page_menu',
'walker' =& new wp_bootstrap_navwalker())
上面代码中walker参数的值是一个类，所以接下来你需要添加这个类，在你的主题functions.php文件中添加下面代码：
或者/twittem/wp-bootstrap-navwalker/blob/master/wp_bootstrap_navwalker.php
class wp_bootstrap_navwalker extends Walker_Nav_Menu {
public function start_lvl( &$output, $depth = 0, $args = array() ) {
$indent = str_repeat( "\t", $depth );
$output .= "\n$indent&ul role=\"menu\" class=\" dropdown-menu\"&\n";
public function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {
$indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';
if ( strcasecmp( $item-&attr_title, 'divider' ) == 0 && $depth === 1 ) {
$output .= $indent . '&li role="presentation" class="divider"&';
} else if ( strcasecmp( $item-&title, 'divider') == 0 && $depth === 1 ) {
$output .= $indent . '&li role="presentation" class="divider"&';
} else if ( strcasecmp( $item-&attr_title, 'dropdown-header') == 0 && $depth === 1 ) {
$output .= $indent . '&li role="presentation" class="dropdown-header"&' . esc_attr( $item-&title );
} else if ( strcasecmp($item-&attr_title, 'disabled' ) == 0 ) {
$output .= $indent . '&li role="presentation" class="disabled"&&a href="#"&' . esc_attr( $item-&title ) . '&/a&';
$class_names = $value = '';
$classes = empty( $item-&classes ) ? array() : (array) $item-&
$classes[] = 'menu-item-' . $item-&ID;
$class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
if ( $args-&has_children )
$class_names .= ' dropdown';
if ( in_array( 'current-menu-item', $classes ) )
$class_names .= ' active';
$class_names = $class_names ? ' class="' . esc_attr( $class_names ) . '"' : '';
$id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item-&ID, $item, $args );
$id = $id ? ' id="' . esc_attr( $id ) . '"' : '';
$output .= $indent . '&li' . $id . $value . $class_names .'&';
$atts = array();
$atts['title']
= ! empty( $item-&title )
? $item-&title
$atts['target'] = ! empty( $item-&target )
? $item-&target : '';
$atts['rel']
= ! empty( $item-&xfn )
? $item-&xfn
if ( $args-&has_children && $depth === 0 ) {
$atts['href']
$atts['data-toggle']
= 'dropdown';
$atts['class']
= 'dropdown-toggle';
$atts['aria-haspopup']
$atts['href'] = ! empty( $item-&url ) ? $item-&url : '';
$atts = apply_filters( 'nav_menu_link_attributes', $atts, $item, $args );
$attributes = '';
foreach ( $atts as $attr =& $value ) {
if ( ! empty( $value ) ) {
$value = ( 'href' === $attr ) ? esc_url( $value ) : esc_attr( $value );
$attributes .= ' ' . $attr . '="' . $value . '"';
$item_output = $args-&
if ( ! empty( $item-&attr_title ) )
$item_output .= '&a'. $attributes .'&&span class="glyphicon ' . esc_attr( $item-&attr_title ) . '"&&/span&&';
$item_output .= '&a'. $attributes .'&';
$item_output .= $args-&link_before . apply_filters( 'the_title', $item-&title, $item-&ID ) . $args-&link_
$item_output .= ( $args-&has_children && 0 === $depth ) ? ' &span class="caret"&&/span&&/a&' : '&/a&';
$item_output .= $args-&
$output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
public function display_element( $element, &$children_elements, $max_depth, $depth, $args, &$output ) {
if ( ! $element )
$id_field = $this-&db_fields['id'];
if ( is_object( $args[0] ) )
$args[0]-&has_children = ! empty( $children_elements[ $element-&$id_field ] );
parent::display_element( $element, $children_elements, $max_depth, $depth, $args, $output );
public static function fallback( $args ) {
if ( current_user_can( 'manage_options' ) ) {
extract( $args );
$fb_output =
if ( $container ) {
$fb_output = '&' . $container;
if ( $container_id )
$fb_output .= ' id="' . $container_id . '"';
if ( $container_class )
$fb_output .= ' class="' . $container_class . '"';
$fb_output .= '&';
$fb_output .= '&ul';
if ( $menu_id )
$fb_output .= ' id="' . $menu_id . '"';
if ( $menu_class )
$fb_output .= ' class="' . $menu_class . '"';
$fb_output .= '&';
$fb_output .= '&li&&a href="' . admin_url( 'nav-menus.php' ) . '"&Add a menu&/a&&/li&';
$fb_output .= '&/ul&';
if ( $container )
$fb_output .= '&/' . $container . '&';
echo $fb_output;
本篇教程之前的几篇教程是
本篇教程之后的几篇教程是
没有找到你要找的内容？你可以通过搜索你要找的内容，或者给我们留言。WordPress后台功能菜单介绍与操作,WordPress后台说明 | -从零开始自己做外贸网站和海外网络营销
& WordPress的后台功能菜单介绍与操作，WordPress后台说明
WordPress的后台功能菜单介绍与操作，WordPress后台说明
WordPress网站的后台概况和登陆地址
网站都有个后台管理系统，通过网站后台，你可以改变你的网站外观，管理你网站的数据，给网站前台增加页面，文章，视频，图片或者其他功能。
通过WordPress建立的网站，网站后台都是一样的WordPress后台，为更好的学习WordPress后台的功能，建议大家开始学习的时候安装中文版的WordPress，中文的后台让大家对各项功能更容易理解（从WP4.1.1版本开始，在setting-&general那里也可以设置选择站点语言为中文了，所以不必要单独安装中文版本WORDPRESS)。另外实际操作是熟悉WordPress的最好方法，大家安装了WordPress后，进入后台点点各个管理功能也很快就熟悉了其中的操作。
WordPress网站的登陆地址一般都是: http://你的域名/wp-admin.php 或者
http://你的域名/wp-login. 或者在网站前台侧边栏的Meta（功能）-&登陆（或者站点管理） ，点击即可打开登陆页面，如下图：
WordPress后台的布局与各项管理页面
登陆后台，打开的界面如下，请看图
左侧导航菜单（Menu)
左侧的导航菜单提供了所有WordPress管理页面的链接。将鼠标移至菜单项目上，子菜单将显示出来。您可以使用最下方的“收起菜单”箭头来收起菜单，菜单项将以小图标的形式显示。
点击导航菜单里面的任何一项管理功能，比如“文章”， 然后点击右上角的“帮助”，你可以了解“文章”功能下的所有操作。所以要善于使用导航菜单各项管理页面右上角的“帮助”选项卡来学习各项管理功能信息。另外 然后点击右上角的“显示选项”可以改变管理页面的布局。
右侧管理页面（以仪表盘为例）(Dashboard)
在您每次登录站点后，您都会看到仪表盘。您可以在这里访问WordPress的各种管理页面。击任何页面右上角的“帮助(help)”选项卡可阅读相应帮助信息。
仪表盘页面的布局：您可以依您的喜好和工作方式来安排仪表盘页面的布局。大部分其它管理页面也支持重新排列功能。
显示选项(Screen Options) – 使用“显示选项”选项卡来选择要显示的仪表模块。
拖放自如(Drag and Drop) – 要重新排列模块，按住模块的标题栏，将其拖到您希望的位置，在灰色虚线框出现后松开鼠标即可调整模块的位置。
管理模块(Box Controls ) – 点击模块的标题栏即可展开或收起它。另外，有些模块提供额外的配置选项，将鼠标移动到标题栏上方，若“配置”链接出现，您就可以点击并调整这个模块的设置。
仪表盘中的模块有：
概况(At A Glance) – 显示您站点上的内容概况，以及主题、WordPress程序的版本信息。
活动(Activity) – 显示即将发布和最近发布的文章，近期的若干条评论，并进行审核。
快速草稿(Quick Draft) – 让您创建新文章并保存为草稿，并显示5个指向最近草稿的链接。
WordPress新闻(WordPress News) – 显示来自WordPress项目与WordPress Planet的最新动态，以及热门与最新插件。
欢迎(Welcome) – 显示配置新站点的实用功能。
WordPress后台各项管理功能与网站前台的对应关系
文章(Posts)（网站的列表中的文章）
写文章(Add New)：文章写好后发布对应的就是网站上的一篇篇的POST，不是头部导航的页面哦；如下图三：
分类目录(Categories)：是文章的分类目录，对应的是网站前台侧边栏的“分类目录”，有很多主题要求有该分类下有文章才显示分类名称；如图三：
标签(Tags)：就是写文章时每篇文章添加的标签，可以通过网站前台侧边栏的“标签(tags)”显示出来；如图三：
多媒体(Media)（网站的图片，视频等）
媒体库(Library)：就是写文章，页面时所上传的图片，视频等在里面；
添加(Add New)：你可以往媒体库里面添加图片，视频等，待写文章时插入。
页面(Pages)（导航中的页面）
所有页面(All Pages)：一般都显示在网站的头部导航那里（如果你没在外观-&菜单里自定义了导航）；如图五
新建页面(Add New)：不用多说了吧，就建多个页面。
评论(Comments)（就是所有页面和文章的评论）
就是文章，页面的评论，你在这里可以驳回，批准，删除评论，评论要显示，得经过你的审核。
外观(Appearance) （决定了你的网站前台的外观）
主题（Themes)：决定你网站的整体外观与风格，也可以说是一个网站的模板,进入主题管理页面，可以搜索安装新主题，也可以管理现有主题；
自定义(Customize)：定义你所用主题下的网站标题，背景，首页，头部菜单等；
小工具(Widgets)：就是你网站前台侧边栏中“分类目录”，“近期文章”，“近期评论”等显示的小工具；有些主题可以支持左边，右边，底部等添加这些工具，把用的小工具拖到右边的“侧边”“内页侧边”，它们就显示在网站前台相应位置；
菜单(Menus)：你可以自己建立一些菜单（包含页面，链接这些），然后把这些菜单放到头部导航，尾部导航等，代替原本只是页面的链接的导航，即重新定义了头部或者尾部导航；注意：创建了新菜单后，要保存，并指定该菜单的位置，该菜单所定义的导航才能生效显示在相应位置。
主题设置(Theme Options)：就是设置你主题模板的参数，如logo,边框大小等等设置。
编辑(Editor)：可以编辑主题的各个模块的代码。比如在footer.php下面添加统计代码，百度分享代码等来实现一些功能。
插件(Plugins) （可以帮助你实现某些功能）
已安装的插件(Installed Plugins)：已经安装的插件的列表，可以对已经安装的插件设置，启用，停用，删除，编辑等；插件一般实现某些功能，一般插件有个设置页面，设置页面设置插件功能，显示在前台的位置；某些插件功能是可以通过“外观-&小工具”在网站前台特定区域显示；有些插件是在“页面”或者“文章”通过添加shortcode来显示在网站前台；如本站“给我留言”，通过contact form插件，并在页面添加代码显现联系表框。不同插件请参考插件的安装说明来安装,插件安装说明在WordPress.org该插件的页面Installation可以找到。
安装插件(Add New)：如果你想实现某些功能，你可以根据该功能的关键词（英文）搜索，然后安装启用。
用户(Users) （你网站的用户，可以更改用户信息）
可以添加网站的管理者，投稿者，作者，编辑，订阅者等用户,你登陆后台的管理用户名密码也是在这里修改；
工具(Tools) （通过工具实现某些功能）
工具里面有通过插件安装的一些工具，比如导出WordPress网站的内容，导入内容到网站等；
设置(Settings) （对网站的标题，撰写，阅读显示方式等的总设置）
设置就是对网站的一些标题，阅读，图片功能等的设置，也有安装了插件后，对插件功能的设置也有部分在这里；
常规(General)：设置网站的标题，副标题，网址等；
撰写(Writing)：对撰写的文章格式，默认分类目录，形式的设置，还可以通过电子邮件来发布；
阅读(Reading：设置首页显示页面，Blog显示页面，每页文章显示设置, FEED，以及是否允许搜索引擎收录；
讨论(Discussion)：就是针对评论的一些设置；
多媒体(Media)：设置图片显示的大小；
固定链接(Permalinks)：就是每个页面，文章显示的URL方式，在这里，我推荐外贸网站使用postname链接方式，这样对网站的SEO有很大作用，因为这样可以为你的网站的URL包含关键词。如图：
左侧导航菜单中还会有其他的设置链接，这些是在安装了主题，插件之后在左侧菜单生成的设置链接，请参考主题，插件的说明来操作。
原创文章，转载请注明： 转载自
本文链接地址:
转载请注明来自：
Posted on 02月16日
Posted on 01月22日
Posted on 03月03日
Posted on 03月02日
外贸自助建站与营销QQ群：
(加群请注明：diyzhan)
Q群1：（已满）
如果你觉得本站很有意义，获益良多，请通过网站右边的“分享”按钮把本站分享到QQ空间，朋友圈，QQ群，微博等，让更多人得到帮助！感谢！
微信关注我们
请直接用微信扫描：
微信添加博主，关注网站内容更新：
或加微信号：diy_ben
微信关注本站，手机阅读本站：
或加微信号：diyzhan
微博关注我们
标签云功能
长按扫我微信WordPress&二级三级菜单的内容如何在点击一级菜单的情况下也能展示？
程序员博客：www.&遇到一个细节问题，在二级栏目里面发布的文章，点击一级栏目没有展示。求大神相助！
15-05-21 &