WordPressのアイキャッチ機能を有効化する方法と画像の挿入方法

WordPressには投稿画面でアイキャッチ画像を指定できる便利な機能がありますが、テーマによってはこのアイキャッチ機能を停止してあることがあります。

そこで今回はアイキャッチ機能を有効化する方法とアイキャッチ画像をテンプレート内に挿入する方法について紹介いたします。

アイキャッチ画像とは

アイキャッチは直訳すると「目を掴む」となんともホラーな感じですが、おおよそその通りで記事を見た時に最初に目につく画像のことをアイキャッチ画像といいます。画像を使って記事の内容を一目で伝えるために設置する場合が多いと思います。

よくブログの冒頭にその記事を象徴する画像が置いてありますよね。アレです。この記事で言うと、上の猫ちゃんの画像みたいなやつですね。

アイキャッチ画像を設置する理由

アイキャッチ画像を設置する理由は、人によって様々あると思いますが、以下のような理由からだと思います。

• 記事の内容を一目で伝える
• SNSでシェアされた時に活用する
• 文字だけだと寂しい
• 文章のアクセント

当ブログの場合は記事の導入部分の終わりにアクセントとして設置しています。それから文字だけだとなんとなく寂しい気がします。

また、SNSでシェアされる時のサムネイル画像には記事内の画像が利用されます。デフォルトでは記事内の一番上の画像が使われることがほとんどだと思いますので、アイキャッチ画像を設置しておけば、SNS拡散時のサムネイル画像をある程度操作することもできます。

SNSでシェアされた場合、記事のタイトルだけよりもサムネイル画像付きの方がクリックされやすくなります。SNSのことだけ考えてもアイキャッチ画像は設置しておいた方がいいと言えるでしょう。

アイキャッチ機能を有効化する方法

WordPressでアイキャッチ機能を有効化するには、利用しているテーマファイルの functions.php に以下のコードを追加してあげればOKです。

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

アイキャッチ画像を設定した時点でサイズも変えたい場合は、以下のように記述します。後述しますが、サムネイル画像のサイズは挿入する時にも指定できますので、set_post_thumbnail_size は省略しても構いません。

add_theme_support( 'post-thumbnails', array( 'post' ) );
set_post_thumbnail_size( 100, 100, true );

set_post_thumbnail_size の第一引数で横幅、第二引数で縦幅を指定します。

第三引数では画像の縮小時に切り抜きするかどうかを指定します。切り抜きする場合はtrue、しない場合はfalseを指定し、省略した場合はfalseになります。

上記コードを追加してアイキャッチ画像が設定できるようになると、記事の編集画面にアイキャッチ画像の設定項目が出てきます。表示されない時は、表示オプションで「アイキャッチ画像」にチェックを入れてください。

後述するアイキャッチ画像を挿入するためのコードをテンプレート内に追記すれば、ここで設定した画像が表示されるようになります。

アイキャッチ画像を挿入する方法

アイキャッチ画像は機能を有効にしただけで記事内に表示されるわけではありません。アイキャッチ画像を挿入したい部分にアイキャッチ画像を取得するコードを追加する必要があります。

サイズ指定なしでアイキャッチ画像を表示

サイズ指定なしでアイキャッチ画像を表示させたい場合は、以下のコードを追加します。上述した set_post_thumbnail_size 関数でサイズを指定していた場合はそのサイズで、set_post_thumbnail_size 関数を記述していない場合はフルサイズの画像が挿入されます。

the_post_thumbnail();

メディアのサイズを指定してアイキャッチ画像を表示

[設定] – [メディア] で設定しているサイズを利用してアイキャッチ画像を表示させる場合は、以下のように記述します。

the_post_thumbnail('thumbnail'); //サムネイルのサイズ
the_post_thumbnail('medium'); //中サイズ
the_post_thumbnail('large'); //大サイズ
the_post_thumbnail('full'); //フルサイズ

例えば、[設定] – [メディア] でサムネイルを 100×100 ピクセルに設定していて、<?php the_post_thumbnail(‘thumbnail’); ?>をテンプレートに追加すれば、100×100 ピクセルに縮小して表示されます。

画像サイズを指定してアイキャッチ画像を表示

アイキャッチ画像に個別のサイズを指定したい場合は、以下のように記述します。

the_post_thumbnail( array(100,100) );

このように細かく画像サイズを指定することも可能です。

altとtitleに自動で記事のタイトルを入れる

altとtitleの値として、自動で記事のタイトルを入れる方法は以下の通りです。

$title = get_the_title();
the_post_thumbnail( 'thumbnail', array( 'alt' => $title, 'title' => $title) );

通常はアイキャッチ画像を設定する時に、”代替テキスト”に入れたテキストがaltとして出力されます。上記のように指定することで、自動で記事のタイトルがaltとtitleの値として出力されるので、いちいち入力する手間が省けて楽です。

クラスを指定する

アイキャッチ画像にクラスを指定するには以下のように記述します。

the_post_thumbnail( 'thumbnail', 'class=eyecatchimg' );

上記の場合、アイキャッチ画像に「eyecatchimg」というクラスが付与されます。

あとがき

当ブログでは、トップやカテゴリなどの一覧ページではアイキャッチ機能を活用していますが、個別記事では任意の場所に置きたいのでテンプレートには追加していません。

もし、記事の最初にアイキャッチ画像を置きたい場合は、single.php の the_content(); の前にコードを追加すればOKだと思います。

それからテーマファイル内にコードを追加する時は、以下のようにPHPの宣言を忘れないようにしましょう。

<?php the_post_thumbnail(); ?>

テーマファイル内に the_post_thumbnail(); とだけ記述しても、the_post_thumbnail(); とテキストで表示されてなんのこっちゃわからないってなっちゃいますので、ご注意ください。