wordpress无插件实现带缩略图的随机小文章

如果你仅仅是实现随机文章功能,建议你阅读给WordPress后台小工具增加一个随机文章

我们首先建立一个PHP文件放到includes文件夹内,命名随便,比如random.php,然后在想要调用的页面添加调用代码:

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

以下是random.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>

当然要根据你网页的风格修改随机文章的样式,以下仅供参考。

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

发布日期:

所属分类: Wordpress 插件 标签: