• 赤色のリンクは、まだ日本語Codexに存在しないページ・画像です。英語版と併せてご覧ください。(詳細

このWikiはいつでも誰でも編集できます

投稿サムネイル

提供: WordPress Codex 日本語版
Post Thumbnailsから転送)
移動先: 案内検索

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

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

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

add_theme_support( 'post-thumbnails' ); 

注意: 特定の投稿タイプで投稿サムネイルを有効化する方法については、add_theme_support() をご参照ください。

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

テーマに投稿サムネイルのサポートを追加できると、「アイキャッチ画像」メタボックスが投稿・固定ページ編集画面に表示されます。もし表示されなければ、画面右上の表示オプションの中で「アイキャッチ画像」を有効にします。

アイキャッチ画像メタボックス

アイキャッチ画像メタボックス

「アイキャッチ画像を設定」リンクをクリックした後、投稿・固定ページへ画像を挿入する /en のと同じ手順を行います。アイキャッチ画像を選択してイメージ設定を済ませてから、青い「アイキャッチ画像を設定」ボタンをクリックすれば完了です。

「アイキャッチ画像を設定」ボタン

「アイキャッチ画像を設定」ボタン

関数リファレンス

テンプレートタグ
その他の関数

用例

デフォルトの用例

// 投稿に投稿サムネイルが割り当てられているかチェックします。
if ( has_post_thumbnail() ) {
	the_post_thumbnail();
} 
the_content();

注: 画面への表示ではなく PHP の値として投稿サムネイルを取得したい場合は get_the_post_thumbnail() を使用してください。

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

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

サムネイルサイズ

WordPress のデフォルトの画像サイズは 'thumbnail' (と、その別名 'thumb'), 'medium', 'large', 'full'(アップロードした画像のサイズ)です。これらの画像サイズは WordPress の管理画面の 設定 > メディア の「メディア設定」画面で設定できます。さらに、テーマが投稿サムネイルを有効化している場合は 'post-thumbnail' を利用でき、投稿サムネイルを使用する際のデフォルトになります。以下は the_post_thumbnail() タグでデフォルトの画像サイズを使用する方法です。

// パラメータなし -> 'post-thumbnail' (テーマが set_post_thumbnail_size() を使用して設定したように )
the_post_thumbnail();

the_post_thumbnail('thumbnail');       // サムネイル (デフォルト 150px x 150px :最大値)
the_post_thumbnail('medium');          // 中サイズ   (デフォルト 300px x 300px :最大値)
the_post_thumbnail('large');           // 大サイズ   (デフォルト 640px x 640px :最大値)
the_post_thumbnail('full');            // フルサイズ (アップロードした画像の元サイズ)

the_post_thumbnail( array(100,100) );  // 他のサイズ

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

現在のテーマの functions.phpファイルで使用されます。

画像サイズを比例してリサイズして、デフォルト投稿サムネイルサイズを設定する (画像を歪ずに):

set_post_thumbnail_size( 50, 50 ); // 横 50px x 縦 50px リサイズモード

画像を切り出して、デフォルト投稿サムネイルサイズを設定する (両サイドから、またはトップとボトムから):

set_post_thumbnail_size( 50, 50, true ); // 横 50px x 縦 50px 切り出しモード
set_post_thumbnail_size( 50, 50, array( 'top', 'left')  ); // 横 50px x 縦 50px 左上からの切り出し
set_post_thumbnail_size( 50, 50, array( 'center', 'center')  ); // 横 50px x 縦 50px 中央からの切り出し

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

新しい投稿サムネイルサイズ 'category-thumb' の例です。 現在のテーマの functions.phpファイルで使用されます。

add_image_size( 'category-thumb', 300, 9999 ); // 横 300px (縦 制限なし)

テーマテンプレートファイルにおける新しい投稿サムネイルサイズの使用例です。

<?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 ); // デフォルト投稿サムネイルサイズ (切り出しモード)

    // 追加の画像サイズ
    // 追加の画像サイズが必要なければ次の行を削除
    add_image_size( 'category-thumb', 300, 9999 ); // 横 300px (縦 制限なし)
}

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

投稿サムネイルにはクラス「wp-post-image」が付与されます。また表示される投稿サムネイルサイズに依存したクラスも付与されます。たとえば

the_post_thumbnail();
the_post_thumbnail('medium');
the_post_thumbnail( array(100,100) );
the_post_thumbnail( 'category-thumb' );		// 上の例を参照 

これらの行はそれぞれ次のような HTML を生成します。

<img src=... class="attachment-post-thumbnail wp-post-image" ...>
<img src=... class="attachment-medium wp-post-image" ...>
<img src=... class="attachment-100x100 wp-post-image" ...>
<img src=... class="attachment-category-thumb wp-post-image" ...>

以下の CSS セレクタを使用して出力をカスタマイズできます。

img.wp-post-image

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

また投稿サムネイルには、投稿サムネイルサイズに依存したクラスの代わりに、独自のクラスを付与できます。次の例は投稿サムネイルにクラス「alignleft」を付与します。

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

次のような HTML が生成されます。

<img src=... class=class="alignleft wp-post-image" ...>


ソースファイル

外部資料

英語情報

日本語情報

関連

投稿サムネイル: has_post_thumbnail, the_post_thumbnail, get_post_thumbnail_id, get_the_post_thumbnail, add_image_size(), set_post_thumbnail_size()


テーマサポート: add_theme_support(), remove_theme_support(), current_theme_supports()
テーマ機能: サイドバー, ナビゲーションメニュー, 投稿フォーマット, 投稿サムネイル, カスタム背景, カスタムヘッダー, 自動フィードリンク, html5, コンテンツ幅, editor-style



最新英語版: WordPress Codex » Post Thumbnails最新版との差分