一些基本的知识

把wordpress3.0升级完之后，在Appearance菜单底下就有Menus的选项，见下图:

Theme location面板是选择在你主题中已经注册了的导航菜单。如果要使用导航菜单，必须在主题里先注册，代码如下：（我注册了两个导航菜单）

	// This theme uses wp_nav_menu() in one location.
	register_nav_menus( array(
		'primary_left' => __( 'Primary Navigation Left', 'moonbay' ),
	) );
	register_nav_menus( array(
		'primary_right' => __( 'Primary Navigation Right', 'moonbay' ),
	) );

这里有几个参数，其中 primary_left和primary_right是两个导航菜单的注册标识, Primary Navigation Left和Primary Navigation Right是菜单的名称，会显示在Theme location面板里的下拉框中。moonbay则是我为主题的命名。

注册完导航菜单后，就可以来编辑了。Custom links, Pages, Categories三个面板，可以添加自定义链接，页面，或者分类到导航菜单里去，这样就可以很方便地做出CMS的导航了（见文章开头的那张图）

用导航菜单的第一个trick

我一开始只注册了一个导航菜单，后来发现不能满足需求。如本文开头那张图所示，我想让导航菜单的左边三个靠左，右边三个靠右。在我的html的DEMO里是这样的：

       <div id="nav">
		<ul>
			<div class="left">
				<li class="active"> <a href="#" title="首页"> Home</a> </li>
				<li> <a href="#" title="首页"> News</a> </li>
				<li> <a href="#" title="首页"> Membership</a> </li>
			</div>
			<div class="right">
				<li> <a href="#" title="首页"> Activities</a> </li>
				<li> <a href="#" title="首页"> About</a> </li>
				<l> <a href="#" title="首页"> Contact</a> </li>
			</div>
			<div class="clear"> </div>
		</ul>
	</div>

left和right两个class设为float:left和float:right，这样就实现了左边靠左，右边靠右。

而现在如果只注册一个导航菜单的话，不能在li标签外在包一个div，如果通过js来判断前三个li外包一个div的话，又挺别扭的（那样我还不如完全hard coding）。后来想到，我可以注册两个导航菜单，都是我的主导航，只不过一个在左，一个在右：

				< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary_left' ) ); ?>
			</div><!-- #left_nav -->
			<div class="right">
				< ?php wp_nav_menu( array( 'container_class' => 'menu-header', 'theme_location' => 'primary_right' ) ); ?>
			</div><!-- #right_nav -->

这样我就实现了DEMO中的效果。导航菜单的好处就是在开发完主题之后方便客户使用，毕竟你不能要求他们去改模板，你也不希望客户仅仅是想改一下导航菜单条目的顺序或者文字，就来电话你。hard coding适合给自己用，但wordpress3.0支持了导航菜单，则可以说开启了一个建站的小时代。因为wordpress的开发者社区可是相当红火的，会有各种各样的tricks冒出来。本文所举的只是小小的一粒。

类似的网志，挑你喜欢的看：

• wordpress教程：如何将文章分成两栏显示
• wordpress教程：如何在不同的页面显示不同的分类文章
• 怎么在wordpress中显示文章总数和分类总数
• How Blackboard theme has been done – the original
• .htaccess文件中添加301重定向

首先描述一下问题出在哪。目前wordpress2.9版本还没有文章“类型”这个概念（未来的3.0版本就有了，不过据说不是很健全），在文章序列（wp_query())里面会按照日期来显示所有的文章，无法只显示哪个分类的文章。这样一来，我们就无法把blog和portfolio两个分类的文章分开来显示了。

方案一：post和page分别用到两种文章blog和portfolio上。

这其实是个很简单的办法，巧妙地避免了区分post的分类的问题。具体地实施如下：

1. 新建一个blog分类，然后把所有blog文章放在这个分类下面。当然你可以建任何子类别，文章也可以属于任何子类别（在写文章时，只需要勾上子类别即可）。
2. 新建一个portfolio的页面(page)A作为主页面，然后把你所有的portfolio以页面B的形式写出来，并让A是所有的B的父级。
3. 问题解决。以后添加任何文章或者页面，就按照这个模式走下去即可。

