【WordPress】次の記事へサクッと移動! ページネーションの作り方

50種類以上のIT教材を無料で使える!
0円から学習できるオンラインITスクール「侍テラコヤ」
→さっそく登録する

こんにちは! ライターのナナミです。

WordPressでブログを書いていると、どんどん記事が多くなっていきますよね。
それを1ページで一覧にしてしまうと、ページが長くなって見づらくなってしまうことも…

そんなときはページネーション
記事の一覧を分割して見せるようにして、見やすい一覧を作ることができます

この記事は下記の流れで進めていきます。

【基礎】ページネーションとは何か
【基礎】プラグインで実装しよう
【発展】自分で一から作ってみよう

ページネーションをしっかり実装して、ユーザーが見やすいサイトを作れるようになりましょう!

ページネーションとは?

そもそもページネーションって何だ?

という方もいるかもしれませんね。

ざっくり説明すると、下記の画像のようなやつです。

pager1

ブログの下の方でよく見かけますね。

ブログの記事数が増えてくると、一覧画面をある程度分割して表示したいですよね。
その分割したページを移動するためのリンクが、ページネーションです。

これがあると、記事が多くなっても見やすい一覧にすることができます。
とっても便利!


【何から学べばいいかわからない…そんな悩みを解決します!】

完全無料ですぐわかる「プログラミング学習プラン診断」

・適性にあわせて学習プランを診断
・完全無料で気軽に診断できる
・学習の悩みもまるっと解決

さっそく診断してみる

プラグインで実装しよう!

まずは手軽に、プラグインで実装してみましょう。

ページネーションが作れるプラグインは色々な種類があります。
今回は例としてWP-PageNaviというプラグインを使ってみましょう

pager2
https://ja.wordpress.org/plugins/wp-pagenavi/

プラグインをインストール

まずはプラグインをインストールしていきます。
WP-PageNaviで検索してインストールしましょう。

pager3

インストール方法について詳しく知りたい方は、下記の記事を読んでみてください。
https://techacademy.jp/magazine/1384

プラグインを有効化

プラグインはインストールしただけでは動作しません。
有効化して、機能を使えるようにしましょう。

有効化は簡単。
インストールしたプラグイン一覧から有効化したいプラグインを探して…

pager4

有効化をクリックするだけ!
これでWP-PageNaviが動作するようになりました

プラグインのコードを書く

あとはページネーションを入れたい箇所に、表示用のコードを書くだけです。

コードはphpファイルに記述します。

該当のファイルがどれだかわからない…という場合は、下記のリファレンスで確認してみましょう。
WordPress Codex 日本語版 テンプレート階層

WP-PageNaviは、下記のコードを使います。

<?php
if(function_exists('wp_pagenavi')) {
wp_pagenavi();
}
?>

これを一覧ページに入れてみると…

pager5

ページネーションが表示されました!

次への文字などは、プラグインの設定で変えることもできます
細かい設定方法については、下記の記事を読んでみてくださいね。
https://webkaru.net/wordpress/plugin-wp-pagenavi/

他のプラグイン

WP-PageNavi以外にも、ページネーションを実装できるプラグインは色々あります。
その中の一部をご紹介しましょう。

WP-Paginate

pager6
https://ja.wordpress.org/plugins/wp-paginate/

WP-PageNaviと同じく、手軽に使うことができるプラグインです。
さらにCSSの設定も色々できるので、自分の好きなデザインのページネーションを作ることができます。

WP Page Numbers

pager7
https://ja.wordpress.org/plugins/wp-page-numbers/

コードを貼り付けるだけで、ページネーションを作ることができるプラグインです。
機能は多くはないですが、その分シンプルで使いやすい場面も多いでしょう。

ですが、どうやらしばらく更新されていないようです…
残念ですが、他のプラグインの方が安定して使えるかもしれませんね。

ページネーションを実装しよう

ページネーションは使いたいけど、プラグインは使いたくない…
ちょっと自分で一から作ってみたい…

そんな人向けに、ちょっと発展的な内容です。

ページネーションは、コードを使って実装することもできます

WordPressには、WordPress専用の関数があります。
その中に、ページネーションを生成できるpaginate_links()というものがあるのです。

プラグインよりも難易度は上がりますが、自由にカスタマイズすることも可能です。

今回は細かい説明はちょっと置いといて、どのように使えば実装できるかだけサクッと紹介しちゃいますね。

