WordPress文章页内上一篇下一篇带缩略图功能实现

一、HTML+PHP 部分（结构）

• 将以下代码添加到主题的single.php文件的所需要显示的位置即可；我这里使用的niRvana主题是在assets/template/single-post.php文件中添加

<!--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 -->

二、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}

三、PHP（功能）

四、效果演示

• 效果如下图，或者你可以到本站任一文章的底部查看具体的实现效果

以上就是本次文章所有知识点，如果文文章来源(Source)：浅时光博客章对你有帮助就动动你那发财的小手，点个赞留个言，给本站加点热度。谢谢支持！