如今wordpress主题极力提倡简洁，但是我认为这个简洁也应该有个度，太过简洁，那就不叫简洁了，该叫单调了，试想，当一个用户无意间点开你的网站，发现你的网站只有黑灰白三色，除非你的内容十分经典，否则，用户对你的网站绝对不会有好的感觉，今天我从自己的现用主题里面把这个显示缩略图的功能提取出来，分享给大家！再次感谢作者weisay！
首先贴出所需的css代码，放到你的主题文件style.css里面，要显示的图片的大小可以通过下面的width和height设置：
.thumbnail_box {
float:left;
width:140px;
height:100px;
margin:17px10px8px15px;_margin:17px10px8px7px;
padding:4px;
border:1pxsolid#ccc;}
.thumbnail img{
position:absolute;
z-index:3;}
显示缩略图有两种方式:
第一种：随机显示一张图片，这个需要在images文件夹下新建一个文件夹random，里面的图片最好事先处理好大小，名称统一为:tb+数字，如tb1.jpg，tb2.jpg…不要问偶为什么，程序就这么写的，实在懒得改，怕改错！
代码如下，添加到主题文件index.php里面：
<divclass=”thumbnail_box”>
<divclass=”thumbnail”>
<?phpif( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>
<?php$image= get_post_meta($post->ID, ‘thumbnail’, true); ?>
<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>
<?phpelse: ?>
<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php bloginfo(‘template_directory’); ?>/images/random/tb<?php echo rand(1,20)?>.jpg”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>
<?phpendif; ?>
</div></div>
第二种：先从文章中读取图片作为缩略图，如果文章中没有缩略图，再使用上一种方法里面建立的random文件夹里面的图片！
分两步：首先往主题文件functions.php添加如下代码：
if( function_exists(‘add_theme_support’) )
add_theme_support(‘post-thumbnails’);
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(emptyempty($first_img)){
$random= mt_rand(1, 20);
echoget_bloginfo ( ‘stylesheet_directory’ );
echo’/images/random/tb’.$random.’.jpg’;
}
return$first_img;
}
然后在往主题文件index.php里面添加如下代码：
<divclass=”thumbnail_box”>
<divclass=”thumbnail”>
<?phpif( get_post_meta($post->ID, ‘thumbnail’, true) ) : ?>
<?php$image= get_post_meta($post->ID, ‘thumbnail’, true); ?>
<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”><img src=”<?php echo $image; ?>”alt=”<?php the_title(); ?>”title=”<?php the_title(); ?>”/></a>
<?phpelse: ?>
<a href=”<?php the_permalink() ?>”rel=”bookmark”title=”<?php the_title(); ?>”>
<?phpif(has_post_thumbnail()) { the_post_thumbnail(‘thumbnail’); }
else{ ?>
<imgclass=”home-thumb”src=”<?php echo catch_first_image() ?>”width=”140px”height=”100px”alt=”<?php the_title(); ?>”/>
<?php } ?>
</a>
<?phpendif; ?>
</div></div>
没了。
注意事项：
1.调用缩略图的代码要放在和文章摘要同一级的层了，然后编辑比这一级层更高级的层属性css代码要添加这样一句话：float:right; 当然如果你添加完代码显示一切正常，可以略去这一步。
2.与这个一起的还有首页文章实现摘要的方法，用得到的可以去拿去：
只需把如下代码插入到主题文件目录下的index.php找到<?php the_content(); ?>，将其替换为：
<?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 365,“…”); ?><span class=“more”><a href=“<?php the_permalink() ?>” title=“详细阅读 <?php the_title(); ?>” rel=“bookmark”>阅读全文</a></span>
看看您的博客！
看着挺简单~ 你真的很在行 现在这个主题可以分享？
感觉很不错的样子！