WordPressテーマを自作しよう（7）アイキャッチを設定・表示する

前回の記事までで、記事のタイトルや更新日時を表示できるようになりました。

今回は記事に設定したアイキャッチ画像を表示する方法について書きます。

編集画面に設定項目を追加する

初期状態では、記事を編集する際にアイキャッチを指定したくても、できません。編集画面に「アイキャッチ画像」の項目が表示されないのは、テーマが対応していないからです。
まずはこの項目が表示されるようにします。

funcsions.phpに次のコードを追加しましょう。

function custom_theme_setup() {
	add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

add_theme_support はテーマの機能を拡張するための関数で、post-thumbnails はアイキャッチを指すので「このテーマはアイキャッチに対応しますよ」という宣言になります。
これを after_setup_theme のタイミングで呼び出すよう設定しています。

この時 add_theme_support に引数を追加すると、アイキャッチに対応する（設定項目を表示する）投稿タイプを限定することができます。

add_theme_support( 'post-thumbnails' ); //全部
add_theme_support( 'post-thumbnails', array( 'post' ) ); //投稿のみ
add_theme_support( 'post-thumbnails', array( 'page' ) ); //固定ページのみ
add_theme_support( 'post-thumbnails', array( 'post','page' ) ); //投稿と固定ページのみ

（投稿タイプの種類については別の機会で触れたいと思います）

公式資料によると、add_theme_support を実行するのは必ず after_setup_theme でないと、正常に動作しない場合があるそうです。

• 関数リファレンス/add theme support

これだけで、記事の編集画面に「アイキャッチ画像」の項目が表示されるようになります。

設定したアイキャッチを表示する

お好きな記事にアイキャッチを設定してください。
いよいよそれを表示してみましょう。

index.phpの記事情報を書き出しているところに処理を追加します。

  <article class="contents-list">
    <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
    <?php the_time('（投稿日時： Y年n月j日 H:i）'); ?>
    <?php the_modified_time('（更新日時： Y年n月j日 H:i）'); ?><br/>
    <?php 
    if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像が割り当てられているかチェックします。
      the_post_thumbnail();
    } 
    ?>
    <?php the_content(); ?>
  </article>

画像サイズ通りに表示されました。でかいですね……。
（ちなみに設定したのは私が書いた童話のイメージイラストです）

サイズを調整する方法はいくつかあります。

例えば、the_post_thumbnail を使用する際に引数でサイズを指定できます。
指定した比率に合わせて横の端または縦の端をカットしてくれます。

the_post_thumbnail(array(300,150));

便利ですが、レイアウトに関わることはなるべくstyle.cssにまとめたいところです。

the_post_thumbnail で出力される imgタグは必ず「wp-post-image」というclassが付与されるので、それを利用すればスタイルを調整することができます。
全体のレイアウトを整える時にうまいことやってくださいな！

• テンプレートタグ/the post thumbnail

次回は、トップページと記事ページで表示するものを変えます。

まとめ

アイキャッチの設定を可能にするには、functions.phpに次の処理を追加します。

function custom_theme_setup() {
	add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );

表示する時は次の関数を使用します（ループ内で使用しましょう）

if ( has_post_thumbnail() ) { // 投稿にアイキャッチ画像が割り当てられているかチェックします。
　　the_post_thumbnail();
}

アイキャッチ画像のimgタグには「wp-post-image」クラスが付与されているので、それを利用して表示サイズなどのレイアウトを調整しましょう。