Webデザイナーとして活動しているサブローのブログです。
2016 6 23

WordPressでアイキャッチ画像を記事の最初に自動で表示する方法

この記事は3分ほどで読めます
この記事をSNSでシェアする方はこちら

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

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

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

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

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

<?php the_post_thumbnail('full'); ?>

記事の最初に表示したいなら、php the_content();の前にコピペすればいけます。

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

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

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

<?php the_post_thumbnail('large'); ?>

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

<?php the_post_thumbnail('medium'); ?>

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

<?php the_post_thumbnail('thumbnail'); ?>

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

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

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

<?php if(has_post_thumbnail()) { ?>
<?php the_post_thumbnail('full'); ?> // アイキャッチ画像が設定されている場合に出力
<?php } else { ?>
<img src="代替画像のURL" /> // アイキャッチ画像が設定されていない場合に出力する代替画像
<?php } ?>

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

まとめ

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

この記事をSNSでシェアする方はこちら

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Profile

Web・グラフィックデザイナー
Webデザイナーやってます。WordPressの技術録やプラグインの紹介、ブログを運営して分かったことからプライベートな事まで、興味ある事・気になる事を色々書いて行こうと思います。ツイッターとかインスタグラムもやってますのでよければフォローしてください。
PAGETOP
Copyright © SABURO DESIGN All Rights Reserved.