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

2016-04-14发布在 Wordpress5485 次访问

Road-nav

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

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

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

article-nav

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

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

分享到微信朋友圈

LiaoSam
LiaoSam
外贸综合症患者

相关文章

    暂无

35条评论

发表我的评论

取消评论

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

已读说明
设为私密评论
添加表情

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

您的邮箱地址不会公开,仅仅用于收取回复。建议填写QQ邮箱,不宜填写工作邮箱。
  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址 (没有就留空)
呃,评论有点多呢... 料网小秘书为您玩命加载中...
  1. #8

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

    6个月前 (08-03)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @Sandra 没用过 buddypress,可能不适用。删除代码重新 reload 应该能恢复吧。给的 URL 无法访问。
      6个月前 (08-04)回复
      • sandra

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

        6个月前 (08-05)回复
  2. #7
    lee

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

    6个月前 (07-17)回复
    • LiaoSam
      LiaoSam,外贸综合症患者。
      @lee wp_trim_words() 这个函数需要在循环中使用。上一篇下一篇并没有用到循环从数据库查询,所以你这样是不行的。可以这样:

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

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

      6个月前 (07-18)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @lee 样式方面就随意了。用层放在 h4 下面,然后设定一下层样式 margin 即可。
      6个月前 (07-18)回复
  3. #6
    小青年

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

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

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

        9个月前 (05-12)回复
      • LiaoSam
        料神Sam,外贸综合症患者。
        @料神Sam 白天在外手机打字不便,晚上抽空更新一下
        9个月前 (05-12)回复
        • 小青年

          @料神Sam :mrgreen: 么么哒

          9个月前 (05-12)回复
        • 小青年

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

          9个月前 (05-12)回复
        • 小青年

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

          9个月前 (05-13)回复
          • LiaoSam
            料神Sam,外贸综合症患者。
            @小青年 文章还没更新,分类和没有下一篇的功能已经实现了。晚点更新到文章里。
            9个月前 (05-13)回复
            • 小青年

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

              9个月前 (05-14)回复
              • LiaoSam
                Liaosam,外贸综合症患者。
                @小青年 文章已更新
                9个月前 (05-14)回复
                • 小青年

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

                  8个月前 (05-14)回复
                • 小青年

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

                  8个月前 (05-14)回复
                • 小青年

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

                  8个月前 (05-14)回复
                  • LiaoSam
                    Liaosam,外贸综合症患者。
                    @小青年 不好意思,晚上修复了一下就睡了。见文章更新。
                    8个月前 (05-14)回复
                    • 小青年

                      @Liaosam 感谢料神

                      8个月前 (05-14)回复
                      • LiaoSam
                        Liaosam,外贸综合症患者。
                        @小青年 不客气 :smile:
                        8个月前 (05-14)回复
  4. #5

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

    9个月前 (04-20)回复
  5. #4
    Hunk

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

    9个月前 (04-18)回复
  6. #3

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

    9个月前 (04-16)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @keen 加评论?你博客上不是有评论吗?
      9个月前 (04-16)回复
      • keen

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

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

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

            9个月前 (04-17)回复
  7. #2
    xjhwa

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

    9个月前 (04-15)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @xjhwa 现在不番墙打不开吗?
      9个月前 (04-15)回复
      • xjhwa

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

        9个月前 (04-15)回复
        • LiaoSam
          LiaoSam,外贸综合症患者。
          @xjhwa 前些天我修改网站文件,有点问题
          9个月前 (04-15)回复
  8. #1

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

    9个月前 (04-14)回复
    • LiaoSam
      Liaosam,外贸综合症患者。
      @Amanda Lee wp-content/themes/主题名/ 下面找
      9个月前 (04-14)回复