WordPress

固定ページに記事の一覧とページネーションを表示する方法

公開日 2022/10/12

当記事ではWordPressで固定ページにデフォルトの投稿記事の一覧とページネーションを表示する方法を解説します。

ホームページ設定を固定ページにしている
カテゴリーとは別に記事一覧を作りたい
archive.phpでは無く固定ページで作りたい

上記条件でサイトを制作している人が当記事の対象になります。

1 どんな時に使う？
2 固定ページに投稿記事の一覧とページネーションを表示する方法
3 固定ページにページネーションを設置する
4 最後に

どんな時に使う？

固定ページに投稿記事の一覧を表示するのはコーポレートサイトなどで割と多いです。ニュースやスタッフブログなどがあって、カテゴリーとは別に全記事の一覧を表示したい時などが利用シーンになります。

コーポレートサイトだと、WordPressの表示設定の「ホームページの表示」が固定ページになっている事がほとんどだと思うので、category.phpやarchive.phpが使用出来ない場合は別途一覧ページを作成する必要があります。

またブログなどで、トップページをデフォルトの記事一覧では無く、固定ページにしてオリジナルのデザインにしつつ新着記事を表示したい時などにも利用します。

固定ページに投稿記事の一覧とページネーションを表示する方法

コードを用いて固定ページで投稿記事の一覧とページネーションを表示する方法を解説していきます。

サブクエリで投稿記事の取得とページ番号を指定する

<?php
 // 固定ページのページ番号を取得
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $post_pages = new WP_Query(array(
     'paged' => $paged, // ページ番号を指定する
     'posts_per_page' => 10, // 取得する記事数
     'post_type' => 'post', // 投稿記事を取得する
     'orderby' => 'date', // 記事を日付で並び替える
     'post_status' => 'publish' // 公開されている記事のみを取得する
 ));
?>

固定ページなのでメインクエリではなく、サブクエリで記事を取得します。WP_Queryで記事を取得してループで記事を表示します。

固定ページで記事を取得すること自体は割と簡単なので特に解説は必要ないかと思いますが、ページネーションを設置する場合は、WP_Queryのページ送りパラメータでページ送り番号を指定する必要があります。

WP_Queryのページ送りパラメータとは？

WP_Queryにはページ送りパラメータというページ送り(ページネーション)に関するパラメータがあります。ページ送りパラメータはCodexのWP_Queryのページに記載されています。

WordPress Codex 日本語版関数リファレンス WP_Query

ページ送りパラメータには、ページネーションの有効/無効を切り替えたり、1ページで表示する記事数などを指定出来ます。

new WP_Query(array(
    // ページ送りの有効/無効の切り替え デフォルトは'false'で有効
    'nopaging' => 'false'
    // 1ページに表示する記事数を指定する
    'post_per_page' => '',
    // ページ番号
    'paged' => '',
 ));

WP_Queryのpagedパラメータでページ番号を指定します。ページ番号とは、ページネーションで表示しているページを表す番号です。

pagedパラメータにget_query_varで取得したページ番号を指定する事で、固定ページ1ページ単位で記事を取得して表示出来ます。

get_query_varでページ番号を取得ってどういう事？

WP_Queryのページ送りパラメータで、固定ページに1ページ単位で指定した記事数を表示する方法を解説してきました。

解説の中でget_query_varでページ番号を取得すると書きましたが、この説明にピンと来ない人のためにget_query_varの解説をしていきます。（ちなみに僕も最初にget_query_varでページ番号を取得と聞いた時は意味不明でした笑）

get_query_varはメインクエリのクエリ変数を取得する関数です。

WordPress Codex 日本語版関数リファレンス get query var

Codexの説明によると、get_query_varはpublic query variableというクエリ変数を取得しているみたいです。public query variableには投稿IDやスラッグなどページに関する情報が格納されています。

WordPress Codex 日本語版 Query Vars

