WordPress 上一篇/下一篇导航显示文章缩略图

此篇适合对 WordPress 有一定基础的朋友阅读。

无论你是做一个 blog 还是 enterprise websites，无论你是发布 post 还是 product portfolio，都绕不开使用缩略图。而 WordPress 有自带的调用文章缩略图的函数 ( get_post_thumbnail )，因此使用起来也没什么难度。但对于习惯自己写主题的人来说，由于设计的需要，用法难免五花八门。直接输出缩略图很简单，稍微复杂点的莫过于获取缩略图的图片地址。

比如前段时间对料网主题进行了一些修改，文章底部以前简单的文字导航（上一篇：XXX  下一篇：XXX）改成了文字+缩略图，感觉这样的确更直观一些。效果如下：

对于没有任何 WordPress 及 php 基础的用户来说，显然要对主题功能进行改造不是一件容易的事情。

首先你要知道，这些部分在你的主题文件中的什么位置（single.php / portfolio.php / ... )。
其次，需要构造一个 DIV，嵌套两个等宽 50% 的子层。设置好各个层的 CSS 样式。
具体调用图片的地方一定需要使用函数。

废话不多说，说说怎么实现。一般来说，任何前端功能性的改造都离不开三个部分：
结构（HTML，PHP）、样式（CSS）、功能（JS，PHP）。

HTML+PHP 部分（结构）

<div class="sx-box next-prev-posts clearfix">
 <div class="prev-post">
 <?php
 $prev_post = get_previous_post();
 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 endif; ?>
 </div>
 <div class="next-post">
 <?php
 $next_post = get_next_post();
 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 endif; ?>
 </div>
 </div>

在 HTML 部分我是把文章缩略图作为 DIV 的背景图片来处理的。这种方式比直接调用图片 <img src=""...> 的方式更方便，不需要考虑图片和文字的 float 和 position 等问题，接下来就是要写一下样式。

CSS 部分（样式）

.next-prev-posts .next-post,.next-prev-posts .prev-post{display:table;float:left;width:50%}
 .next-prev-posts a{height:158px;display:table-cell;vertical-align:middle;width:100%;padding:0 30px;text-align:left;text-decoration:none;position:relative}
 .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:'';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}

CSS 部分使用了伪类，在缩略图上营造半透明的黑色阴影蒙版。

接着我们需要写一个获取 上一篇/下一篇 文章的缩略图的 URL 地址的函数。

PHP（功能）

在主题的 functions.php 中添加自定义的获取上一篇/下一篇文章缩略图的地址的函数。此函数灵感来自于知更鸟主题的缩略图函数，原本的功能是输出缩略图，我修改了一下变成输出缩略图图片地址，并配上了说明文字。

/**
 * WordPress 获取“上一篇”文章缩略图的图片地址 By LiaoSam
 */
function liao_the_prev_thumbnail_url() {
 $prev_post = get_previous_post();
 if ( get_post_meta($prev_post->ID, 'thumbnail', true) ) { //如果 post 的自定义字段中有 thumbnail，则显示 thumbnail 的值
 $image = get_post_meta($prev_post->ID, 'thumbnail', true);
 return $image; //在新添加文章的时候添加自定义字段 thumbnail,值为缩略图地址。
 } else {
 if ( has_post_thumbnail($prev_post->ID) ) { //如果上一篇的日志有缩略图，则显示上一篇日志的缩略图
 $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $prev_post->ID ), 'thumbnail');
 return $img_src[0];
 } else {
 $content = $prev_post->post_content;
 preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
 $n = count($strResult[1]);
 if($n > 0){
 return $strResult[1][0];  //如果没有缩略图，但如果文章正文中有图片存在，默认把文章中第一张图片作为缩略图
 }else {
 $random = mt_rand(1, 76);
 return get_template_directory_uri().'/img/random/'. $random .'.jpg';  //如果文章正文中没有图片（纯文字），从 random 文件夹随机选取一张图片作为缩略图
 }
 }
 }
 }

/**
 * WordPress 获取“下一篇”文章缩略图的图片地址 By LiaoSam
 */
