WordPress使用函数 next_post_link和previous_post_link可以给文章添加上一篇下一篇支持,
还原成html代码为
上一篇: 文章标题
下一篇: 文章标题
但有的时候为了方便写样式我们不得不把链接和标题单独分开,比如我新折腾的主题pixeL:
还原html代码是这样的:
该代码的解释是:将上一篇下一篇放在一个“post-nav”容器里,设置总体样式,再通过两个span标签prev和next来分别为上一篇下一篇设置单独样式,span里放a标签,a标签里分别放上上一篇(«)和下一篇(»)标志符号,同样是通过span来设置样式,如果上一篇或下一篇文章都没有了则显示“没有了,已经是...”
如果要实现以上功能,单独调用函数 next_post_link和previous_post_link来实现挺麻烦的,有没有一种方法将上一篇下一篇的链接和标题分离出来方便写样式呢?当然有,之前我在某度上找了半天都没有一点线索,所以就自己通过PHP的正则匹配折腾出来了以下代码:
//添加上一篇下一篇
function previous_post_url(){
global $post, $posts;
$html = get_previous_post_link("%link");
preg_match_all("/\"\'\s]*)/i", $html, $matches);
$previousurl=$matches[1][0];
echo "$previousurl";
}
function next_post_url(){
global $post, $posts;
$html = get_next_post_link("%link");
preg_match_all("/\"\'\s]*)/i", $html, $matches);
$nexturl=$matches[1][0];
echo "$nexturl";
}
function previous_post_title(){
global $post, $posts;
if (get_previous_post()) {
$html = get_previous_post_link("%link");
$pattern = '/]*>(.*)<\/a>/';
preg_match_all($pattern, $html, $matches);
$previoustitle=$matches[1][0];
}else{
$previoustitle="没有了,已经是最后的文章了";
}
echo "$previoustitle";
}
function next_post_title(){
global $post, $posts;
if (get_next_post()) {
$html = get_next_post_link("%link");
$pattern = '/]*>(.*)<\/a>/';
preg_match_all($pattern, $html, $matches);
$nexttitle=$matches[1][0];
}else{
$nexttitle="没有了,已经是最新的文章了";
}
echo "$nexttitle";
}
这串代码设置了4个函数,分别获取上一篇链接、标题,下一篇链接、标题,添加到主题的functions.php里,然后通过以下代码分别调用:
//下一篇链接
//下一篇标题
以下是我主题中的调用案列:
顺便附上我的css代码:
/* 上一篇下一篇*/
.post-nav {
/*margin: 20px 0 30px;
padding: 15px 0;*/
padding-bottom: 20px;
clear: both;
}
.post-nav .prev {
float: left;
}
.post-nav .next {
float: right;
text-align: right;
}
.post-nav span {
width: 47%;
position: relative;
}
.post-nav a {
text-decoration: none;
display: block;
color:#777;
}
.post-nav .next span {
float: right;
/*margin-left: 10px;*/
margin-right: 0;
}
.post-nav span span {
color: #777;
font: normal 20px/100% "Times New Roman", Times, serif;
/* display: block; */
width: auto;
float: left;
width: 32px;
height: 60px;
/* padding: 4px 0 0; */
text-align: center;
/* margin: -8px 10px 17px 0; */
/* -webkit-transition: background 1s; */
-moz-transition: background 1s;
/* transition: background 1s; */
/* border-radius: 10em; */
}
.post-nav span {
width: 47%;
position: relative;
}