もっと詳細な説明が知りたい場合は、リファレンスをチェックしてみてください。
WordPress Codex 日本語版 関数リファレンス/paginate links

実装するページを確認しよう

まずページネーションを実装する前に、確認するべき点があります。

実装するページのクエリが、書き換えられているのかどうかです。

クエリとは、WordPressの記事を表示するときの条件のことです。
これを書き換えているかどうかで、ページネーションのコードがちょっと変わってきます。

クエリについての詳しい解説は、下記の記事をどうぞ。
https://www.1-firststep.com/archives/2375

では、確認のためにphpファイルを開いてみましょう。

対象ファイルはページネーションを表示したいページを生成しているファイルです。
一覧ならarchive.phpcategory.phpなどですね。

どれが対象ファイルかわからない…という方は、下記のリファレンスで確認してみてください。
WordPress Codex 日本語版 テンプレート階層

ファイルを開くと、コードが色々書かれていますね。

pager8

この中にnew WP_Queryという文字が含まれていた場合、その箇所ではクエリの書き換えが行なわれています。

つまり、一覧として表示する記事の種類を変更しているのです。

new WP_Queryが見当たらない場合は、下記のaのコードを使えばOKです。

クエリの書き換えが行われている場合は、 bのコードを使いましょう。

a:クエリの書き換えを行なっていない場合

実装するファイルにnew WP_Queryが含まれてない場合、ページネーションを表示したい箇所に下記のコードを入れましょう。

<?php
global $wp_query;	// 記事を表示する情報をこのコード内で使えるようにする

$big = 999999999;	// 最大値を指定

echo paginate_links( array(															// ページネーションを表示
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),	//URLの生成ルールを決める
    'format' => '?paged=%#%',													//ページネーションの構造を指定
    'current' => max( 1, get_query_var('paged') ),								//現在のページ番号を指定
    'total' => $wp_query->max_num_pages										//全体のページ数を指定
) );
?>

下記のようにページネーションが表示されるようになります。

pager9

細かい見栄えなどは、CSSで調整してくださいね。

b:クエリの書き換えを行なっている場合

実装するファイルにnew WP_Queryが含まれていた場合のコードは下記になります。
ページネーションを表示したい箇所に入れましょう。

<?php
$big = 999999999;		// 最大値を指定

echo paginate_links( array(															// ページネーションを表示
    'base' => str_replace( $big, '%#%', esc_url( get_pagenum_link( $big ) ) ),	//URLの生成ルールを決める
    'format' => '?paged=%#%',													//ページネーションの構造を指定
    'current' => max( 1, get_query_var('paged') ),								//現在のページ番号を指定
    'total' => $the_query->max_num_pages										//全体のページ数を指定($the_queryの部分にはクエリ名を入れる)
) );
?>

同じように、ページネーションを表示することができます。

pager9

こちらも見栄えはCSSで整えてくださいね。


【なかなかエラーが解決できない…そんな悩みを解決します!】

登録無料で始められるプログラミングスクール「侍テラコヤ」

・回答率100%のQ&A掲示板でエラーを解決!
現役エンジニアとのオンライン相談で悩みを解決!
・50種類以上の教材で複数言語を習得!

侍テラコヤについて詳しく見る

まとめ

いかがでしたか?

ページネーションがあれば、安心して記事をたくさん書くことができますね。
どんどんページネーションの数字を増やして、魅力的なブログを作ってください!

プログラミング学習中、
誰かへ相談したいことはありませんか?

SAMURAI TERAKOYA

プログラミングはエラーの連続。作業を進めるなかで誰かに教えてほしい場面は多いですよね。

そんな悩みを解決できるのが、侍テラコヤです。登録無料で始められて、現役エンジニアとオンラインで相談できるほか、回答率100%のQA掲示版でプログラミングに関する悩みを解決します!

気になる方はぜひ詳細をご覧ください。

→侍テラコヤの詳細をみる

侍エンジニアは「人生を変えるプログラミング学習」をコンセンプトに、過去多くのフリーランスエンジニアを輩出したプログラミングスクールです。プログラミングに役立つ情報や有用な情報を発信していきます。

あなたの目的に合わせた
SAMURAI ENGINEERの運営サービス

SAMURAI ENGINEER Pro

未経験でも挫折しないプログラミングスクール

詳細はこちら

SAMURAI TERAKOYA

日本最大級のサブスク型オンラインITスクール

詳細はこちら

SAMURAI ENGINEER Freelance

「一人で稼げる」スキルを身につける

詳細はこちら
Close