BLOG

ワードプレスのトップページに記事一覧を表示する実装方法

ワードプレスのテーマを自作するときに、意外と悩むのが「記事一覧」です。慣れていると何でもないのですが、一番最初にどう取得したら良いのか悩ましいところであります。

今回は「トップページの一覧を取得する方法」をメインにお話していきたいと思います。

ポイント

  • ワードプレスのトップページは通常「front-page.php」を編集する

  • トップページの記事一覧を表示させたい場合「メインループ」と「サブループ」の場合がある

  • メインループ/サブループの制御は管理ページ設定ページから行う

ワードプレスのトップページの編集

ワードプレスでトップページで表示させるには、基本的には「front-page.php」を編集しますが、テーマの構造や設計によって異なることもあります。

ワードプレスのコーデックスページ、テンプレート階層で詳細が確認することができます。

トップページで記事一覧を取得するには「メインループ」か「サブループ」か設定によって変わる

トップページで記事一覧を「メインループ」として扱うには条件があるので注意が必要です。

メインループは「記事ページ」「固定ページ」など詳細ページの場合は、現在の記事がメインループとなります。

また、カテゴリーやタグなどの場合には、「アーカイブ(一覧ページ)」と扱われます。
どちらに該当しているかで「メインループで一覧を表示させるか」、「サブループて一覧を表示させるか」が決まります。

ワードプレスのトップページがメインループで表示(取得)できるときの条件

トップページの一覧がメインループのときには、上でお話したように一覧ページである必要があります。
一覧ページに設定をするには管理ページの「設定>表示設定」から設定します。

設定画面で「最新の投稿」に設定する必要があります。

下記のコードは、ワードプレスでメインループを取得する基本形のPHPです。ワードプレスコーデックスサイトの「ループ」に記載されています。

<?php 
if ( have_posts() ) {
	while ( have_posts() ) {
		the_post(); 
		//
		// 投稿がここに表示される
		//
	} // end while
} // end if
?>

構文が長くなる場合にはお好みで下記のお用に記述しても良いです。「IF」や「WHILE」の使い方はお好みで記述しても構いません。

<?php
//
if ( have_posts() ) :
  while ( have_posts() ) : the_post(); 

		//
		// 投稿がここに表示される
		//

  endwhile; // end while
endif; // end if
?>

ワードプレスのトップページがサブループで表示(取得)できるときの条件

サブループとして扱われる条件は固定ページが設定されていることが条件になります。

サブループの記述方法、パラメータについてはワードプレスコーデックスの「WP_Query」に記載されています。

<?php

$args = array(
  'numberposts'  => 5,  //表示(取得)する記事の数
  'post_type'  => 'post'
);

//変数RESET
$customPosts = array();

if(get_posts($args)) : //記事が1件以上あった場合
  $customPosts = get_posts($args);
  foreach($customPosts as $post): setup_postdata( $post );
   
		//
		// 投稿がここに表示される
		//
     
  endforeach;
endif;//END
wp_reset_postdata(); //サブループの場合は必ずRESETする
?>

記事一覧を作成する

記事一覧を作成するには、前の項目で紹介したように、「while」や「foreach」を使ってループを組みます。

この項目では、ループの中身について紹介したいと思います。

HTMLコーディングをテンプレート内に記述

まずは基本形のHTMLをコーディングします。下のようにループが始まる位置と終わる位置をコメントアウトしておくと良いでしょう。

    <div class="index_news_list_wrap">
      <h2 class="content_heddingLine">NEWS</h2>
      
      <!-- ここから記事のループ -->
      <div id="topic-list" class="news_list">
        <article class="news-item">
          <a href="#">
            <p class="date"><span class="entry-date updated">2020.10.13</span></p>
            <p class="category">トピックス</p>
            <p class="title"><span>デモページ作成しました。</span></p>
          </a>
        </article>
      </div><!-- /.news_list -->
      <!-- END ここまで記事のループ -->
      
    </div><!-- /.index_news_list_wrap -->

ループを作成(外側)

今回は固定ページで作成した前提で、コードを作成します。まずはループの外側をサブループで作成します。サブループを作成の時は、IF文の有り無し判定をした後に、あった場合はwrapなどの外側の要素を記述します。

<?php
//サブループ開始
$args = array(
  'numberposts'  => 5,  //表示(取得)する記事の数
  'post_type'  => 'post'
);

//変数RESET
$customPosts = array();

if(get_posts($args)) : //記事が1件以上あった場合
?>
    <div class="index_news_list_wrap">
      <h2 class="content_heddingLine"><?php echo esc_html('NEWS');//テキストをエスケープ処理 ?></h2>
      <!-- ここから記事のループ -->
<?php
  $customPosts = get_posts($args);
  foreach($customPosts as $post): setup_postdata( $post );
   
		//
		// ループの中身
		//
     
  endforeach;
?>
      <!-- END ここまで記事のループ -->
    </div><!-- /.index_news_list_wrap --> 
<?php 
endif;//END
wp_reset_postdata(); //サブループの場合は必ずRESETする
?>

ループの中身作成

上でループの外側を作成したので、次に内側を作成致します。ループ内では「記事名」「記事リンク先URL」「公開日」「カテゴリー(リンク無し)」を取得または表示をします。
ループ内で変数を使う場合は、必ずRESET処理を入れるようにしよう

