投稿サムネイル

投稿サムネイルとは、バージョン 2.9から導入されたテーマ機能で、ブログ投稿・固定ページ・カスタム投稿タイプのいずれかを描写するために選択された画像のことです。 この画像を表示するかどうかはテーマによります。「マガジン風」テーマで各投稿に画像が含められている場合は特に便利です。

目次 1 投稿サムネイル対応の有効化 2 投稿サムネイルを設定する 3 関数リファレンス 4 用例 4.1 デフォルトの用例 4.2 投稿または大きいサイズの画像へのリンク 4.3 サムネイルサイズ 4.4 投稿サムネイルのサイズ設定 4.5 新規投稿サムネイルサイズの追加 4.6 functions.php の一例 4.7 投稿サムネイルにスタイルを付ける 5 ソースファイル 6 外部資料 6.1 英語情報 6.2 日本語情報 7 関連

投稿サムネイル対応の有効化

投稿・ページ編集画面に投稿画像セクションを表示させるには、テーマ内で対応を宣言する必要があります。functions.php に以下を書きこみます。

if ( function_exists( 'add_theme_support' ) ) { 
  add_theme_support( 'post-thumbnails' ); 
}

Note: To enable Post Thumbnails only for specific post types see add_theme_support()

投稿サムネイルを設定する

If your theme was successful in adding support for Post Thumbnails the "Featured Image" metabox will be visible on the on the Edit Post and Edit Page screens. If it isn't, make sure "Featured Image" is enabled in the screen options on the top right.

Featured image metabox

After clicking the "Set featured image" link follow the same steps as inserting images in Posts and Pages. But instead of the "Insert into Post" button use the "Use as featured image" link next to it, to set the Post Thumbnail.

Insert image button

関数リファレンス

Template Tags has_post_thumbnail() the_post_thumbnail() get_the_post_thumbnail()

Other Functions add_image_size() set_post_thumbnail_size() get_post_thumbnail_id()

用例

デフォルトの用例

<?php 
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
  the_post_thumbnail();
} 
?>
<?php the_content(); ?>

Note: To return the Post Thumbnail for use in your PHP code instead of displaying it, use: get_the_post_thumbnail()

投稿または大きいサイズの画像へのリンク

To link the Post Thumbnail to the Post permalink or a larger image see the examples in the_post_thumbnail()

サムネイルサイズ

The default image sizes of WordPress are "thumbnail", "medium", "large" and "full" (the image you uploaded). These image sizes can be configured in the WordPress Administration Media panel under Settings > Media. This is how you use these default sizes with the_post_thumbnail():

the_post_thumbnail();                  // without parameter -> Thumbnail

the_post_thumbnail('thumbnail');       // Thumbnail (default 150px x 150px max)
the_post_thumbnail('medium');          // Medium resolution (default 300px x 300px max)
the_post_thumbnail('large');           // Large resolution (default 640px x 640px max)

the_post_thumbnail( array(100,100) );  // Other resolutions

投稿サムネイルのサイズ設定

To be used in the current Theme's functions.php file.

Set the default Post Thumbnail size by resizing the image proportionally (that is, without distorting it):

set_post_thumbnail_size( 50, 50 ); // 50 pixels wide by 50 pixels tall, resize mode

Set the default Post Thumbnail size by cropping the image (either from the sides, or from the top and bottom):

set_post_thumbnail_size( 50, 50, true ); // 50 pixels wide by 50 pixels tall, crop mode

新規投稿サムネイルサイズの追加

Example of a new Post Thumbnail size named "category-thumb".

To be used in the current Theme's functions.php file.

add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)

Here is an example of how to use this new Post Thumbnail size in theme template files.

<?php the_post_thumbnail( 'category-thumb' ); ?>

functions.php の一例

if ( function_exists( 'add_theme_support' ) ) { 
add_theme_support( 'post-thumbnails' );
set_post_thumbnail_size( 150, 150, true ); // default Post Thumbnail dimensions (cropped)

// additional image sizes
// delete the next line if you do not need additional image sizes
add_image_size( 'category-thumb', 300, 9999 ); //300 pixels wide (and unlimited height)
}

投稿サムネイルにスタイルを付ける

Post Thumbnails are given a class "wp-post-image". They also get a class depending on the size of the thumbnail being displayed You can style the output with these CSS selectors:

img.wp-post-image
img.attachment-thumbnail
img.attachment-medium
img.attachment-large
img.attachment-full

You can also give Post Thumbnails their own class.
Display the Post Thumbnail with a class "alignleft":

<?php the_post_thumbnail('thumbnail', array('class' => 'alignleft')); ?>

ソースファイル

• wp-includes/post-thumbnail-template.php

外部資料

英語情報

• Everything you need to know about WordPress 2.9’s post image feature, by JustinTadlock.com
• The Ultimative Guide For the_post_thumbnail In WordPress 2.9, by wpEngineer.com
• New in WordPress 2.9: Post Thumbnail Images, by Mark Jaquith
• Simple WordPress thumbnail function, by Vladimir Prelovac

日本語情報

• わーどぷれすっ！ » WordPress 2.9 の新機能の投稿サムネイル画像の使い方

関連

has_post_thumbnail, the_post_thumbnail, get_post_thumbnail_id, get_the_post_thumbnail

最新英語版： WordPress Codex » Post Thumbnails （最新版との差分）