Wordpress相关

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

料神Sam发布于 2016-04-14阅读 22066 次评论 42

WordPress 上一篇/下一篇导航显示文章缩略图-料网 - 外贸老鸟之路

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

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

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

WordPress 上一篇/下一篇导航显示文章缩略图-料网 - 外贸老鸟之路

对于没有任何 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 文件夹随机选取一张图片作为缩略图
}
}
}
}

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

分享到: 微信 新浪微博 QQ Qzone
料神Sam
识不足则多虑,威不足则多怒,信不足则多言。
SiteGround外贸建站主机优惠券

42条评论

发表我的评论

取消评论

邮箱白名单说明:最近料网自动提醒邮件经常会被一些邮件服务商拦截。为了您顺利并及时地收取留言被回复的提醒邮件,请在您邮箱中把料网 liaosam.com 加入白名单域名。

我不是机器人
设为私密评论
添加表情

Hi,您需要填写昵称和邮箱!

您的邮箱地址不会公开,仅仅用于收取回复。建议填写QQ邮箱,不宜填写工作邮箱。
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (没有就留空)
  • 问题验证:今年年份是?
呃,评论有点多哦.. 请稍等
  1. 毛毛网赚博客Chrome · Windows 7

    问一下大佬,这个尺寸怎么修改啊

    5年前 (2019-09-03)
    河南
    回复
  2. 魔血Chrome · Windows 10

    大佬,再问个问题可以吗?就是默认的调用的默认的 thumbnail 尺寸 150*150,又该如何去修改一下这个高度和宽度呢?

    5年前 (2019-07-17)
    四川
    回复
    • 魔血Chrome · Windows 10

      @魔血 大佬 不用回去看了,已找到修改尺寸位置,感谢文献

      5年前 (2019-07-17)
      四川
      回复
      • dqzChrome · Windows 10

        @魔血 朋友 这个你是怎么修改的?

        2年前 (2022-03-13)
        上海
        回复
  3. booooChrome · Windows 10

    向作者鞠躬! 谢谢如此优秀的功能,找寻很久很久很久了。

    6年前 (2018-09-07)
    山东
    回复
    • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 7
      @boooo 不客气!好长时间不写技术文章了~
      6年前 (2018-09-07)
      安徽
      回复
  4. SandraChrome · Windows 7

    大神求救,小白随便玩,把 function 两个代码加到 buddypress 上面后,整个后台进不去了。。。。一打开页面一片空白也不说有问题,也不说没有问题,网址:https://45.32.86.144/
    请问怎么办。。。。

    8年前 (2016-08-03)
    英国
    回复
    • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 7
      @Sandra 没用过 buddypress,可能不适用。删除代码重新 reload 应该能恢复吧。给的 URL 无法访问。
      8年前 (2016-08-04)
      江苏
      回复
      • sandraChrome · Windows 7

        @Liaosam 重点不是 buddypress, 我只是说我把代码加到了 function 里面 buddypress 的前面。。。然后整个系统就崩溃了。。。然后我现在已经重装系统了。。。。我也快崩溃了。。。 :cry: :cry:

        8年前 (2016-08-05)
        英国
        回复
  5. leeChrome · Windows 10

    博主你好,我想在标题后面再加上相应文章的摘要,同时用 wp_trim_words()来限制摘要字数,这个该怎么写,改了几遍都不行,就放在 H4 下面

    8年前 (2016-07-17)
    湖南
    回复
    • LiaoSam 外贸综合症患者.搜狗浏览器 · Windows 7
      @lee wp_trim_words() 这个函数需要在循环中使用。上一篇下一篇并没有用到循环从数据库查询,所以你这样是不行的。可以这样:

      上一篇的 excerpt 获取并截断:
      ID);
      mb_strimwidth(strip_tags($excerpt_prev),0,32,’…’);
      ?>

      下一篇的 excerpt 获取并截断:
      ID);
      mb_strimwidth(strip_tags($excerpt_next),0,32,’…’);
      ?>

      8年前 (2016-07-18)
      江苏
      回复
      • beyondbandFirefox · Windows 7

        @LiaoSam 请问一下,为什么我测试不行啊。本地测试的时候是空白的,无任何内容。这样反而会有内容,只不过不是上一篇的摘要,是当前文章的。

        7年前 (2017-08-31)
        四川
        回复
    • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 7
      @lee 样式方面就随意了。用层放在 h4 下面,然后设定一下层样式 margin 即可。
      8年前 (2016-07-18)
      江苏
      回复
  6. 小青年Chrome · Windows 7

    按照的你的方法成功了 但是如果没有下一篇的时候 位置会空出来,是否可以显示一个色块说明没有下一篇了呢

    8年前 (2016-05-12)
    安徽
    回复
    • 料神Sam 外贸综合症患者.UC浏览器 · iPhone
      @小青年 可以改进一下,有两种办法。
      1)在 html 部分把
      if (!empty( $next_post )): ?> 的 else 部分填上。给没有下一篇的色块加上文字和样式
      2)在函数部分改动
      在最外层套上条件:
      if (get_previous_post()) {
      文中函数主体部分代码..
      }
      else{
      函数值 return 一个事先设置好的没有下一篇图片地址。
      8年前 (2016-05-12)
      江苏
      回复
      • 小青年Chrome · Windows 7

        @料神Sam 能否直接放出改进版本,对于代码小白,臣妾做的不到呀!

        8年前 (2016-05-12)
        安徽
        回复
      • 料神Sam 外贸综合症患者.UC浏览器 · iPhone
        @料神Sam 白天在外手机打字不便,晚上抽空更新一下
        8年前 (2016-05-12)
        上海
        回复
        • 小青年Chrome · Windows 7

          @料神Sam :mrgreen: 么么哒

          8年前 (2016-05-12)
          安徽
          回复
        • 小青年Chrome · Windows 7

          @料神Sam 还有个建议 这个功能最好可以加个分类的判断,显示的上下一篇是本文章分类下的文章

          8年前 (2016-05-12)
          安徽
          回复
        • 小青年Chrome · Windows 7

          @料神Sam 是更新过了么,我看你的网站已经有效果了,但是好像给的代码并有改动呀

          8年前 (2016-05-13)
          安徽
          回复
          • 料神Sam 外贸综合症患者.UC浏览器 · iPhone
            @小青年 文章还没更新,分类和没有下一篇的功能已经实现了。晚点更新到文章里。
            8年前 (2016-05-13)
            上海
            回复
            • 小青年Chrome · Windows 7

              @料神Sam 按照你现在加了句,成功了!分类自己貌似搞不定了!没有下一篇了等待更新

              8年前 (2016-05-14)
              安徽
              回复
              • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 10
                @小青年 文章已更新
                8年前 (2016-05-14)
                上海
                回复
                • 小青年Chrome · Windows 7

                  @Liaosam 分类好像有个小 BUG 分类获取是对的 但是缩略图不对 还是全站的下的上一篇 而不是分类下的上一篇 也是就文章标题和链接对 缩略图不对

                  8年前 (2016-05-14)
                  安徽
                  回复
                • 小青年Chrome · Windows 7

                  @Liaosam 你看你现在的这篇文章 在这个功能的上一篇 文章标题和链接是对的 缩略图不对

                  8年前 (2016-05-14)
                  安徽
                  回复
                • 小青年Chrome · Windows 7

                  @Liaosam 问题的修复啦? 求方法呀!

                  8年前 (2016-05-14)
                  安徽
                  回复
                  • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 10
                    @小青年 不好意思,晚上修复了一下就睡了。见文章更新。
                    8年前 (2016-05-14)
                    上海
                    回复
                    • 小青年Chrome · Windows 7

                      @Liaosam 感谢料神

                      8年前 (2016-05-14)
                      安徽
                      回复
                      • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 10
                        @小青年 不客气 :smile:
                        8年前 (2016-05-14)
                        上海
                        回复
  7. aunsenFirefox · Windows 10

    这样的干货多多益善! :cool:

    8年前 (2016-04-20)
    陕西
    回复
  8. hunkChrome · Windows 7

    学习了,为啥我的还不显示 avatar

    8年前 (2016-04-18)
    美国
    回复
  9. keenFirefox · Windows 7

    新技能 get√ 悄悄问料大,页面怎么加评论 :oops:

    8年前 (2016-04-16)
    广东
    回复
    • Liaosam 外贸综合症患者.猎豹安全浏览器 · Windows 7
      @keen 加评论?你博客上不是有评论吗?
      8年前 (2016-04-16)
      安徽
      回复
      • keenFirefox · Windows XP

        @Liaosam 谢谢料神的评论,可能没说清楚,想利用 page 做一个留言板之类的,但是把 comment 加到 page 里面不显示,是不是要在 functions 里面加代码呢?

        8年前 (2016-04-17)
        广东
        回复
        • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 7
          @keen 跟 functions 无关。
          1)看看你的 page 里面有没有调用 comments 模块?在需要调用的地方使用 comments_template('', true);
          comments 部分的框架一般在 comments.php 文件,用上面调用函数的作用就是把 comments.php 里的所有内容导入到要调用的页面中。
          2)在后台页面编辑页面最上面 “显示选项” 里看看 讨论 是否勾选。在下面讨论的选项卡里 勾选 “允许评论”。
          8年前 (2016-04-17)
          安徽
          回复
          • keenFirefox · Windows XP

            @Liaosam 料神真暖男,以解决,thx

            8年前 (2016-04-17)
            广东
            回复
  10. xjhwaChrome · Windows 7

    料网经常无法打开. 请 Sam 看下是什么原因.fan 了以后可以正常打开.

    8年前 (2016-04-15)
    美国
    回复
    • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 7
      @xjhwa 现在不番墙打不开吗?
      8年前 (2016-04-15)
      江苏
      回复
      • xjhwaChrome · Windows 7

        @Liaosam 现在又可以直接打开了. 但是我前些天经常会访问, 很多次都不行. 一直加载但加载不上. 但每次我都会同时试一下其他网站都没问题.

        8年前 (2016-04-15)
        浙江
        回复
        • LiaoSam 外贸综合症患者.搜狗浏览器 · Windows 7
          @xjhwa 前些天我修改网站文件,有点问题
          8年前 (2016-04-15)
          江苏
          回复
  11. Amanda LeeChrome · Windows 7

    请问这个去哪里找呢?WP 的主题根目录下的 functions.php,

    8年前 (2016-04-14)
    广东
    回复
    • Liaosam 外贸综合症患者.搜狗浏览器 · Windows 7
      @Amanda Lee wp-content/themes/主题名/ 下面找
      8年前 (2016-04-14)
      江苏
      回复