打造Wordpress终极文章导航——前后N篇文章导航

8Jun2009 分类: Wordpress 作者: admin - 857 访问 -

好的用户体验给阅读者带来极大的方便，比如就纯阅读层次来说，“相关文章”、“前、后文章导航”这2个是最典型的功能，在读者阅读时，非常方便、友善！

为什么会想起“前后N篇文章导航”？

最近在优化我的Blog的时候，发现百度对Wordpress的收录很弱智，把我blog大部分收录成了tag、分类，而真正的内容基本没有，导致本blog在Baidu来的流量几乎为0！

最后也找不到准确的原因，所以期望通过文章内部的内链将全站形成一个完整的“链接网络”，即搜索引擎的Spider只要打开任何一篇文章，都可以轻松的顺藤摸瓜把所有网站的正文内容“抓取”到。实际相对于Goolge，这明显是多余的，而Baidu这样有点“脑残”的搜索引擎来说，只有用这样的办法让它聪明一点！（关键还是希望baidu能正常收录我的站）

另外也从用户体验的角度来考虑的，比如一些联系发表的文章，不需要单独做Index了，直接从前后N篇文章中就导航了。

具体效果如下（点击看大图）：

原理简介

在Wordpress模板函数库中的“链接函数”（在wp-includesLink-template.php中）有2个函数可以得到前、后文章链接：

previous_post_link()：生成当前文章的前一篇文章链接地址；
next_post_link()：生成当前文章的后一篇文章链接地址；

这2个函数是直接生成（即直接Echo）链接地址（包括标题、提示），而如果要返回链接的具体内容，则可用这2个函数：

get_previous_post()：返回当前文章的前一篇文章链接地址数组；
get_next_post()：返回当前文章的后一篇文章链接地址数组；

返回的数组结构为：

stdClass Object
(
[ID] => 2763
[post_author] => 1
[post_date] => 2009-06-01 03:40:48
[post_date_gmt] => 2009-05-31 19:40:48
[post_content] => 内容……
[post_title] => [转]SEO方程式让你彻底了解SEO
[post_category] => 0
[post_excerpt] =>
[post_status] => publish
[comment_status] => open
[ping_status] => open
[post_password] =>
[post_name] => zhuan-seo-fang-cheng-shi-rang-ni-che-di-liao-jie-seo
[to_ping] =>
[pinged] =>
[post_modified] => 2009-06-01 03:40:48
[post_modified_gmt] => 2009-05-31 19:40:48
[post_content_filtered] =>
[post_parent] => 0
[guid] => http://www.paopaoniu.com/?p=2763
[menu_order] => 0
[post_type] => post
[post_mime_type] =>
[comment_count] => 4
)

利用这几个函数的结合，然后利用类似“递归”的传递算法，则可获得相对于当前文章前、后的N篇文章！

具体方法、步骤、代码：

上面的原理明白后，下面介绍具体方法和代码：

首先确定你是否安装了“相关文章”显示的插件，如果没有，则可直接修改模板文件Single.php的$content变量；如果有类似插件，则需要在这个插件中进行修改。当然，可以自己搞个插件，自己Add_Action更方便，我也准备在最近有空的时候，实现一下这个插件。

下面是核心代码：

    $s='<div class="post-nav">';
	//get next & Previous_post;
	$post1=$post; //保存当前Post
	$prevPost = get_previous_post();
	$nextPost = get_next_post();
	$i = 0;
	$num_prev_posts = 3;//设置显示前后N篇
 
	while ($i < $num_prev_posts)
	{
		$i++;
		$i_str=n2c_s($i);//将数字转为汉字
		if (!empty($prevPost)) { // not empty ,then work
			$p_id=$prevPost->ID;
			$post=$prevPost;
			$t0=$post->post_title;
			$l0=get_permalink($p_id);
			$s.='<span class="previous2" title="前$i_str篇文章" >前'.$i_str.'篇：<a href="'.$l0.'" title="'.$t0.'">'.$t0.'</a></span>';
			$prevPost = get_previous_post(); 
		}else
		{
			$s.='<span class="previous2">无</span>';
		}
 
		if (!empty($nextPost)) { // not empty ,work
			$n_id=$nextPost->ID;
			$post=$nextPost;
			$t0=$post->post_title;
			$l0=get_permalink($n_id);
			$s.='<span class="next2" title="后$i_str篇文章" >后'.$i_str.'篇：<a href="'.$l0.'" title="'.$t0.'">'.$t0.'</a></span>';
			$nextPost = get_next_post(); // and then there should be a check if $prevPost is empty or not
		}else
		{
			$s.='<span class="next2">无</span>';
		}
 
 
	}
	$post=$post1;//将当前的Post变量还原
	$s.='</div>';
	$output=$s.$output;//输出

下面是需要用到的样式表：

/* next &amp; previous post navigation */
.post-nav {
	font-size:12px;
	line-height:22px;
	margin:15px 0pt 10px;
	border:0px;
	width:100%;
}
.post-nav a, .post-nav a:visited {
	text-decoration: none;
}
.post-nav a:hover {
	text-decoration: none;
}
.post-nav .previous2  {
	text-align:left;
	border:0px;
	width:350px;/*这里根据页面情况自定义一下*/
 	float: left;
	padding-left: 20px;
	padding-top: 2px;
	background:url(images/arrow.gif) no-repeat left center;
	display: block;
	overflow:hidden;
	height:24px;
 
}
.post-nav .next2  {
	text-align:left;
	display: block;
	border:0px;
	float: left;
	width:350px;/*这里根据页面情况自定义一下*/
	margin-left:10px;
 
	overflow:hidden;
	height:24px;
 
	padding-left: 20px;
	padding-top: 2px;
	background:url(images/arrow2r.gif) no-repeat left center;
}