这个方案方便是方便，但有明显滴缺憾。1.你会有大量的页面存在- -。2.最多你只能将两种类型的文章做成这样，因为wp现在除post和page之外没有第三种了。

方案二：通过简单地修改wp_query()来在不同的页面显示不同的分类文章

这个方法需要对wordpress的loop有一定的了解，不熟悉的同学可以去看wp官网对loop的详细介绍，其中也包括了对wp_query用法的详细示例。这里直接上代码先：

< ?php $portfolio_query = new WP_Query('category_name=portfolio&posts_per_page=100'); 	  while ($portfolio_query->have_posts()) : $portfolio_query->the_post();
	  $do_not_duplicate = $post->ID; ?>

解释一下上面的代码。第一句php $portfolio_query = new wp_query，是创建portfolio文章序列作为新的wp_query；括号里面的 category_name=portfolio表示这个新的文章序列是属于分类名称为portfolio的（这里也可以用分类ID/slug）；posts_per_page=100是说portfolio文章序列里一共显示100篇文章。这段代码比较简单，用它替代你的 if (have_post) 那段php代码即可。

这个原理就是对wordpress里面默认的loop做了些修改。同理，你可以在你博客的任何地方再创建一个blog文章序列作为又一个新的wp_query。这样就能满足不同页面显示不同分类的文章了。总之，只要对loop的了解足够深刻，可以千变万化地显示你的文章。

更通用的方案，更像插件的方案

这个方案的原理还是跟方案二一样的，不过老外做事很细致，而且喜欢把东西搞得很正规。在许多国外的主题里面其实已经实现了在不同页面显示不同分类文章的效果，大多数的做法跟wordpress官方网站上那位老兄贡献出来的源码是一样的，就是想这样参数化：

$category = ($pcat) ? $pcat : $category;
						$temp = $wp_query;
						$wp_query= null;
						$wp_query = new WP_Query();
						$wp_query->query('showposts='.$ppp.'&cat='.$category.'&paged='.$paged);

这样其实和方案二没有本质的区别，它更适合做出来的主题让各种人使用（当然也需要一定的wp知识）。这里还是推荐大家可以直接用方案二，然后手动去研究loop好了。

更进一步：让两个分类blog和portfolio有不同的样式，不同的显示方式！

我下一篇教程会讲到如何做到这一点。相信这也是很有用的，大家肯定希望作品集显示的信息更集中/更炫，或者说用wp搭建的电子商务网站的产品页面和新闻页面肯定不一样。记得订阅我的博客，这样就不会错过下一篇教程了。类似的网志，挑你喜欢的看：

• 怎么在wordpress中显示文章总数和分类总数
• wordpress教程：如何将文章分成两栏显示
• wordpress3.0导航菜单初探
• .htaccess文件中添加301重定向
• How Blackboard theme has been done – the original

在wordpress的一个页面中如何把文章分成两栏来显示？这是我在做Blackboard主题时遇到的一个问题。下面就介绍一下实现这个效果的办法，希望能帮助到有同样问题的人。

方法一：用css来实现

这个方法的思路是绕过两栏这个概念，而转为将文章横向排列来模拟两栏的效果。文章横向排列，很自然地想到用css的float来控制。先给posts loop的容器加上一个宽度：

.posts-loop {
  width:600px;
}

然后给文章加上宽度/边距/浮动属性就可以了：

.posts {
  width:300px;
  margin-right:20px;
  float:left;
}

这个方法的优点当然是简单。缺点也很明显，你需要比较精确的控制每篇文章的长度（或者是摘要的长度），不然如果有一侧的文章相对来说更长，那竖向的留白就会变得不整齐。并且如果你想做到上图我博客上的参差的效果，就需要更精确的控制。

更好的办法：用while方法来判断文章的奇偶性

这个方法的思路是：设计两栏，让奇数文章落到奇数栏里，偶数文章落到偶数栏里。实现方法我在大一的C语言课上就学过（当然现在完全忘光了，要去google一下才能记起来），设定一个计数器：i++，通过 i $ 2 == 0 来判断偶数：

