WordPress 上一篇、下一篇文章链接优化大全

2016-08-22 06:16 638 12 条评论龙笑天下 5

龙笑天 互助分享，互联网本该如此！

本文综合介绍 WordPress 上一篇、下一篇文章链接的细节优化，如：给上一篇、下一篇文章链接加上 title 标题或缩略图；实现 wordpress 文章页调用同分类上/下一篇文章，以及优化当文章处于首篇或末篇时，上一篇、下一篇文章链接的显示空白。

1 上一篇、下一篇文章链接加上 title 标题或缩略图

在 wordpress 中，文章页面添加的上一篇和下一篇文章链接，是没有 title 属性。那么如何加上 title，甚至加上缩略图呢？@觉唯设计

好吧，仔细研究一下吧，一般我们添加上一篇和下一篇文章时的代码是这样子的：

<?php previous_post_link('%link','<<') ?>
<?php next_post_link('%link','>>') ?>

该代码最终解析出来的代码大概如下：

<a href="……" rel="external nofollow" > …… </a>
<a href="……" rel="external nofollow" > …… </a>

这样子的结构是非常简单，如果我要增加 title、target 等属性值时，单靠上面两个函数是办不到的。其实要解决这个问题很简单，不知道大家有没有接触到这两个函数：get_previous_post、get_next_post。通过这两个函数我们可以获取到上一篇和下一篇文章的相关信息。大家可以到官网看看这两个函数的介绍。

好了，下面就来干货，说下解决问题的方法。只要将：

<?php previous_post_link('%link','<<') ?>
<?php next_post_link('%link','>>') ?>

替换成：

<?php
$prev_post = get_previous_post();
if (!empty( $prev_post )): ?>
  <a title="<?php echo $prev_post->post_title; ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>" rel="prev"><?php echo $prev_post->post_title; ?></a>
<?php endif; ?>
<?php
$next_post = get_next_post();
if (!empty( $next_post )): ?>
  <a title="<?php echo $next_post->post_title; ?>" href="<?php echo get_permalink( $next_post->ID ); ?>" rel="next"><?php echo $next_post->post_title; ?></a>
<?php endif; ?>

通过上面的替换，问题就完美解决了。除了可以添加 title 属性外，大家如果有需要也可以加上新窗口打开的属性：target="_blank"。

也可以给上一篇、下一篇文章链接加上缩略图，给个参考例子：@segmentfault

<?php
    $current_category=get_the_category();
    $prev_post = get_previous_post($current_category,'');
    $next_post = get_next_post($current_category,'');
?>
<div class="previous_post_link fl">
    <?php if (!empty( $prev_post )): ?>
        <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo get_the_post_thumbnail( $prev_post->ID, '', '' ); ?></a>
	上一篇: <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a>
    <?php endif; ?>
</div>
<div class="next_post_link fr">
    <?php if (!empty( $next_post )): ?>
        <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo get_the_post_thumbnail( $next_post->ID, '', '' ); ?></a>
	上一篇: <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>
    <?php endif; ?>
</div>

2 优化当文章处于首篇或末篇时，上一篇、下一篇文章链接显示空白的问题

如果调用的是 wordpress 的默认函数，当文章处于首篇或末篇时，上一篇、下一篇文章链接会显示空白，那么如何优化呢？

其实只需增加一个判断就行：@博客吧

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

方法 1 也需要此优化，这里就不赘述了，照着这个方法修改就行了。

3 wordpress 文章页调用同分类上/下一篇文章

WordPress 如何实现同一分类的上下篇功能呢？

我们绝大部分 WordPress 博客，在每一篇文章的尾部都有这么一个功能，那就是“上一篇”和“下一篇”，但是绝大部分都是直接使用默认的功能，也就是按 post_ID 排的，导致“上一篇”和“下一篇”与看到的文章并不是同一分类。而对于想连续浏览同分类的文章的上一篇或下一篇时，这种方式是不大适合的！所以今天就跟大家分享一下 WordPress 如何实现同一分类的上下篇功能。@boke112

首先我们需要了解 next_post_link() 和 previous_post_link() 这两个函数的用法，如next_post_link()的定义：


    function next_post_link($format='%link &raquo;', $link='%title', $in_same_cat =false,$excluded_categories = '') {
    adjacent_post_link($format, $link, $in_same_cat,$excluded_categories,false);
    }

从定义可以看到有 4 个参数，第一个参数是指定格式，第二个参数是指定标题，第三个参数就表示在不在同一类中寻找，默认为 false 即不同类，第四个参数表示是不是排除某一类；previous_post_link() 的定义也是类似的。

例如：把 next_post_link(‘下一篇：%link’) 改成 next_post_link(‘下一篇：%link’,’%title’,true,’’) 就可以在同一类中跳转了。previous_post_link() 也是同样的办法，直接改为 previous_post_link(‘上一篇：%link’,’%title’,true,’’) 。

下面提供一个完整的调用同分类上一篇/下一篇文章的例子：

<?php
$categories = get_the_category();
        $categoryIDS = array();
        foreach ($categories as $category) {
            array_push($categoryIDS, $category->term_id);
        }
        $categoryIDS = implode(",", $categoryIDS);
?>
<?php if (get_previous_post($categoryIDS)) { previous_post_link('上一篇: %link','%title',true);} else { echo "已是最后文章";} ?>
<?php if (get_next_post($categoryIDS)) { next_post_link('上一篇: %link','%title',true);} else { echo "已是最新文章";} ?>

友情提示：如果要加上 title、缩略图，请参考方法 1。

4 调用同分类上/下一篇文章且加上 title 和优化了空白

懒人专用版...

<?php
    $current_category=get_the_category();
    $prev_post = get_previous_post($current_category,'');
    $next_post = get_next_post($current_category,'');
?>
<div class="navigation-left">
    <?php if (!empty( $prev_post )): ?>
        <span>上一篇：<a title="<?php echo $prev_post->post_title; ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>" rel="prev" ><?php echo $prev_post->post_title; ?></a></span>
    <?php else: ?>
        <span>上一篇：没有了，已经是第一篇了</span>
    <?php endif; ?>	
</div>
<div class="navigation-right">
    <?php if (!empty( $next_post )): ?>
        <span>下一篇：<a title="<?php echo $next_post->post_title; ?>" href="<?php echo get_permalink( $next_post->ID ); ?>" rel="next" ><?php echo $next_post->post_title; ?></a></span>
    <?php else: ?>
        <span>没有了，已经是最新一篇了</span>
    <?php endif; ?>
</div>

好了，具体效果参考本站的文章页，这个小技巧希望对大家有用。

「点点赞赏，手留余香」

还没有人赞赏，快来当第一个赞赏的人吧！