<?php
//ループの中身を作成
//カテゴリー取得に必要な変数をRESET
     $post_id = '';
     $post_in_terms = array();
     $term          = array();
     $post_cat_list = array();
     $post_category = '';
     
     //get
     $post_id       = get_the_ID();//記事IDを取得する
     $post_in_terms = get_the_category( $post_id );//記事IDからカテゴリーを配列で取得する
     
     if(!empty($post_in_terms))://カテゴリーが1件以上あったときの処理
     
      foreach($post_in_terms as $term)://カテゴリーは配列関数なのでforeachを使う
        $post_cat_list[] = esc_html($term -> name);//category名を取得して配列に格納する
      endforeach;
      
      if(!empty($post_cat_list))://カテゴリー名をカンマ区切りで変数にする
        $post_category = implode(',', $post_cat_list );//配列データを連結させる
      endif;
      
     endif;//END カテゴリ
?>
        <article class="news-item">
          <a href="<?php the_permalink(); ?>">
            <p class="date"><span class="entry-date updated"><?php the_date( 'Y.m.d' ); ?></span></p>
            <p class="category"><?php echo $post_category; ?></p>
            <p class="title"><span><?php the_title() ?></span></p>
          </a>
        </article>

ループの外側と内側を結合

記事のループ内とループの外側が用意できたので、PHPコードを結合します。下のようにできていれば正しく表示ができると思いますので、テンプレートファイル(front-page.php)をサーバーにアップして確認すると結果が表示されます。

<?php
//サブループ開始
$args = array(
  'numberposts'  => 5,  //表示(取得)する記事の数
  'post_type'  => 'post'
);

//変数RESET
$customPosts = array();

if(get_posts($args)) : //記事が1件以上あった場合
?>
    <div class="index_news_list_wrap">
      <h2 class="content_heddingLine"><?php echo esc_html('NEWS');//テキストをエスケープ処理 ?></h2>
      <!-- ここから記事のループ -->
<?php
  $customPosts = get_posts($args);
  foreach($customPosts as $post): setup_postdata( $post );

     $post_id = '';
     $post_in_terms = array();
     $term          = array();
     $post_cat_list = array();
     $post_category = '';
     
     //get
     $post_id       = get_the_ID();//記事IDを取得する
     $post_in_terms = get_the_category( $post_id );//記事IDからカテゴリーを配列で取得する
     
     if(!empty($post_in_terms))://カテゴリーが1件以上あったときの処理
     
      foreach($post_in_terms as $term)://カテゴリーは配列関数なのでforeachを使う
        $post_cat_list[] = esc_html($term -> name);//category名を取得して配列に格納する
      endforeach;
      
      if(!empty($post_cat_list))://カテゴリー名をカンマ区切りで変数にする
        $post_category = implode(',', $post_cat_list );//配列データを連結させる
      endif;
      
     endif;//END カテゴリ
      
      //html出力
?>
        <article class="news-item">
          <a href="<?php the_permalink(); ?>">
            <p class="date"><span class="entry-date updated"><?php the_date( 'Y.m.d' ); ?></span></p>
            <p class="category"><?php echo $post_category; ?></p>
            <p class="title"><span><?php the_title() ?></span></p>
          </a>
        </article>
?> 
  endforeach;
?>
      <!-- END ここまで記事のループ -->
    </div><!-- /.index_news_list_wrap --> 
<?php 
endif;//END
wp_reset_postdata(); //サブループの場合は必ずRESETする
?>

記事一覧実装のまとめ

質問者サムネイル画像
質問者
先生!ワードプレスのトップページに、記事一覧機能を実装したいのですが実装方法がわかりません。
ヒロ先生サムネイル画像
ヒロ先生
ワードプレスをの記事一覧を実装するには、「一覧ページ」と「固定ページ」の切り分けが必要です。
切り分けをするには、管理ページの「設定」から変更ができます。
質問者サムネイル画像
質問者
固定ページの時は、現在のページしか取得ができないんですね。
ヒロ先生サムネイル画像
ヒロ先生
固定ページの時はサブループに設定して、「foreach」を使います。
質問者サムネイル画像
質問者
先生「foreach」はどういうときに使うんですか?
ヒロ先生サムネイル画像
ヒロ先生
「foreach」は入れるなど複数の値を持った変数などを、個別のデータに分解するときに使うPHP関数で、ワードプレス以外にも使うことが多いので覚えておくと便利です。
質問者サムネイル画像
質問者
「foreach」はカテゴリーのところでも使用していましたね。
ヒロ先生サムネイル画像
ヒロ先生
カテゴリーは記事作成画面で、複数のチェックができます。
つまり、複数の値を持つことができるので、分解が必要です。
質問者サムネイル画像
質問者
もう一つ質問があります。
「 implode」という関数を使っていましたが、この関数は何をする関数ですか?
ヒロ先生サムネイル画像
ヒロ先生
「 implode」という関数はPHPの関数で、配列をテキストに変換する関数です。
カテゴリー名を取得したときに、結合してテキストで表示をするのに使っています。
ヒロ先生サムネイル画像
ヒロ先生
「 implode」を使う前には必ず、データがあるかIF関数で条件分岐をしてから結合するとエラーにならないので覚えておくと良いと思います。
質問者サムネイル画像
質問者
なるほど!