ユーザーの目を惹くアイキャッチ機能を使いたい

アイキャッチ画像とは、その名の通り人の目を惹く画像のことをいいます。
簡単に言うとサムネイルです。
記事一覧でもタイトルだけでなく、画像が１点添えてあるだけでぐっと興味がわきますね。

WordPressには記事ごとに画像を指定できるアイキャッチ機能がついていますが、
テーマによってはデフォルトで使えなかったりもします。
今回はアイキャッチ機能を使えるようにする方法と、アイキャッチを表示する方法を紹介します。

アイキャッチの有効化

まずは記事にアイキャッチを登録出来るよう設定します。
現在使用しているテーマファイル内の functions.php を編集します。
なければ同名のPHPファイルを作成しましょう。

<?php

add_theme_support( 'post-thumbnails', array( 'post' ) );

?>

この一文を追加するだけでアイキャッチが有効化されます。

<?php 

set_post_thumbnail_size(150, 150, true);

?>

有効化の他にも、画像のデフォルトサイズを指定することもできます。
第一引数は横幅、第二引数は縦幅、第三引数は縮小時に切り取りをするか、を指定します。

上記設定をしたことで、投稿画面の右下に「アイキャッチ画像」設定が出ました。
新たにアップロードするか、既にアップロードされた画像にするか指定ができます。

ここで「アイキャッチ画像」がない方は、

投稿画面右上にある「表示オプション」から「アイキャッチ画像」にチェックが入っているかを
確認し、チェックが入っていなければチェックを入れます。

アイキャッチを表示する

記事のアイキャッチ画像を指定した後は表示です。
記事ループ内の表示したい位置で以下の記述をするだけでOKです。

<?php the_post_thumbnail(); ?>

アイキャッチ画像の有無は has_post_thumbnail で判別します。

<?php if ( has_post_thumbnail() ): ?>
	<?php the_post_thumbnail(); ?>
<?php endif; ?>

サイズを指定してアイキャッチを表示する

表示の際にサイズの指定もできます。

<?php
// フルサイズ（そのまま）
the_post_thumbnail('full');

// 大サイズ
the_post_thumbnail('large');

// 中サイズ
the_post_thumbnail('medium');

// サムネイルサイズ
the_post_thumbnail('thumbnail');

// ピクセル指定
the_post_thumbnail(array(100, 100));
?>

有効化も表示も簡単なので、どんどん活用して人の目をかっさらっていきましょう。