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

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

ヾ(_ _*)ﾊﾝｾｲ･･･

これまで3段階で対応。

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

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

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

(o；ω；o)ウゥ

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

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

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

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へ戻る