サムネイル画像ではなくアイキャッチ画像をブログトップに表示したい!

IMG_3461
スポンサーリンク

どうも佐々木です。

ブログ開始と同時に無料テンプレート「STINGER」を使い始めた僕ですが、当初から気になっていたのが「ブログトップ(記事)のアイキャッチ画像が表示されない」という問題です。

サイトトップのヘッダー画像ではなくて、記事のアイキャッチ画像です。

投稿画面ではアイキャッチ画像の設定はできて、記事一覧のサムネイル画像も表示されているのにアイキャッチ画像だけが表示されない仕様になっているのですよね^^;

まだまだ読まれることのない仙台カフェですが、できることは今のうちにやっておこうということで簡単にアイキャッチ画像を設定する方法を調べてまとめてみました。

アイキャッチ画像を表示できるプラグイン

「アイキャッチ画像 プラグイン」を検索するとサムネイル画像を自動設定するプラグイン「Auto Post Thumbnail」についての記事が大量に表示されるのですが、今回はサムネイル表示じゃなくてアイキャッチ画像表示の方法について調べているので「違う〜〜!」ということで他にも色々プラグイン検索してみることに。。。

 

その結果、僕の検索力不足もあってプラグインなるものを見つけることができませんでした。

 

投稿の編集画面でアイキャッチは有効化されているので、記事ページ(Post)にアイキャッチ画像が表示されるようにカスタマイズをしないといけないようですね。

 

単一記事ページ(Single.php)にコードを追加で解決

ec0

記事ページにアイキャッチ画像を反映させるためには単一記事ページにアイキャッチ画像を表示するためのコードを書き加えることで問題を解決できるようです。

僕のようにコードが分からないド素人でも簡単に実装するための方法がわかりやすく解説されているサイトを見つけることができたので紹介♪

 

参考にしたサイトがこちらです。

[blogcard url=”http://webnonotes.com/wordpress/eyecatch/”][/blogcard]

 

以下はSTINGERでの対象法の解説です。

 

本記事の関連記事

【WPプラグイン】ソースコード埋め込みテーブルの表示方法

プラグイン不要でソースコードを綺麗でシンプルに表示する方法

CSS/htmlソースコード表示プラグインでサイトが綺麗に!「highlight.js」の設定方法とカスタマイズコード

以上の記事でソースコードを綺麗に表示できるようになったので、ちょっとしたカスタマイズ記事も公開できるようになりました。

今回のアイキャッチ画像を表示するためにも、コードを表示したかったのでこれで僕のやりたいことがまた1つできるようになりました♪

 

STINGERで作成したサイトにアイキャッチ画像を表示する方法

まずは、前述したweb’notesさんに公開されている以下のコードをコピーしましょう。

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

僕のサイトでは”full”となっていますが、ここは表示するアイキャッチ画像のサイズをお好みで変更してください。

full フルサイズ
large 大サイズ
small 小サイズ
thumbnail サムネイル

仙台カフェと同じようなアイキャッチ画像の表示なら、そのまま”full”をご使用ください。

 

テーマの編集とコードの追記方法

ec1

ワードプレスの管理画面の「外観」→「テーマの編集」と進みます。

ec2

僕のように子テーマを使用している方は「STINGER○」の親テーマをクリックしましょう。

ec3

右サイドの中ほどにある「単一記事の投稿(single.php)」をクリックします。

ec5
<?php the_content(); //本文 ?>

の前にコードを貼り付け。

 

今回はsingle.phpファイルの中ほどにある本文の前にコピペで貼り付けましたが、お好みの場所に貼り付けることで以下のようにアイキャッチ画像を記事ページに反映させることができます。

ec4

ソーシャルブックマークの表示位置も同じ手順

SNSボタンの位置も仙台カフェのように記事上と記事下に表示したい方は以下の記事を参考にしてください。

 

 

おわりに

いかがでしたか?

今回は単純なコピペ作業で簡単にSTINGERをカスタマイズすることができたのではないでしょうか?

アイキャッチ画像は記事を引き立たせたり、文章を読むためのきっかけ作りとしても効果的です。画像があるだけでブログやサイトが華やかになりガラッと印象も変わるものです。

ぜひ、あなたもアイキャッチ画像を設定してみてくださいね♪

 

IMG_3461

コメントを残す

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