水瓶座列車

どこまで行けるか、とりあえず発車します。

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

f:id:aquarius999:20210616015356j:plain


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

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

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

 

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

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

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

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

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

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

 

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

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

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

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

 

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

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

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

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

 

 

 

 

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

 

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

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

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

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

後で大幅に修正します。

 

  2.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>',
) );

 

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

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

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

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

 

⑤の処理

<?php get_footer();

 

5の処理は、フッターを表示する処理なので、「home.php」に記述します。

 

  3.home.phpの作成

 

「home.php」ファイルは、子テーマフォルダ内に作成しておきます。

記事一覧する処理として、まずは記事タイトル、記事のサマリーを表示するのみにします。

「home.php」の前半部分です。 

f:id:aquarius999:20180906224141p:plain

 

⑥の処理では、WP_Queryを使用して、1ページに表示する記事一覧の数を決めています。引数のposts_per_pageに設定している値がその数になります。

WP_Queryの使い方は、WordPress Codexのサイトを参考にしてください。

そして、WordPressループで記事を回しながら、⑦の処理で記事タイトルとサマリーを表示していきます。

サマリー表示は、the_excerpt()を使用してます。

 

f:id:aquarius999:20180906224446p:plain

⑧のページネーションの処理の詳細は、この記事を参考にしてください。

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

モバイル表示をCSS設定で自分でしています。

 

  4.home.phpをトップページにするためのWordPress設定

 

f:id:aquarius999:20180906225933p:plain

 

WordPressの設定は、「設定」ー>「表示設定」で、

 ・「ホームページの表示」は、最新の投稿にチェック

 ・「1ページに投稿する最大投稿数」は、1件

に設定しておいてください。

 

  5.最後に

 

はてなブログでは、Proにならないとできないトップページの記事一覧表示も

WordPressなら自分で作ることができ、CSSデザインも自由にできます。

今回は、記事一覧の基本構成を説明しましたが、記事一覧の項目に記事中の画像を表示などを⑦の処理に追加することで、自分なりにデザインすることができます。

是非トライしてみてください。

 

 

<関連・おすすめ記事> 

WordPressに必要なレンタルサーバーのおすすめランキング - 水瓶座列車

WordPressループの書き方の解説 - 水瓶座列車

WordPressのモバイルでのページネーションの表示方法 - 水瓶座列車

WordPressの子テーマの作り方を解説 - 水瓶座列車

WordPressのデフォルトテーマをベースにした自作テーマの作成手順 - 水瓶座列車

サーバー上のWordPressデータをローカル環境にインポートする手順 - 水瓶座列車

WordPressでモバイル対応のためのCSS作成方法の解説 - 水瓶座列車