在WordPress主 题制作中,导航菜单的制作算是一个重点,已经写好导航菜单的HTML代码,放在WordPress主题中如何动态调用呢?本文将给你介绍几种编写PHP代 码动态实现导航的方法,本文也将只侧重于动态代码的开发,不会教你如何编写HTML、CSS和Javascript来实现华丽的导航菜单。

WP 3.0自定义菜单的制作
WordPress 3.0之后的版本开始支持自定义动态菜单,所谓的动态菜单,也就是允许用户自行决定将哪些项目添加到导航菜单中,进入WordPress的管理后台 – 外观 – 菜单栏目,通过拖拉相应的栏目,即可创建自己的菜单。这对于WordPress主题开发者和使用者来说,都是皆大欢喜的事情。要想实现自定义菜单,需要用 到的函数是wp_nav_menu(),给这个函数传递一些参数就可以输出自定义菜单菜单,下面简单讲讲如何使用使用这个函数。

首先,在主题目录下的functions.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自带的函数来实现,他们输入的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>

重写前端代码?我想谁都不愿意这样做,那怎么办呢?还有,如果导航栏不使用分类和页面,也不让使用自定义菜单,那怎么办?在实际的应用中,我们还会遇到各种各样且稀奇古怪的需求,请看下文:

一、使用get_terms()来获取分类列表
使用get_terms()可以获取你的文章分类、链接分类和自定义分类等,给get_terms()传递相应的参数可以给你返回一个对象数组,这个数组就是你想要的所有分类,以下是get_terms()的函数原型:

<?php get_terms( $taxonomies, $args ) ?>

$taxonomies:
该参数是你想要获取的分类类别,可选值包括:”category”,”link_category”,”my_taxonomy”,他们分别代表文章分类、链接分类以及你自定义的分类,其中my_taxonomy是你自定义的分类名称。

$args:
该参数是分类的筛选参数,用于控制获取你要获取的分类,包括你想要获取多少个分类、如何排序、父分类以及是否输出空的分类等,具体请参考 WordPress官方文档:Function Reference/get terms,或者参考中文的简要翻译:常用函数-get_terms()

下面是一个该函数的使用示例,这里将显示一个所有文章分类的

    • ..

..

形式的无序列表,当然我们可以把它看成菜单:

<ul id="menu">
<?php
// 获取分类
$terms = get_terms('category', 'orderby=name&hide_empty=0' );
 
// 获取到的分类数量
$count = count($terms);
if($count > 0){
// 循环输出所有分类信息
foreach ($terms as $term) {
echo '<li><a href="'.get_term_link($term, $term->slug).'" title="'.$term->name.'">'.$term->name.'</a></li>';
}
}
?>
</ul>

get_terms()函数返回一个对象数组$terms,我们首先判断这个数组是否为空,为空说明并没有获取到任何分类,如果不为空那么你就可以输出分 类了。$terms的每个数组项就是一个对象,部分对象属性的意义如:slug:分类缩略名,name:分类名,term_id:分类id。如以上代码所 示,你可以通过$term->name来获取对象的属性值。

二、使用读数据库的方式获取分类列表
如果你了解WordPress的数据库,可以发现WordPress的分类信息都存储在wp_terms和wp_term_taxonomy这两个表 中,wp_terms存储基本信息(包括文章分类、文章标签和链接分类等),wp_term_taxonomy用于存储进一步描述(用于存储描述、区分分 类和标签等)。我们可以使用SQL来从这两个表中获取我们想要的分类列表:

