WordPress主题制作教程2:导航菜单制作

实现自定义菜单,需要用到的函数是wp_nav_menu();

在主题目录下的functions.php的 <?php ….. ?> 之间,添加以下菜单注册代码,这样你就可以在主题文件中使用wp_nav_menu函数了:

register_nav_menus();

然后菜单:外观下就会出现“菜单”

创建菜单:

点击"创建新菜单",选择想要显示的栏目,然后“保存菜单”

调用菜单:

加入以下以下语句就可以输出菜单:

<?php wp_nav_menu(); ?>

输出的html为:

<div class="menu-nav-container">
    <ul class="menu" id="menu-nav">
        <li class="..." id="menu-item-1"><a href="...">xx</a></li>
        <li class="..." id="menu-item-2"><a href="...">xxx</a></li>
        ...
    </ul>
</div>

这个方法还提供了很多参数,如:

<?php  wp_nav_menu(array( ‘menu‘ => ‘nav‘, ‘depth‘ => 1,‘menu_class‘=>‘navcontainer‘)); ?>

获取的菜单名称为nav,只列出一级菜单,样式名为navcontainer

常用参数:

menu 期望显示的菜单
container_id ul父节点id值
container_class ul父节点class值
menu_class ul节点class值
menu_id ul节点id值
before 菜单链接前的文本
after 菜单链接后的文本
link_before 每个菜单链接文本前的文本
link_after 每个菜单链接文本后的文本
depth 菜单深度
时间: 2024-10-13 00:03:32

WordPress主题制作教程2:导航菜单制作的相关文章

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

步骤一:在主题的functions.php中,添加一段代码,开启菜单功能,代码如下: <?php register_nav_menus( $locations ); ?> 参数说明:$locations---指导航的位置,给此定参数,可设置多个位置的导航,如: <?php register_nav_menus( array( 'header_menu' => '我的顶部导航', 'footer_menu' => '我的底部导航' ) ); ?> 步骤二:后台设置菜单 步

WordPress插件制作教程(三): 添加菜单的方法

上一篇编写了一个简单的插件,让大家对插件的简单制作有个了解,这一篇我们在更深一步,当我们激活插件后后台会显示菜单出来,然后通过单击菜单显示自己定义好的信息.激活之后会在WordPress后台显示一个菜单,下面会有多个子菜单,如下图: 1. 在WordPress后台添加一个同级主菜单,在主菜单下添加子菜单 // add_menu_page( $page_title, $menu_title, $capability, $menu_slug, $function, $icon_url, $posit

垂直导航菜单制作技巧一

我们导航菜单的制作一般都用ul li  a这几个标签,但是我们可以思考一个问题,这个a标签是一个行内标签,而ul 和li是块级标签,我们写在li上面的样式可以写在最里面的a上面 HTML代码如下: 1 <ul> 2 <li><a href="">菜单1</a></li> 3 <li><a href="">菜单2</a></li> 4 <li><

wordpress主题安装教程及错误处理

WordPress的强大,很大程度是因为它良好的扩展和众多的主题.插件支持.今天,倡萌就简单介绍一下WordPress安装主题和插件的方法. WordPress安装主题 WordPress可以通过3种常见的安装方法来安装 方法一:在线搜索安装 访问后台 – 外观 -主题 – 安装主题,输入主题关键字,搜索 浏览搜索结果,进行安装 注:这里搜索的主题,都是主题作者提交到WordPress主题库的主题,经验告诉我们,对于国内用户而言,在这里很难快速找到我们想要的主题,所以一般不推荐,除非你想要的主题

导航菜单制作

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Typ

WordPress 主题教程:从零开始制作 WordPress 主题

看到一个WordPress蛮好的教程,挺适合初学者.分享一下: 创建 WordPress 主题其实不难,只要你从现在开始认真学习这个教程,从零一步一步开始,你就会成为一个 WordPress 主题制作高手,至少你会修改现有主题. 下面是一个从零开始制作 WordPress 主题的教程,它会一步一步教你如何制作 WordPress 主题. WordPress 主题教程:从零开始制作 WordPress 主题 WordPress 主题教程 #1:介绍 WordPress 主题教程 #2:模板文件和模

带下拉子菜单的导航菜单

一.带下拉子菜单的导航菜单 下拉菜单在一些企业网站应用尤为广泛,它存在使用方便,占用空间小等特点.之前纵向导航教程中已使用过二级导航,今天制作下横向导航菜单的二级菜单,方法和纵向一样,只不过由纵向改变为横向而已,下面我们以上一章第二节用图片美化的横向导航中的实例进行修改. 先在html代码增加二级菜单的代码: <div id=”menu”><ul><li><a id=”current” href=”#”>首页</a></li><

16款实用的jQuery商城分类导航菜单代码

jquery导航菜单制作红色商城导航下拉菜单样式代码 jquery红色的美容医院网站下拉分类导航菜单代码 jquery css3仿欧飞数卡商城左侧分类导航菜单样式代码 jquery仿淘宝电器城左侧自适应屏幕高度下拉导航菜单代码 jquery.SuperSlide.js仿2014年新版天猫商城首页服务分类导航菜单代码 jquery.SuperSlide仿易迅网商城左侧导航菜单分类代码 jquery hover鼠标滑过事件仿新版京东商城左侧商品分类导航菜单样式 jquery团购网站鼠标点击红色分类导

20款jquery下拉导航菜单特效代码分享

jquery仿京东商城左侧分类导航下拉菜单代码 jQuery企业网站下拉导航菜单代码 jQuery css3黑色的多级导航菜单下拉列表代码 jquery响应式导航菜单支持手机导航菜单代码 jquery鼠标导航下滑显示图片列表效果 jQuery个性动画二级下拉导航代码 jquery网站下拉菜单制作企业网站导航菜单代码 jQuery游戏网站顶部滑动导航菜单代码 jquery.superfish.js导航菜单插件制作网页无限级下拉菜单代码 jquery hover事件实用的企业网站二级导航菜单样式 j