フロントページにサムネイル付き抜粋記事一覧を表示 Twenty Seventeen

固定ぺージではプラグインを使ってカテゴリー別記事一覧を作りましたが、フロントページやアーカイブページでもサムネイル付き抜粋記事一覧を表示させたいですね。WordPress には、標準で抜粋記事一覧表示が設定できますが、サムネイル画像がないのでアレンジが必要です。このブログのフロントページは LIONBLOG（参考：ブログテーマをライオンメディア・１カラムに変更）で表示しています。以下は WordPress テーマ Twenty Seventeen の変更です。

子テーマの作成

参考サイト： WordPressにおける子テーマの作り方

他のサイトを見ていると、「子テーマに追加します」という言葉が良く出てきます。どういう意味か分からなかったのですが、今回初めて分かりました。

トップ画像のように、wordpress 内にあるテーマと横並びに新しいテーマTwenty Seventeen Child ができます。この子テーマの中にはfunctions.php と style.css があれば動くみたいで、他の php ファイルは元の Twenty Seventeen から読み込まれます。便利ですね！

早速サーバーにアクセスし、サイトを参考にして作ってみました。

まず最初に左のフォルダーを作っていきます。フォルダーを作りたい場所の空白部分を右クリックして新しいフォルダを作り、〇〇-child という名前にします。それからそのフォルダー内に、右クリックで ファイルを作り、名前を style.css と functions.php にします。他のファイルは元のファイルを右クリックして child に複製しました。

スタイルCSSは最上部に以下を書き込むだけです。

/*
 Theme Name: Twenty Sventeen Child
 Template: twentyseventeen
*/

ファンクションPHPも同じように以下を書き込みします。親テーマ Twenty Seventeen のテンプレートを引き継ぐためです。

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
 wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}

?>

この時点でダッシュボード／外観／テーマを開くと新しい子テーマが出来ていますから有効にすれば自分の専用テーマができます。

今回は一発で成功しました。サイトさんに感謝です。

サムネイル一覧表示

参考サイト： トップページの表示をサムネイル画像付き一覧表示にする備忘録

上記サイトを参考に　index.php　archive.php　search.php　の「get_post_format()」を「’excerpt’」に変更します。

あとは以下を content-excerpt.php の <div class=”entry-summary”> と <?php the_excerpt(); ?> の間に入れます。

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

<?php endif; ?>

これでサムネイル一覧が出来ました。

続きを読む の位置を抜粋文の後に

私の場合なぜか抜粋記事の間隔が広いので、抜粋文のすぐ後に持っていきます。ファンクションPHPに以下を追加します。

function new_excerpt_more($more) {
 return ' ... <a class="more" href="'. get_permalink() . '">
 <span style="color:#0000ff;">続きを読む</span></a>';
}
 add_filter('excerpt_more', 'new_excerpt_more');

サムネイル画像の大きさを調整

サムネイル画像のデフォルトのサイズは150x150Pxになっています。大きさを自由に調整するために、新たなサイズを作ります。

先ほど content-excerpt.php 追加した赤字の ‘twentyseventeen-featured-image’ を ‘eyecatch’ に変更します。

それからファンクションPHPに以下を追加します。数字は自由に変更してください。

add_image_size( 'eyecatch', 320, 180, true );

以上でサムネイル付き抜粋記事一覧は表示できますが、記事の作成年月日の位置が離れていて、今ひとつしっくりきませんが、ここまでとします。

追記　2018.3.8

twentyseventeenの子テーマをプレビューしてみました。この形が出来て間もなくLIONBLOG に変更したため、表示していた期間は短いです。抜粋の長さと「続きを読む」の位置が異なりますが現在の BLOG とほとんど同じです。

抜粋記事一覧をプラグインを使って作る方法は「固定トップページにサムネイル付き投稿記事一覧を作ろう」を参考にしてください。列の数もいろいろ設定できます。