WordPress用php正则匹配获取上一篇下一篇链接和名称

WordPress使用函数 next_post_link和previous_post_link可以给文章添加上一篇下一篇支持,

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

还原成html代码为

1
2
上一篇: <a href="http://" rel="prev">文章标题</a>
下一篇: <a href="http://" rel="prev">文章标题</a>

但有的时候为了方便写样式我们不得不把链接和标题单独分开,比如我新折腾的主题pixeL:
QQ截图20170806100801
还原html代码是这样的:

1
2
3
4
5
6
<div class="post-nav"> 
<span class="prev"><a href="http://" rel="prev">
<span class="arrow">«</span> 已然已微不足道 何必还再去打扰</a></span>		
<span class="next"><a href="" rel="next">
<span class="arrow">»</span> 没有了,已经是最新的文章了</a></span>	
</div>

该代码的解释是:将上一篇下一篇放在一个“post-nav”容器里,设置总体样式,再通过两个span标签prev和next来分别为上一篇下一篇设置单独样式,span里放a标签,a标签里分别放上上一篇(«)和下一篇(»)标志符号,同样是通过span来设置样式,如果上一篇或下一篇文章都没有了则显示“没有了,已经是…”
如果要实现以上功能,单独调用函数 next_post_link和previous_post_link来实现挺麻烦的,有没有一种方法将上一篇下一篇的链接和标题分离出来方便写样式呢?当然有,之前我在某度上找了半天都没有一点线索,所以就自己通过PHP的正则匹配折腾出来了以下代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
//添加上一篇下一篇
function previous_post_url(){
    global $post, $posts;
    $html = get_previous_post_link("%link");
    preg_match_all("/<a.*href\s*=\s*[\"|\']?\s*([^>\"\'\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("/<a.*href\s*=\s*[\"|\']?\s*([^>\"\'\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 href="[^"]*"[^>]*>(.*)<\/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 href="[^"]*"[^>]*>(.*)<\/a>/';
        preg_match_all($pattern, $html, $matches);
        $nexttitle=$matches[1][0];
    }else{
        $nexttitle="没有了,已经是最新的文章了";
        }
 
    echo "$nexttitle";
}

这串代码设置了4个函数,分别获取上一篇链接、标题,下一篇链接、标题,添加到主题的functions.php里,然后通过以下代码分别调用:

1
2
3
4
<a href="<?php previous_post_url(); ?>//上一篇链接
<?php previous_post_title(); ?>	//上一篇标题
<a href="<?php next_post_url(); ?>//下一篇链接
<?php next_post_title(); ?>//下一篇标题

以下是我主题中的调用案列:

1
2
3
4
5
6
<div class="post-nav"> 
	<span class="prev"><a href="<?php previous_post_url(); ?>" rel="prev">
	<span class="arrow">«</span> <?php previous_post_title(); ?></a></span>		
	<span class="next"><a href="<?php next_post_url(); ?>" rel="next">
	<span class="arrow">»</span> <?php next_post_title(); ?></a></span>	
</div>

顺便附上我的css代码:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
/* 上一篇下一篇*/
.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;
}

发表一条评论:

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