WordPressのトップページに記事一覧を表示する方法

f:id:aquarius999:20210616015356j:plain

WordPressの初期設定では、トップページは常に最新記事が表示されます。

記事数が増えてくると、トップページには、最新記事ではなく、

記事一覧を表示して他のページも見てもらいたいと思うようになりました。

WordPressの設定から固定ページをトップページに設定して、

固定ページにPHPコードをインクルードさせるという方法があります。

最初、私はこれでやっていましたが、

そもそもWordPressのファイルを読み込む優先順位を理解できていれば、

こんなことをしなくても良いことがわかりました。

そのやり方を書いていきたいと思います。

前提として、子テーマを作成しておく方が良いです。

何故かというと、直接、親テーマにカスタマイズを行った場合、

WordPressのアップデートで親テーマもアップデートされてしまうと、

修正した内容が上書きされてしまい、同じ修正を再度しなければならなくなります。

話を戻しまして、WordPressは、ファイル名によって処理する順序があり、

子テーマに「home.php」というファイルがあると、

最新記事を表示するよりも優先的にこのファイルを処理します。

これを利用してトップページを記事一覧表示にしていきます。

子テーマにhome.phpファイルを作成する
home.phpのベースとするindex.phpの解説
home.phpの作成
home.phpをトップページにするためのWordPress設定
最後に

１．子テーマにhome.phpファイルを作成する

子テーマフォルダ内に新規で「home.php」ファイルを作成します。

「home.php」は、親テーマの「index.php」ファイルをベースにしますので、

「index.php」ファイルをコピーして、ファイル名を変えても良いですし、

「home.php」を開いて「index.php」の中身をコピペしても、どちらでも構いません。

後で大幅に修正します。

２．home.phpのベースとするindex.phpの解説

まず、「home.php」のベースとなる「index.php」の処理について解説していきます。

ここで理解しておくと、後々自由に「home.php」を作成できカスタマイズできるようになります。

f:id:aquarius999:20180905231108p:plain

➀～⑤の処理について順に説明していきます。

①の処理

<?php
get_header(); ?>

この処理は、ヘッダー部を表示するために必要なので、「home.php」に記述します。

②の処理

<?php if ( is_home() && ! is_front_page() ) : ?>
　<header class="page-header">
　　<h1 class="page-title"><?php single_post_title(); ?></h1>
　</header>
<?php else : ?> <header class="page-header">
　<h2 class="page-title"><?php _e( 'Posts', 'twentyseventeen' ); ?></h2>
</header>
<?php endif; ?>

この処理は、記事タイトルを表示する処理で、今回作成する「home.php」には記述しません。

③の処理

/* Start the Loop */
while ( have_posts() ) : the_post();
/* * Include the Post-Format-specific template for the content.
   * If you want to override this in a child theme, then include a file
   * called content-___.php (where ___ is the Post Format name) and that will be used instead.
   */ 
   get_template_part( 'template-parts/post/content', get_post_format() ); 
endwhile;

この処理がWordPressループです。今回作成する「home.php」に記述して、

このループ内に全記事を一覧にしていく処理を書いていきます。

get_template_part()は、今回使いません。

④の処理

the_posts_pagination( array( 
　　'prev_text' => twentyseventeen_get_svg( array( 'icon' => 'arrow-left' ) ) . '<span class="screen-reader-text">' . __( 'Previous page', 'twentyseventeen' ) . '</span>',
　　'next_text' => '<span class="screen-reader-text">' . __( 'Next page', 'twentyseventeen' ) . '</span>' . twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ),
　　'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'twentyseventeen' ) . ' </span>',
) );

４の処理は、ページネーションの処理で必要なのですが、

表示を自分でカスタマイズしたいので、処理を変更します。

その詳細は、この記事を参照してください。

WordPressのモバイルでのページネーションの表示がうまくいかない件