导航菜单是每一个WordPress主题必须的元素,如果你要制作一个WordPress主题,那就必须熟悉WordPress导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() ,这两个参数一般都是配合使用的。今天我们就一起来解释一下这两个函数,并举例说明。

导航菜单注册函数 register_nav_menus() 介绍

register_nav_menus() 是3.0以后用来注册自定义菜单的函数,通过它可以很方便地给你的主题注册一个或多个菜单,在主题的 functions.php 中添加:

  1. 1
  2. 2
  3. 3
  4. 4
  1. register_nav_menus( array(
  2. 'header_menu' => 'My Custom Header Menu',
  3. 'footer_menu' => 'My Custom Footer Menu'
  4. ) );

上面的代码注册了两个代码,其中 'header_menu'  和 'footer_menu' 分别是这两个菜单的“键key”,而后面的 'My Custom Header Menu' 和 'My Custom Footer Menu' 是对这个菜单的描述,会在 外观 - 菜单 中显示出来。下文将会图例说明。

按照上面的结构,就可以注册多个菜单。

导航菜单调用函数 wp_nav_menu() 介绍

wp_nav_menu() 是WordPress 3.0 以后添加的一个自定义导航菜单调用函数,可用来调用 register_nav_menus() 注册的菜单。wp_nav_menu()的使用方法位于wp-includes/nav-menu-templates.php文件中。

可以通过 <?php wp_nav_menu( $args ); ?> 来调用菜单,其中参数 $args 的默认值如下:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  1. <?php
  2.  
  3. $defaults = array(
  4. 'theme_location' => '',
  5. 'menu' => '',
  6. 'container' => 'div',
  7. 'container_class' => '',
  8. 'container_id' => '',
  9. 'menu_class' => 'menu',
  10. 'menu_id' => '',
  11. 'echo' => true,
  12. 'fallback_cb' => 'wp_page_menu',
  13. 'before' => '',
  14. 'after' => '',
  15. 'link_before' => '',
  16. 'link_after' => '',
  17. 'items_wrap' => '<ul id="%1$s" class="%2$s">%3$s</ul>',
  18. 'depth' => 0,
  19. 'walker' => ''
  20. );
  21.  
  22. wp_nav_menu( $defaults );
  23.  
  24. ?>

每个参数的详细介绍如下:

  • $theme_locaton:(字符串)(可选)

默认值: None

用于在调用导航菜单时指定注册过的某一个导航菜单名,如果没有指定,则显示第一个。

  1. 1
  1. wp_nav_menu(array( 'theme_location' =>'primary')); //调用第一个菜单
  • $menu:(字符串)(可选)

默认值: None

使用导航菜单的名称调用菜单,可以是 id, slug, name (按顺序匹配的) 。

  • $container:(字符串)(可选)

默认值: div

ul 父节点(这里指导航菜单的容器)的标签类型,只支持div 和 nav 标签, 如果是其它值, ul 父节点的标签将不会被显示。也可以用false(container => false)去掉ul父节点标签。

  • $container_class:(字符串)(可选)

默认值: menu-{menu slug}-container

ul 父节点的 class 属性值。

  • $container_id:(字符串)(可选)

默认值: None

ul 父节点的 id 属性值。

  • $menu_class:(字符串)(可选)

默认值: menu

ul 节点的 class 属性值。

  • $menu_id:(字符串)(可选)

默认值: menu slug, 自增长的

ul 节点的 id 属性值。

  • $echo:(布尔型)(可选)

默认值: true (直接显示)

确定直接显示导航菜单还是返回 HTML 片段,如果想将导航的代码作为赋值使用,可设置为false。

  • $fallback_cb:(字符串)(可选)

默认值: wp_page_menu (显示页面列表作为菜单)

用于没有在后台设置导航时调的回调函数。

  • $before:(字符串)(可选)

默认值: None

显示在每个菜单链接前的文本。

  • $after:(字符串)(可选)

默认值: None

显示在每个菜单链接后的文本。

  • $link_before:(字符串)(可选)

默认值: None

显示在每个菜单链接文本前的文本。

  • $link_after:(字符串)(可选)

默认值: None

显示在每个菜单链接文本后的文本。

  • $items_wrap:(字符串)(可选)

默认值: None

使用字符串替换修改ul的class。

  • $depth:(整型)(可选)

默认值: 0

显示菜单的深度, 当数值为 0 时显示所有深度的菜单。

  • $walker:(对象型)(可选)

默认值:  new Walker_Nav_Menu

导航菜单注册和调用示例

要想定义出灵活强大的菜单,需要我们熟悉上面介绍的 导航菜单注册函数 register_nav_menus() 和 导航菜单调用函数wp_nav_menu() 。

1.首先我们先要激活 WordPress 3.0 以后的自定义菜单功能,也就是要注册菜单。在主题的 functions.php文件中添加下面的代码:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  1. //添加导航
  2. register_nav_menus(array(
  3. 'left-menu' => '左边栏菜单',
  4. 'top-menu' => '顶部菜单',
  5. ));

这样我们就注册了 左边栏菜单 和顶部菜单,你可以在 外观-菜单 中查看到:

我们可以使用下面的函数调用 左边栏菜单:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  1. <?php
  2. if(function_exists('wp_nav_menu')) {
  3. wp_nav_menu(array( 'theme_location' => 'left-menu','container_id'=>'menu_left') );
  4. }
  5. ?>

