wordpress中自定义菜单制作详细教程

。要想实现自定义菜单,需要用到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自定义菜单菜单,下面简单讲讲如何使用使用这个函数。

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

 // This theme uses wp_nav_menu() in one location.
register_nav_menus();

     接着我们在主题的导航栏处调用wp_nav_menu(),即可输出导航菜单HTML代码:

 <?php
    // 列出顶部导航菜单,菜单名称为mymenu,只列出一级菜单
    wp_nav_menu( array( 'menu' => 'mymenu', 'depth' => 1) );
?>

     以上代码输出的HTML代码形式如下:

 <div class="menu-menu-container">
    <ul class="menu" id="menu-menu">
        <li class="..." id="menu-item-1"><a href="...">首页</a></li>
        <li class="..." id="menu-item-2"><a href="...">分类A</a></li>
        ...
    </ul>
</div>

     这里列出的 li 项为你在后台 – 外观 – 菜单添加的栏目,如果你还没有在后台添加菜单,导航栏将列出所有页面。另外,wp_nav_menu会为每个 li 添加class,不同的class标记这个菜单项的属性,如当前打开的是某个文章页面,分类A 就是这篇文章所属的分类,那么 分类A 所在的 li 将会如下代码所示:

 <li class="menu-item menu-item-type-taxonomy current-post-ancestor current-menu-parent current-post-parent menu-item-5" id="menu-item-2"><a href="...">分类A</a></li>

     如果是在首页,那么首页的菜单项的 li 可能会如下所示:

 <li class="menu-item menu-item-type-custom current-menu-item current_page_item menu-item-home menu-item-4" id="menu-item-1"><a href="..">首页</a></li>

     从这些class的名称就知道它们的作用,通过给这些class添加css属性,可以达到如高亮当前导航菜单的目的,如将当前菜单链接定义成红色:

 .current-post-ancestor a, .current-menu-parent a, .current-menu-item a, .current_page_item a {
    color: red;
}

     好了,WordPress 3.0的自定义菜单的调用就是这么简单。wp_nav_menu还有很多参数,如自定义 ul 节点、ul 父节点的id和class的参数等等,详情可以参考文档:官方文档 | 中文文档

使用分类和页面作为导航栏
     在 WordPress 3.0 之前,大部分WordPress主题都是拿页面作为导航栏的,导航中只能添加页面,显得不够自由。我刚用WordPress 2.7的时候,就为此问题烦恼,最后翻了文档,查了一些资料,实现了在导航中添加分类,详情请看我之前写的文章:WordPress 分类做导航栏,并高亮显示

非常规导航栏的制作
     以上提到的两种方式,都是使用WordPress自带的函数来实现,他们输入的HTML代码也都是限定好的,就是使用 ul li 的形式来构建菜单列表:如:

 <ul>
    <li class="..">...</li>
    <li class="..">...</li>
</ul>

     如果主题的前端代码不是你写的,而且导航栏的代码写得很龟毛,这根本不是上面的WordPress标准的 ul 导航栏形式,如下面的代码:

 <dl>
    <dt><strong>标题</strong></dt>
    <dd><a target="_blank" title="#" href="#">菜单A</a></dd>
    <dd><a target="_blank" title="#" href="#">菜单B</a></dd>
</dl>

时间: 2024-10-22 06:59:22

wordpress中自定义菜单制作详细教程的相关文章

android自定义 iew-有没有Android中自定义布局的详细教程!

问题描述 有没有Android中自定义布局的详细教程! 有没有Android中自定义布局的详细教程!我想写一个课程表布局,在网上找了几个demo,但是里面的自定义布局看不明白! 解决方案 Composite View Composite views (也被称为 compound views) 是众多将多个view结合成为一个可重用UI组件的方法中最简单的.这种方法的实现过程是这样的: 继承相关的内建的布局. 在构造函数里面填充一个 merge 布局. 初始化成员变量并通过 findViewByI

WordPress开发中自定义菜单的相关PHP函数使用简介_php技巧

