MENU
  1. ホーム
  2. WordPress
  3. WP-PageNavi完全ガイド！導入と初期設定、トラブル対策、注意点など徹底解説！

WP-PageNavi完全ガイド！導入と初期設定、トラブル対策、注意点など徹底解説！

広告
【当ブログは、WordPressテーマ「SWELL」、 レンタルサーバー「ロリポップ！ ハイスピードプラン」で運営しています。】

「ページネーションをもっと見やすくカスタマイズしたい……」
「記事が増えてきたのに、数字リンクが表示されなくなって困っている」
「標準の“前へ／次へ”ボタンだけじゃ味気ないから、デザインも自由に変えたい！」

そんな悩みはありませんか？

  • 「膨大な投稿一覧を見やすく整理したい」
  • 「プラグインを入れてみたけど、初期設定の意味がよくわからない」
  • 「テーマに組み込むとエラーが出てしまい、途方に暮れている」

もしあなたが 「WP-PageNavi」 の導入方法からデザイン調整、そしてトラブルシューティングまで、一つの記事で全部マスターしたいなら、まさにこの完全ガイドがぴったりです！

この記事では、

  1. プラグインのインストールと初期設定
  2. テーマへの組み込み手順
  3. デザインやテキストのカスタマイズ
  4. サブループ・トップページの応用例
  5. よくあるエラー対策と注意ポイント

を順を追って、初心者にもやさしく解説します。

さあ、スムーズなページ送りを実現し、あなたのサイトをもっと使いやすくしましょう！

目次

プラグインの概要と導入メリット

WP-PageNaviとは何か

WP-PageNaviは、WordPressサイトにシンプルでカスタマイズ性の高いページネーション（ページ送り）機能を追加できるプラグインです。

  • 自動的にページリンクを生成し、数字リンクや「前へ」「次へ」などのナビゲーションを挿入
  • テーマファイルに数行のコードを追加するだけで利用可能
  • デフォルトのスタイルだけでなく、CSSを使った自由なデザイン調整ができる

🔧 動作要件

  • WordPress 4.0以上
  • PHP 5.6以上
あわせて読みたい
WordPressのページネーション完全ガイド！自作からプラグイン活用まで徹底解説！ 「記事一覧が長すぎて読みづらい……」「自分でコードを書いてみたけど、エラーが出て全然動かない……」「プラグインを入れたけど、デザインがサイトに合わない……」 記事が…

導入する利点（UX改善・SEO効果など）

WP-PageNaviを導入することで得られる主なメリットは以下のとおりです。

✅ ユーザー体験（UX）の向上

  • 直感的なページ移動
    • ページ番号が一覧で表示されるため、訪問者は目的のページへスムーズに到達できる
  • リンク数の調整
    • 省略表示や表示ページ数を設定することで、リンクが多すぎず読みやすいナビを提供

✅ 検索エンジン最適化（SEO）への貢献

  • 内部リンク強化
    • 各ページ間のリンクが明確になり、クローラーの巡回を促進
  • 重複コンテンツの抑制
    • パラメータ付きURLの整理や正規化タグ (rel=”canonical”) と併用しやすい

✅ 設定の柔軟性

スクロールできます
項目説明
ページ数の表示範囲前後に何ページリンクを出すか調整可能
テキスト変更「前へ」「次へ」「最初」「最後」などを自由に編集
CSSカスタマイズ対応デフォルトCSSを無効化してオリジナルデザインを適用

🚀 導入手順の簡単さ

  1. 管理画面でプラグインをインストール＆有効化
  2. テーマのループ内に <?php if (function_exists('wp_pagenavi')) wp_pagenavi(); ?> を追加
  3. 管理画面でテキストや表示数を設定

以上のように、WP-PageNaviは初心者でも導入しやすく、かつサイトの利便性やSEOパフォーマンス向上に貢献するプラグインです。

インストールと初期設定

プラグインの導入手順

  1. 管理画面のサイドバーから「プラグイン」→「新規追加」を開く
  2. 検索欄に WP-PageNavi と入力し、該当プラグインが表示されたら 「今すぐインストール」 をクリック 🛠️
  3. インストール後に 「有効化」 を押して完了
  4. 有効化すると、設定メニューに 「PageNavi」 が追加されることを確認 ✅

ポイント

  • プラグイン名が似ているものもあるので、作者（Mte90）やアイコンを見て間違いを防ぎましょう。
  • インストールできない場合は、WordPress・PHPのバージョン要件をチェック。

管理画面での基本設定

有効化後、管理画面の「設定」→「PageNavi」へ移動すると以下の項目が設定できます。

