日星网

WordPress主题导航菜单制作的几种方法(一)，上一篇教程讲了如何使用WordPress内置的函数来创建导航菜单，但是这些函数生成的HTML代码都是固定的，你很难去定义导航菜单的HTML代码。本文将为你介绍几种更为自由的方法来创建导航菜单，而这些方法不仅仅可以用于导航菜单。当然本文只是给你提供一个解决问题的思路，并不是像菜谱那样的教程，一看、一复制就能用在你的项目。

一、使用get_terms()来获取分类列表

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

1

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

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

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

 下面是一个该函数的使用示例，这里将显示一个所有文章分类的<ul><li>..</li>..</ul>形式的无序列表，当然我们可以把它看成菜单：

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

WP 3.0自定义菜单的制作

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

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

1
2

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

在主题制作过程当中，如果我们希望制作CMS主题，或者希望在首页的某一角制作显示某一块内容，可以使用query_posts的cat方法。
举例：

1
2

//下面的是不显示编号为7、243的目录文章。
<?php if ( have_posts() ) : query_posts($query_string .'&cat=-7,-243'); while ( have_posts() ) : the_post(); ?>

1
2

//下面的是显示编号为7、243的目录文章。
<?php if ( have_posts() ) : query_posts($query_string .'&cat=7,243'); while ( have_posts() ) : the_post(); ?>

此插件可以根据页面的宽度，进行自适应宽度调整，适合于Ipad Iphone Andoroi等系统访问网站时使用。

下载地址
http://wordpress.org/extend/plugins/simple-slider-ssp/

WP Slider Plugin的使用方法
在后台左侧边栏上找到Slider, Add new。

输入任意的Slider名称

Add Image 添加图片 完了后，点击右侧save进行保存

1）文章中调用的方法 Shortcode， 复制到编辑的文章中既可调用
2）首页及特殊页面调用时， 其中的数字为生成slider时的数字。

实现步骤
1、新建tab.js文件，加入如下代码

1
2
3
4
5
6
7

   //侧边栏TAB效果   
jQuery(document).ready(function(){   
jQuery('#tab-title span').click(function(){   
    jQuery(this).addClass("selected").siblings().removeClass();   
    jQuery("#tab-content > ul").slideUp('1500').eq(jQuery('#tab-title span').index(this)).slideDown('1500');   
});   
});   

1.nextpage标签的作用及使用方法。
nextpage标签，确切地说是，<!- -nextpage- ->代码，是wordpress内置的用于实现文章分页的一个page标签。您可以在一篇文章中插入多个nextpage标签实现多个分页。在文章中插入该标签后，从文章开头至第一个nextpage标签为文章的第一个分页内容，第一个nextpage标签和第二个nextpage标签之间为文章第二个分页的内容，以此类推，直至文章结束。这一点和more标签不同。
然而，有一点要注意，如果more标签在nextpage标签之前的话，在首页的输出中，还是会被more标签截断的。
2.如何在编辑时插入nextpage标签？
在wordpress2.3中，虽然已经内置nextpage标签的输出功能，但在官方版中nextpage标签的输入默认都是被隐藏起来的。因而需要我们修改代码来实现输入。而具体为什么会被隐藏，原因就不得而知了。注，有些非官方版的WP可能已经解开默认的nextpage输入了。
a.可视化模式输入
要解开可视化编辑器或富文本编辑器的nextpage标签输入隐藏的话，进入wp安装目录下的\wp-includes\js\tinymce，用文本编辑器打开tiny_mce_config.php，查找下面代码：”wp_more”，2.3.1版中在line32

 前面我们已经制作完成博客所有公用页面sidebar.php、footer.php和header.php，今天开始我们就要制作单独的页面了。现在我们要制作的是索引页index.php，这里我们可以暂时把它理解成主页，但事实上它并不是首页这么简单（点此查看原因）。

 在主页中主要就是文章列表，将你博客上的文章一篇一篇地列出来。你可能已经注意到，主页中每篇文章的样式都是一样的，只是标题、时间、作者和摘要等文字内容不一样而已，嗯！我们制作index.php也只需要一篇文章的html代码，不需要手动地去写那么多文章的html，况且这样也不是动态的内容。我们只需要一个循环就可以将所有文章显示到首页上，循环就是重复做某件事情，这里的循环是重复地输出文章。如果你之前学过任一门计算机程序设计语言的话，就不难理解什么是循环，循环的作用也一想就通，如while，for，foreach……

 在这里插一句，如果你真的想了解如何制作主题，请打开的文本编辑器，跟着我一步一步地操作，一步一步地修改，每做一次修改就刷新一下你的博客看看有什么变化，这样才能够加深你的理解。如果你懒得动手，建议以后的内容就不用看了，看了对你帮助也不大。

 现在开始制作index.php。初始情况下index.php中有三篇文章，打开index.php你可以看到文章的3个标记<!-- Blog Post -->，我们现在其他将两篇文章的代码删除，留下一篇，并将文章摘要去除。修改后的代码是这样的：

