アイキャッチ画像を記事の先頭に自動で表示させる簡単な方法！

記事の先頭に画像があると、見栄えが良さそうだなと思います。

しかし、アイキャッチ画像を用意するのも面倒なのに、さらにもう一枚となると結構な手間になりそうなので考えてしまいます。。。

アイキャッチ画像・・・そう記事一覧のサムネイルです。

記事の掴みようの画像なので、トップ画像としても適しています。これを併用すればいい訳ですよ！

直接記事の先頭に貼り付けても良いのですが、自動で貼り付けてくれる方法があるので楽しましょうｗ

その方法は非常に簡単。設定したアイキャッチ画像は、記事一覧のサムネイル以外に、新着記事や関連記事にも表示されているので、同じ方法を使って記事本文の先頭に挿入するだけです。

サムネイルを本文先頭に自動で表示させる手順

単一記事に関するコードはsingle.phpに記述されています。親テーマを直接編集するより子テーマを編集した方が、後々良いのでそうします。詳しくは、WordPressのテーマをカスタマイズするなら、まず子テーマを作ろう！を参考にしてください。

1. single.phpの子テーマを作成する。
2. 子テーマのsingle.phpに親テーマのsingle.phpの内容を全てコピーする。
3. 子テーマのsingle.php内に<?php the_post_thumbnail();  ?>を挿入する。

</div> 
   <?php the_post_thumbnail(array(640,480)); ?>　//アイキャッチ
   &nbsp;
   <?php the_content(); //本文 ?>

解説

the_post_thumbnail();はアイキャッチに設定した画像を表示するための関数です。()内の引数は、’thumbnail’・’medium’・’large’・’full’（シングルクォーテーションで囲む）、もしくは幅と高さをピクセル単位で指定した配列になります。

例では、array(640,480)としていますが、この場合、画像の幅が650pxかつ高さが320pxを超えない範囲いっぱいに表示します。アイキャッチ画像が一覧用の大きさに合わせている様な場合は、’full’でいいでしょう。

画像に枠を付けている場合は、記事ブロックの幅より少し小さくします。また、高さが長過ぎると鬱陶しくなるので、小さめにした方が良さそうです。

&nbsp;は画像と本文との間隔を空けるために追加したものです。

本文を画像の右に回りこませる

画像を小さ目サイズにして、横のスペースに本文を表示したい場合の方法です。

single.php

<div id="topimg">
   <?php the_post_thumbnail(array(650,320)); ?>　//アイキャッチ
</div>
<?php the_content(); //本文 ?>

style.css

#topimg {
   float:left;
   margin-right:10px;
   margin-bottom:10px;
}

 画像表示部分を<div>で囲って、CSSでfloatを使って回り込ませ、右と下に余白を取っています。

まとめ

サムネイル作りは凝り出すと時間もかかって面倒ですが、読者の目を引かせる重要な要素なので頑張って作りましょう。

でも良い画像が思いつかない時は、適当でもいいよねｗ