WordPress「add_theme_support」でアイキャッチを有効化する

WordPressでアイキャッチ画像（投稿サムネイル）を設定するためにはまず機能を有効化しなければならない。そのうえでアイキャッチのサイズやクラスの付与を行える。

アイキャッチの有効化

アイキャッチを有効化するために、functions.phpにコードを記述する。

// アイキャッチ有効化
add_theme_support('post-thumbnails');

これによりサポートが追加され、アイキャッチ画像のメダボックスが投稿・固定ページの編集画面に表示される。

またアイキャッチを有効化する投稿タイプを設定することもできる。

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

アイキャッチ登録の有無をチェックして出力する

アーカイブページなどにアイキャッチを表示させている場合、投稿にアイキャッチが割り当てられているのかどうかチェックする必要がある。アイキャッチ設定もれがあるかもしれないためだ。

// 投稿に投稿サムネイルが割り当てられているかチェックする
<?php
if (has_post_thumbnail()) :
  the_post_thumbnail();
endif; ?>

アイキャッチを表示するためにthe_post_thumbnail()を使用したが、用途によって別の関数を使い分けることもできる。

get_the_post_thumbnail()

投稿やページの編集画面で設定することができるアイキャッチ画像を取得する。

設定されていればアイキャッチ画像を出力する HTML 画像エレメントを返し、設定されていなければ空文字列を返す

表示するサムネイルのサイズを変更する

the_post_thumbnail()の引数にサイズを渡す。

the_post_thumbnail('thumbnail'); // 小サイズ 縦横最大150px
the_post_thumbnail('medium');    // 中サイズ 縦横最大300px
the_post_thumbnail('large');     // 大サイズ 縦横最大1024px
the_post_thumbnail();            // オリジナルサイズ

クラス名を付与する

クラス名としてclass-nameを付与したアイキャッチ画像を表示させる。

if ( has_post_thumbnail() ) {
  $attr = array(
    'class' => 'class-name',
  );
	the_post_thumbnail('thumbnail', $attr);
  //the_post_thumbnail('画像サイズ', 配列);
}

これにより、<img>タグにクラス属性class-nameが追加される。

別の書き方では、

<?php the_post_thumbnail('medium', array('class' => 'alignleft')); ?>

次のようなHTMLが生成される。

<img src=... class="alignleft wp-post-image" ...>

アイキャッチ画像がない時に別の画像を表示する

アイキャッチ画像が登録されていない時に表示するデフォルトのアイキャッチ画像を登録しておく。

<?php
if (has_post_thumbnail()) :
  the_post_thumbnail('thumbnail');
else : ?>
  <img src="<?php echo get_stylesheet_directory_uri(); ?>/images/default-thumbnail.png>" alt="">
<?php endif; ?>