function liao_the_next_thumbnail_url() {
 $next_post = get_next_post();
 if ( get_post_meta($next_post->ID, 'thumbnail', true) ) { //如果 post 的自定义字段中有 thumbnail，则显示 thumbnail 的值
 $image = get_post_meta($next_post->ID, 'thumbnail', true);
 return $image;  //在新添加文章的时候添加自定义字段 thumbnail,值为缩略图地址。
 } else {
 if ( has_post_thumbnail($next_post->ID) ) { //如果下一篇的日志有缩略图，则显示下一篇日志的缩略图
 $img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $next_post->ID ), 'thumbnail');
 return $img_src[0];
 } else {
 $content = $next_post->post_content;
 preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
 $n = count($strResult[1]);
 if($n > 0){
 return $strResult[1][0];   //如果没有缩略图，但如果文章正文中有图片存在，默认把文章中第一张图片作为缩略图
 }else {
 $random = mt_rand(1, 76);
 return get_template_directory_uri().'/img/random/'. $random .'.jpg';   //如果文章正文中没有图片（纯文字），从 random 文件夹随机选取一张图片作为缩略图
 }
 }
 }
 }

复制以上两个函数，粘贴到主题根目录下的 functions.php 文件中。上传覆盖掉原 functions 文件。

OK，以上就是实现的方法。

关于 WordPress，有时候整理一下发个帖也是为了留个记录。有问题欢迎留言咨询。

更新：按照文章的分类来显示同一分类的 上一篇/下一篇，对于最后一篇文章，显示“没有下一篇了”的提示。

HTML+PHP 部分换成如下代码：

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

functions 中的函数换为：

function liao_the_prev_thumbnail_url() {
	$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 ( get_post_meta($prev_post->ID, 'thumbnail', true) ) { //如果 post 的自定义字段中有 thumbnail，则显示 thumbnail 的值
$image = get_post_meta($prev_post->ID, 'thumbnail', true);
return $image; //在新添加文章的时候添加自定义字段 thumbnail,值为缩略图地址。
} else {
if ( has_post_thumbnail($prev_post->ID) ) { //如果上一篇的日志有缩略图，则显示上一篇日志的缩略图
$img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $prev_post->ID ), 'thumbnail');
return $img_src[0];
} else {
$content = $prev_post->post_content;
preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){
return $strResult[1][0];  //如果没有缩略图，但如果文章正文中有图片存在，默认把文章中第一张图片作为缩略图
}else { 
$random = mt_rand(1, 76);
return get_template_directory_uri().'/img/random/'. $random .'.jpg';  //如果文章正文中没有图片（纯文字），从 random 文件夹随机选取一张图片作为缩略图
}
}
}
}


function liao_the_next_thumbnail_url() {
    $categorx=get_the_category();
	$categories=array();
	foreach ($categorx as $category){
	array_push($categories, $category->term_id);
	}
	$categories=implode(",",$categories);
	$next_post = get_next_post($categories);
if ( get_post_meta($next_post->ID, 'thumbnail', true) ) { //如果 post 的自定义字段中有 thumbnail，则显示 thumbnail 的值
$image = get_post_meta($next_post->ID, 'thumbnail', true);
return $image;
} else {
if ( has_post_thumbnail($next_post->ID) ) { //如果下一篇的日志有缩略图，则显示下一篇日志的缩略图
$img_src = wp_get_attachment_image_src( get_post_thumbnail_id( $next_post->ID ), 'thumbnail');
return $img_src[0];
} else {
$content = $next_post->post_content;
preg_match_all('//sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){
return $strResult[1][0];   //如果没有缩略图，但如果文章正文中有图片存在，默认把文章中第一张图片作为缩略图
}else { 
$random = mt_rand(1, 76);
return get_template_directory_uri().'/img/random/'. $random .'.jpg';   //如果文章正文中没有图片（纯文字），从 random 文件夹随机选取一张图片作为缩略图
}
}
}
}

Ad · 小翼搜客 - 外贸主动开发获客系统 精准搜索进口买家与供应链优质客户！

本站所有文章除注明“转载”的文章之外，均为原创。未经本站允许，请勿随意转载或用作任何商业用途，否则依法追究侵权者法律责任的权利。