投稿サムネイルを使う方法

Posted on by Eternal-tears
Sponsored Link

投稿サムネイルはバージョン2.9で導入されたテーマ機能です。サムネイルは、投稿、ページ、カスタム投稿タイプの代表画像として選択されている画像です。この画像の表示には、テーマまでです。各投稿は画像を持っている”雑誌スタイル”のテーマに特に便利です。

Sponsored Link

原文（翻訳元）Post Thumbnail is a theme feature introduced with Version 2.9. Thumbnail is an image that is chosen as the representative image for Posts, Pages or Custom Post Types. The display of this images is up to the theme. This is especially useful for “magazine-style” themes where each post has an image.

投稿サムネイルのサポートを有効する方法

投稿の編集やページの編集画面に表示されるこれらのイメージを割り当てるためのインターフェイスの前に、テーマに投稿された画像へのサポートを宣言する必要があります。functions.phpファイルに次のように置くことによってこれを行う事が出来ます：

原文（翻訳元）Themes have to declare their support for post images before the interface for assigning these images will appear on the Edit Post and Edit Page screens. They do this by putting the following in their functions.php file:

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

注：特定の投稿タイプのみ投稿サムネイルを有効にする場合は、add_theme_support()を参照してください。

原文（翻訳元）Note: To enable Post Thumbnails only for specific post types see add_theme_support()

ファンクションレファレンス

テンプレートタグ

他のファンクション

  • 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(); ?>

注：表示する代わりにPHPコードに使用するための投稿サムネイルを返します。：get_the_post_thumbnail()

原文（翻訳元）Note: To return the Post Thumbnail for use in your PHP code instead of displaying it, use: get_the_post_thumbnail()

投稿あるいは大きい画像にリンクする方法

投稿パーマリンクまたは大きい画像に投稿サムネイルをリンクするためには、the_post_thumbnail()の例を参照してください。

原文（翻訳元）To link the Post Thumbnail to the Post permalink or a larger image see the examples in the_post_thumbnail()

サムネイルのサイズ

WordPressのデフォルトの画像サイズは、”thumbnail”, “medium”, “large” と “full”（あなたがアップロードした画像）です。
これらの画像サイズは、WordPressの管理画面の設定上のメディアパネル>メディア上で設定する事が出来ます。

これは、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

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

現在のテーマのfunctions.phpファイルを使用します。

画像比例（歪曲それなし）のリサイズによって、デフォルトの投稿サムネイルのサイズを設定します。：

原文（翻訳元）To be used in the current Theme’s functions.php file.

Set the default Post Thumnail 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 Thumnail 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

新しい投稿サムネイルサイズを追加する方法

”カテゴリーサムネイル”という名前の新しい投稿サムネイルサイズの例です。
現在のテーマのfunctions.phpファイルに使用します。

原文（翻訳元）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)
}

投稿サムネイルのスタイルイング

投稿サムネイルは、”wp-post-image”classに与えられます。また、それらのCSSセレクターと出力スタイルに表示されていたサムネイルのサイズに応じてクラスを取得することも出来ます。：

原文（翻訳元）Post Tumbnails 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

投稿サムネイルに独自のクラスを与えることもできます。”alignleft”classと投稿サムネイルを表示する：

原文（翻訳元）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

Related

Post Thumbnails: has_post_thumbnail(), the_post_thumbnail(), get_post_thumbnail_id(), get_the_post_thumbnail(), add_image_size(), set_post_thumbnail_size()

Sponsored Link