どうも、サブロー(@saburo_design)です。

ワードプレスで記事の最初にアイキャッチ画像を自動で表示する方法です。設置もコピペだけで簡単に出来ます。毎記事imgタグでアイキャッチ画像を設置している方はこの方法で手間を省きましょう。

※テーマによってはデフォルトでこの機能が付いているものもあります。

記事のテンプレートファイルにコードをコピペする。

【ダッシュボード】⇒【外観】⇒【テーマの編集】⇒からsingle.phpを開きます。(※使用しているテーマによって場所やファイル名が違う場合があります。)アイキャッチ画像を表示したいところに下記のコードをコピペするだけで完了です。

記事の最初に表示したいなら、

<?php the_content(); ?> ←記事本文のコード

の前にコピペすればいけます。

アイキャッチ画像のサイズを制限する

上記のコードだとアイキャッチ画像が原寸(full)サイズで出力されます。出力するアイチャッチ画像の最大サイズを制限するには、『full』と書かれた部分を変更します。下記の例は横幅1000px高さ525pxの画像をアイチャッチに設定している場合です

最大値640pxのアイチャッチ画像を表示

sudakhfsdfa_01

最大値300pxのアイチャッチ画像を表示

sudakhfsdfa_01

150x150pxの正方形アイチャッチ画像を表示

sudakhfsdfa_01

上記のコードで、不必要に大きな画像を出力してしまうのを防ぎます。当サイトでもアイキャッチ画像を記事の先頭に表示させていますがなるべく早くサイトを表示させる為に『large(最大値640px)』サイズの画像を出力しています。

アイチャッチ画像が設定されていない場合、代替画像を表示する

上記のコードだとアイキャッチ画像が設定されていない場合、何も出力されないのですが『それならそれで代替の画像を表示したい』というケースもあると思います。その場合、

これでアイキャッチ画像を設定していない時に、代替の画像を表示させることができます。

まとめ

いかがでしたでしょうか?このコードは記事だけでなく、固定ページにも使えますし、記事一覧のサムネイルにも使えます。私もどのサイトを作るにしてもほぼ必ず使っているコードです。皆さんもぜひ試してみてください。