某小健博客
当前位置: WordPress > WordPress教程 > 给WordPress相关文章添加显示缩略图

给WordPress相关文章添加显示缩略图

2018-03-02 分类:WordPress教程 作者:某小健 阅读(95)

为了增加用户体验和阅读深度,很多朋友喜欢为自己的博客添加相关文章功能,有些是纯文字的,而有些则是带缩略图的,图文并茂可以让用户更加有点击欲望,今天这里简单说下带缩略图的相关文章的实现方法。

将以下代码加入single.php文件中想要显示带缩略图的相关文章处:

  1. <div id=”related-posts”>  
  2. <div class=”caption”>带缩略图的相关文章:</div>  
  3. <div class=”related” class=”clearfix”>  
  4. <ul>  
  5. <?php  
  6. $post_num = 5; // 设定数量.  
  7. $exclude_id = $post->ID; // 单独使用要开此行  
  8. $posttags = get_the_tags(); $i = 0;  
  9. if ( $posttags ) {  
  10. $tags = ”; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ‘,’;  
  11. $args = array(  
  12. ‘post_status’ => ‘publish’,  
  13. ‘tag__in’ => explode(‘,’, $tags), // 只选 tags 的文章.  
  14. ‘post__not_in’ => explode(‘,’, $exclude_id), // 排除已出现过的文章.  
  15. ‘caller_get_posts’ => 1,  
  16. ‘orderby’ => ‘comment_date’, // 依评论日期排序.  
  17. ‘posts_per_page’ => $post_num,  
  18. );  
  19. query_posts($args);  
  20. while( have_posts() ) { the_post();  
  21. ?>  
  22. <li><a href=”<?php echo the_permalink(); ?>” title=”<?php the_title(); ?>” ><img src=”<?php if ( get_post_meta($post->ID, ‘thumbnail1’, true) ) { echo get_post_meta($post->ID, ‘thumbnail1’, true);}  
  23. elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumbnail1’);echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>” alt=”<?php the_title(); ?>” width=”120″ height=”120″ ></a>  
  24. <a href=”<?php echo the_permalink(); ?>” ><?php the_title(); ?></a></li>  
  25. <?php  
  26. $exclude_id .= ‘,’ . $post->ID; $i ++;  
  27. } wp_reset_query();  
  28. }  
  29. if ( $i < $post_num ) { // 如果 tags 文章数量不足, 再取 category 补足.  
  30. $cats = ”; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ‘,’;  
  31. $args = array(  
  32. ‘category__in’ => explode(‘,’, $cats), // 只选 category 的文章.  
  33. ‘post__not_in’ => explode(‘,’, $exclude_id),  
  34. ‘caller_get_posts’ => 1,  
  35. ‘orderby’ => ‘comment_date’,  
  36. ‘posts_per_page’ => $post_num – $i,  
  37. );  
  38. query_posts($args);  
  39. while( have_posts() ) { the_post();  
  40. ?>  
  41. <li><a href=”<?php echo the_permalink(); ?>” title=”<?php the_title(); ?>” ><img src=”<?php if ( get_post_meta($post->ID, ‘thumbnail1’, true) ) { echo get_post_meta($post->ID, ‘thumbnail1’, true);}  
  42. elseif ( has_post_thumbnail() ){$thumbnail1_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), ‘thumbnail1’);echo $thumbnail1_url[0];}else{echo catch_first_image();} ?>” alt=”<?php the_title(); ?>” width=”120″ height=”120″ ></a>  
  43. <a href=”<?php echo the_permalink(); ?>” ><?php the_title(); ?></a></li>  
  44. <?php  
  45. $i++;  
  46. } wp_reset_query();  
  47. }  
  48. if ( $i == 0 ) echo ‘<li>没有相关文章!</li>’;  
  49. ?>  
  50. </ul>  
  51. </div>  
  52. </div>  
  53. <!– release post end –>  

根据自己博客样式修改一下CSS代码:

  1. /** related post thumbnail **/  
  2.     #related-posts{border-radius:5px;border-top:3px #dfdfdf solid;background:#fff;clear:both;}  
  3.     .caption{color:#0C0C0B;font-size: 14px;font-weight:bold;padding-top: 10px;margin-bottom: 10px;margin-left:10px;}  
  4.     .related {white-space:normal;margin:0 auto;overflow: hidden;border-left: 1px solid #DFDFDF;margin-left:20px;}  
  5.     .related li{float: left;width: 120px;height:180px;list-style:none;border-right:1px solid #dfdfdf;padding:4px;_padding:2px;text-align: left;}  
  6.     .related a{float: left;width: 126px;text-overflow: ellipsis;-o-text-overflow: ellipsis;}  
  7.     .related a:hover{white-space: normal;}  
  8.     .related li:hover{background:#F6F6F6;}  
  9.     .related img{height:120px;width:120px;border:0;padding:0;}  
温馨提示

也可以把上面第一步中的php函数代码放在单独一个文件中,如likeposts.php,然后在想要调用的页面添加调用代码:

  1. <?php include(‘includes/likeposts.php’);?>  

「两年博客,如果觉得我的文章对您有用,请帮助本站成长」

赞(0) 打赏

支付宝
微信
0

支付宝
微信
标签:

上一篇:

下一篇:

你可能感兴趣

共有 0 条评论 - 给WordPress相关文章添加显示缩略图

    博客简介

    服务热线:
     

     QQ在线交流

     旺旺在线