get_query_varはpublic query variableに定義されている変数を取得します。解説のコードの中でget_query_varにpagedを指定しましたが、このpaged変数に固定ページのページ番号が格納されています。

get_query_varでページ番号を取得するの意味は、固定ページのページ番号を持つクエリ変数pagedを参照してページ番号を取得するという事です。

<?php
get_query_var('paged');
?>

上のコードをvar_dumpで出力すると表示される数字がページ番号になります。ちなみに表示されるページ番号は1からではなく0から始まります。1ページ目＝0です。配列のインデックス番号と同じですね。

get_query_var('paged');で取得したページ番号をWP_Queryのpagedパラメータに指定する事で、固定ページを1ページ単位で扱えるようになり、指定した数で記事を表示出来るようになります。

固定ページにページネーションを設置する

前置きが長くなりましたが、ここから固定ページにページネーションを設置する方法を解説します。なお、ページネーションの実装には、paginate_linksを使用します。

<?php
 // 固定ページのページ番号を取得
 $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;
 $post_pages = new WP_Query(array(
     'paged' => $paged, // ページ番号を指定する
     'posts_per_page' => 10, // 取得する記事数
     'post_type' => 'post', // 投稿記事を取得する
     'orderby' => 'date', // 記事を日付で並び替える
     'post_status' => 'publish' // 公開されている記事のみを取得する
 ));
?>

// ループ
<?php if ($post_pages->have_posts()) : ?>
  <?php while ($post_pages->have_posts()) : $post_pages->the_post() ?>
  // ループで取得するコンテンツを表示
  <?php endwhile; ?>
<?php endif; ?>

// ページネーション
<nav class="pagenation">
  <?php
    // 固定ページのページ数が1ページ以上だったらページネーションを表示する
    if ($post_pages->max_num_pages > 1) {
      $page_links =  paginate_links(array(
        'base' => get_pagenum_link(1) . '%_%',
        'format' => 'page/%#%/',
        'current' => max(1, $paged),
        'mid_size' => 2,
        'end_size' => 1,
        'prev_next' => '',
        'next_text' => '',
        'type'    => 'array',
        'total' => $post_pages->max_num_pages
      ));
     
     // ページネーションを出力する
     echo '<ul class="pagenation__list">';
     foreach ($page_links as $page_link) {
        echo '<li class="pagenation__item">';
        echo $page_link;
        echo '</li>';
       }
     echo '</ul>';
    }
  ?>
</nav>
<?php wp_reset_postdata(); ?>

archive.phpやcategory.phpでページネーションを表示する場合とは異なるパラメータが指定されていますが上から順に解説して行きます。

WordPress Codex 日本語版関数リファレンス/paginate links

2ページ目以降のURL形式を設定する

<?php
   paginate_links(array(
      // ページネーションのURL形式を指定する
      'base' => get_pagenum_link(1) . '%_%',
      // 2ページ目以降の固定ページのURL形式を指定する
      'format' => 'page/%#%/',
  ));
?>

baseパラメータとformatパラメータでページネーションをした2ページ目以降のページのURLの形式を指定しています。

baseパラメータには、get_pagenum_linkで取得したページ番号のリンクを指定しています。ページ番号のリンクとは、ページネーションで表示しているページのURLを指します。

WordPress 開発者リソース get_pagenum_link

上のコードですと、ページネーションの1ページ目のページURLを取得しています。1ページ目はページ番号は表示されずに通常の固定ページのURLになります。

https://ドメイン名/スラッグ名

get_pagenum_linkで文字連結している'%_%'はformatパラメータで指定する値が入ります。baseパラメータで指定したURL以降の表示形式の設定をしているのがformatパラメータです。

上のコードでpage/%#%/となっている%#%の部分は、ページ番号になります。表示しているページのページ番号に自動で変換してくれます。

formatパラメータにpage/%#%/と指定すると、ページネーションの2ページ目以降のURLが下記のようになります。