スクロールできます
設定項目説明推奨例
総ページ数用テキスト例：Page %CURRENT_PAGE% of %TOTAL_PAGES% のように、現在／総数の表示フォーマットを指定Page %CURRENT_PAGE% of %TOTAL_PAGES%
「前へ」「次へ」用テキストリンクに表示される文言。日本語例：« 前へ / 次へ »« 前へ / 次へ »
最初／最後ページ用テキスト先頭・末尾へのリンク文字列。例：« 最初 / 最後 »« 最初 / 最後 »
表示するページ数ナビゲーションに表示する番号リンクの数。前後リンクとのバランスを考慮して設定（例：5〜7）7
省略表示するページ数中間を「…」で省略する際の間隔。大きいサイトでは多めに設定すると見やすい2

🎨 ヒント

  • 管理画面上部の「プレビュー」を使って、テキストや数値を変更したら即座に見た目を確認しましょう。
  • 設定を変更した後は必ず「変更を保存」ボタンをクリックして反映させてください。

テーマへの組み込み方法

メインループへの挿入例

WordPress標準のメインループ内でWP-PageNaviを呼び出す基本例です。

<?php if ( have_posts() ) : ?>
  <ul class="post-list">
    <?php while ( have_posts() ) : the_post(); ?>
      <li>
        <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
      </li>
    <?php endwhile; ?>
  </ul>

  <?php
    // ページネーションの表示
    if ( function_exists('wp_pagenavi') ) {
      wp_pagenavi();
    }
  ?>
<?php endif; ?>

関数呼び出し箇所とコード例

  • 呼び出し位置：whileループの直後、endif直前
  • コード補足：function_existsで存在チェックを行うと、プラグイン未有効時のエラーを防げます

“posts_per_page”を表示設定と合わせるコツ

  • 管理画面の「設定 → 表示設定」で指定した値と、テーマで手動設定した query_posts() や pre_get_posts の posts_per_page が異なるとページ送りがずれる場合があります
  • ポイント：
    • なるべく管理画面側で制御し、テーマ側では wp_pagenavi() のみ呼び出す
    • どうしてもテーマで設定したいときは、同じ数値を query_posts( array( 'posts_per_page' => get_option('posts_per_page') ) ); のように取得すると一元管理できます

固定ページ（page.php）での実装ポイント

固定ページに独自ループを組む場合、WP_Query を使ってページ送りを実装します。

<?php
  $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
  $args  = array(
    'post_type'      => 'post',
    'posts_per_page' => get_option('posts_per_page'),
    'paged'          => $paged,
  );
  $custom_query = new WP_Query( $args );
?>

<?php if ( $custom_query->have_posts() ) : ?>
  <ul class="page-list">
    <?php while ( $custom_query->have_posts() ) : $custom_query->the_post(); ?>
      <li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
  </ul>

  <?php
    if ( function_exists('wp_pagenavi') ) {
      wp_pagenavi( array( 'query' => $custom_query ) );
    }
    wp_reset_postdata();
  ?>
<?php endif; ?>

WP_Queryを使ったカスタムループの書き方

  • paged の取得：get_query_var('paged') で現在ページ番号を取得
  • query 引数：wp_pagenavi() に 'query' => $custom_query を渡すことで、サブクエリ内でも動作

アーカイブページ（archive.php）への適用手順

アーカイブテンプレートはメインループとほぼ同様。特別な設定は不要です。

<?php if ( have_posts() ) : ?>
  <h2><?php the_archive_title(); ?></h2>
  <ul class="archive-list">
    <?php while ( have_posts() ) : the_post(); ?>
      <li><?php the_date(); ?> – <a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
    <?php endwhile; ?>
  </ul>

  <?php if ( function_exists('wp_pagenavi') ) wp_pagenavi(); ?>
<?php endif; ?>
  • 注意点：pre_get_posts で posts_per_page を変更している場合は管理画面の設定と同期させましょう

投稿ページ（single.php）での導入例

通常、投稿ページはページ送りの必要は少ないですが、前後記事リンクとして活用できます。

<nav class="single-navigation">
  <?php if ( function_exists('wp_pagenavi') ) : ?>
    <?php
      // 記事単体の場合は、リンクテキストを置き換えて表示
      previous_post_link('%link', '« 前の記事へ');
      next_post_link('%link', '次の記事へ »');
    ?>
  <?php endif; ?>
</nav>

リンクテキストを「前の記事へ／次の記事へ」に置き換える方法

  • previous_post_link( '%link', '« 前の記事へ' );
  • next_post_link( '%link', '次の記事へ »' );
  • ヒント：CSSで .single-navigation a に余白やアイコンを追加すると、視覚的に分かりやすくなります ✨

デザイン・文言のカスタマイズ

表示テキストの変更方法

WP‑PageNaviでは、ナビゲーション内の文言を自由に編集できます。

管理画面の「設定 > PageNavi」で以下の項目をカスタマイズしましょう。

