给WordPress文章页添加上/下一篇功能

2017/04/27 盛磊 0个讨论 1,291次浏览 A+

为了增加用户体验，增加用户的访问量（pv）,我们经常给网站的文章页下方增加上一篇，下一篇的功能，让用户可以继续浏览网站的内容，从而减少跳出率。大部分WordPress主题都默认加入了该功能。但也不排除少部分主题没有这个功能。今天就单独把这个功能提出来。

最简洁的方式

1 2	<?php previous_post_link('上一篇: %link') ?> <?php next_post_link('下一篇: %link') ?>

代码用到了WordPress函数：previous_post_link和next_post_link，分别用来显示上一篇和下一篇的链接。
当文章是最新一篇文章或者最早一篇文章的时候，将不显示任何内容。
下面代码改进这个问题：

<?php 
	if (get_previous_post()) 
	{ 
		previous_post_link('上一篇: %link');
	} 
	else 
	{
		echo "已是最后文章";
	} 
?>
<?php 
	if (get_next_post()) 
	{ 
		next_post_link('下一篇: %link');
	} 
	else 
	{
		echo "已是最新文章";
	} 
?>

这里使用get_previous_post：获取前一篇文章，get_next_post：获取下一篇文章。来判断文章是否存在。

php代码如下：

<div class="nav-below">
<?php 
    previous_post_link( '<div class="nav-previous"><span class="meta-nav">上一篇:</span>%link</div>');
?>
<?php 
    next_post_link( '<div class="nav-next"><span class="meta-nav">下一篇:</span>%link</div>'); 
?>
</div>

css文件：

.nav-below{margin:0 0 30px 0;}
.nav-below, .nav-below a{
		font-size:13px;
		font-weight:bold;
		letter-spacing:1px;
		color:#fff;
		text-decoration:none;}
.nav-previous, .nav-next{
    padding: 3px 5px;
    float: right;
    color: #fff;
    height: 24px;
    background: #FF6002;
    text-align: center;
    line-height: 24px;
    display: block;
    margin:2px 0;
}
.nav-previous{ float: left;}
.nav-next{ float: right;}