https://ドメイン名/スラッグ名/page/ページ番号

ちなみにpageの部分は変更が出来ないみたいです。消したり他の文字列に変えたら2ページ目以降が表示されなくなりました…。変更できる方法が分かればまた追記します。

アーカイブページやカテゴリーページでは、baseパラメータとformatパラメータを指定しなくても自動で2ページ目以降のURLを出力してくれるので、あまり馴染みがないですがやっている事としては単純なので覚えてしまいましょう。

現在表示しているページを判別する

<?php
   paginate_links(array(
      // 現在表示しているページを指定する
      'current' => max(1, $paged)
  ));
?>

currentパラメータでは現在表示しているページのページ番号を指定します。PHPのmax関数を使用して1ページ目だったら1を指定し、2ページ目以降だったら表示しているページのページ番号を指定します。

PHPマニュアル max

$pagedはget_query_var('paged')でページ番号を格納している変数です。currentパラメータで指定したページ番号のHTMLにcurrentクラスが付きます。

全体のページ数を指定する

<?php
   paginate_links(array(
      // 固定ページが合計何ページになるのか指定する
      'total' => $post_pages->max_num_pages
  ));
?>

totalパラメータには固定ページの合計ページ数を指定します。ここに指定された数字がページネーションのページ数に反映されます。

$post_pages->max_num_pagesはWP_Queryのmax_num_pagesプロパティです。max_num_pagesプロパティは表示しているページの合計ページ数を格納しています。

厳密に言うと、クエリに一致する記事数をpost_per_pageパラメータで指定した数で割った結果の数がmax_num_pagesプロパティみたいです。

paginate_linksの出力形式

paginate_linksはページネーションをどう出力するかtypeパラメータで選択出来ます。

<?php
   paginate_links(array(
      /* 
       ・ arrayを指定すると配列
       ・ plainを指定するとリンク形式のHTML
       ・ listを指定するとリスト形式のHTML
      */
      'type' => ''
  ));
?>

僕はarrayで配列で出力します。と言うのもplainやlistだと出力されるHTMLに任意のクラスを付けられないからです。

<!-- plainの場合 -->
<a class="prev page-numbers" href="">前へ</a>
<a class="page-numbers" href="">1</a>
<span aria-current="page" class="page-numbers current">2</span>
<a class="page-numbers" href="">3</a>
<a class="next page-numbers" href="">次へ</a>

<!-- listの場合 -->
<ul class="page-numbers">
   <li><a class="prev page-numbers" href="">前へ</a></li>
   <li><span aria-current="page" class="page-numbers current">1</span></li>
   <li><a class="page-numbers" href="">2</a></li>
   <li><a class="page-numbers" href="">3</a></li>
   <li><a class="next page-numbers" href="">次へ</a></li>
</ul>

plainやlistをtypeパラメータに指定すると上のHTMLが出力されますが、なぜかpage-numbersクラスが全てのタグに振られており、使いにくい状態となっています。（なぜこうした）

CSSでスタイルを当てる時に要素を含めれば識別は可能ですが、CSS設計的に要素セレクタはなるべく避けたいので、僕は必ずarrayにして任意のタグの中で出力しています。

<?php
   paginate_links(array(
      'type' => 'array'
  ));
  
  // ページネーションを出力
  echo '<ul class="pagenation__list">';
     foreach ($page_links as $page_link) {
        echo '<li class="pagenation__item">';
        echo $page_link;
        echo '</li>';
     }
  echo '</ul>';
?>

少々強引なやり方ではありますが、上のコードで自分の意図するタグとクラス名の中にページネーションのHTMLを出力出来ます。

このやり方が正解という訳ではなく、あくまで例なのでお好みで判断していただければと思います。

最後に

固定ページでデフォルトの投稿記事とページネーションを表示する方法を解説しました。実務でも割と使用する機会は多いと思うのでこの記事が参考になれば嬉しいです。