WP-PageNavi

WP-PageNavi – Lester Chan

完全無料 定番ページナビ 800万+ インストール
800万以上のアクティブインストール 4.4 / 5(530件以上) 開発:Lester Chan(2006年〜)

WP-PageNaviは、WordPressのブログ・アーカイブページに「1・2・3…前へ・次へ」形式の数字付きページナビゲーションを追加する定番プラグインです。2006年からの長い歴史を持ち、800万以上のサイトで使われてきた実績があります。管理画面から表示するページ数・テキスト・スタイルを細かく設定でき、テーマのテンプレートファイルに wp_pagenavi() 関数を1行追加するだけで利用できます。シンプルで軽量なため、特に老舗の国内テーマとの組み合わせで今も広く使われているプラグインです。

基本情報

プラグイン名WP-PageNavi
開発・提供Lester Chan(シンガポール出身の著名WordPress開発者)
料金完全無料
対応WordPress最新版対応(6.x 系)
対応PHP7.2 以上
日本語対応 日本語翻訳対応(管理画面・フロントエンド)
インストール数800万以上(WordPress.org 公式)
評価 4.4(530件以上のレビュー)
最終更新定期的に更新(WordPress最新版対応)
WordPress.orgwordpress.org/plugins/wp-pagenavi/
WP-PageNaviとは:WordPressの標準ページ送りは「前のページ ← → 次のページ」形式のリンクのみです。WP-PageNaviを使うことで「« 前 | 1 | 2 | 3 | 4 | 5 | … | 12 | 次 »」のような数字付きナビを簡単に追加できます。SEO面でも各ページへの直接リンクが増えるという副次的なメリットもあります。

表示イメージ(デモ)

WP-PageNaviが出力するページナビゲーションの典型的な表示例です。現在のページ・前後のページ・最初と最後のページへのリンクが分かりやすく表示されます。

↑ 上記はデモ表示です。実際のスタイルはCSSでカスタマイズできます。

主要機能

数字付きページナビ

「前へ・1・2・3・…・10・次へ」形式の数字付きページナビゲーションを出力。ユーザーが現在位置を把握しやすく、任意のページに直接ジャンプできる。

管理画面から設定

「設定」→「PageNavi」から表示ページ数・テキスト・スタイルシートの有効/無効などを管理画面から設定できる。設定変更はすべてのページナビに即座に反映される。

CSSカスタマイズ対応

プラグイン付属のCSSを無効化して完全に独自デザインを適用できる。.wp-pagenavi セレクターを使って テーマのstyle.cssから自由にスタイルをカスタマイズ可能。

テンプレート関数対応

wp_pagenavi() 関数でテーマに組み込める。カスタムクエリ(WP_Query)への対応も可能。wp_pagenavi(['query' => $my_query]) の形式で渡すだけ。

表示ページ数の調整

現在のページの前後に何ページ分のリンクを表示するかを設定できる。「最初のページ数」「最後のページ数」「前後のページ数」を個別に指定可能。

テキストのカスタマイズ

「前へ」「次へ」「最初」「最後」「…」などのテキストを管理画面から変更できる。日本語・英語・任意の文字列・HTMLタグも指定可能。

️ 設定項目一覧

管理画面の「設定」→「PageNavi」から以下の設定を調整できます。

設定項目説明デフォルト
Newer Posts Text 「前のページ」リンクのテキスト « Previous
Older Posts Text 「次のページ」リンクのテキスト Next »
No. of Pages 現在ページの前後に表示するページ数 3
Pages in Larger Sets 大きいページ数のグループに表示するページ数(省略部分の前後) 1
Pages in Smaller Sets 最初・最後のグループに表示するページ数 2
Always Show ページが1ページのみでもナビを表示するかどうか 非表示
Use StyleSheet プラグイン付属のCSSを読み込むかどうか 有効

インストール・設置方法

  1. インストール・有効化
    管理画面「プラグイン」→「新規プラグインを追加」から「WP-PageNavi」を検索し、インストール→有効化。管理画面「設定」→「PageNavi」から設定画面にアクセスできる。
  2. テーマのテンプレートファイルに関数を追加
    ページリストを表示するテンプレートファイル(index.phparchive.phpcategory.phpなど)を開く。WordPressの標準ページ送り関数(the_posts_pagination()など)の代わりに、以下のコードを追加する。

テンプレートへの基本的な追加方法

<?php
// プラグインが存在する場合のみ実行(安全な書き方)
if (function_exists('wp_pagenavi')) {
    wp_pagenavi();
}
?>

カスタムクエリへの対応

