WordPressで手っ取り早く「アイキャッチ画像」を利用するための”まとめ”

先日２ヶ月ぶりの記事をアップしたときに、WordPressの管理画面上に「アイキャッチ画像」なる文字を発見しました。
そこで、さっそく使ってみようと画像をアップしてみるんですが、いっこうにページに表示されない。。。
何でかなーと思って調べると、使うための準備が必要な事がわかりました。

いくつかWordPressで作ったサイトを持っているので、すべてのサイトでアイキャッチが使えるようにするために、その作業をまとめておきたいと思います。

1 アイキャッチ画像を使うための準備
- 1.1 functions.phpにmysetup（）を追加
- 1.2 アイキャッチ画像を表示するためのコードを追加
2 アイキャッチ画像に使える素材サイト
3 アイキャッチ画像の作り方

アイキャッチ画像を使うための準備

アイキャッチを使うための準備には、WordPressのアイキャッチ画像の使用方法【基本＆応用】│でろぐを参考にさせていただきました。

でろぐさんでとてもわかりやすく導入方法をまとめてくれているので、ここではリスト形式にやることだけをまとめたいと思います。

アイキャッチを使うための設定はテーマファイルに対して行います。
WordPressの管理メニューから「外観」->「テーマ編集」へすすんで該当ファイルを編集します。

functions.phpにmysetup（）を追加

テーマ編集の画面にテーマのための関数（function.php）があると思いますので、そちらの一番最後に*1 下記のコードを追加します。

/* アイキャッチの設定 */
function mysetup() {
  add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'mysetup' );

これで投稿画面からアイキャッチを設定することができるようになるはずです。

投稿画面の右側にこんなブロックが表示されるはず

追加したコードの近くに/* コメント */ を残しておくとあとで何のコードか確認しやすくなりますね。

アイキャッチ画像を表示するためのコードを追加

次に単一記事の投稿(single.php)に、設定したアイキャッチ画像を表示するために下記のコードを追加します。*2

<!--?php the_post_thumbnail(); ?-->

HappyQualityでは本文の一番上に出るように設定してみましたが、コードを入れる位置を変えればどこでも自由に配置できます。本文に回り込ませたりもできますね。
もし、トップページ（記事の一覧画面）などにもアイキャッチを表示したいときはindex.phpにも同じように上記コードを追加します。そのとき、画像のサイズを変えて表示する方法もあるようですよ。詳しくはでろぐさんのところでご覧ください^^