对于纯内容而言,似乎用不着为每一篇文章都配个缩略图,因为配图并不是一件很容易的事。本站建立之初是没有打算这样做的,折中的办法是当文章配有插图时则截取部分作为文章缩略图显示在首页、分类页之中,但假若这样做会有不良好的用户体验-布局排版混乱。
为什么要使用文章banner
如果嫌麻烦是完全没有必要使用文章缩略图的,另外文章缩略图并不是那么容易做,首先你的图片需要能表达文章意思,其次配图既是思想活也是技术活,毕竟需要通过作图软件如Photoshop来把脑海中的配图设计出来。而我正想挑战这两点,一来提高自己的掌握photoshop的能力,二来给头脑来个风暴,提高艺术鉴赏水平。再者给网站加分,没有配图的文章吸引力很低,干巴巴的文字看起来确实少了活力。
如何给文章添加缩略图(或banner)
使用Photoshop可以轻松搞定,如下图是我用于文章缩略图的专门PSD模板,每一篇文章都使用一个“组”来区分,以便于日后参考管理。

一个叫做Post Banner的PSD模板组结构图
其中背景和水印文字在群组之外,这样便于固定在不同的文章缩略图中切换使用。做模板的最大好处是,每发表一篇文章你只需要增加一个组,然后设计文章的banner即可,因为大小已经固定,而且非常方便日后的管理。
如何让主题支持每篇文章前的缩略图(banner)
缩略图在wordpress中还可以表示为特色图片,或者你干脆可以使用自定义字段来引用外部图片链接显示在文章中。代码如下:
<div class="thumbnail"> <?php if ( get_post_meta($post->ID, 'thumbnail_value', true) ) : ?> <?php $thumbnail = get_post_meta($post->ID, 'thumbnail_value', true); ?> <a href="<?php the_permalink() ?>"> <img src="<?php echo $thumbnail; ?>" width="570" height="120" /></a> <?php else: ?> <a href="<?php the_permalink() ?>" rel="bookmark"> <?php if (has_post_thumbnail()) { the_post_thumbnail( array(570,120) ); } else { ?> <img src="<?php echo catch_first_image() ?>" width="570" height="120" /> <?php } ?> </a> <?php endif; ?> </div>
这段代码的意思是如果在后台“自定义栏目”中添加了一个叫做“thumbnail_value”的自定义字段,那么就显示出来,否则就显示在后台编辑文章右侧设置了“特色图像”,否则就使用“catch_first_image()”这个自定义函数抓取文章的第一张图或者自定义设置的图作为缩略图,catch_first_image函数代码如下:
if ( function_exists('add_theme_support') ) add_theme_support('post-thumbnails'); function catch_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, 20); echo get_bloginfo ( 'stylesheet_directory' ); echo '/images/random/tb'.$random.'.jpg'; } return $first_img; }
这段代码的意思是如果文章中有配图,那么就抓取并返回,否则就使用主题自带的缩略图。请把上面这段代码放到主题function.php中,并且在你主题的images新建random文件夹,文件夹下面放置20张以tb01.jpg至ta20.jpg的随机缩略图。
做完上述工作即可。另外如果你的主题不适用,请检查代码是否正确,比如代码符号是否已经转为英文半角了。
在第三评文章缩略图中我同样使用了该方法来实现,区别在于博客要完全自己设计并且制作文章缩略图,并力求达到锦上添花,以图表意的效果。