プラグインなしでWordPressにページネーションを実装しよう

# WEB制作

2020.03.14

みなさま、こんにちは。

前記事でWordpressのテーマ制作における最初で最強の敵「ループ」についてかみ砕いて説明してみました。

WordPressのメインループとサブループについて簡単に嚙み砕いてみた

では、メインループで呼び出したメインクエリ(記事データ)が100記事あった場合どうなるでしょうか。

1ぺージに100記事が表示されたら、表示速度も落ちユーザー離脱の原因になります。

しかしWordpressの場合は問題ありません。

メインループの記述を変更することなく、管理画面の「設定」→「表示設定」→「1ページに表示する最大投稿数」で1ページにおける表示件数を指定することができます(初期設定は10件)。

では設定で10記事と指定した場合、データベースにメインクエリ(記事データ)が11件あった場合はどうなるでしょうか。

その場合は次のページに11番目の記事が表示されます。

▽一覧ページ
https://progblog-web.com/blog

▽次のページ
https://progblog-web.com/blog/page/2/

上記は本サイトのURL例ですの確認してみてください。
一覧ページでは10件表示され、そこに表示しきれなかった10記事以降の記事が、次ページに表示されています。

この機能は

  • 管理画面で簡単に設定できる
  • 自動的にページが分割されるので重くならない

といったメリットがあります。

が、デメリットもあります。
それはわざわざページネーションを導入しないといけない点です。

導入しないと2ページ目以降への導線が自動で反映されません。

ページネーションとは?

ページネーションで最もよく見るのは、Googleの検索結果ではないでしょうか?

これを見れば大体わかると思いますが、ページネーションとは複数ページに分かれたページへのナビゲーションです。

WordPressでは先述しましたが、ページネーションを導入するためにコードを記述しなければいけません。

今回はその記述方法を書いていきます。

※プラグインでの導入も可能ですので、もしプラグインでの導入を考えている方は検索してみてください。

ページネーションの実装方法

まずは functions.php に下記コードを記述してください。
特に変更する必要はありません。

次にページネーションが必要になるページに下記記述をしてください。
index.phptag.phpcategory.php などが対象となるかと思います。

これでページネーションの導入は完了しました。

上記コードを記入したページに、

というコードが展開されました。

あとはCSSで装飾すれば問題なくページネーションが機能しますので、試してみてください

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~