wordpress特色文章缩略图大小设置

今天在做主题的时候，开始使用到特色文章缩略图功能，其实很反感用后台上传图片，因为会给数据库添加一些垃圾，而且无形之中增加了图片的空间，但是有些主题的确是需要的，不如wordpress主题吧就是一个例子，首页就是需要缩略图的。下面与大家分享这个教程。

文章缩略图和推荐图片可以丰富页面内容，也是图片类博客和杂志类博客随处可见的风景。简单地说，给WordPress主题添加推荐图片功能后，你就可以上传与某篇文章相关的图片，然后图片会显示在文章的一侧。

如果你的网站首页是最近发表文章的摘要，文章的推荐图片会和文章一同显示出来，点击阅读文章后，同样的图片又会显示在文章页上。为推荐图片设置不同大小以适应它们的所在位置（比如文章页上显示大图，首页上显示小图），可以让你的网站排版更合理，也能达到更好的观看效果。

那么要怎样才能让WordPress自动为文章附图生成缩小剪裁版以放在首页呢？

1. 新建主题函数

打开主题的functions.php文件，加入下面的代码：

// post thumbnail support
if ( function_exists( 'add_image_size' ) ) add_theme_support( 'post-
thumbnails' );

上面的代码会同时给日志和页面开启缩略图功能，如果你想单独开启该功能，使用以下代码：

add_theme_support( 'post-thumbnails', array( 'post' ) ); // 给日志启用日志缩略图
add_theme_support( 'post-thumbnails', array( 'page' ) ); // 给页面启用日志缩略图

设置日志缩略图大小

开启了 WordPress 日志缩略图功能之后，我们应该缩略图的大小，这里有两种方式：box-resize（盒大小模式）和 hard-crop（裁剪模式）。

盒大小模式按照比例缩小图片直到适合指定的盒子，所以不会扭曲图片。盒大小模式可以指定长度和宽度，比如一张 100X50 的图片在指定的 50X50 的盒子中会被缩小为 50X25。这种模式的好处是可以显示整张图片，缺点是生成的图片并不是一样大的，有时候是长度一样，有时候是高度一样，如果你想限制缩略图到一定的宽度，而不在乎它的高度，你可以指定你的宽度，然后设置它的高度为 9999 或者任何你认为够大的一个数字。设置盒模式的代码如下：

set_post_thumbnail_size( 50, 50 ); // 50 像素宽和 50 像素高，盒大小模式（box resize mode）。

第二种是硬裁剪模式（hard-crop），这种模式下，图片会被裁剪为指定的大小，这种方式的好处就是得到我们所希望的，比如你希望的到一张 50X50 的缩略图，我们就会得到 50X50 的缩略图，缺点就是你的图片会被裁减，并且在缩略图中只会显示图片的一部分。这种方式的代码是：

set_post_thumbnail_size( 50, 50, true ); // 50 像素宽和 50 像素高，裁剪模式（hard crop mode）

if ( function_exists( 'add_image_size' ) ) {
add_image_size( 'post-thumb', 700, 270 );
add_image_size( 'home-thumb', 203, 203, true );
}

上面的代码让主题支持文章缩略图并让WordPress生成2个不同尺寸的缩略图。

“post-thumb”的宽度和高度分别是700px和270px ，“home-thumb”的宽度和高度分别是203px和203px，你可以根据主题手动修改这些数字。

如果有必要，你还可以给图片添加用在其他位置（比如存档页或侧栏文章列表）的尺寸。

home-thumb的最后一个变量是“true”——意识是让WordPress裁剪当前图片并另存为新图片。

2. 把图片添加到主题中

把图片放到主页里，请打开index.php文件，然后在主循环（关于主循环的介绍请看这里）内添加以下内容：

<?php if ( has_post_thumbnail()) the_post_thumbnail('home-thumb'); ?>

把图片放到文章页里，请打开single.php文件，然后在主循环内添加以下内容：

<?php if ( has_post_thumbnail()) the_post_thumbnail('post-thumb'); ?>

3. 上传文章缩略图

把代码添加到主题的functions.php之后你就可以在后台“添加新文章”菜单下看见一个新选项——“推荐图片（Featured Image）”，点击“Set Featured Image”链接，出现WordPress图片上传框。

图片上传成功后，点击“Set as featured image”然后你就可以发现下面这样的新图片了：