WordPress「アイキャッチ画像」の使い方
WordPressでは「アイキャッチ画像」という機能が追加されています（2.9～。当時は「投稿サムネイル／投稿画像」という名称だった模様）。
本エントリーでは「アイキャッチ画像」について紹介したいと思います。認識誤り等ありましたらご指摘ください。
１．アイキャッチ画像とは
「アイキャッチ」は「人目を引く」といった意味があり、WordPressの「アイキャッチ画像」とは、記事単位にアイキャッチ用の画像を設定できる機能を指します。
アイキャッチ画像を記事に設定しておけば、記事にひもづいたサムネイルや、ページのヘッダー画像として利用することができます。
TwentyElevenテーマでは次のようにヘッダー画像（赤枠部分）にアイキャッチ画像を表示できます（仕組みについては後述）。
アイキャッチ画像を利用するには、利用しているテーマにアイキャッチ画像を利用する設定が必要です。設定の詳細は４項で解説します。
２．記事にアイキャッチ画像を設定する
テーマでアイキャッチ画像が利用できるという前提で、記事にアイキャッチ画像を設定する手順を解説します。デフォルトのTwentyEleven／TwentyTenであれば利用可能です。
記事編集画面の右下にある「アイキャッチ画像を設定」をクリック。
画像アップロード後に表示された画面で「アイキャッチ画像として使用」をクリック。このエリアが表示されない場合は、利用しているテーマにアイキャッチ画像の利用できる設定を行う必要があります。設定の詳細は４項を参照してください。
クリックしたリンクが「保存しています」→「完了」と表示が変わって、次の画面になればOKです。右上の×印をクリックして画面を閉じます。
記事編集画面にアイキャッチ画像が設定されました。ここでは次項の説明の都合上、デフォルトのヘッダー画像より少し大きい、1100x290の画像を設定しました。
３．アイキャッチ画像を表示する
TwentyElevenテーマでは次の条件が揃っていれば、冒頭のスクリーンショットで紹介したように、記事ページのヘッダ画像としてアイキャッチ画像が表示されます。スクリーンショットはTwentyElevenテーマの記事ページです。
アイキャッチ画像を表示するには、アイキャッチ画像用のテンプレートタグを設定します。TwentyElevenテーマの記事ページでは、get_the_post_thumbnail()でアイキャッチ画像を表示しています。定義しているのはヘッダー（header.php）です。
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );また、TwentyElevenテーマ（TwentyTenテーマ）の場合は、次の4つの条件を満たしたときだけget_the_post_thumbnail()を実行するようになっています。カッコ内は条件を判定するときに実行しているテンプレートタグまたは関数です。
- 記事ページである（is_singular()）
- 記事にアイキャッチ画像が添付されている（has_post_thumbnail()）
- 画像の情報（URL、高さ、幅）を取得できる（wp_get_attachment_image_src()+get_post_thumbnail_id()）
- 取得した画像の幅がHEADER_IMAGE_WIDTH（1000px）より大きい
通常ここまで複雑な判定を行う必要はないと思いますが、テクニックとして覚えておくと良いかもしれません。
４．利用テーマでアイキャッチ画像を使えるようにする
アイキャッチ画像を利用できるようにするには、テーマのfunctions.phpに次の設定が必要です。
<?php add_theme_support('post-thumbnails'); ?>TwentyElevenテーマではアクションフック関数twentyeleven_setup()の中でadd_theme_support()を起動しています。
function twentyeleven_setup() {
…中略…
// This theme uses Featured Images (also known as post thumbnails) for per-post/per-page Custom Header images
add_theme_support( 'post-thumbnails' );が、functions.phpの末尾にadd_theme_support()を追加するだけでも大丈夫です（実験済み）。
５．テンプレートタグ
アイキャッチ画像で使うテンプレートタグです。
- the_post_thumbnail( $size, $attr )：現在の投稿のアイキャッチ画像を表示（ループで利用可）
- get_the_post_thumbnail( $id, $size, $attr )：現在または指定した投稿のアイキャッチ画像を取得
- has_post_thumbnail( $post_id )：現在または指定した投稿にアイキャッチ画像があるか判定
- get_post_thumbnail_id()：現在または指定した投稿のアイキャッチ画像IDを取得
６．アイキャッチ画像をリサイズする
アイキャッチ画像を任意のサイズにリサイズするには、テンプレートタグのパラメータに次のように配列で設定します。公式サイトのドキュメントでは2つの値が幅・高さに対応しているように見えますが、実際には2つめの値が幅・高さに適用されるようです。
the_post_thumbnail( array(100, 100) );get_the_post_thumbnail()の場合は次のように設定します。
echo get_the_post_thumbnail($post->id, array(100,100));下のスクリーンショットは、TwentyElevenテーマでさきほどアップロードしたアイキャッチ画像を100x100のサムネイルで表示した例です。
元のアイキャッチ画像のサイズは変わらないので、安心してリサイズしてください。
また、the_post_thumbnail()とget_the_post_thumbnail()には、次のようなパラメータ設定でサムネイルを生成できます。「thumbnail」は150x150にリサイズします。他に「medium」「large」も設定できます。
the_post_thumbnail( 'thumbnail' );７．アイキャッチ画像のimg要素に任意の属性を設定する
the_post_thumbnail()とget_the_post_thumbnail()で出力されるimg要素には、パラメータに任意の属性を設定できます。
the_post_thumbnail( 'thumbnail', array( 'alt' => 'foo', 'title' => 'bar', 'class' => 'abc' ));width属性、height属性は自動で設定されます。
８．参考サイト
参考サイトは以下です。ありがとうございました。
WordPressの「QF-GetThumb」プラグインがPHPのセーフモード環境で動作しない問題の対処
先日エントリーした「WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」」で、PHPのセーフモード環境で正常に動作しない問題の対処方法を紹介します。
「QF-GetThumb」は、記事に挿入した画像から自動的にサムネイル（キャッシュ）を生成するプラグインです。
１．問題点
XREAやCORESERVERなど、PHPがセーフモードで動作するサーバでは、プラグインが利用するための、キャッシュを保存するディレクトリが正常に生成されないため、プラグインが正常に動作しないようです。
２．対処方法
プラグインファイルqf-getthumb.phpの中にある、qf_get_savepath()関数の以下の部分を変更することで、サムネイルを表示させることができました。
変更内容は、プラグインのデフォルト動作である、サムネイル単位のディレクトリ作成をやめて、ファイルだけを保存するようにしました。ファイル名は重複しないよう、ディレクトリ名をファイル名の一部として利用します。
変更前
…前略…
// 保存ファイル名定義
$file = dirname($file)."/".$folder_name."/".$width."-".$height."x".$crop_w."-".$crop_h."/".$append_text."_".$size."_".basename($file);
…後略…変更後
…前略…
// 保存ファイル名定義
$file = $base_path."ドメイン以下のパス/".$folder_name."/".$width."-".$height."x".$crop_w."-".$crop_h.$append_text."_".$size."_".basename($file);
…後略…変数$base_pathにはドメインに対応するパスが設定されています。また、変数$folder_nameには、デフォルトでは「qfgt」が設定されているので、「ドメイン以下のパス」の部分に、必要に応じて任意のパスを設定してください。「ドメイン以下のパス」の末尾には、例に記している通り、スラッシュを与えてください。
設定後、該当のディレクトリは予めFTPツールで手動で作成し、パーミッションを「707」など、セーフモードで動作できるパーミッションにしてください。
かなり雑な修正なので、より良い方法がありましたらご指摘ください。
WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」
WordPressの記事に挿入した画像のサムネイルを表示する「QF-GetThumb プラグイン」について紹介します。
１．プラグインの機能
プラグインを適用することで、記事に挿入した画像から自動的にサムネイル（キャッシュ）を生成します。
1つの記事に対して作成するサムネイルは1つだけです。記事中に複数の画像がある場合、何番目の画像をサムネイルにするか、指定することもできます。
２．ダウンロード・インストール
QF-GetThumbのページ右にある「Download Version 1.1.3（2010年9月現在のバージョン）」をクリック。
ダウンロードしたアーカイブを展開して、中にある「qf-getthumb」フォルダをwp-content/pluginsディレクトリにアップロードします。
管理画面左メニューの「プラグイン」をクリックして、次の画面で「QF-GetThumb」の「有効化」をクリックすればインストール完了です。
別の手順として、次のようにプラグイン検索によるインストールもあります。
まず、管理画面左メニューの「プラグイン」をクリックして、次の画面で「新規追加」をクリック。
キーワードに「QF-GetThumb」を入力して「プラグインの検索」をクリック。
QF-GetThumbの「いますぐインストール」をクリック。
接続情報を設定して開始をクリック。
インストールが完了したら「プラグインの有効化」をクリック。
３．設定画面
有効化すると管理画面左の「設定」メニューに「QF-GetThumb」が表示されるので、クリック。
次の各オプションを設定します。なおオプションの値はデフォルトで設定されるようなので変更する必要がなければそのままでいいと思います。
- ドメイン名：ドメインを設定。「www」などのサブドメインは設定しません。
- フルドメイン名：サブドメインを含めたドメインをURL形式で記述。末尾にスラッシュを設定します。
- ドキュメントルート：サーバのドキュメントルート（ブラウザに上記の「フルドメイン名」を入力したときにアクセスされるパス）を設定します。
- デフォルト画像：画像がない場合の代替画像。デフォルトはプラグインで用意されている画像のパスが設定されます。
- 保存フォルダ名：サムネイルを保存するフォルダ名を設定します。
- 接頭句：サムネイルファイル名の先頭に付与する文字列を設定します。
４．テンプレートタグ
テンプレートタグ「the_qf_get_thumb_one」をテンプレートに記述することで、冒頭のようなサムネイルが表示されます。
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a <?php the_title_attribute(); ?>"><?php echo the_qf_get_thumb_one('num=0&width=75','/wp-content/plugins/qf-getthumb/default_image.png'); ?></a>the_qf_get_thumb_oneの形式と各パラメータの意味は次の通りです。
関数の形式
function the_qf_get_thumb_one($gt_settings = "", $default_image = "", $source = Null) {...}
パラメータの意味
- $gt_settings（設定値は&で区切ります）：
- num：何番目の画像を取り出すかを指定。省略可。デフォルトは「0」
- width：サムネイルの幅を指定。デフォルトは「0」
- height：サムネイルの高さを指定。デフォルトは「0」
- tag：「1」を設定すればimg要素を出力。「0」を設定すれば画像のURLを出力。デフォルトは「1」
- global：「0」を設定すれば、画像を同一サーバ内のデータに限定。「1」を設定すれば限定しない。場合デフォルトは「0」
- crop_w：クロップ時の横幅を指定。デフォルトは「0」
- crop_h：クロップ時の縦幅を指定。デフォルトは「0」
- find=string：検索文字列を指定（全文検索一致データの画像指定）
- $default_image：画像がない場合は、ここに指定された値を返却します（それもなければfalseを返却）
- $source：ソース取得先の指定（なければ the_content を参照）
５．正方形のサムネイルを表示する場合
このプラグインはデフォルトの状態では正方形のサムネイルを出力することができません。正方形のサムネイルを表示するには、以下の記事を参考に、ソースコードを修正してください。
ソースコード修正後、正方形で出力するには、次のようなパラメータを設定します。
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permalink a <?php the_title_attribute(); ?>"><?php echo the_qf_get_thumb_one('width=75&crop_h=75&height=75&crop_w=75','/wp-content/plugins/qf-getthumb/default_image.png'); ?></a>６．その他
サムネイルを作成するプラグインとして、「Post Thumbs plugin」もあります