<div class="odd-column"> // 设定一个奇数栏容器
< ?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) == 0) : $wp_query->next_post(); else : the_post(); ?> // 判断i为偶数则读取下一篇文章，否则读取当前这篇文章
  <div lt;?php post_class() ?> id="post-lt; ?php the_ID(); ?>">
    <div class="entry">
< ?php the_content('Continue Reading »'); ?>
    </div>
  </div>
</div>

同样的，通过 i $ 2 !== 0 来判断奇数。不过在此之前由于wp_query已经跑过一遍了，这时需要让wp_query恢复为“初始”状态，可以用rewind_posts()方法：

<div class="even-column"> // 设定一个奇数栏容器
< ?php $i = 0; rewind_posts(); ?> // 赋值0给i，让i重新开始计算；并且把wp_query也恢复到“初始”状态
< ?php if (have_posts()) : while(have_posts()) : $i++; if(($i % 2) !== 0) : $wp_query->next_post(); else : the_post(); ?> // 判断i为奇数则读取下一篇文章，否则读取当前这篇文章
  <div <?php post_class() ?> id="post-< ?php the_ID(); ?>">
    <div class="entry">
< ?php the_content('Continue Reading »'); ?>
    </div>
  </div>
</div>

至此，博客中的文章已经被分为奇数栏和偶数栏了，现在只需要通过css来控制odd-column和even-column的属性即可。在我的Blackboard主题中，我让偶数栏even-column升高一些，做成参差的效果：

.odd-column, .even-column {
  width:300px;
  margin-right:20px;
  float:left;
}
.even-column {
  margin-top:-120px; // 让偶数栏升高
}

这样，就实现了在wordpress中将文章分成两栏显示。第二种方法显然更灵活，可以实现更多创意。

更多的创意！

这里稍稍抛砖引玉一下，比方说，你可以让两栏文章的css属性更加丰富，宽窄高矮，边距留白，背景图片颜色字体等等都可以随设计改变；你也可以让奇数栏显示A分类的文章，而B分类的文章则都在偶数栏里；你也可以两栏放置不同数量的文章，不同主题的文章，任何固定的文章等等；甚至你可以改成更多栏，只要你愿意的话，这样可以实现杂志风格的排版效果。心有多大，wp就有多大。

如果你对这个教程有任何想法，记得留言哦。如果你实现了很好看的杂志排版效果，也请分享给大家！

类似的网志，挑你喜欢的看：

• How Blackboard theme has been done – the original
• wordpress教程：如何在不同的页面显示不同的分类文章
• wordpress3.0导航菜单初探
• 怎么在wordpress中显示文章总数和分类总数
• .htaccess文件中添加301重定向

在.htaccess中添加重定向的利弊

凡事都是利弊两面的。在.htaccess中写301重定向的好处是它是在服务器端，浏览器会先读其中的语句然后直接跳到正确的url页面；而用redirect tag方法的话，浏览器会先到“错误的”页面，然后重定向到“正确的”页面，这样会有一个延迟（以前的重定向大多数这种方法）。

而在.htaccess中写301重定向的缺陷则在于它影响服务器端所在目录及所有子目录的文件，而且浏览器每一次发起请求，.htaccess都会被读到。所以如果你需要写大量301重定向语句的话，.htaccess的执行效率会降低，速度就自然变慢。

当然，对于博客这种级别的小型网站来说，在.htaccess里写301重定向是很好的

方法蛮简单的，在服务器里找到你的.htaccess文件（如果你用的是FTP客户端来找文件，确保你使用了查看隐藏文件的选项），添加如下代码：

#301 redirect
Redirect 301 /old-category/sample-post http://your-domain/new-category/sample-post

这里可以很灵活地运用。比如你不想要 category name 在网志的url中出现，可以写成：

Redirect 301 /category-name/sample-post http://your-domain/sample-post

如果你要重定向整个网站到一个新的域名

添加如下代码即可：

Redirect 301 / http://your-new-domain/

类似的网志，挑你喜欢的看：

• How Blackboard theme has been done – the original
• wordpress教程：如何在不同的页面显示不同的分类文章
• 给网站加速：设置expires header (YSLOW提示)
• New site launched!
• wordpress教程：如何将文章分成两栏显示

