sp_menu

【WordPress】プラグインなしでページネーションを実装する方法

【WordPress】 プラグインなしでページネーションを実装

記事が一定数以上あるWEBサイトでは、記事の一覧ページを1ページに全て表示するのではなく、ページネーションを設置して複数のページに分割して表示されていることが多いです。

ページネーションを設置することでユーザビリティの向上や、1ページあたりの画像の読み込み数を少なくすることで表示速度を上げることもできます。

WordPressでページネーションを設置するには「WP-PageNavi」などのプラグインを使用する方法もありますが、使うプラグインが増えると表示速度の低下やセキュリティリスクが高まります。

そこで今回はプラグインは使わずにWordPressの関数である「the_posts_pagination」でページネーションを実装する方法をご紹介します。

この記事では次のお悩みが解決ができます。

  • ・プラグインなしでページネーションを作りたい
  • ・the_posts_paginationの設定方法を知りたい

1. the_posts_paginationの使い方

the_posts_paginationはページネーションを設置したい場所に以下のように記述します。$argsにパラメータを指定してページネーションのカスタマイズすることができます。パラメータに関しては次の章で解説しています。

<!--ページネーション設置したい任意のファイル-->
<?php 

 $args = array(
    'mid_size' => 2,
 );
 the_posts_pagination($args);

?>

または、functions.phpに関数を定義し、ページネーションを設置したい場所で関数を呼び出すようにします。

functions.phpを編集する際に誤って必要なコードを削除してしまうと、サイトが表示されなくなる可能性があります。編集する前にバックアップを取ることをおすすめします。

バックアップの取り方がわからない方は以下の記事で紹介していますので参考にしてください。

【WordPress】All-in-One WP Migrationでバックアップを取る方法を解説

【WordPress】All-in-One WP Migrationでバックアップを取る方法を解説

https://code-sq.com/all_in_one_wp_migration/

複数のページでページネーションを設置したい場合は、毎回パラメータを指定する必要がないのでfunctons.phpで定義するほうが良いかもしれません。

<!--functions.php-->

<?php 
  
  function pagination() {
     $args = array(
     'mid_size' => 2,
    );

    the_posts_pagination($args);
  }

?>
<!--ページネーションを設置したい任意のファイル-->

<?php 
  //functions.phpで定義した関数を呼び出す
  pagination();
?>

ページネーションは以下のように表示されます。

the_posts_pagination()を設定したときのページネーション

生成されるHTMLのコードは以下のとおりです。

<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links"><a class="prev page-numbers" href="http://localhost/page/4/">前へ</a>
  <a class="page-numbers" href="http://localhost/">1</a>
  <span class="page-numbers dots">…</span>
  <a class="page-numbers" href="http://localhost/page/3/">3</a>
  <a class="page-numbers" href="http://localhost/page/4/">4</a>
  <span aria-current="page" class="page-numbers current">5</span>
  <a class="page-numbers" href="http://localhost/page/6/">6</a>
  <a class="page-numbers" href="http://localhost/page/7/">7</a>
  <span class="page-numbers dots">…</span>
  <a class="page-numbers" href="http://localhost/page/10/">10</a>
  <a class="next page-numbers" href="http://localhost/page/6/">次へ</a></div>
</nav>

CSSは以下のように設定しています。デザインは適宜変更してください。

.navigation {
  text-align: center;
}

.page-numbers {
  padding: 3px 10px;
  font-size: 18px;
  font-weight: 700;
  margin-left: 10px;
  color: #333;
}

.page-numbers:not(.dots) {
  border: 2px solid rgba(199, 199, 199, 0.5);
  -webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
          box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.5);
}

.page-numbers:not(.current):not(.dots) {
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
  opacity: 1;
}

.page-numbers:not(.current):not(.dots):hover {
  opacity: 0.5;
}

.current {
  background-color: #a7a7a7;
  color: #FFF;
}

2. the_posts_paginationのパラメータ

次にパラメータの指定方法をご紹介します。$argsにパラメータを指定することでページーネーションをカスタマイズすることができます。指定できるパラメータは以下のとおりです、

<?php

 $args = array(
  'base'               => ページ番号のリンクを生成するときの、ベースとなるURLを指定する,
  'format'             => ページネーションのURL構造を指定できる,
  'total'              => 全体のページ数を指定できる,
  'current'            => 現在のページ番号を指定できる,
  'prev_next'          => 両端に前のページ、次のページへ遷移するリンクを表示するか指定できる,
  'prev_text'          => 前のページへ遷移するリンクのテキストを指定できる,  
  'next_text'          => 次のページへ遷移するリンクのテキストを指定できる,
  'show_all'           => ページをすべて表示するかどうか,
  'mid_size'           => 現在のページの両サイドに何ページ分表示するか,
  'end_size'           => 両端のリンクを何ページ分表示するか,
  'type'               => ページネーションのHTML構造を指定できる,
  'add_args'           => URLのクエリ文字列を追加できる,
  'add_fragment'       => URLに文字列を追加できる,
  'before_page_number' => ページ番号の前にテキストを追加できる,
  'after_page_number'  => ページ番号の後ろにテキストを追加できる,
  'screen_reader_text' => スクリーンリーダー向けのテキストを指定できる
 );

 the_posts_pagination($args);

