[WordPress]アイキャッチ画像をトップページに表示させる

[WordPress]アイキャッチ画像をトップページに表示させる

以前、トップページを改善する
取り組みをやってたのですが、
見事に1つ手順が抜けてました。

ヾ(_ _*)ハンセイ・・・

これまで3段階で対応。

Step1. トップページの記事内容を省略
Step2. トップページの記事画像を整頓
Step3. Jetpackの画像を整頓

Step1とStep2の間に、
こちらが抜けてました。

トップページにアイキャッチ画像を表示

(o;ω;o)ウゥ

実はこれに気付いたのは、
テーマのバージョンが上がり、
コードがデグレしたからです。笑

自分が使用しているテーマ
「Twenty Seventeen」
バージョン1.5に上がりました。

また次のバージョンアップ時にも
自分自身が混乱しそうなので、
備忘録としてまとめておきます。

目次

WordPressカスタマイズ
〜アイキャッチ画像を
 トップページに表示する〜

1. 経緯:見にくい
2. やり方:画像設定
3. まとめ:改善された点



1. 経緯:見にくい

これはもはや説明不要かも。

ブログやサイトの顔とも呼べる
トップページが文字だらけだと
やっぱり見にくいですよね。

画像があった方が感覚的に
どんな記事かわかりますし、
何より訪問者様が使いやすい。

▲ TOPへ戻る

2. やり方:画像設定

テーマの一部を編集することで、
アイキャッチ画像を表示できます。

○対象ファイル
・content-excerpt.php

○ファイルパス
・template-parts/post/content-excerpt.php

<変更前>
<div class="entry-summary">
 <?php the_excerpt(); ?>
</div><!-- .entry-summary -->
<変更後>
<div class="entry-summary">

 <?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
  <a href="<?php the_permalink(); ?>">
  <span style=" float: left; margin-right: 1em;"><?php the_post_thumbnail('eyecatch') ; ?></span>
  </a>

 <?php endif; ?>

 <?php the_excerpt(); ?>
</div><!-- .entry-summary -->

<div class=”entry-summary”>と
<?php the_excerpt(); ?>の間に、
赤字のコードを追加すればOKです。

▲ TOPへ戻る

3. まとめ:改善された点

これでアイキャッチ画像が、
トップページの記事一覧で
表示されるようになりました。

文字の羅列で色気のなかった
トップページが少し華やかなり、
使いやすさもアップしたと思います。

○記事への移動(変更前)
・タイトルをクリック
・続きを読むをクリック

○記事への移動(変更後)
・タイトルをクリック
・続きを読むをクリック
・画像をクリック

個人的に続きを読むが
押しにくいと感じていたので、
この改善はかなり良かったです。

Step2でアイキャッチ画像を綺麗に
表示する方法もまとめております。

[WordPress]トップページの記事一覧の画像を綺麗に表示

自分用の備忘録ではありますが、
WordPressのトップページ改善で、
少しでもお役に立てれば幸いです。

▲ TOPへ戻る