wordpress调用文章的图片，标题和内容的方法？不破坏CSS。

显示循环部分代码

<?php if(have_posts()) : while (have_posts()) : the_post(); ?>
<div class="post">
<div class="col col_2">
<img src="<?php if ( get_post_meta($post->ID, 'thumbnail', true) ) {echo get_post_meta($post->ID, 'thumbnail', true);}elseif ( has_post_thumbnail() ){$thumbnail_image_url = wp_get_attachment_image_src( get_post_thumbnail_id($post->ID), 'thumbnail'); echo $thumbnail_image_url[0]; }else{ echo catch_first_image(); }?>" alt="<?php the_title(); ?>" class="image_frame" />
</div>
<div class="col col_2 no_margin_righ">
<h2><?php the_title(); ?></h2>
<p><?php echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 170,"……"); ?></p>
<a href="<?php the_permalink(); ?>" class="more">More</a>
</div>
<div class="cleaner"></div>
</div>
<?php endwhile; endif; ?>

主题functions.php添加特色图代码和获取文章第一张图的代码

/*自定义缩略图*/
if(function_exists('add_image_size')){
add_image_size('featured',300,200,true); //尺寸自己修改
add_image_size('thumbnail',195,195,true); //尺寸自己修改，这是后面用到的
}
/*抓取第一张缩略图*/
functioncatch_first_image(){
global$post,$posts;
$first_img='';
ob_start();
ob_end_clean();
$output=preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i',$post->post_content,$matches);
$first_img = $matches[1][0];
if(empty($first_img)){//自定义第一张图片
$random = mt_rand(1,6);
$first_img = get_bloginfo('stylesheet_directory')."/images/random/".$random.".jpg"; //如文章无图片，则随机显示6张图片中一张，文件夹目录注意下images/random
}
return $first_img;
}

以上只是参考。