特色圖像:Featured Image
WordPress與附件相關的函數很多,特色圖像也是附件,但它與文章一一對應,代表了文章,使用更加廣泛。了解獲取特色圖像的各種方法,對寫主題十分有幫助。
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>