?>

2-1. base、format

「base」はページネーションのベースとなるURLを設定できます（初期値：%_%)。

まず「base」を指定しないときの２ページ目のリンクのURLは以下のようになります。パーマリンクは「投稿名」に設定しています。

「base」を指定していないときの2ページ目のURL

次に「base」を指定します。

<?php 
  $args = array(
    'base' => get_pagenum_link(1) . 'test/%_%',
  );

  the_posts_pagination($args);

?>

3行目：’base’ => get_pagenum_link(1) . ‘test/%_%’,

「get_pagenum_link」はページ番号リンクを返す関数です。引数が１なので最初のページのURLを返します。

2ページ目のリンクのURLは以下のようになります。「base」を指定していないときのURLと比べると「test」が含まれていることがわかります。

「base」を指定したときのURL

次に「format」を追加で指定すると「%_%」の部分を変更できます。（初期値：’/page/%#%’ ）「format」を以下のように指定します。

<?php 
  $args = array(
    'base' => get_pagenum_link(1) . 'test/%_%',
    'format' => '?page=%#%',
  );

  the_posts_pagination($args);

?>

4行目：’format’ => ‘?page=%#%’,

URLが以下のように「page/2/」の部分が「?page=2」に変更されていることがわかります。

「format」を指定したときのURL

2-2. total

「total」はページネーションの総ページ数を指定できます。（初期値：１）

<?php 
  $args = array(
    'total' => 5,
  );

  the_posts_pagination($args);

?>

3行目：’total’ => 5

「total」で「5」を指定してます。「total」に「5」を指定したことで、たとえ総ページ数が10ページ分の記事があったとしても５ページ分のページネーションリンクしか表示されません。

totalを指定したときのページネーション

2-3. current

「current」は現在のページ番号を指定できます。（初期値：０）

<?php 
  $args = array(
    'current' => 2,
  );

  the_posts_pagination($args);

?>

3行目：’current’ => 2

「current」で「2」を指定しているので現在のページ番号が２ページ目となります。

currentを指定したときのページネーション
<nav class="navigation pagination" aria-label="投稿">
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  <div class="nav-links"><a class="prev page-numbers" href="http://localhost/">前へ</a>
  <a class="page-numbers" href="http://localhost/">1</a>
  
  <!--2のclassにcurrentがついている-->
  <span aria-current="page" class="page-numbers current">2</span>
  
  <a class="page-numbers" href="http://localhost/page/3/">3</a>
  <a class="page-numbers" href="http://localhost/page/4/">4</a>
  <span class="page-numbers dots">…</span>
  <a class="page-numbers" href="http://localhost/page/10/">10</a>
  <a class="next page-numbers" href="http://localhost/page/3/">次へ</a></div>
</nav>

他のページリンクをクリックすると、ページは切り替わるのですが2ページ目のclassにcurrentが指定されたままでした。現在のページ番号が固定されるようです。

2-4. prev_next

「prev_next」は両端に前、次のページへ遷移するためのリンクを表示するかどうかを設定します。（初期値はtrue）

<?php
  $args = array(
    'prev_next' => true,
  );

  the_posts_pagination($args);
?>

3行目：’prev_next’ => true

「prev_next」が「true」の場合、両端にリンクが表示されています。

prev_nextをtureに指定したときのページネーション

リンクを表示したくないときは「false」に指定しましょう。

<?php
  $args = array(
  'prev_next' => false
  );

  the_posts_pagination($args);
?>

3行目：’prev_next’ => false

「prev_next」が「false」を指定しているので両端のリンクは表示されません。

prev_nextをfalseにしたときのページネーション

2-5. prev_text、 next_text

「prev_text」、「next_text」は「prev_next」のリンクのテキストを変更することできます。(初期値 prev_text：”前へ”　next_text：”次へ”)

<?php
  $args = array(
  'prev_text' => __('&lt'), 
  'next_text' => __('&gt'),
  );
  the_posts_pagination($args);
?>

3行目：‘prev_text’ => __(‘&lt’)

「前へ」のテキストが「<」に変更されます。「&lt」はHTMLの特殊文字で「<」を表します。

4行目：‘next_text’ => __(‘&gt’)

