どうも佐々木です。
ブログ開始と同時に無料テンプレート「STINGER」を使い始めた僕ですが、当初から気になっていたのが「ブログトップ（記事）のアイキャッチ画像が表示されない」という問題です。
サイトトップのヘッダー画像ではなくて、記事のアイキャッチ画像です。
投稿画面ではアイキャッチ画像の設定はできて、記事一覧のサムネイル画像も表示されているのにアイキャッチ画像だけが表示されない仕様になっているのですよね^^;
まだまだ読まれることのない仙台カフェですが、できることは今のうちにやっておこうということで簡単にアイキャッチ画像を設定する方法を調べてまとめてみました。
今回の内容
アイキャッチ画像を表示できるプラグイン
「アイキャッチ画像 プラグイン」を検索するとサムネイル画像を自動設定するプラグイン「Auto Post Thumbnail」についての記事が大量に表示されるのですが、今回はサムネイル表示じゃなくてアイキャッチ画像表示の方法について調べているので「違う〜〜！」ということで他にも色々プラグイン検索してみることに。。。
その結果、僕の検索力不足もあってプラグインなるものを見つけることができませんでした。
投稿の編集画面でアイキャッチは有効化されているので、記事ページ（Post）にアイキャッチ画像が表示されるようにカスタマイズをしないといけないようですね。
単一記事ページ（Single.php）にコードを追加で解決
記事ページにアイキャッチ画像を反映させるためには単一記事ページにアイキャッチ画像を表示するためのコードを書き加えることで問題を解決できるようです。
僕のようにコードが分からないド素人でも簡単に実装するための方法がわかりやすく解説されているサイトを見つけることができたので紹介♪
参考にしたサイトがこちらです。
[blogcard url=”http://webnonotes.com/wordpress/eyecatch/”][/blogcard]
以下はSTINGERでの対象法の解説です。
本記事の関連記事
以上の記事でソースコードを綺麗に表示できるようになったので、ちょっとしたカスタマイズ記事も公開できるようになりました。
今回のアイキャッチ画像を表示するためにも、コードを表示したかったのでこれで僕のやりたいことがまた１つできるようになりました♪
STINGERで作成したサイトにアイキャッチ画像を表示する方法
まずは、前述したweb’notesさんに公開されている以下のコードをコピーしましょう。
<?php the_post_thumbnail('full'); ?>
僕のサイトでは”full”となっていますが、ここは表示するアイキャッチ画像のサイズをお好みで変更してください。
| full | フルサイズ |
| large | 大サイズ |
| small | 小サイズ |
| thumbnail | サムネイル |
仙台カフェと同じようなアイキャッチ画像の表示なら、そのまま”full”をご使用ください。
テーマの編集とコードの追記方法
ワードプレスの管理画面の「外観」→「テーマの編集」と進みます。
僕のように子テーマを使用している方は「STINGER○」の親テーマをクリックしましょう。
右サイドの中ほどにある「単一記事の投稿（single.php）」をクリックします。
<?php the_content(); //本文 ?>
の前にコードを貼り付け。
今回はsingle.phpファイルの中ほどにある本文の前にコピペで貼り付けましたが、お好みの場所に貼り付けることで以下のようにアイキャッチ画像を記事ページに反映させることができます。
ソーシャルブックマークの表示位置も同じ手順
SNSボタンの位置も仙台カフェのように記事上と記事下に表示したい方は以下の記事を参考にしてください。
おわりに
いかがでしたか？
今回は単純なコピペ作業で簡単にSTINGERをカスタマイズすることができたのではないでしょうか？
アイキャッチ画像は記事を引き立たせたり、文章を読むためのきっかけ作りとしても効果的です。画像があるだけでブログやサイトが華やかになりガラッと印象も変わるものです。
ぜひ、あなたもアイキャッチ画像を設定してみてくださいね♪
コメントを残す