スクロールできます
設定項目説明
総ページ数用テキストPage %CURRENT_PAGE% of %TOTAL_PAGES% のように変数を組み込んで設定
前へ／次へ用テキスト日本語にしたりアイコンを混ぜたりして個性を出せる
最初／最後ページ用テキスト« First → « 最初 等、サイトのトーンに合わせて変更

ヒント

  • %CURRENT_PAGE% と %TOTAL_PAGES% は必ず残すこと。
  • テキスト欄に絵文字（例：🔙 ▲）を入れると、視覚的にわかりやすくなります！

CSSで見た目を調整するコツ

同梱のpagenavi-css.cssをカスタマイズ

プラグイン同梱の pagenavi-css.css をテーマ側にコピーし、以下の手順で上書き編集します。

/* 例：ページ番号の背景色とホバー時のアニメーション */
.wp-pagenavi a, .wp-pagenavi span.current {
  background-color: #f2f2f2;
  padding: 8px 12px;
  margin: 0 4px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}
.wp-pagenavi a:hover {
  background-color: #e0e0e0;
}
  1. テーマフォルダ内に css/ フォルダを作成
  2. pagenavi-css.css をコピー
  3. functions.php で読み込みを自前のCSSに置き換え
   function my_enqueue_pagenavi_style() {
     wp_enqueue_style('wp-pagenavi-custom', get_template_directory_uri() . '/css/pagenavi-css.css');
   }
   add_action('wp_enqueue_scripts', 'my_enqueue_pagenavi_style');

独自スタイル適用のサンプル

デザイン性を高めるサンプルとして、以下のようなカスタムCSSもおすすめです。

/* 丸型デザイン＋シャドウ */
.wp-pagenavi a, .wp-pagenavi span.current {
  display: inline-block;
  width: 36px;
  height: 36px;
  line-height: 36px;
  text-align: center;
  border-radius: 50%;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  background-color: #fff;
}

.wp-pagenavi a:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,0.2);
  transform: translateY(-2px);
}
  • ポイント
    • border-radius: 50% で丸型に
    • box-shadow と transition を組み合わせて動きを追加
    • テーマのカラーパレットに合わせて background-color を統一

以上のカスタマイズを行えば、テキストも見た目もサイトのブランドにフィットしたページネーションが実現できます。

応用編：サブループやトップページでの活用

サブクエリ内への適用テクニック

現在ページ番号を引数で渡す方法

サブループ（カスタムクエリ）では、デフォルトの paged 変数だけでなく、正しいページ番号を取得して渡す必要があります。

以下のように get_query_var() を使って現在のページを捕捉しましょう。

// ページ番号の取得（サブループでの定番テンプレート）
$paged = max(
  1,
  get_query_var('paged'),
  get_query_var('page')   // front-page.php や固定ページテンプレート用
);
$args = array(
  'post_type'      => 'post',
  'posts_per_page' => get_option('posts_per_page'),
  'paged'          => $paged,
);
$sub_query = new WP_Query($args);

💡 ポイント

  • max() を使うことで、未指定時は必ず 1 ページ目を返します
  • 固定フロントページやカスタムテンプレートでは page が使われるケースがあるため、両方チェックするのが安全

引数付きwp_pagenavi()の呼び出し例

上記で用意した $sub_query を wp_pagenavi() に渡すと、サブループでも正しくページネーションが動作します。

if ( $sub_query->have_posts() ) :
  while ( $sub_query->have_posts() ) : $sub_query->the_post();
    // 投稿一覧の出力
  endwhile;

  // wp_pagenavi にカスタムクエリを指定
  if ( function_exists('wp_pagenavi') ) {
    wp_pagenavi( array( 'query' => $sub_query ) );
  }

  wp_reset_postdata();
endif;
スクロールできます
項目解説
query 引数対象クエリオブジェクトを指定し、サブループのページ送りを有効化
function_existsプラグイン未有効時の PHP エラーを防止

トップページでの不具合と解決策

現象

  • フロントページ（home.php／front-page.php）にカスタムループを組むと、ページリンクをクリックしても常に1ページ目が表示される

原因

  • テンプレートによっては paged ではなく page クエリ変数が使われる
  • テーマのリライトルールや固定フロント設定が影響し、正しいページ番号が取得できない

解決手順

  1. paged と page の両方をチェック
   $paged = max(
     1,
     get_query_var('paged'),
     get_query_var('page')
   );
  1. クエリ引数に適用
   $args['paged'] = $paged;
   $custom = new WP_Query($args);
  1. 必要に応じてパーマリンク設定の再保存
    • 管理画面＞設定＞パーマリンクを開き、「変更を保存」を押すとリライトルールが更新されます 🔄