<?php
// WP_Queryを使ったカスタムクエリのページナビ
$custom_query = new WP_Query([
    'post_type'  => 'news',
    'posts_per_page' => 10,
    'paged'      => get_query_var('paged'),
]);

if ($custom_query->have_posts()) :
    while ($custom_query->have_posts()) : $custom_query->the_post();
        // ループ内の処理
    endwhile;
    wp_pagenavi(['query' => $custom_query]);
endif;
wp_reset_postdata();
?>

デフォルトCSSの無効化とカスタムスタイルの適用

/* 設定でUse StyleSheetをオフにした後、
   テーマのstyle.cssや追加CSSに記述 */

.wp-pagenavi {
    display: flex;
    gap: 4px;
    justify-content: center;
    margin: 2rem 0;
}
.wp-pagenavi a,
.wp-pagenavi span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 6px;
    font-size: 0.9rem;
    text-decoration: none;
    border: 1px solid #ddd;
    color: #333;
}
.wp-pagenavi span.current {
    background: #33691E;
    color: white;
    border-color: #33691E;
    font-weight: bold;
}
テーマによってはプラグイン不要の場合も:SWELL・AFFINGER・Cocoonなどの人気テーマは独自のページナビ機能を内蔵しており、WP-PageNaviなしでも美しいページナビを表示できます。テーマのドキュメントを確認し、標準機能で要件を満たせる場合はプラグインを追加しないほうがサイトを軽量に保てます。

こんな人におすすめ

こんな人におすすめ

  • WordPressのデフォルト「前へ・次へ」ナビを数字付きにしたい
  • 軽量・シンプルなページナビプラグインを探している
  • テンプレートファイルを直接編集できるコーダー・エンジニア
  • カスタムクエリ(WP_Query)のページナビが必要
  • 2006年から続く実績のある定番プラグインを使いたい

向かないケース

  • テンプレートを編集せずに管理画面だけで完結させたい
  • ブロックエディタ(Gutenberg)のウィジェットとして使いたい
  • 使用中のテーマがページナビ機能を内蔵している(プラグイン不要)
  • スタイル調整なしに美しいデザインのナビを追加したい(CSS調整が必要)

よくある質問(FAQ)

  • WP-PageNaviとWordPress標準のpaginate_links()の違いは何ですか?

    WordPress標準の paginate_links() 関数は数字付きナビを出力できますが、設定のカスタマイズがPHPの引数として行う必要があります。WP-PageNaviは管理画面から表示ページ数・テキストを設定でき、専用のCSSクラスが付与されるためスタイル調整が容易です。ただし現在はWordPress標準機能で十分な場合も多く、テーマによってはプラグインなしで美しいページナビが実現できます。

  • WP-PageNaviのスタイルをカスタマイズするにはどうすればよいですか?

    WP-PageNaviはデフォルトで自身のCSSを読み込みます。テーマの style.css や追加CSSに .wp-pagenavi セレクターを使ってスタイルを上書きできます。完全に独自デザインにしたい場合は「設定」→「PageNavi」の「Use StyleSheet」をオフにして、プラグインのデフォルトCSSを無効化してから独自CSSを書くのが最もクリーンな方法です。

  • WP-PageNaviをテーマに組み込むにはどうすればよいですか?

    テーマの index.phparchive.phpcategory.php などで、if (function_exists('wp_pagenavi')) { wp_pagenavi(); } を呼び出します。function_exists() でチェックすることでプラグインが無効化された場合のエラーを防げます。

  • WP-PageNaviはカスタムクエリ・WP_Queryにも対応していますか?

    はい、WP-PageNaviはカスタムクエリにも対応しています。wp_pagenavi(['query' => $custom_query]) の形式でWP_Queryオブジェクトを渡すことで、カスタム投稿タイプや独自クエリのページナビも表示できます。その際はクエリの paged パラメーターを正しく設定しておくことが必要です。

まとめ

WP-PageNaviは2006年から続く歴史あるWordPressページナビプラグインです。800万以上のインストール実績が示すように、シンプルで確実に動く信頼性の高いプラグインです。テンプレートファイルに wp_pagenavi() を1行追加するだけで数字付きページナビが使えるため、テーマ開発者やコーダーにとって取り回しのよい選択肢です。

ただし、SWELL・AFFINGER・Cocoon等のページナビ機能を内蔵した人気テーマを使っている場合や、WordPress標準の paginate_links() で要件を満たせる場合は、わざわざプラグインを追加する必要はありません。軽量なサイトを保つためにも、まずテーマの標準機能を確認してから導入を検討することを推奨します。