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

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

文章页导航
文章页导航

最简洁的方式

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

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<?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代码如下:

1
2
3
4
5
6
7
8
<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文件:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.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;}

这是本站使用的文件代码。php代码放到主题single模板中,css代码放到主题style文件中就可以了。

(完)

版权声明WordPress头条正在使用WordPress文章版权插件
如未注明,均为原创,转载需注明出处
本文链接地址:http://www.wptoutiao.com/tutorial/373.html

文章导航的相关文章

文章页优化的相关文章

还可以分享文章给好友:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据