其中,'theme_location' 后面的值 是 'left-menu',就是调用前面注册的那个 左边栏菜单,而 'container_id' 自定义为 'menu_left',最终输出的html结构如下:

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  1. <div id="menu_left" class="menu-xxx-container">
  2. <ul class="menu">
  3. <li><a href="http://www.wpdaxue.com">首页</a></li>
  4. <li><a href="http://www.wpdaxue.com/news">WP资讯</a></li>
  5. …………
  6. <li><a href="http://www.wpdaxue.com/announce">本站相关</a></li>
  7. </ul>
  8. </div>

也就是说,菜单使用 <div id="menu_left">……</div> 来包含了,接下来,你就可以根据这个 id 来写css美化菜单的显示效果了。

WordPress导航菜单函数的更多相关文章

  1. 改进你的WordPress导航菜单 —— 输出标题描述

    在WordPress 3.0中增加了自定义菜单功能,如果你在WordPress后台(外观>菜单)创建一个菜单,你可以在主题中使用wp_nav_menu()函数来显示这些菜单.但是像图中这种带描述 ...

  2. WordPress菜单函数wp_nav_menu()详细介绍

    导航菜单函数wp_nav_menu()进行详细的说明. 1.wp_nav_menu()函数介绍: worpdress发展到3.0以后增加了一个自定义菜单函数wp_nav_menu(),使得wordpr ...

  3. WordPress入门 之 设置导航菜单

    WordPress 3.0 添加了一个自定义导航菜单的功能,让你可以很自由地设置网站的导航菜单.现在大多数的主题也都支持这个功能了,那么,究竟该如何设置WordPress导航菜单?今天倡萌就介绍一下. ...

  4. WordPress自定义菜单和修改去除多余的css

    这里主要是用于模板制作的,一般前端已经写好了,我们只要将前端的内容套用WordPress后台就可以了. 所以我们在模板制作过程中,需要自定义WordPress菜单. 在functions.php文件中 ...

  5. WordPress主题开发:开启导航菜单功能

    步骤一:开启导航菜单功能 <?php /* register_nav_menu( $location, $description ) 函数功能:开启导航菜单功能 @参数 string $loca ...

  6. Wordpress菜单函数wp_nav_menu各参数详解及示例

    Wordpress菜单函数wp_nav_menu各参数详解及示例   注册菜单 首先要注册菜单,将以下函数添加至function.php函数里   register_nav_menus(array( ...

  7. jquery火焰等效果导航菜单

    jQuery-火焰灯效果导航菜单 by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu.com/wordpre ...

  8. jq倾斜的动画导航菜单

    效果预览网址:http://keleyi.com/keleyi/phtml/jqmenu/index.htm 支持IE.Chrome.火狐等浏览器 完整源代码,保存到HTML文件打开也可查看效果: & ...

  9. jquery和css3实现滑动导航菜单

    效果预览:http://keleyi.com/keleyi/phtml/html5/15/ 有都中颜色可供选择,请使用支持HTML5/CSS3的浏览器访问. HTML源代码: <!DOCTYPE ...

随机推荐

  1. 75. Sort Colors(颜色排序) from LeetCode

      75. Sort Colors   给定一个具有红色,白色或蓝色的n个对象的数组,将它们就地 排序,使相同颜色的对象相邻,颜色顺序为红色,白色和蓝色. 这里,我们将使用整数0,1和2分别表示红色, ...

  2. hdu1171 Big Event in HDU(01背包) 2016-05-28 16:32 75人阅读 评论(0) 收藏

    Big Event in HDU Time Limit: 10000/5000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others ...

  3. PAT甲 1046. Shortest Distance (20) 2016-09-09 23:17 22人阅读 评论(0) 收藏

    1046. Shortest Distance (20) 时间限制 100 ms 内存限制 65536 kB 代码长度限制 16000 B 判题程序 Standard 作者 CHEN, Yue The ...

  4. linux下怎样用c语言调用shell命令

    C程序调用shell脚本共同拥有三种法子 :system().popen().exec系列数call_exec1.c , system() 不用你自己去产生进程.它已经封装了,直接增加自己的命令 ex ...

  5. 【spfa训练】HDU4725 (层级建图)

    HDU4725 题目大意:一些节点分布在不同的层上,已知相邻的层可以往来距离为c,在给你一些已知的边,问你点1-n的最短路 分析:越往后做,越觉得最短路的考点已经不是spfa算法还是dijkscar算 ...

  6. TensorFlow入门案例

    入门小案例,分别是回归模型建立和mnist数据集的模型建立 1.回归案例: import tensorflow as tf import numpy as np from tensorflow.exa ...

  7. Android-Java-进程与线程

    1.进程:什么是进程: Mac操作系统,Windows操作系统 ...... 等等,都是由多个进程来运行(系统进程,普通进程,等) 操作系统最小的控制单元是进程,一个应用就是一个进程 进程 全称为:操 ...

  8. UWP开发入门(九)——简单界面的布局技巧及屏幕适应

    嘿嘿嘿,题目比较绕哈.本篇主要讨论一般情况下,页面的布局技巧,怎么将元素的展现尽量做到分辨率无关.基本的思路仍然是尽量少的标定具体的数字,而是用比列来标注各元素占据的空间. 这里我打算用易信的名片页来 ...

  9. rabbitMQ的简单实例——amqp协议带数据回写机制

    rabbitMQ是一种高性能的消息队列,支持或者说它实现了AMQP协议(advanced message queue protocol高级消息队列协议). 下面简单讲一讲一个小例子.我们首先要部署好r ...

  10. jquery移动端一个按钮两个事件

    当一个按钮已经有一个事件,如点击,弹窗显示,若还要加个事件,可以用touchstart 如: var videoCover = $("#videoCover");//视频封面 $( ...