为WordPress主题制作下拉菜单详解
发布:smiling 来源: PHP粉丝网 添加日期:2014-05-24 13:23:46 浏览: 评论:0
众所周知,WordPress3.0中增加了一个非常实用方便的自定义菜单功能,这个功能可以使我们轻松的制作出多级下拉菜单,今天,笔者就通过一个简单的二级下拉菜单的示例来告诉各位童鞋具体怎么操作.
Step 1 — 在functions.php中添加以下代码,使我们的主题支持自定义菜单功能。
add_theme_support(‘nav-menus’);
Step 2 — 添加一个顶部菜单.
- if ( function_exists( ‘register_nav_menus’ ) ) {
- register_nav_menus(
- array(
- ‘header_menu’ => ‘Header Navigation’
- )
- );
- }
Step 3 — 把wp_nav_menu()函数放到一个自定义函数当中.
- function wper_so_menu(){
- if(function_exists(‘wp_nav_menu’) && has_nav_menu(‘header_menu’)):
- wp_nav_menu(
- array(
- ‘menu’ => ‘Header Navigation’,
- ‘container’ => ‘div’,
- ‘container_class’ => ‘warp’,
- ‘container_id’ => ‘’,
- ‘menu_class’ => ‘ddsmoothmenu’,
- ‘menu_id’ => ‘nav’,
- ‘echo’ => true,
- ‘fallback_cb’ => ‘fallback_no_menu’,
- ‘before’ => ‘’,
- ‘after’ => ‘’,
- ‘link_before’ => ‘’,
- ‘link_after’ => ‘’,
- ‘depth’ => 2,
- ‘walker’ => new Walker_Nav_Menu(),
- ‘theme_location’ => ‘’,
- ‘show_home’ => true
- )
- );
- endif;
- }
这里我解释一下wp_nav_menu()函数的各个参数,这个函数的功能就是显示一个自定义导航菜单(官方文档):
menu: 我们创建的菜单名称,本例中我们使用“Header Navigation”.
container:我们创建的菜单所在容器的名称。如果设置为“div”,则输出结果为<div>.....</div>,本例中我们使用“div”。
container_class: 上面的容器的class属性。如果设置为nav,则输出结果为<div class=“nav”>.....</div>,本例中我们使用“warp”
container_id: 上面的容器的id属性。如果设置为menu,则输出结果为<div id=“menu”>.....</div>
menu_class:无序列表ul的class属性。本例中我们设置为“ddsmoothmenu”,则输入结果为<ul class=“ddsmoothmenu”>.....</ul>
menu_id:无序列表ul的id属。如果设置为“menu-item”,则输出结果为<ul id=“menu-item”>.....</ul>本例中我们使用“nav”
echo: 是否显示菜单。如果设置为false,则不显示菜单。
fallback_cb: 菜单无法显示时的提示信息。比如:菜单未找到。
before, after:包含<a&>标签容器的名称,如果设置为:<span>和</span>则输出结果为:<span><a>.....</a></span>
link_before, link_ after:包含链接文字的标签名称,如果设置为:<em>和</em>则输出结果为:<a><em>链接文字</em></a>
depth:下拉菜单的深度,本例中我们设置为:2,则只支持两级下拉菜单。默认为0,即无限级下拉菜单。
walker: 自定义的遍历对象,调用一个对象定义显示导航菜单。默认为 :new Walker_Nav_Menu()
theme_location:后台菜单页面中包含菜单名称的容器的ID.
show_home:布尔型值,是否显示首页。
Step 4 — 在header.php中的适当位置调用我们的自定义函数.
Step 5 — 现在我们的主题已经支持一个自定义菜单了,接下来利用jQuery实现下来菜单的动画效果,加载jQuery库是必须地.
所用到的jQuery代码:
- (function($) {
- $(function() {
- $(document).ready(function () {
- $(‘#nav li’).hover(
- function () {
- //显示二级菜单,括号中的数字表示下拉菜单完全显示出来需要200毫秒。
- $(‘ul’, this).slideDown(200);
- },
- function () {
- //隐藏二级菜单
- $(‘ul’, this).slideUp(150);
- }
- );
- );
- });
- })(jQuery);
最后,我们得到如下HTML代码:
- <div class=“warp”>
- <ul id=“nav” class=“ddsmoothmenu”>
- <li id=“menu-item-6” class=“menu-item .... menu-item-6”>
- <a href=“http://localhost/?page_id=2”>
- <span><em>示例页面2</em></span>
- </a>
- <!-- 二级下拉菜单 -->
- <ul class=“sub-menu”>
- <li id=“menu-item-36” class=“menu-item .... menu-item-36”>
- <a href=“http://localhost/?page_id=3”>
- <span><em>实例页面3</em></span>
- </a>
- </li>
- <li id=“menu-item-54” class=“menu-item .... menu-item-54”>
- <a href=“http://localhost/?cat=1”>
- <span><em>文章分类1</em></span>
- </a>
- </li>
- <li id=“menu-item-55” class=“menu-item .... menu-item-55”>
- <a href=“http://localhost/?page_id=4”>
- <span><em>示例页面4</em></span>
- </a>
- </li>
- <li id=“menu-item-56” class=“menu-item ..... menu-item-56”>
- <a href=“http://localhost/?page_id=5”>
- <span><em>示例页面5</em></span>
- </a>
- </li>
- </ul>
- <!-- 二级下拉菜单结束 -->
- </li>
- </ul>
- </div>
这样,我们的下拉菜单就制作完成了,只要适当的美化一下即可,至于CSS代码,相信聪明的你肯定可以写出来.
Tags: WordPress 下拉菜单 主题
相关文章
- ·WordPress初级教程1:什么是博客?(2013-11-11)
- ·WordPress初级教程-2: 什么是WordPress?(2013-11-11)
- ·WordPress初级教程-3: WordPress的功能和特点(2013-11-11)
- ·WordPress初级教程-4: 选择WordPress博客的主机和域名(2013-11-11)
- ·WordPress初级教程-5: 安装WordPress(2013-11-11)
- ·WordPress初级教程-6: 本地安装WordPress(2013-11-11)
- ·WordPress初级教程-7: 一个数据库中安装多个WordPress博客(2013-11-11)
- ·WordPress初级教程-8: WordPress控制面板/ Dashboard(2013-11-11)
- ·WordPress初级教程-9: WordPress用户设置/ Users(2013-11-11)
- ·WordPress初级教程-10: WordPress博客配置/ Settings(2013-11-11)
- ·关于wordpress上传图片不显示的原因(2013-11-11)
- ·WordPress程序的脆弱点你知道吗 (2013-11-11)
- ·总结八大Wordpress网站百度收录实现秒收的方法绝招 (2013-11-11)
- ·WordPress如何网站投稿者也可以上传图片(2014-03-18)
- ·WordPress怎么修改新用户注册邮件内容(2014-03-18)
- ·WordPress怎么添加前台注册功能(2014-03-18)
推荐文章
热门文章
最新评论文章
- 写给考虑创业的年轻程序员(10)
- PHP新手上路(一)(7)
- 惹恼程序员的十件事(5)
- PHP邮件发送例子,已测试成功(5)
- 致初学者:PHP比ASP优秀的七个理由(4)
- PHP会被淘汰吗?(4)
- PHP新手上路(四)(4)
- 如何去学习PHP?(2)
- 简单入门级php分页代码(2)
- php中邮箱email 电话等格式的验证(2)