函数意义wp_nav_menu () 自定义菜单显示函数 register_nav_menu () 自定义菜单注册函数 – 单数 register_nav_menus () 自定义菜单注册函数 – 复数 (很蛋疼的一个复数形式) 以下举例均用 register_nav_menus () 这个复数形式,以免混淆. 使用位置register_nav_menus () function.php 文件中,用于注册自定义菜单在后台的代码调用名称和后台显示名称. wp_nav_menu () 主题任意你想调

在开发过程中调试报表插件详细教程

原文:在开发过程中调试报表插件详细教程 背景说明 目前插件开发调试非常麻烦,需要修改代码,编译出class,重新打插件包.然后删除以前的,安装最新的.过程繁杂,而且不能调试,十分不方便.那么我就来教会大家如何可以调试插件.   需要工具:eclipse,finereport报表工具   具体说明 1. 新建工程 新建java工程,在此不赘述     2. 添加依赖,启动设计器   若要能启动设计器需要依赖的jar包很多.具体如下: A. jetty相关的jar包       B. 设计器相关的j

WORDPRESS中自定义路由和URL参数

wordpress可以使用rewrite API让url更加美观,需要用到两个相关的rewite函数,分别是add_rewrite_tag和add_rewrite_rule.下面看看具体的例子如何自定义wordpress路由规则,和自定义url参数. add_action( 'init', 'my_rr_url' ); function my_rr_url() {          //Ensure the $wp_rewrite global is loaded     global $wp_

解读SQL中的Null 超详细教程

Null表示的是一种未知状态,未来状态,比如小明兜里有多少钱我不清楚,但也不能肯定为0,这时在计算机中就使用Null来表示未知和不确定. 虽然熟练掌握SQL的人对于Null不会有什么疑问,但总结得很全的文章还是很难找,看到一篇英文版的, 感觉还不错. Tony Hoare 在1965年发明了 null 引用, 并认为这是他犯下的"几十亿美元的错误". 即便是50年后的今天, SQL中的 null 值还是导致许多常见错误的罪魁祸首. 我们一起来看那些最令人震惊的情况. Null不支持大小

WordPress中自定义后台管理界面配色方案的小技巧_php技巧

WordPress 3.8 开始的全新设计的后台支持多颜色选择,默认有八种非常精美的配色,可以让用户自己选择. 关于配色 WordPress 提供了一个函数 wp_admin_css_color() 可以让开发者自定义配色,只需要调用一下这个函数即可完成所有的注册操作. 参数 wp_admin_css_color( $key, $name, $url, $colors = array(), $icons = array() ); $key(string):颜色的 ID $name(string)

WordPress中注册菜单与调用菜单的方法详解_php技巧

register_nav_menus()(注册菜单)register_nav_menus() 函数用来注册一个菜单,菜单指的是 WordPress 3.0+ 的菜单管理器,注册之后用户就可以在菜单管理器里拖动生成导航菜单了. 用法 register_nav_menus( $locations ); 参数 $locations (数组)(必须)要注册的菜单,键值为菜单 ID,键名为菜单名称,可以一次创建多个. 默认值:None 返回值 该函数无返回值. 例子 /** *建立菜单 *http://w

PS鼠绘魔兽中的血精灵人物详细教程

本章最终效果如下: 使用软件: poser pro 2010(设定人物姿态)| photo shop cs5 (主要绘制) 外接设备: 鼠标 (光电)| 鼠标垫(蓝色,有个苹果哦~) 鼠绘思路: 由于没有美术基础,无法准确绘制人物透视结构,所以考虑使用poser软件设定姿态,则省去绘制线稿的过程~(画线稿这是专业人士干的事), 以前我都是使用照片内人物姿态,奈何符合要求的很少,各位同学也可以尝试使用照片作为蓝本.搞定了pos结构的问题,剩下的依靠软件和 鼠绘技术就可以全部搞定了,不管你懂不懂美术

word中输入“√”和“×” 的详细教程

  方法一:输入法输入 我们日常使用的电脑拼音输入法其实都可以快速的打出勾号和叉号,一些智能拼音输入法可以根据我们打的字来判断我们需要的符号,下面就以百度输入法为例. 输入"打勾"或者"对"时我们就可以看到有个"√"的选项. 同理我们在输入"叉"或者"错"时就会出现"×"的选项 另外我们还可以直接使用输入法的符号快捷输入v+1然后在出现的列表中找到自己要的符号. 方法二:word中使用符