抜粋記事表示（サムネイル入り）

抜粋記事を作成してリストアップし、各記事の横にサムネイル画像を入れる方法。

抜粋記事表示

子テーマを編集。

フロントページはindex.php、カテゴリー記事一覧はarchivephpを編集。

いずれも40－45行目あたり。

get_post_format() を ‘excerpt’ に書き換える。

変更前：

get_template_part( 'template-parts/post/content', get_post_format() );

変更後：

get_template_part( 'template-parts/post/content', 'excerpt' );

これでトップページを見みると、本文が抜粋（excerpt）されて…続きを読む が末尾に付いて記事が並ぶようになる。（画像なし。）

抜粋記事にアイキャッチ画像を表示

子テーマのcontent-excerpt.phpを編集。

</header><!-- .entry-header --> の下に下記コードを挿入。

<?php if ( '' !== get_the_post_thumbnail() && ! is_single() ) : ?>
<div class="post-thumbnail">
<a href="<?php the_permalink(); ?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>
<!-- .post-thumbnail -->
<?php endif; ?>

これだと画像が大きすぎるので、画像をサムネイル表示に変更。

<div class="post-thumbnail">
<a href="<?php the_permalink();?>">
<?php the_post_thumbnail( 'twentyseventeen-featured-image' ); ?>
</a>
</div>

の部分を下記に変更する。

<div class="entry-post-thumbnail">
<?php the_post_thumbnail('thumbnail'); ?>
</div>

これだと、抜粋記事がサムネイルの下に表示されてスペースがもったいないので、サムネイルの右側に文章が来るように変更。

外観→テーマエディター→付随のCSSエディター→追加CSSに下記をペースト。

div.entry-post-thumbnail {
float: left;
margin: 0 10px 10px 0;}

…完成。

References