一共有6节PPT，内容比较简单。主要是想给他们打好基础，理顺概念。我并没有推荐他们去网上自己找些国人的资料来学，因为那些资料本身有很多问题（有些问题很严重，影响以后对代码的理解）。在经过2个月8节课每节2个半小时左右的课程后，他们每一个人都能独立写出自己平时做的页面代码了。当然代码质量可以逐步提高，但我想这是一个质的飞跃。他们能，你也可以。

可以在这篇网志上看下面的系列PPT，也可以点击PPT上的链接到slideshare上看。有一些配合PPT的例子源文件我都打包在一起，需要的话下载教程和源文件吧。

第一节：盒模型和css基本属性

第一节完完全全是入门知识，这里侧重于理清楚每个概念的渊源，以及和设计的相关性。

第二节：页面背景，头部

从设计师的角度讲怎么实现视觉稿里的图片背景，特别是网页的头部，从而引入一些常用的background, position, float等css属性。

第三节：margin, padding

第四节和第五节：ul, li

这节讲商品排列页面中最常用的ul和li标签。并延伸开来讲了一些如何配合Js来完成一些页面上的交互效果。

第六节：复习

温故知新。

可以打包下载系列PPT和对应的例子源文件。顺便说一下，我认为一个designer懂一点代码是好的，可以更好地做设计，做出更好的设计。类似的网志，挑你喜欢的看：

• 3种css中的white-space使用技巧
• 和翔子聊交互
• .htaccess文件中添加301重定向
• wordpress教程：如何将文章分成两栏显示
• 给网站加速：设置expires header (YSLOW提示)

先来认识一下white-space