「次へ」のテキストが「>」に変更されます。「&gt」はHTMLの特殊文字で「>」を表します。

prev_text、next_textを指定したときのページネーション

2-6. show_all

「show_all」は全てのページのページネーションのリンクを表示するかどうかを指定できます。（初期値：false）

<?php
  $args = array(
   'show_all' => true,
  );

  the_posts_pagination($args);
?>

３行目：’show_all’ => true

「show_all」に「true」を指定しています。ここでは総ページが10ページ分あり、1~10ページまですべてのページのリンクが表示されます。

show_allをturuに指定したときのページネーション

「show_all」に「false」を指定するとページネーションの途中のページが省略されて表示されます。

<?php
  $args = array(
    'show_all' => false,
  );

  the_posts_pagination();
?>

３行目：’show_all’ => false

「show_all」に「false」を指定しています。ページネーションの途中のページが「・・・」で表示されます。ページ数が増えてくるとページネーションのリンクの数も増えます。全て表示すると見にくくなるので「false」のままがいいかもしれません。

show_allをfalseにしたときのページネーション

2-7. mid_size

「mid_size」は現在のページの前後に何ページ分ページネーションのリンクを表示するか指定できます。(初期値：２)

<?php
  $args = array(
   'mid_size' => 2
  );

  the_posts_pagination($args);

?>

2行目：’mid_size’ => 2

「mid_size」に「2」を指定しています。現在のページが「5」の場合、その前後の２ページ分が表示されます。

mid_sizeを2に指定したときのページネーション
<?php
  $args = array(
   'mid_size' => 1
  );

  the_posts_pagination($args);

?>

3行目：’mid_size’ => 1

「mid_size」に「1」を指定しています。現在のページが「5」の場合、その前後の１ページ分が表示されます。

mid_sizeを1に指定したときのページネーション

2-8. end_size

「end_size」は両端のページネーションのリンク(prev_nextを除く)をいくつ表示するかを指定します。(初期値：1)

両端のリンクを２つずつ表示させたい場合は以下のようになります。

<?php
   $args = array(
     'end_size' => 2
   );
   
  the_posts_pagination($args);
?>

3行目：’end_size’ => 2

「end_size」に「２」を指定しています。両端のリンク(prev_nextを除く)が２つずつ表示されます。

end_sizeを2に指定したときのページネーション

次は両端のリンクを1つずつ表示させてみます。

<?php
   $args = array(
     'end_size' => 1
   );
   
   the_posts_pagination($args);
?>

3行目：’end_size’ => 1

「end_size」に「1」を指定しています。両端のリンク(prev_nextを除く)が1つずつ表示されます。

end_sizeを1に指定したときのページネーション

2-9. type

「type」はページネーションのHTML構造を変更できます。「plain」か「list」を指定します。(初期値： plain)

まず「type」に「plain」を指定します。

<?php
   $args = array(
     'type' => 'plain'
   );
   
   the_posts_pagination($args);
?>

3行目：’type’ => ‘plain’

「type」に「plain」を指定しています。ページネーションのHTML構造は以下のようになります。

<div class="nav-links">
   <a class="page-numbers" href="http://localhost/">1</a>
   <span aria-current="page" class="page-numbers current">2</span>
   <a class="page-numbers" href="https://code-sq.com/page/3/">3</a>
</div>

次に「type」に「list」を指定します。

<?php
   $args = array(
     'type' => 'list'
   );
   
   the_posts_pagination($args);
?>

3行目：’type’ => ‘list’

「type」に「list」を指定しています。ページネーションのHTML構造は以下のようになります。「plain」を指定したときとは違いul, liタグが使われています。

<div class="nav-links">
  <ul class="page-numbers">
	<li><a class="page-numbers" href="http://localhost/">1</a></li>
	<li><span aria-current="page" class="page-numbers current">2</span></li>
	<li><a class="page-numbers" href="http://localhost/page/3/">3</a></li>
  </ul>
</div>

2-10. add_args

「add_args」はURLにクリエ文字列を追加できます。

<?php
  $args = array(
    'add_args' => array(
    'example' => 'abc'
    ),
  ); 
  
  the_post_pagination($args);

?>

3-5行目：’add_args’ => array(‘example’ => ‘abc’),

「add_args」にキー「example」、値「abc」を指定してすると以下のよう「example=abc」が追加されていることがわかります。以下はパーマリンクを「投稿名」に設定したときのURLです。

「add_args」を指定したときのURL

2-11. add_fragment

「add_fragment」はURLに文字列を追加します。

<?php
  $args = array(
    'add_fragment' => '#section',
  ); 
  
 the_post_pagination($args);

?>

3行目：’add_fragment’ => ‘#section’,