スクロールできます
チェックポイント解決策
ページャ表示は出ているが動かない上記の $paged 取得方法を導入
404エラーが出るパーマリンク設定を再保存してリライトルールをリフレッシュ
静的フロントページ利用時front-page.php でも同じ $paged 取得ロジックを適用

これでサブループやトップページ特有の問題にも対応でき、あらゆる場面で安定したページネーションを実現できます！

トラブルシューティング＆注意点

ページネーションが表示されない場合の対策

ページネーションが出ない主な原因と対策を以下にまとめました。

スクロールできます
症状原因対策
ナビがまったく表示されないwp_pagenavi() を呼び出していないループ直後に <?php if(function_exists('wp_pagenavi')) wp_pagenavi(); ?> を追加
関数未定義エラー（Fatal error）プラグインが無効化されているプラグインが有効化されているか確認 ✔️
投稿数が1ページ分以下でナビが表示されない投稿件数がページネーションの最低件数に達していない投稿数を増やすか、always_show オプションを有効化

Tip

  • function_exists チェックを必ず入れることで、プラグイン非インストール時のエラーを防げます。
  • 管理画面の「設定 > PageNavi」で 「常にページナビゲーションを表示」 をオンにすると、少ない投稿数でもナビを表示できます。

WP_Query利用時に起こりがちなエラーと対処

カスタムクエリを使う際、ページネーション周りでよくあるトラブルと解決策です。

  • 無限ループに陥る
    • 原因：while ( have_posts() ) とカスタムクエリの have_posts() を混同
    • 対策：必ず $custom_query->have_posts() を使い、最後に wp_reset_postdata() を呼ぶ
  while ( $custom_query->have_posts() ) : $custom_query->the_post();
    // …
  endwhile;
  wp_reset_postdata();
  • ページ移動しても常に1ページ目が表示される
    • 原因：paged の取得方法が誤っている
    • 対策：get_query_var('paged')／get_query_var('page') を max() で正しく取得
  $paged = max( 1, get_query_var('paged'), get_query_var('page') );
  • 404エラーが出る
    • 原因：パーマリンク設定のリライトルールが古い
    • 対策：管理画面の「設定 > パーマリンク」を再保存 🔄

カスタム投稿タイプ間で件数が合わない問題への対応

カスタム投稿タイプを混在させたループで、期待する件数と実際の表示件数が異なる場合のチェックポイントです。

  1. post_type の指定漏れ
    • 症状：デフォルトの投稿のみが対象になる
    • 対策：post_type に配列で複数指定
    $args = array( 'post_type' => array('post', 'custom_type'), 'posts_per_page' => 5, 'paged' => $paged, );
  2. posts_per_page の意図しない上書き
    • 症状：管理画面設定と異なる件数で表示される
    • 対策：pre_get_posts フックを確認し、不要な書き換えを削除または制限
  3. キャッシュ／キャッシュプラグインの影響
    • 症状：設定変更が反映されない
    • 対策：キャッシュプラグインを一時停止し、再確認

注意

  • カスタム投稿タイプを扱う場合は、必ず query に渡すWP_Queryオブジェクト を wp_pagenavi() に指定してください。
  • 多言語サイトやアーカイブのカスタマイズがある場合、is_post_type_archive() など条件分岐の追加を検討しましょう。

以上のチェックリストを確認すれば、ほとんどのトラブルに対応可能です。

これでWP-PageNaviを安心して導入できるようになります！

まとめ

この記事では「WP-PageNavi」を使ったページネーションの導入から応用まで、以下のポイントをカバーしました。

  • 簡単インストール＆初期設定：管理画面で数クリック、テキストや表示数も自由自在
  • テーマ組み込み：メインループから固定ページ、アーカイブ、投稿ページまで対応
  • デザイン＆文言の調整：同梱CSSの編集方法から独自スタイル例まで紹介
  • 応用テクニック：サブループでの正しいページ番号取得や、トップページ特有の不具合解決
  • トラブルシューティング：表示されない／エラーが出る／件数が合わない問題への具体策

これらを実践すれば、訪問者にとってわかりやすく、管理者にとっても扱いやすい理想のページナビゲーションが完成します。

ぜひ本ガイドを参考に、あなたのWordPressサイトに最適なページネーションを構築し、ユーザー体験とSEO効果の両方を高めてください！

🚀 さあ、WP-PageNaviでサイトの魅力をワンランクアップ！

【WordPressブログを始めるには、レンタルサーバー、WordPressテーマが必要です↓】

レンタルサーバーおすすめ比較｜コスパ・表示速度・安定性から見た本当に使えるサーバーを紹介

WordPressテーマ徹底解説｜基礎知識・選び方・おすすめ（無料・有料）

WordPressの始め方 完全ロードマップ【超初心者でも10分で開設OK！】

WordPress プラグイン

関連記事

目次