制作好了header.php 和 footer.php ，今天我们来制作侧边栏sidebar.php。由于侧边栏的可定制性实在是太强了，所以本节内容比较难，我讲解起来也比较困难，有些内容会被略掉！

 作为各个页面公用的侧边栏，我们还是像制作header.php 和 footer.php那样，从index.php中提取侧边栏，放到sidebar.php。好，现在在你的主题目录Aurelius下新建文件sidebar.php，从index.php中提取一下代码，放到sidebar.php中：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

<!-- Column 2 / Sidebar -->
    <div class="grid_4">
        <h4>Catagories</h4>
        <ul class="sidebar">
            <li><a href="">So who are we?</a></li>
            <li><a href="">Philosophy</a></li>
            <li><a href="">History</a></li>
            <li><a href="">Jobs</a></li>
            <li><a href="">Staff</a></li>
            <li><a href="">Clients</a></li>
        </ul>
        <h4>Archives</h4>
        <ul class="sidebar">
            <li><a href="">January 2010</a></li>
            <li><a href="">December 2009</a></li>
            <li><a href="">Novemeber 2009</a></li>
            <li><a href="">October 2009</a></li>
            <li><a href="">September 2009</a></li>
            <li><a href="">August 2009</a></li>
        </ul>
    </div>
    <div class="hr grid_12 clearfix">&nbsp;</div>

上节内容我们已经弄好了博客的页头header.php，今天我们就一起来制作页脚footer.php。footer.php与header.php差不多，写这个文件的目的也是为了精简代码，提高代码的重用性，Aurelius主题目录中的所有页面的页脚代码几乎都是一样的，我们就把这些代码提取出来放到footer.php。

在Aurelius主题目录中新建文件footer.php，我们提取出index.php中的页脚代码拷贝到footer.php中(如果以后你制作自己的主题，可以根据需要决定哪些是footer代码)：

1
2
3
4
5
6

<!-- Footer -->
<p class="grid_12 footer clearfix"> <span class="float"><strong>Design By</strong> QwibbleDesigns&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Code By</strong> <a href="http://www.ludou.org/">Ludou</a></span> <a class="float right" href="#">top</a> </p>
</div>
<!--end wrapper-->
</body>
</html>

你可以尝试用文本编辑器打开从WordPress主题制作全过程（三）：HTML静态模板制作下载到的 .html 文件，不知道你有没有发现他们头部的代码都非常的相似呢？其实我们可以提取这部分相似的代码，放到一个单独的文件header.php中，各个页面想用这部分代码的时候再用php的include包含进去，省的每个页面里面都要写这部分代码，更改起来也可以达到一改全改的目的。

再次提醒：如果你不打算动手编写代码，这个系列教程就别看了，对你无益！

接着我们上次创建的主题目录wp-content\themes\Aurelius，在该目录下新建一个php文件header.php，我们提取出index.php中的头部代码复制粘贴到header.php中，下面是的代码就是目前header.php中的所有代码了(当然不同主题的头部代码都是不一样，在你实际的项目中可以自定决定)：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

<!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 profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Aurelius | Blog</title>
<!-- Stylesheets -->
<link rel="stylesheet" href="./style.css" type="text/css" media="screen" />
</head>
<body>
<div id="wrapper" class="container_12 clearfix">
<!-- Text Logo -->
<h1 id="logo" class="grid_4">Aurelius</h1>
<!-- Navigation Menu -->
<ul id="navigation" class="grid_8">
<li><a href="contact.html"><span class="meta">Get in touch</span><br />
Contact Us</a></li>
<li><a href="blog.html" class="current"><span class="meta">Latest news</span><br />
Blog</a></li>
<li><a href="index.html"><span class="meta">Homepage</span><br />
Home</a></li>
</ul>
<div class="hr grid_12 clearfix">&nbsp;</div>
<!-- Caption Line -->
<h2 class="grid_12 caption clearfix">Our <span>blog</span>, keeping you up-to-date on our latest news.</h2>
<div class="hr grid_12 clearfix">&nbsp;</div>