【wordpress】アイキャッチ画像を複数のトリミングサイズで出力させる記述方法

wordpressの便利なアイキャッチ機能ですが、デザインや表示させる位置によって、アイキャッチ画像の出力サイズを変更したいときや、PC用とスマホ用でアイキャッチ画像のサイズを個別に用意したいに便利です。
あらかじめ、複数のトリミングサイズパターンを用意しておきます。

functions.phpに記述

まずはwordpressのアイキャッチ機能を有効にする、必須のタグ。functions.phpに記述します。

// アイキャッチ画像を有効にする記述
add_theme_support( 'post-thumbnails' );

この記述がないとダッシュボードでアイキャッチ画像を設定する欄がでてきません。

次に、任意のトリミングサイズを指定します。複数設定できます。こちらもfunctions.phpに記述します。（上記の ‘add_theme_support〜’ 以下に記述しましょう）

// width490px , height290px でリサイズ（'thum-original-01'は任意の名前）
add_image_size( 'thum-original01', 490, 290 );
// width518px , height320px でリサイズ（'thum-original-02'は任意の名前）
add_image_size( 'thum-original02', 518, 320 );

アイキャッチを表示させたいテンプレートファイル内に記述

アイキャッチを表示させたいテンプレートファイル内（index.php/category.php/archive.php/roop.php などなど）の、任意の位置にアイキャッチを出力させる記述をします。

// 'thum-original-01'で指定したサイズでトリミングして出力
<?php the_post_thumbnail('thum-original-01'); ?>

このように、記述することでアイキャッチのトリミングサイズを数パターン用意することができます。

オススメのwordpress教本

▼WordPressデザインブック3.x対応
webデザイン上、WordPressの基本的ことが、実用例と一緒に体系的かつ網羅的にわかりやすく解説されていてかなりオススメです。

▼WordPressデザイン、仕事のネタ帳、見た目と効果を向上させるプロのテクニック
サイトの目的に応じたデザインカスタマイズ、追加機能の実装方法などの解説がのっています。

▼本格ビジネスサイトを作りながら学ぶ WordPressの教科書
XHTML/CSSでのサイト制作はできるが、WordPressを使うのは初めての方
ビジネスレベルのWebサイトをWordPressで構築しようとしている方
html,cssは使えるけどphpは初心者
そんな方にオススメです。