<ul id="menu">
<?php
$cats = $wpdb->get_results("SELECT {$wpdb->prefix}terms.term_id, name
FROM {$wpdb->prefix}term_taxonomy, {$wpdb->prefix}terms
WHERE {$wpdb->prefix}term_taxonomy.term_id = {$wpdb->prefix}terms.term_id
AND taxonomy = 'category'");
 
if($cats) {
foreach($cats as $cat) {
echo '<li><a href="'.get_category_link($cat->term_id).'" title="'.$cat->name.'">'.$cat->name.'</a></li>';
}
}
?>
</ul>

三、如何获取当前分类的id
有些时候我们需要制作一个子导航,如http://www.nashowgroup.com/?p=58&lang=zh左边的人力资源导航,这 个导航可以是任意项目,如当前分类下的子分类或者当前分类下的文章等。那么首要问题就是,如何获取当前分类的id,这样才可以进行下一步的动作。

在分类页获取当前分类的id:

if ( is_category() ) {
$cat_id = get_query_var('cat');
}

在文章页获取该文章的第一个分类:

$cats = get_the_category();
if($cats)
$cat_id = $cats[0]->cat_ID;

四、子导航的制作
上面我们讲解了如何获取当前分类的id,下面我们来讲讲如何制作子导航。首先,我们来制作一个当前分类下子分类的子导航,这里用到wp_list_categories()来列出子分类,当然你可以用我前面介绍的两种方法来获取分类。:

<ul>
<?php
// 这里我们用到上面获取到的$cat_id,获取该分类下的所有子分类
wp_list_categories('orderby=name&hide_empty=0&child_of=' . $cat_id);
?>
</ul>

如果你的网站规模比较小,一个分类下的文章也不多,那么你可以在子导航中列出这个分类下的所有文章:

<ul>
<?php
global $wp_query;
 
$query = array ( 'cat' => $cat_id, 'orderby' => title, 'order'=> ASC );
$queryObject = new WP_Query($query);
 
if ($queryObject->have_posts()) :
while ($queryObject->have_posts()) :
$queryObject->the_post();
?>
<li><a <?php if($post->ID == $wp_query->post->ID) echo 'class="chose"'; ?> href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>
<?php endwhile; wp_reset_postdata(); endif; ?>
</ul>

以上代码中用到了WP_Query来获取文章列表,该对象的使用方法,可以参考WordPress的官方文档:Class Reference/WP Query和Function Reference/query posts。class=”chose”用于高亮当前文章的菜单项,css规则你可以自己定义。
五、页面page的获取
WordPress的页面page可以通过wp_list_pages()来列出,不过这个函数输出的HTML都是固定的,如果你想要自定义这些HTML,可以使用get_pages()来获取页面列表,代码示例如下:

<ul id="menu">
$mypages = get_pages();
 
if(count($mypages) > 0) {
foreach($mypages as $page) {
echo '<li><a href="'.get_page_link($page->ID).'" title="'.$page->post_title.'">'.$page->post_title.'</a></li>';
}
}
else {
echo '<li><a href="#">没有页面</a></li>';
}
</ul>

WordPress主题制作导航的N种方法的更多相关文章

  1. 新手 WordPress主题制作全过程

    WordPress主题制作全过程(一):基础准备 前言: 我想大多数使用WordPress的朋友都喜欢去尝试新的主题,但是换来换去,总是找不到那么一款适合自己的,让人很郁闷.于是很多人萌生了修改现有主 ...

  2. 使用 WordPress 主题制作的20个精美网页

    WordPress 是一款个人博客系统,并逐步演化成一款内容管理系统软件,它是使用 PHP 语言和 MySQL 数据库开发的.用户可以在支持 PHP 和 MySQL 数据库的服务器上使用自己的博客.这 ...

  3. WordPress主题制作教程5:循环

    wordpress循环分两种,一种是自定义循环,一种是默认循环. 自定义循环:根据指定参数进行实例化 调用所有页面,post_type值:page对应页面,post对应文章 <?php $arg ...

  4. WordPress主题制作全过程

    前言: 我想大多数使用WordPress的朋友都喜欢去尝试新的主题,但是换来换去,总是找不到那么一款适合自己的,让人很郁闷.于是很多人萌生了修改现有主题或自己动手从头制作一个主题的想法,但是问题又来了 ...

  5. NGUI制作字体的三种方法

    主要参考两篇博文: (1).NGUI制作字体的三种方法 (2).使用位图字体工具BMFont从图片生成自定义字体 1.BMFont下载地址 http://www.angelcode.com/produ ...

  6. WordPress主题制作教程[壹] - 了解WP&结构&索引

    最近开始筹备WordPress主题开发了.首先我们在此章节中进行了解什么是WP,以及WP的结构.通过这个文章索引到以后所写的WP系列教程. (抱歉,大家不要急,持续更新中....) 1.首先,我们来认 ...

  7. WordPress主题制作教程1:文件构成

    在最简单的情况下,一个WordPress主题由两个文件构成: index.php ------------------主模版 style.css  -------------------主样式表 以下 ...

  8. wordpress主题制作结构文件

    下面是WordPress主题文件层次结构,它会告诉你:当WordPress显示特定的页面类型时,会使用哪个模板文件呢?只有了解了以下主题层次结构,你才能知道你的WordPress主题到底需要写哪些文件 ...

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

    实现自定义菜单,需要用到的函数是wp_nav_menu(); 在主题目录下的functions.php的 <?php ….. ?> 之间,添加以下菜单注册代码,这样你就可以在主题文件中使用 ...

随机推荐

  1. (转) MVC身份验证及权限管理-1

    转自:http://blog.csdn.net/kenshincui/article/details/5559508 MVC自带的ActionFilter 在Asp.Net WebForm的中要做到身 ...

  2. maven镜像

    使用maven管理项目,下载依赖jar包的时候,经常会下载很慢,但是如果使用镜像的话,速度超级快~~只要在.m2/setting.xml文件中设置镜像就可以啦~ 本文来自https://yq.aliy ...

  3. Android-ColorsUtil工具类

    颜色工具类 public class ColorsUtil { private ColorsUtil() { throw new Error("Do not need instantiate ...

  4. 使用VSTS进行单元测试练习

    本次作业要求:练习教科书第22~25页单元测试练习,要求自行安装Visual Studio开发平台,版本至少在2010以上,要求把程序安装过程和练习过程写到博客上,越详细越好,要图文并茂,没有书的同学 ...

  5. WPF核心对象模型-类图和解析

    DispatcherObject是根基类,通过继承该类,可以得到访问创建该对象的UI线程的Dispatcher对象的能力.通过Dispatcher对象,可以将代码段合并入该UI线程执行. Depend ...

  6. go基本操作

    看了一段时间的go的知识了,本来是冲着它是系统级的语言去的,同时又有java的的样子.看了这么久,发现这语言挺好的,语法精简,有c的遗传.在面向对象上,也有些许的java风格.写web的时候,这风格和 ...

  7. The transaction associated with this command is not the connection's active transaction

    The fix is fairly simple: if you want a Dapper query to participate in a connection, explicitly deno ...

  8. LeetCode148:Sort List

    题目: Sort a linked list in O(n log n) time using constant space complexity. 解题思路: 根据题目要求,可知只能用归并排序,其他 ...

  9. AbpZero之企业微信---登录(拓展第三方auth授权登录)---第三步:需要注意事项

    1.AbpZero的auth登录会在数据库中的AbpUserLogins表会根据你登录的ProviderKey和Provider来生成生成一条记录,ProviderKey在表中是唯一的: 2.要登录成 ...

  10. CSS精灵技术

    在CSDN中浏览博客时,在博客的结束有上一篇和下一篇的按钮,当我们把鼠标放上去的时候,可以看到这两个按钮会进行颜色的改变,这种技术称为CSS精灵技术.通过查看源发现,其实他是通过超级链接的伪类实现的, ...