「add_fragment」に「#section」を指定してすると以下のようにURLに「#section」の文字列が追加されてます。以下はパーマリンクを「投稿名」に設定したときのURLです。

「add_fragment」を指定したときのURL

2-12. before_page_number、 after_page_number

「before_page_number」と「after_page_number」はページネーションリンクの数字の前後に文字列を追加できます。

まずは、「before_page_number」を指定します。

<?php
  $args = array(
    'before_page_number' => 'Page: ',
  ); 
  
 the_post_pagination($args);

?>

3行目：’before_page_number’ => ‘Page: ‘

「before_page_number」に「page:」を指定しています。ページネーションリンクの数字の前に「page:」が追加されます。

before_page_numberを指定したときのページネーション

次に、「after_page_number」を指定します。

<?php
  $args = array(
    'after_page_number' => 'ページ目 ',
  ); 
  
 the_post_pagination($args);

?>

3行目：’after_page_number’ => ‘ページ目 ‘

「after_page_number」に「ページ目」を指定しています。ページネーションリンクの数字の後ろに「ページ目」が追加されます。

after_page_numberを指定したときのページネーション

2-13. screen_reader_text

the_posts_paginationは以下のコードのようにスクリーンリーダー用のh2タグが自動的に設定されています。

<nav class="navigation pagination" aria-label="Posts navigation">

  <!--スクリーンリーダー用テキストが自動的に表示される-->
  <h2 class="screen-reader-text">投稿ナビゲーション</h2>
  
  <div class="nav-links">
  <a class="prev page-numbers" href="http://localhost/">前へ</a>
  <a class="page-numbers" href="http://localhost/">1</a>
  <span aria-current="page" class="page-numbers current">2</span>
  <a class="page-numbers" href="http://localhost/page/3/">3</a>
  <a class="next page-numbers" href="http://localhost/page/3/">次へ</a>
  </div>
</nav>

これはスクリーンリーダー用のテキストです。スクリーンリーダーとは視覚障害のある方がパソコンなどのデバイスを使用するときに使う画面上の情報を読み上げるソフトウェアのことです。

スクリーンリーダーはOSに標準搭載されています。Windowsは「CTRL」+「Windowsロゴ」+「ENTER」、Macは「Command」+「F5」でスクリーンリーダーが起動します。

スクリーンリーダーがh2ダグのテキストを読み上げていることがわかります。

スクリーンリーダー用のテキストは変更することができます。変更するには以下のよう記述します。

<?php
  $args = array(
    'mid_size' => 2,
    'prev_next' => true,
    'screen_reader_text' => 'Posts navigation'
  );

  the_posts_pagination($args);
?>

5行目：’screen_reader_text’ => ‘Posts navigation’

「screen_reader_text」に「Posts navigation」を指定しています。スクリーンリーダー用のテキストが「Posts navigation」に変更されています。

<nav class="navigation pagination" aria-label="Posts navigation">

  <!--パラメーターのscreen_reader_textで指定したテキストが表示される-->
  <h2 class="screen-reader-text">Posts navigation</h2>
  
  <div class="nav-links">
  <a class="prev page-numbers" href="http://localhost/">前へ</a>
  <a class="page-numbers" href="http://localhost/">1</a>
  <span aria-current="page" class="page-numbers current">2</span>
  <a class="page-numbers" href="http://localhost/page/3/">3</a>
  <a class="next page-numbers" href="http://localhost/page/3/">次へ</a>
  </div>
</nav>

スクリーンリーダー用のテキストはあらかじめ表示されないようにCSSが設定されていますが、h2タグ自体を削除することができます。functions.phpに以下のコードを記述します。

<!--functions.php-->

<?php

function delete_screen_reader_text($template) {
 $tempalte = '<nav class="navigation %1$s" aria-label="%4$s">
			<div class="nav-links">%3$s</div>
		</nav>';
 return $template;
}

add_filter('navigation_markup_template', 'delete_screen_reader_text');

?>

以下のサイトを参考にさせていただきました。

the_posts_pagination関数で「投稿ナビゲーション」を非表示にする4つの方法 | 札幌のオンラインWEBスクールでホームページを基礎から学べる「ゼロスタWEBスクール」

the_posts_pagination関数で「投稿ナビゲーション」を非表示にする4つの方法 | 札幌のオンラインWEBスクールでホームページを基礎から学べる「ゼロスタWEBスクール」

https://zerosta-webschool.jp/the_post_pagenation/

3. まとめ

今回はプラグインなしでページネーションを実装する方法をご紹介しました。「the_posts_pagination」を使えばページネーションが簡単に設置することができます。

また、パラメータを指定することでページネーションリンクの表示方法を変えることができますのでご自身で指定してどう変わるか確認してみてください。ご参考になれば幸いです。

関連記事