white-space字面意思是指泛空格符，就是空格和回车(<br>标签）。在css中，它就是来控制元素的空格和换行效果的。white-space可以取如下几种值：

• normal: 默认值，就是没有启用。
• pre: 空格和回车都起作用。跟html中 <pre> 标签一样。
• nowrap: 文本不换行，直到遇到回车为止。
• inherit: 从父级元素那里继承。

在css2.1之后，又添加了pre-wrap和pre-line，可以更灵活地控制了：

• pre-wrap: 空格起作用，回车不起作用。元素正常换行。
• pre-line: 和pre-wrap刚刚相反。回车起作用，空格不起作用。

将white-space:no-wrap; 应用到<a>标签上

有时候我们会碰到一个比较烦人的问题，如果你的<a>标签中的文字太长，在容器内部则会换行，这样链接文字不在同一行上对用户的阅读有一定影响。这时候给<a>标签设置no-wrap属性，可以让它不换行，超过容器宽度，就可以解决这个很小的问题。可以看看下面的对比

用white-space:pre; 来包裹文章中的代码

有时候我们想把文章中的代码格式化一下，这样更方便读者看。最简单的办法就是用white-space:pre;，或者直接使用<pre>标签。这样在wordpress后台里写网志时打的空格，回车等会起作用。

格式化之后的代码片段
p {
  margin-bottom:12px; margin-top:12px;
}

上面的例子中，用了white-space:pre;之后文字都跑出了容器。那么要想既能让空格显示出来，又能让文字自动换行应该怎么办呢？看下面一段：

用white-space:pre-wrap

pre-wrap可以让容器内的元素空格起作用，但回车不起作用，容器正常换行（要超过容器的宽度的时候则换行），将上面的例子稍加修改，把white-space:pre;换成white-space:pre-wrap;即可做到这个效果。

格式化之后的代码片段
p {
  margin-bottom:12px; margin-top:12px;
}

That’s all! 希望以上三个css小技巧能够帮助你以后的设计，也欢迎有更多小技巧的同学留下评论多多分享～

类似的网志，挑你喜欢的看：

• A beginer guide for designers who wanna learn html&css
• 和翔子聊交互
• wordpress教程：如何将文章分成两栏显示
• New site launched!
• 给网站加速：设置expires header (YSLOW提示)

速度至上

这是google的设计理念之一，我也尝试着以后更多关注性能方面的事情。于是今天下决心整一下静态文件的过期时间。

关于expires的具体信息可以在Yahoo YSLOW的文档中查看。简单地说，它是设置了一个静态文件的过期时间，这样就会避免在以后的访问中避免那些不必要的http请求。这对你有大量静态文件（图片，css，js，flash，html等等）的时候，是很有帮助的。

Caution

如果是在apache环境下安装的wordpress，是会有.htaccess这个文件生成的，而且是隐藏起来的。如果你用FTP发现服务器那边并没有这个文件，需要选择查看隐藏文件仔细检查一下。如果有的话，备份一下，直接在里面修改就可以。如果确实没有，可以用记事本创建一个文本文档，然后存成.htaccess，上传到服务器就可以了。

具体的修改方法

YSLOW里的文档有说明，可以加上具体的到期时间，如：Expires: Thu, 15 Apr 2010 20:00:00 GMT。也可以加上相对时间，如ExpiresDefault “access plus 10 years”。具体的代码如下：

FileETag MTime Size

  
       ExpiresActive on
       ExpiresDefault "access plus 10 year"
   

设置完毕后测试一下，请求数确实少了。It works!

至于如果你是IIS环境的（一般国外hosting服务都是apache，国内有少数几个是IIS），其实也很简单，方法类似。如果你是IIS 6的，那你多半需要联系主机服务提供商来代你做这个事情（你没权限）。如果是IIS 7的话，就方便很多，你可以在web.config’s system.webServer中编辑这样一段代码：

<staticContent>
       <clientCache httpExpires="Sun, 29 Mar 2020 00:00:00 GMT" cacheControlMode="UseExpires" />
</staticContent>

It works too!

更新，最近做了一些优化之后，YSLOW评分已经到了88分，google的Page Speed也是88分。接下去准备把一些css背景图片能合并的合并一下，尤其是icon，速度优化无止境啊！

更新，今天发现一个插件Autoptimize可以自动添加expires header、压缩css,js,html，而不需要手动去操作。它是通过拿到<script>等标签来做的，你甚至可以选择CDN（如果你有的话）。不过这种傻瓜式的插件也有不足，就是你以后要更新主题的时候，还是蛮麻烦的。需要的同学去自行安装吧～

类似的网志，挑你喜欢的看：

• .htaccess文件中添加301重定向
• 3种css中的white-space使用技巧
• A beginer guide for designers who wanna learn html&css
• wordpress3.0导航菜单初探
• wordpress教程：如何将文章分成两栏显示

最近在鼓捣自己博客的时候，想实现显示文章总数的功能。在wordpress doc里面翻箱倒柜半天也没有找到一个函数可以做到。好在在论坛里看到一个帖子提到了用mysql中的SELECT和WHERE子句，这样的话就可以在数据库里拿到COUNT这个值了。

要实现的功能很简单，代码也很简单，如下：

<?php
  $numposts = $wpdb->get_var("SELECT COUNT(*) FROM $wpdb->posts WHERE post_status = 'publish'");  //在数据库中判断post_status是publish的文章，并计总数
  if (0 < $numposts) $numposts = number_format($numposts);  //格式化将要输出的总数
?>
<?php
  echo $numposts  //输出这个变量
?>

好在子句简单，性能上应该没什么问题。在这个事例上再次证明了google是最好的老师。接下来一个想法是解决现实分类总数的问题。这个倒是有wp的方法可以hack一下。

<?php
  $thecats = wp_list_categories('title_li=&exclude=1&style=none&echo=0'); // 用wp_list_categories来获取所有分类，去掉所有的html（我这里用到了exclude=1只是为了排除某个分类），把字符串赋值到$thecates
  $splitcats = explode('',$thecats); // 用来分割上面获取到字符串，成为数组（分类1 分类2 分类3这样）
  $summ = count($splitcats)-1; // 计算数组中单元的个数，这里要减去1，因为比我们想要得到的值多1，并赋值给$summ
?>
<?php
  print $summ;
?>

只能说，程序员们太聪明啦！本文中提到的三个php方法可以参考w3school的文档（它一直是很不错的网站）：number_format()explode()count()类似的网志，挑你喜欢的看：

• wordpress教程：如何在不同的页面显示不同的分类文章
• wordpress3.0导航菜单初探
• wordpress教程：如何将文章分成两栏显示
• How Blackboard theme has been done – the original
• .htaccess文件中添加301重定向