如何实现WordPress文章上下篇按钮带有特色图像

2017-05-16 07:25 阅读 101 次 评论 33 条

我们大多数 WordPress 站点的文章上下篇都是只显示相应的标题而已,因为我们大多数主题都是直接使用 WordPress 官方提供的  previous_post_link() 与 next_post_link() 这两个函数标签来制定当前文章的上下篇文章。如果想要上下篇实现带有特色图像,我们应该如何实现呢?

如何实现WordPress文章上下篇按钮带有特色图像 WordPress 第1张

上图就是简单的对比图,CSS 样式还没有调整,大家喜欢这个功能的话,可以根据自己站点的特色调整相应的 CSS 样式,今天本文只跟大家分享如何实现上下篇带有特色图像。

 1、自定义一个获取特色图像的函数

WordPress 的 get_the_post_thumbnail 函数只能获取文章的特色图像,如果文章没有特色图像的话就没有图像显示,这样看起来会很别扭,所以我们需要重新定义一个函数:存在特色图像就显示特色图像,不存在特色图像就显示文章第一张图片;文章没有特色图像和图片的情况下,就显示随机问题。

将以下代码添加到当前主题的 functions.php 文件即可

  1. //上下篇缩略图
  2. function ygj_catch_image($id){
  3.     if (has_post_thumbnail($id)) {  echo get_the_post_thumbnail( $id'''' );
  4.         } else {
  5.     $first_img = '';
  6.     ob_start();
  7.     ob_end_clean();
  8.     $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', get_post( $id )->post_content, $matches);
  9.     $first_img = $matches [1] [0];
  10.   if(empty($first_img)){ //Defines a default image
  11.         $random = mt_rand(1, 10);
  12.         $first_img= get_bloginfo ( 'stylesheet_directory' ).'/images/random/'.$random.'.jpg';
  13.   }
  14.   echo '<img class="home-thumb" src="'.$first_img.'" alt="'.get_post( $post_id )->post_title.'" />';
  15.         }
  16. }

其中随机图片是放在当前使用主题的 /images/random/ 文件夹下面,后缀名是 .jpg,总共 10 张图片,命名为 1、2、3、...、10。

2、在 single.php 文件的适当位置添加以下代码:

  1. <div class="nav-single">
  2.     <?php
  3.         $current_category = get_the_category();//获取当前文章所属分类ID
  4.         $prev_post = get_previous_post($current_category,'');//与当前文章同分类的上一篇文章
  5.         $next_post = get_next_post($current_category,'');//与当前文章同分类的下一篇文章
  6.     ?>
  7.     <div class="meta-nav">
  8.         <?php if (!empty$prev_post )): ?>
  9.         <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php ygj_catch_image($prev_post->ID);?></a> <i class="fa fa-angle-left"></i> 上一篇 <a href="<?php echo get_permalink( $prev_post->ID ); ?>"><?php echo $prev_post->post_title; ?></a>
  10.         <?php endif; ?>
  11.     </div>
  12.     <div class="meta-nav">
  13.         <?php if (!empty$next_post )): ?>
  14.         <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php ygj_catch_image($next_post->ID);?></a> 下一篇 <i class="fa fa-angle-right"></i> <a href="<?php echo get_permalink( $next_post->ID ); ?>"><?php echo $next_post->post_title; ?></a>
  15.         <?php endif; ?>
  16.     </div>
  17. </div>

以上代码是显示同一分类的上下篇,如果不想显示同一分类的上下篇,可以直接把以下代码

  1. <?php
  2.     $current_category = get_the_category();//获取当前文章所属分类ID
  3.     $prev_post = get_previous_post($current_category,'');//与当前文章同分类的上一篇文章
  4.     $next_post = get_next_post($current_category,'');//与当前文章同分类的下一篇文章
  5. ?>

改为

  1. <?php
  2.     $prev_post = get_previous_post();
  3.     $next_post = get_next_post();
  4. ?>

即可。

总结

其实实现带有特色图像的方法还是很简单,只需要分别获得上下篇文章的链接地址、文章标题、特色图像,然后就可以自由组合了。本文重点分享的是方法和思路,其中获取特殊图像的函数还可以增加获取指定图片作为上下篇缩略图等,具体更多的做法和样式就靠大家发挥自己的想象了。

本文地址:http://boke112.com/3949.html
文章标签: ,   ,   ,  
关注我们:请关注一下我们的微信公众号:扫描二维码,公众号:aiboke112
版权声明:本文为原创文章,版权归  所有,欢迎分享本文,转载请保留出处!
WordPress免费响应式主题:Nana

发表评论


表情

  1. 小橙
    小橙 【镇长】 @回复

    学习学习学习。诚招游戏占成代理30%–50%,期待您的加入,Q:584393387 [可怜]

  2. 购物返利
    购物返利 【农民】 @回复

    为什么知道的这么多= =。

  3. 随谈网
    随谈网 【农民】 @回复

    不错,可以折腾折腾 [嘻嘻]

  4. 黎叔
    黎叔 【村长】 @回复

    没错缩略图能更直观的导航,不过为了加载快还是尽量弄小点

  5. 钛客志
    钛客志 【队长】 @回复

    感觉没什么实用性,毕竟上下文也就点击一下的事情

  6. 钱探子
    钱探子 【村长】 @回复

    果真特色,感觉吧…没啥实用性

  7. 苟利国
    苟利国 【队长】 @回复

    学习中~

  8. 博客导航目录
    博客导航目录 【村长】 @回复

    来学习下

  9. 闲鱼
    闲鱼 【县长】 @回复

    教程蛮好的,不过我觉得这个地方倒是可以简单一点

    • boke112导航
      boke112导航【站长】2017-05-16 21:51  回复

      @闲鱼其实一般的上下篇标题就够用了,当然如果想好看一些,加上图片还是不错的

  10. 钓鱼小站
    钓鱼小站 【县长】 @回复

    有时间动手试试 一个月不见啦

  11. 聚赚园
    聚赚园 【农民】 @回复

    学习,学习

  12. 橘子书
    橘子书 【县长】 @回复

    漂亮是漂亮,就是过犹不及,太花俏了

  13. 玉满斋
    玉满斋 【市长】 @回复

    不错,不过,没有图片的相关文章和上下文我感觉是SEO最好的!

    • boke112导航
      boke112导航【站长】2017-05-16 13:23  回复

      @玉满斋[偷笑] 难道说的是本站?没有图片的上下篇和相关文章真的对SEO是最好的?感觉有图片的相关文章会比较好看

  14. 明月登楼
    明月登楼 【总理】 @回复

    这个厉害了!

  15. Mr.Li
    Mr.Li 【镇长】 @回复

    感觉越是搞得那么花哨越不符合潮流

  16. 龙笑天
    龙笑天 【市长】 @回复

    2个empty哦~ [晕]

    • boke112导航
      boke112导航【站长】2017-05-16 13:26  回复

      @龙笑天[吃惊] 谢谢告知,使用代码高亮转换之后,总是会出现这个重复empty,已修正,谢谢。

  17. 爱时尚
    爱时尚 【镇长】 @回复

    不能用同一个邮箱?同个邮箱的2个站只显示一个是吗

    • boke112导航
      boke112导航【站长】2017-05-16 13:28  回复

      @爱时尚评论头像就是根据邮箱来定的,所以两个站点的话,建议使用不同的邮箱,使用不同的Gravatar头像

  18. 辩论吧
    辩论吧 【省长】 @回复

    博主细节研究的很透彻

  19. 爱时尚
    爱时尚 【省长】 @回复

    这个对zblog通用吗

    • boke112导航
      boke112导航【站长】2017-05-16 13:28  回复

      @爱时尚方法是一样的,获得上下篇文章的链接地址、标题和图像之后,可以随意折腾

  20. 企业战略
    企业战略 【村长】 @回复

    学到重要的东西了,谢谢分享

  21. 金榜台博客
    金榜台博客 【市长】 @回复

    每天来看看

  22. 靠谱学生兼职网
    靠谱学生兼职网 【市长】 @回复

    最头痛的就代码了

  23. 灵异世界
    灵异世界 【镇长】 @回复

    纯代码高手