WordPressでページング機能作成【プラグイン無しで実装】

WPでページネーション機能を作成する機能方法。

WordPressではデフォルトでページネーションを作成する機能（関数）が用意されています。これを使用するだけで基本的なページネーション機能は作成できます。

以下みたいなやつですね。

pagination

・ページネーションを作成できる関数
the_posts_pagination
≫ ページネーションリファレンス

プラグインでも実装できますが、重いので基本的には設置しないほうが良いです。

WordPressでページネーションを作成するthe posts pagination

the_posts_paginationのリファレンスを見てみると実は引数を渡せることが分かります。

$args = [
	mid_size => 1		// 左右にそれぞれ表示するページ番号の数（デフォルト1）
	prev_text => 'prev'	// 前のリンクテキスト
	next_text => 'next' // 次のリンクテキスト
	screen_reader_text => 'ナビゲーション'  // ナビゲーションのヘッダーテキスト
];
the_posts_pagination($args);

この引数によって表示されるページネーションの表示方法が変わるので把握しておくと良いと思います。

mid_size
左右に表示するページ番号の数（1のままで問題ありません。）
prev_text
前ページを促すリンク文言（これはお好みで「当サイトでは『≪』という記号で表しています。）
next_text
次ページを促すリンク文言（これはお好みで「当サイトでは『≫』という記号で表しています。）
screen_reader_text
ナビゲーションに見出しタグ（h2）を付けたい場合に記載

この最後のscreen_reader_textはナビゲーションの上に見出しをつけるのですが、個人的にいらないなあって思っているのですが、引数に空文字を指定してもデフォルト値が必ず表示されます。

なので。cssでdisplay: none;などを使用してユーザーに見えないようにすると良いですね。（なんで空文字指定が出来ないのか謎でしょうがないですが…）

上記の関数を呼び出すとHTML上では、以下のように表示されます。
例として当サイトで実際に呼び出されているDOM構成で表示しました。

<nav class="navigation pagination" role="navigation">
	<h2 class="screen-reader-text">投稿ナビゲーション</h2>
	<div class="nav-links">
		<span aria-current="page" class="page-numbers current">1</span>
		<a class="page-numbers" href="https://dara-blog.com/page/2">2</a>
		<span class="page-numbers dots">…</span>
		<a class="page-numbers" href="https://dara-blog.com/page/9">9</a>
		<a class="next page-numbers" href="https://dara-blog.com/page/2">≫</a>
	</div>
</nav>

クラス名とかは変えられないので、基本的にはこのクラス名に合わせてCSSを適用する必要があります。

currentというクラス名が現在開いているページになります。そのためリンクタグである<a>タグではなく<span>タグになっています。

ページネーション自体の作成はこれで完了です。
上記で出力されたDOMを元にCSSを修正していきます。

ページネーションのデザイン

ページネーションのデザインはお好みで良いと思いますが当サイトで作っているものを例に何個かご紹介したいと思います。
ページネーション自体あまりデザインが豊富という訳ではないですが、参考程度に。

ページネーションのかなり標準的なタイプ。
無料のWordpressテーマなどによくあるシンプルなタイプです。

border-radiusとグラデーションを付けたパターンですね。
グラデーションのパターンが少し雑で申し訳ないですが…笑
グラデーションは以下のツールで自由に作成できるのでお好みで作ってみてください。
≫ Ultimate CSS Gradient Generator

今までのデザインもかなりシンプルでしたが、最後に一番シンプルなものをデザインしました。
もはやborderなどを付けないことによりデザインシンプル目なサイトにはおすすめです。

①つ目のページネーションのCSS

.navigation {
  margin: 20px auto;
}

.navigation .screen-reader-text {
  display: none;
}

.nav-links {
    text-align: center;
}

.nav-links .page-numbers {
  padding: 5px 7px;
  border: 1px solid gray;
  color: black;
  text-decoration: none;
}

.nav-links .current {
  background-color: #d84f4f;
  color: #fff;
}

.nav-links .dots  {
  border: none;
}

②つ目のページネーションのCSS

.navigation {
  margin: 20px auto;
}

.navigation .screen-reader-text {
  display: none;
}

.nav-links {
    text-align: center;
}

.nav-links .page-numbers {
  padding: 5px 8px;
  border: 1px solid gray;
  border-radius: 100px;
  color: black;
  text-decoration: none;
}

.nav-links .current {
  background-color: #28ACA2;
  color: #fff;
  background: #b3dced; /* Old browsers */
  background: -moz-linear-gradient(top, #b3dced 0%, #29b8e5 48%, #b3dced 100%, #bce0ee 100%, #b3dced 102%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #b3dced 0%,#29b8e5 48%,#b3dced 100%,#bce0ee 100%,#b3dced 102%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(to bottom, #b3dced 0%,#29b8e5 48%,#b3dced 100%,#bce0ee 100%,#b3dced 102%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b3dced', endColorstr='#b3dced',GradientType=0 ); /* IE6-9 */
}

.nav-links .dots  {
  border: none;
}

③つ目のページネーションのCSS

.navigation {
  margin: 100px auto;
}

.navigation .screen-reader-text {
  display: none;
}

.nav-links {
  text-align: center;
}

.nav-links .page-numbers {
  padding: 5px 8px;
  color: black;
  text-decoration: none;
}

.nav-links .current {
  background-color: #28ACA2;
  border: none;
  color: #fff;
}

.nav-links .page-numbers:hover {
  border-bottom: 1px solid gray;
}

.nav-links .dots  {
  border: none;
}

ユーザーに次ページに遷移させたいときに使用するページネーションですが、一時期はSEOの影響か流行りがあったみたいで、今もその名残で設置しているサイトは多いですね。

ページネーションの場合、リンクが複数個設置されることによりSEO的効果が高まるといった効果が昔はあったらしいです。

しかし、現在はただのUXの問題であり特に効果はありません。
個人的には次ページだけをみたい時ってないのでページネーションの実装はこちら方がタイプ。

また、WordPressの場合でも自作のプログラムでページネーションを作成することもできますが、おそらく処理速度の問題や実装の難易度が高いので自分の好きなデザインがあったらコピってきて当て込むくらいで良いと思います。
※当サイトで書いてあるデザインはコピペ自由です。

また何か便利な実装や良いデザインが思いついたら更新します。

前の記事
« JavaScriptで作るkeyupを使用したinputの文字数バリデートの作成方法

次の記事
【脱jQuery】JavaScriptで書く画像の遅延読み込み処理『lazyload』の実装 »

2019/08/03 2019/08/04 Wordpress