WordPress默认没有特色图片，需要手动开启，请在functions.php文件中添加以下代码开启：
//为文章添加特色图像
add_theme_support('post-thumbnails');
在循环中获取文章的缩略图，我们需要用到以下函数：
has_post_thumbnail() //判断当前文章是否有缩略图
get_post_thumbnail_id() //获取缩略图的ID
the_post_thumbnail() //直接输出特色图像，是包括IMG标签
the_post_thumbnail_url()//直接输出获取特色图像的地址，可指定参数
get_the_post_thumbnail() //获取特色图像，包括img标签
get_the_post_thumbnail_url(); //获取特色图像的地址
下面的代码会输出一个文章的图片。如果文章没有图片，IMG标签会留空
<?php
while (have_posts()):the_post();
?>
<li>
<a href="<?php the_permalink(); ?>">
<img src="<?php echo get_the_post_thumbnail_url(); ?>"/>
<div class="hui-img-list-content">
<?php the_title(); ?>
</div>
</a>
</li>
<?php endwhile; ?>
其中参数”thumbnail”表示缩略图显示的大小。wordpress预置了4种大小，你可以使用下面的4个参数来替换’thumbnail’，当然不同的台数显示的图片大小也不同
- Thumbnail (缩略图尺寸)
- Medium （中等尺寸）
- Large （大尺寸）
- Full （原始尺寸）
具体尺寸大小可以在后台“设置”中的“媒体”选项中进行设置
自定义缩略图尺寸的三种方法
方法一：后台设置
就是上面提到的方法，不过这种方法只设置3种大小。
方法二：自定义
在调用the_post_thumbnail函数的时候，可以直接指定缩略图的大小
the_post_thumbnail(array(200,200)); // 显示200X200尺寸的缩略图
这种方法的优点的灵活，可以随时通过代码的调用显示不同尺寸的图片，缺点是修改有点麻烦，如果你有多处这样的代码，修改起来就要把每一处代码都要修改掉。
方法三：增加预置尺寸
通过前面的介绍我们已经知道，wordpress为我们预置了三种可以设置的尺寸。可不可以再增加一些预置的尺寸呢？当然可以，我们要用到的函数是add_image_size。比如我们想在首页和分类页面使用不同的缩略图大小，就可以先预置homepage-thumb和category-thumb这两大小。方法是在functions.php文件中加入以下代码
if ( function_exists( 'add_image_size' ) ){
add_image_size( 'category-thumb', 200, 200 ); // 预置一个名为’category-thumb’,200*200的缩略图大小
add_image_size( 'homepage-thumb', 220, 180); //预置一个名为’homepage-thumb’,220*180的缩略图大小
}
之后就可以在首页调用
the_post_thumbnail('homepage-thumb');
显示220*180的缩略图
在分类页面调用
the_post_thumbnail('category-thumb');
则显示200*200的缩略图。
定义缩略图的样式
首先我们先来看一下the_post_thumbnail函数输出的html是什么样的
<img width="150" height="150" src="http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png"
class="attachment-thumbnail wp-post-image" alt="" title="screenshot" />
由此可以看出，我们可以用css定义类attachment-thumbnail的样式就可以了。
但是如果我想分别为首页和分类页面定义不同的样式，该怎么做呢？
方法一是增加一个div，针对不同的div定义不同的样式，在此不多做介绍。
我要介绍的是另一种方法：给缩略图添加属性
你可以测试一下，如果把the_post_thumbnail(“thumbnail”)修改为下面这样的代码，看看输出的html结果是什么？
the_post_thumbnail('thumbnail',array('class' => 'homepage-thumb'));
我这边输出的html为
<img width="150" height="150" src="http://domety.com/wp-content/uploads/2010/10/screenshot-150x150.png"
class="homepage-thumb wp-post-image" alt="" title="screenshot" />
可以和之前的html对比一下，不难发现class属性变成了我们设置的’homepage-thumb’。可以通过这种方法，把首页缩略图和分类页面的缩略图设置为不同的class属性。
改变the_post_thumbnail的html输出
我们可以使用filter来改变缩略图的html输出结果，下面的这段代码为缩略图加了一个文章链接
add_filter( 'post_thumbnail_html', 'my_post_image_html', 10, 3 );
function my_post_image_html( $html, $post_id, $post_image_id ) {
$html = '<a href="' . get_permalink( $post_id ) . '" title="' . esc_attr( get_post_field( 'post_title', $post_id ) ) . '">' . $html . '</a>';
return $html;
}
当你点击缩略图的时候就会跳转到相应的文章内页。
检测文章是否有缩略图
一个良好的习惯就是在调用the_post_thumbnail函数之前，先检测一下该文章有没有设置缩略图，检测的方法是调用has_post_thumbnail函数，代码如下
<?php if ( has_post_thumbnail() )
the_post_thumbnail( 'thumbnail' );?>
结合本站之前的提取文章内图片做为缩略图的方法，现在可以合二为一：首先判断文章有没有设置缩略图，如果有就直接显示，如果没有再提取文章内的图片为缩略图。
/*
* 缩略图
*/
function dm_the_thumbnail() {
global $post;
// 判断该文章是否设置的缩略图，如果有则直接显示
if ( has_post_thumbnail() ) {
echo '<a href="'.get_permalink().'" title="阅读全文">';
the_post_thumbnail('thumbnail');
echo '</a>';
} else { //如果文章没有设置缩略图，则查找文章内是否包含图片
$content = $post->post_content;
preg_match_all('/<img.*?(?: |\\t|\\r|\\n)?src=[\'"]?(.+?)[\'"]?(?:(?: |\\t|\\r|\\n)+.*?)?>/sim', $content, $strResult, PREG_PATTERN_ORDER);
$n = count($strResult[1]);
if($n > 0){ // 如果文章内包含有图片，就用第一张图片做为缩略图
echo '<a href="'.get_permalink().'" title="阅读全文"><img src="'.$strResult[1][0].'" alt="缩略图" /></a>';
}else { // 如果文章内没有图片，则用默认的图片。
echo '<a href="'.get_permalink().'" title="阅读全文"><img src="'.get_bloginfo('template_url').'/imgs/default_thumbnail.jpg" alt="缩略图" /></a>';
}
}
}
有兴趣的朋友可以把以上代码复制到functions.php文件中，然后调用dm_the_thumbnail()即可。
滇公网安备 53250302000234号