文章页上下篇带缩略图背景：一套现成的模板代码-星海夜航

文章页底部的上一篇/下一篇一般只是两条文字链接，加上一张缩略图当背景，导航会显眼不少。实现分两块：模板里的 HTML+PHP 结构，和配套的 CSS 样式，下面把两部分代码都整理出来。

结构与 PHP：放进文章页模板

把下面这段加到主题的 single.php 需要显示的位置；如果主题的模板拆分过，就加到对应的文章页模板文件里（比如主题把单篇文章拆成了单独的 include，就加在那个 include 中）。

<!--WordPress下一篇上一篇功能实现开始 -->
<div class="sx-box next-prev-posts clearfix">
 <div class="prev-post"> 
 <?php 
 $categorx=get_the_category();
 $categories=array();
 foreach ($categorx as $category){
 array_push($categories, $category->term_id);
 }
 $categories=implode(",",$categories);
 
 $prev_post = get_previous_post($categories);
 if (!empty( $prev_post )): ?>
 <a alt="<?php echo $prev_post->post_title; ?>" href="<?php echo get_permalink( $prev_post->ID ); ?>" rel="prev" class="prev has-background" style="background-image: url(<?php echo liao_the_prev_thumbnail_url(); ?>);"><span>上一篇</span><h4><?php echo $prev_post->post_title; ?></h4></a>
 <?php else: ?>
 <a alt="没有上一篇了" rel="previous" class="previous has-background" style="background-color:#ddd"><span>没有上一篇了</span><h4>欢迎来访</h4></a>
 <?php endif; ?>
 </div>
 <div class="next-post">
 <?php
 $next_post = get_next_post($categories);
 if (!empty( $next_post )): ?>
 <a alt="<?php echo $next_post->post_title; ?>" href="<?php echo get_permalink( $next_post->ID ); ?>" rel="next" class="next has-background" style="background-image: url(<?php echo liao_the_next_thumbnail_url(); ?>);"><span>下一篇</span><h4><?php echo $next_post->post_title; ?></h4></a>
 <?php else: ?>
 <a alt="没有下一篇了" rel="next" class="next has-background" style="background-color:#ddd"><span>没有下一篇了</span><h4>等待更新</h4></a>
 <?php endif; ?>
 </div> 
 </div>
<br>	
<!-- WordPress下一篇上一篇功能实现END -->

逻辑说明：先取当前文章的全部分类 term_id，拼成字符串传给 get_previous_post() 和 get_next_post()，这样上下篇限定在同分类里找；取不到就显示灰底占位块。

样式：放进 style.css

下面的样式加到主题的 style.css，或者主题自带的自定义样式输入框里，效果一样。

/* WP文章页内上一篇下一篇功能实现 样式*/
.sx-box.next-prev-posts>div{width:50%;float:left;}
.next-prev-posts .next-post,.next-prev-posts .prev-post{display:table;float:left;width:50%}
 .next-prev-posts a{height:120px;display:table-cell;vertical-align:middle;width:500px;padding:0 30px;text-align:left;text-decoration:none;position:relative;border-radius:10px;box-shadow: 5px 5px 5px rgba(0,0,0,.2)}
 .next-prev-posts a.next{text-align:right}
 .next-prev-posts a.has-background h4,.next-prev-posts a.has-background span{color:#fff;font-size:20px}
 .next-prev-posts a.has-background h4{font-size:16px;margin-top:0}
 .next-prev-posts a h4,.next-prev-posts a span{position:relative;-webkit-transition-timing-function:cubic-bezier(.25,.1,.25,1);-moz-transition-timing-function:cubic-bezier(.25,.1,.25,1);-o-transition-timing-function:cubic-bezier(.25,.1,.25,1);transition-timing-function:cubic-bezier(.25,.1,.25,1);-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s;color:#606a6a;z-index:1}
 .next-prev-posts a:hover{border-color:#20252b}
 .next-prev-posts a:hover h4,.next-prev-posts a:hover span{color:#20252b}
 .next-prev-posts a.has-background{border:none;background-size:100%;background-position:center center;-moz-background-size:cover;-webkit-background-size:cover;-o-background-size:cover;background-size:cover}
 .next-prev-posts a.has-background:after{content:'';border-radius:10px;position:absolute;background-color:rgba(0,0,0,0.46);left:0;right:0;top:0;bottom:0;width:100%;height:100%;z-index:0;opacity:0.65;-webkit-transition-timing-function:cubic-bezier(.25,.1,.25,1);-moz-transition-timing-function:cubic-bezier(.25,.1,.25,1);-o-transition-timing-function:cubic-bezier(.25,.1,.25,1);transition-timing-function:cubic-bezier(.25,.1,.25,1);-webkit-transition-duration:0.3s;-moz-transition-duration:0.3s;-o-transition-duration:0.3s;transition-duration:0.3s}
 .next-prev-posts a.has-background:hover h4,.next-prev-posts a.has-background:hover span{color:#fff}
 .next-prev-posts a.has-background:hover:after{opacity:0.2}

缩略图函数与踩坑点

结构代码里的 liao_the_prev_thumbnail_url() 和 liao_the_next_thumbnail_url() 是主题侧函数，不是 WordPress 内置函数。换到别的主题上，需要在 functions.php 里自己补一个取上/下篇缩略图 URL 的函数，或者直接把这两处换成主题已有的缩略图调用，否则背景图为空、只剩下文字。