如何在主题中使用特色图像

WordPress的特色图像是一张可以代表文章或页面的的图片，用法也很简单，两句话搞定。

if( has_post_thumbnail() ){
    the_post_thumbnail();
}

但简单的代价就是局限性高一些，比如产生的img标签class是什么，调用了多大尺寸的图片？

第二个问题比较容易回答，默认的图片尺寸是post-thumbnail，这是一个特殊的尺寸，需要在主题的functions.php里初始化一下。

add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 400, 300, true );

调用特色图像的其它尺寸只需把名称传给the_post_thumbnail()，例如调用large的特色图像。

the_post_thumbnail( 'large' );

现在回到第一个问题。

给特色图像增加自定义class

这要用到the_post_thumbnail()的第二个参数，直接看代码。

if( has_post_thumbnail() ){
    $attr = array(
        'class' => "my-custom-class",
        'alt'   => "my alt text"
    );
    the_post_thumbnail( 'post-thumbnail', $attr );
}

注意class是追加，而alt则是覆盖。

指定post ID获取特色图像

the_post_thumbnail()的一个局限性是只能在循环中使用，不能自由指定文章。打破局限性的方法如下

echo get_the_post_thumbnail( $post_id, 'post-thumbnail', $attr );

另外，the_post_thumbnail()只能输出img标签，在lightbox或slideshow里，我们需要这样的结构

<li>
    <a href="http://yoursite.com/image.jpg">
        <img src="http://yoursite.com/image-thumb.jpg">
    </a>
</li>

一张大图给访客看，一张小图当缩略图导航，直接获取图片地址比较方便。

获取特色图像的地址

特色图像或者任何一张媒体库里的图片都是类型为attachment的post，要想控制它就得知道ID。常见的应用场景是获取某篇文章的特色图像，所以就用文章ID找它的 ID。

获取特色图像ID

$post_thumbnail_id = get_post_thumbnail_id( $post_id );

获取缩略图地址

 wp_get_attachment_thumb_url( $post_thumbnail_id );

获取原图地址

wp_get_attachment_url( $post_thumbnail_id );

获取任意尺寸

$image = wp_get_attachment_image_src( $post_thumbnail_id, 'post-thumbnail' );
$src   = $image[0];

这个函数看名字好像是返回个图片源地址，其实它返回了一个数组，包含图片的地址和宽高，于是…

获取任意尺寸及其宽高信息

$image = wp_get_attachment_image_src( $post_thumbnail_id, 'post-thumbnail' );
list($src, $width, $height) = $image;

于是上面的html代码可以变成这样：

<li>
    <a href="<?php echo wp_get_attachment_url( $post_thumbnail_id ); ?>">
        <img src="<?php echo wp_get_attachment_thumb_url( $post_thumbnail_id ); ?>">
    </a>
</li>

结语

WordPress有关图片附件的函数很多，具体可以看之前的一篇文章《WordPress附件函数总结》。函数太多反而不知道用哪个好了，所以写了这篇比较注重实战的文章，简单有效的解决问题。