WordPressのTwenty Seventeenカスタマイズ（トップページの抜粋表示続きとアイキャッチ画像）

以前書いた、「WordPressのトップページとアーカイブページを抜粋表示にする（Twenty Seventeen）」の続きとアイキャッチ画像についてです。

1. 抜粋の文字数を変更したい

抜粋の文字数を変更するには、「functions.php」に以下の記述を追加します。（もちろん、子テーマ側のfunctions.phpにです。）

function my_excerpt_length($length) {
    return 100;
}
add_filter('excerpt_length', 'my_excerpt_length');

「return 100;」の部分を任意の数字に変えることで、抜粋の文字数を変更することができます。

2. トップページの一覧にアイキャッチ画像を表示したい

抜粋表示したことで、トップページのテンプレートは以下のファイルとなっています。

twentyseventeen-child > template-parts > post > content-excerpt.php

この「content-excerpt.php」内の、アイキャッチ画像を表示させたい部分に、以下のコードを埋め込みます。

<?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; ?>

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

3. 個別投稿ページのアイキャッチ画像の位置と大きさ変更

Twenty Seventeenの個別投稿ページは、デフォルトではタイトルの上にでかでかと表示されるようになっています。正直かっこ悪いです。。。

なので、アイキャッチ画像が表示される部分を変更しました。

具体的には、

twentyseventeen-child > template-parts > post > content.php

の<header>直前にある以下のコードを</header>の直後に挿入しました。

<?php
  // If a regular post or page, and not the front page, show the featured image.
  if ( has_post_thumbnail() && ( is_single() || ( is_page() && ! twentyseventeen_is_frontpage() ) ) ) :
    echo '<div class='single-featured-image-header'>';
    the_post_thumbnail( 'twentyseventeen-featured-image' );
    echo '</div><!-- .single-featured-image-header -->';
  endif;
?>

これで記事がだいぶすっきり^ ^