下面是需要用到的将数字转换为汉字的函数（简单版）:

//函数名: num2chi()
function n2c_s($x) //单个数字变汉字
{
switch($x)
{
case '0': $ch = '零'; break;
case '1': $ch = '一'; break;
case '2': $ch = '二'; break;
case '3': $ch = '三'; break;
case '4': $ch = '四'; break;
case '5': $ch = '五'; break;
case '6': $ch = '六'; break;
case '7': $ch = '七'; break;
case '8': $ch = '八'; break;
case '9': $ch = '九'; break;
}
return $ch;
}

30日热点！

从上图中，或者在本blog文章的下面，可以看到“30日热点”

为什么是30日？因为几乎大部分blog都只是“热点”，这个典型问题就是将建站以来点击率最高的N篇文章显示出来，这对于新访问用户可能有一定帮助，但对一个老用户来说，肯定热点的内容都读过了，所以显得很多余、没有用。

30日热点，只统计最近30日内访问量最高的，所以如果内容丰富的话，几乎每次来，都会有新的内容加入榜单，让榜单导航的意义更大，从而有效提升用户阅读体验！

当然，这个实现起来并不复杂，只是在Sql查询中加入时间限制，下面把核心Sql代码贴一下：

SELECT DISTINCT $wpdb->posts.*, (meta_value+0) AS views FROM $wpdb->posts LEFT JOIN $wpdb->postmeta ON $wpdb->postmeta.post_id = $wpdb->posts.ID WHERE post_status = 'publish' AND post_password ='' AND ( to_days(now()) - to_days(post_date_gmt) <= 30) AND meta_key = 'views'  ORDER  BY views DESC LIMIT  $skip_posts, $no_posts

30日热点

未找到

标签: 前后N篇, 插件, 文章导航, 热点文章, 用户体验, 相关文章, 终极, 阅读体验
原文链接 : http://www.paopaoniu.com/html/da-zao-wordpress-zhong-ji-wen-zhang-dao-hang-qian-hou-n-pian-wen-zhang-dao-hang-2843.html
转载原创文章请注明 : 泡泡牛
收藏到 :

您可以订阅此文章 RSS 2.0 . 您可以评论此文章, 或引用到您自己的网站.

18条评论

在 2009.06.08 13:01, Lorz 说:

这篇文章的地址好长好长

[回复]
- 在 2009.06.08 13:50, admin 说:
  
  这就是所谓的“拼音URL”的弊端。
  
  [回复]
  - 在 2009.06.08 14:17, u0 说:
    
    确实啊，特别是对百度，拼命收录tag页，还对UTF-8中文乱码
    
    [回复]
    - 在 2009.06.09 03:10, popox 说:
      
      不过居然百度对这一点“无动于衷”
      
      [回复]
在 2009.06.08 14:15, u0 说:

30日热点这个叫法有点怪怪的，最近30天热点好像容易理解
这个是否是还基于其他插件实现的呢，如统计数，希望博主好好介绍下方法，最好再发篇文章介绍

[回复]
- 在 2009.06.09 03:13, popox 说:
  
  主要是想简短一点……
  这个不急于其他插件，完全是wp内部函数。
  这篇文章是主要思路、原理和主要代码，要实现，确实需要有一定的编程能力。我会在下来有时间的情况下，直接做个插件完成。
  
  [回复]
在 2009.06.08 14:45, killfox 说:

好文章！收藏了！

[回复]
在 2009.06.08 18:46, foremire 说:

加上这个后感觉会在一定程度上加大数据库的负担

[回复]
- 在 2009.06.09 03:11, popox 说:
  
  wp优化最终必须依靠wp Cache这样的进行缓存。否则任何动作都会从理论上加剧负担。
  
  [回复]
在 2009.06.08 20:24, atmo 说:

还是不明白怎么才能弄出来。

[回复]
- 在 2009.06.09 03:14, popox 说:
  
  这篇文章是主要思路、原理和主要代码，要实现，确实需要有一定的编程能力。我会在下来有时间的情况下，直接做个插件完成。
  
  [回复]
在 2009.06.09 09:30, Xiao3 说:

你好！我想问下，那个核心代码和Sql代码应该分别放在什么地方？谢谢！

[回复]
- 在 2009.06.09 10:20, admin 说:
  
  你是说那个30日热点？还是导航功能？
  正在考虑将这个进行插件话，你就不需要自己修改了。
  
  [回复]
  - 在 2009.06.09 15:04, estoremap 说:
    
    插件话了能不能告诉我一下呢！
    
    [回复]
    - 在 2009.06.09 15:38, popox 说:
      
      当然可以。
      另外也会在各大主要网站公布的，包括wp官网。
      
      [回复]
在 2009.06.10 22:47, 小王子说:

很强大啊。

[回复]
在 2009.06.19 09:16, 沙漠里钓鱼说:

很喜欢博主的这套程序，希望早日看到博主的插件发布。期待

沙漠里钓鱼

[回复]
- 在 2009.06.19 10:55, popox 说:
  
  谢谢！
  
  [回复]