万が一、当サイトで重大な問題を発見した際などは、フォーラムや WordSlack #docs チャンネルでお知らせください。</p>
投稿サムネイル
投稿サムネイルとは、バージョン 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="alignleft wp-post-image" ...>
ソースファイル
外部資料
英語情報
- 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 Theme Support Generator
日本語情報
関連
投稿サムネイル: 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 （最新版との差分）
