WordPress相关文章带缩略图(二)

  • A+
所属分类:WordPress

在主题的functions.php结束前添加下面的代码。

代码用来获取图片链接,获取的顺序是:自定义字段为thumb的图片>特色缩略图>文章第一张图片>随机图片/默认图片。其中:

随机图片:制作10张图片,放在现用主题文件夹下的images/pic/目录,图片为jpg格式,并且使用数字1-10命名,比如1.jpg;如果不想用随机图片,将倒数第5行 取消注释,然后给注销倒数第7、9行,在现用主题的/images/目录下添加一张名字为 default_thumb.jpg的默认图片,这样显示默认图片。

//添加特色缩略图支持
if ( function_exists('add_theme_support') )add_theme_support('post-thumbnails');
 
//输出缩略图地址 From wpdaxue.com
function post_thumbnail_src(){
    global $post;
 if( $values = get_post_custom_values("thumb") ) { //输出自定义域图片地址
  $values = get_post_custom_values("thumb");
  $post_thumbnail_src = $values [0];
 } elseif( has_post_thumbnail() ){    //如果有特色缩略图,则输出缩略图地址
        $thumbnail_src = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID),'full');
  $post_thumbnail_src = $thumbnail_src [0];
    } else {
  $post_thumbnail_src = '';
  ob_start();
  ob_end_clean();
  $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
  $post_thumbnail_src = $matches [1] [0];   //获取该图片 src
  if(empty($post_thumbnail_src)){ //如果日志中没有图片,则显示随机图片
   $random = mt_rand(1, 10);
   echo get_bloginfo('template_url');
   echo '/images/pic/'.$random.'.jpg';
   //如果日志中没有图片,则显示默认图片
   //echo '/images/default_thumb.jpg';
  }
 };
 echo $post_thumbnail_src;
}

在single.php适当位置添加以下代码。

<h3>相关文章</h3>
<ul class="related_img">
<?php
$post_num = 4;
$exclude_id = $post->ID;
$posttags = get_the_tags(); $i = 0;
if ( $posttags ) {
 $tags = ''; foreach ( $posttags as $tag ) $tags .= $tag->term_id . ',';
 $args = array(
  'post_status' => 'publish',
  'tag__in' => explode(',', $tags),
  'post__not_in' => explode(',', $exclude_id),
  'caller_get_posts' => 1,
  'orderby' => 'comment_date',
  'posts_per_page' => $post_num
 );
 query_posts($args);
 while( have_posts() ) { the_post(); ?>
  <li class="related_box"  >
  <div class="r_pic">
  <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
  <img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" />
  </a>
  </div>
  <div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div>
  </li>
 <?php
  $exclude_id .= ',' . $post->ID; $i ++;
 } wp_reset_query();
}
if ( $i < $post_num ) {
 $cats = ''; foreach ( get_the_category() as $cat ) $cats .= $cat->cat_ID . ',';
 $args = array(
  'category__in' => explode(',', $cats),
  'post__not_in' => explode(',', $exclude_id),
  'caller_get_posts' => 1,
  'orderby' => 'comment_date',
  'posts_per_page' => $post_num - $i
 );
 query_posts($args);
 while( have_posts() ) { the_post(); ?>
 <li class="related_box"  >
  <div class="r_pic">
  <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank">
  <img src="<?php echo post_thumbnail_src(); ?>" alt="<?php the_title(); ?>" class="thumbnail" />
  </a>
  </div>
  <div class="r_title"><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>" target="_blank" rel="bookmark"><?php the_title(); ?></a></div>
 </li>
 <?php $i++;
 } wp_reset_query();
}
if ( $i  == 0 )  echo '<div class="r_title">没有相关文章!</div>';
?>
</ul>

PS:第四行$post_num = 4;表示调用4篇文章,请根据自己需要修改。

样式表。

.related_posts{margin-top:5px;}
.related_img{width:600px;height:210px;}
.related_box{float:left;overflow:hidden;margin-top:5px;width:148px;border-right:1px #eee solid}
.related_box:hover{background:#f9f9f9}
.related_box .r_title{width:auto;height:72px;font-weight:400;font-size:14px;margin:0 10px;overflow:hidden;}
.related_box .r_pic{margin:6px}
.related_box .r_pic img{width:130px;height:100px;border:1px  solid #e1e1e1;background:#fff;padding:2px}
weinxin
独角兽驿站
公众号

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: