共働きで消耗した家族が生き方を見直してます。

もう、共働きやめます。

WordPress

アイキャッチ画像を記事内に表示させる方法を紹介します。

更新日:

どうも。働かない夫です。

アイキャッチ画像はとっても便利です。記事を一覧表示させた時にタイトルと画像を見ただけで「この記事面白そうだな!」と見たくなりますから。イメージは大切。

当ブログはWordPressを使用しており、無料のテーマ「Stinger3」を使用しています。ダウンロードをした初期設定の状態だと、記事本分にアイキャッチ画像が入っていません。

一覧に載っているのに記事に表示されていないのは伝えたいメッセージも半減してしまいます。より効果的にコンテンツを伝えるためにアイキャッチ画像の表示のさせ方を紹介します。

アイキャッチ画像を記事内に入れる

アイキャッチ画像を記事本分の冒頭に毎回入れておく事もできますが、面倒です。やめておきたいところです。

そうなるとブログのソースコードをカスタマイズの必要が出てきます。

カスタマイズする前にバックアップをとっておきましょう。

ブログをカスタマイズしていく前に【 BackWPup】でバックアップを取ります。

アイキャッチ画像を表示させる為のコード変更

ホーム>外観>テーマの編集>single.php内のコードを置き換える。

「<?php the_content(); //本文 ?>」を以下の通り置換してください。

<!-- ここからアイキャッチ画像 -->
<div class="post-thumbnail">
  <?php the_post_thumbnail('full');?>
</div>
<!-- ここまでアイキャッチ画像 -->
<!-- ここから著作権クレジット -->
<div class="post-thumbnail-credit">
  <?php echo get_post( get_post_thumbnail_id() )->post_excerpt;?>
</div>
<!-- ここまで著作権クレジット -->
<!-- ここから抜粋文 -->
<div class="post-excerpt clearfix">
  <?php if (has_excerpt()){ the_excerpt();}?>
</div>
<!-- ここまで抜粋文 -->
<?php the_content(); //本文 ?>

これだけで以下のような状態になります。

記事内にアイキャッチ画像を入れる方法

まとめ

アイキャッチ画像を表示させるだけでかなり印象も変わってくるのではないでしょうか。この設定をすることによってアイキャッチ画像が記事の第一印象になりますよね。記載されてある内容とアイキャッチ画像を記事のイメージに沿う物を用意すると内容が伝わりやすくなります。

最後にAZuSkさんの記事を参考にカスタマイズしました。ありがとうございました!

もっと詳しい内容はこちらから!

wordpressのテーマstinger5の記事冒頭にアイキャッチ画像を表示する為の改造

  • この記事を書いた人
ハタオト

ハタオト

職業:専業主夫。サイト作って、静かに生活しています。このブログは好き勝手書いています。

-WordPress
-

Copyright© もう、共働きやめます。 , 2018 All Rights Reserved Powered by AFFINGER5.