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

いまやブログにおいてアイキャッチ画像は無くてはならない存在になりつつあります。

特にWordPressにおいては、基本的にアイキャッチ画像を設定することが出来るようになっているテーマがほとんどです。

しかし、その幾度となくどれにしようか選びに選んだアイキャッチ画像ですが多くの場合は記事内には表示されません。（テーマにもよります。）

そこで…。

スポンサーリンク

目次に戻る

テーマで自動的にアイキャッチ画像を記事内（記事直上など）の任意の位置に自動的に表示させる方法です。

2つの方法があるのですが、
基本的なテーマなどの場合には以下のコードを自分が記事内で出力させたい場所にコピー・アンド・ペーストでOKです。

以下のコードになります。

<!? ここからアイキャッチ画像 ?>
 <div class=“post-thumbnail”>
 <?php the_post_thumbnail(‘full’);?>
 </div>
 <!? ここまでアイキャッチ画像 ?>

このコードを例えば…。

single.php内の自分が表示させたい部分に貼り付けるだけで、自分が悩んで選びに選んだアイキャッチ画像を自動的に表示させることができます。

ただアイキャッチ画像はそのまま100%（full）の状態で出力されて表示されるので、

ちゃんと、
アイキャッチ画像の大きさを考えてのアイキャッチ画像設定をしていないとやたらと大きな画像になってしまいます。orz

次に、アイキャッチ画像にスタイルを適用させて大きさを調整させる方法です。

こちらも基本的には、
上記と同じなのですが、class指定でCSSによって大きさを任意に調整することが可能になります。

まずはsingle.php内に任意の場所に追記するコードです。

<!? ここからアイキャッチ画像 ?>
 <div align="center">
 <div class="st-eyecatch"><?php the_post_thumbnail('full'); ?>
 </div>
 </div>
 <!? ここまでアイキャッチ画像 ?>

ここで、class指定をst-eyecatchと設定しました。

なので、

style.CSSにも該当となるclassのcssを追記します。

今回の場合は以下のコードのようになります。

.st-eyecatch
 {
 margin: -20px -15px 15px;
 }

.st-eyecatch img
 {
 width:100%;
 background-color: #000;
 }

参考）

今回はStinger6のテーマを使わせていただいているのでst-eyecatchとしました。class指定のネーミングは他とかぶらなければ任意のclass名で大丈夫です。

pickup）

アンダーライン赤色の部分の数字を100%から自分のブログやデザインに合わせてパーセンテージを上げたり下げたりして調整してみてください。

最後に、

これまで、
アイキャッチ画像をせっかく悩んで選びに選んで設定してきたのに、記事を読んでくれる人にはそのアイキャッチ画像を見てもらえない…。

だから、2度手間をかけて投稿記事のはじめに自分でアイキャッチ画像と同じ画像を設定していた方々などはもう2度手間をかける必要はありません。

せっかくのアイキャッチ画像です。

是非、是非、試してみてください！(^-^)！