WordPressでブログやWebサイトを運営していると、投稿一覧や記事ページに「アイキャッチ画像（サムネイル）」を表示することが多いですよね。
本記事では、WordPressでアイキャッチ画像を取得・表示するための基本的な関数から、実際のコード例までを丁寧に解説します。
これからWordPress開発を始める方、テーマをカスタマイズしたい方はぜひ参考にしてください。
アイキャッチ画像を有効にする準備
WordPressテーマでは、初期状態ではアイキャッチ画像の機能が無効になっている場合があります。
以下のコードをfunctions.phpに追加することで、アイキャッチ機能を有効化できます。
add_theme_support('post-thumbnails');
この記述がないと、画像取得用の関数が機能しないので、テーマ開発の初期段階で設定しておくのがおすすめです。
よく使うアイキャッチ画像取得関数
WordPressには、画像を取得・出力するための便利な関数が複数用意されています。
the_post_thumbnail()
imgタグごと出力します。もっともシンプルな使い方はこちら。
the_post_thumbnail();
画像サイズやクラス名を指定することも可能です。
the_post_thumbnail('medium', array('class' => 'my-class', 'id' => 'my-id'));
the_post_thumbnail_url()
アイキャッチ画像のURLだけを出力します（echo不要）。
the_post_thumbnail_url('full');
get_the_post_thumbnail_url()
画像URLを取得する関数。echoを使って出力します。
echo get_the_post_thumbnail_url(get_the_ID(), 'full');
記事IDを指定することで、任意の記事から画像を取得できます。
wp_get_attachment_image_src()
添付ファイルIDから画像情報（URL・幅・高さ）を配列で取得できます。
$thumb = wp_get_attachment_image_src(get_post_thumbnail_id(), 'medium');
print_r($thumb);
出力結果は以下のような配列です。
Array (
[0] => 画像のURL
[1] => 横幅
[2] => 高さ
[3] => リサイズ済ならtrue
)
実際に表示してみる：single.phpの例
以下は、記事タイトルとアイキャッチ画像を個別記事ページに表示する基本の記述です。
if ( have_posts() ) : while ( have_posts() ) : the_post();
the_title('<h1>', '</h1>');
if ( has_post_thumbnail() ) {
the_post_thumbnail('full');
}
endwhile; endif;
このコードをベースに、カテゴリーや日付などを追加すれば、より完成度の高いページが作成できます。
メディア設定と画像サイズ指定
WordPressの管理画面「設定」→「メディア」では、以下の画像サイズが管理できます。
- サムネイルサイズ
- 中サイズ
- 大サイズ
the_post_thumbnail() などの関数の第一引数に 'medium' や 'full' を指定することで、希望のサイズで表示可能です。
さらに、独自サイズをfunctions.phpで登録することもできます。
add_image_size('custom-thumb', 600, 400, true);
まとめ
WordPressでアイキャッチ画像を使いこなすことで、記事の魅力が格段にアップします。
以下のポイントを押さえておけば安心です。
add_theme_support()で有効化を忘れずに- 使用する場面によって適切な関数を使い分け
- 画像サイズを意識してパフォーマンスも最適化
記事のヘッダーやサイドバー、投稿一覧などで積極的に活用し、魅力的なデザインを構築していきましょう。