• twitter
  • Facebook
  • はてなブックマーク
2012年05月21日(月)

[wordpress]投稿サムネイル(アイキャッチ)の使い方

wordpress2.9から利用可能な、投稿サムネイル(アイキャッチ)画像を設定して表示するための方法について説明します。アイキャッチは、メディア管理と投稿データ管理を紐づけ、出力の際にあらかじめ定義されたフォーマットで簡単に表示を行うために利用します。投稿管理画面に「アイキャッチ画像」という項目が表示されるようになるため、1つ記事に対して、1つの画像サムネイルなどを関連付けしたい場合などに便利です。

アイキャッチの有効化と出力の設定

アイキャッチを有効化するためには、作成中のテーマ「functions.php」にてadd_theme_support(‘post-thumbnails’)を呼び出して、テーマサポート機能を有効にする必要があります。テーマサポートを有効にすると、管理画面に「アイキャッチ画像」という項目が表示されるようになります。

このアイキャッチに関する情報は、wordpressのデータベース上に、メディア情報と投稿記事データを紐づけるための「メタ情報」によって管理されます。wp_postmetaテーブルの最後に「_wp_attached_file」「_wp_attachment_metadata」「_wp_attachment_image_alt」などの情報が格納されます。

  1. <?php
  2. // functions.php内に記述
  3. add_theme_support('post-thumbnails');
  4. // 出力するときの画像表示サイズに名前をつけておく
  5. add_image_size('出力タイプ名前', $width, $height);
  6. ?>

[メディア画像のサイズについて]

wordpressインストール時のメディアサイズは「サムネイルサイズ(150×150px)」「中サイズ(300×300px)」「大サイズ(1024×1024px)」となっており、オリジナルのサイズと合わせて4種類のパターンが用意されています。画像ファイルをアップロードすると、自動で縮小サイズが出力され、ファイル名_横幅x高さという名前で、アップロードディレクトリに格納されるようになっています。add_image_sizeを使うと、このパターン以外に、自由な名前とサイズを定義して画像サイズの追加を行う事が出来ます。

$widthまたは$heightが9999になっていると、片方のサイズを固定化して、相対的にリサイズされたサイズが使用されます。例えば、横幅を300pxで固定で表示したい場合はadd_image_size(‘width300′, 300, 9999)、高さを固定にする場合はadd_image_size(‘height40′, 9999, 40)などです。サイズ名の名前は、自分がわかりやすいものにしておきます。(‘custom_size’や’my_thumb’など)

縦横比率固定で画像サイズを登録した場合
thumbnail
150×150pxのサムネイルサイズ
medium
300×300pxのサイズ
large
1024×1024pxのサイズ
クロップ有効で画像サイズを登録した場合

デフォルトのサイズは上記のようになっており、メディアがアップロードされると自動で縮小を行ってトリミングされた画像が作成されます。(アップロードした画像サイズより小さいサイズのみ出力)1枚のファイルをアップロードすると、オリジナル画像以外に、各サイズに合わせた3枚の画像が出力されるため、この機能を使いたくない場合は管理画面から各値を0に設定しておきます。

テーマファイル(ループ中)で、アイキャッチを出力する

テーマの中のループエリア内で、記事と紐づけられたアイキャッチ画像を出力します。アイキャッチが設定されていない場合は、置き換え画像を使うなど、統一されたレイアウトを行うために出力コードを記述していきます。

get_the_post_thumbnail($post_ID, $size)
投稿サムネイルのimgタグをPHPで取得します。$post_idは、現在の投稿ID(get_the_ID())を指定します。$sizeには、’thumbnail’や自分で名付けたフォーマット名を指定します。
the_post_thumbnail($size)
現在の投稿記事に紐づけられた投稿サムネイルのimgタグを出力します。$sizeには、’thumbnail’や自分で名付けたフォーマット名を指定します。
has_post_thumbnail($post_ID)
現在、または指定した投稿IDに対して、アイキャッチ画像が設定されているかどうかを判定します。設定されていればTRUEそうでなければFALSEを返します。
set_post_thumbnail_size($width, $height, $crop)
ループ中に画像のサイズを指定して個別出力に対応します。add_image_sizeでアップロード時にデフォルト値を適用するのではなく、その場その場でサイズを計算するため、場合に応じては負荷がかかります。また、$crop=trueにした場合は、画像のトリミングが実行されます。

シンプルな使い方

  1. <?php
  2. if(have_posts()) :
  3. while(have_posts()) :
  4. the_post();
  5. if(has_post_thumbnail()){
  6. the_post_thumbnail('thumbnail');
  7. }else{
  8. echo "<img src='代理画像ファイルパス' alt='' width='150' height='150' />";
  9. }
  10. endwhile;
  11. endif;
  12. ?>

関連投稿記事

Comment:


トラックバック送信先