【WordPress】WP-PageNaviの使い方【ページネーション】

パソ君

・WP-PageNaviの使い方は？

こんな疑問にお答えします。

WP-PageNaviはWordPress用のページナビゲーションプラグインです。

ページャーを生成し、投稿やページのナビゲーションをより簡単に管理できます。

例として「＜➀➁➂➃➄＞」みたいなやつですね。

あれ実はWP-PageNaviを使えば、簡単に実装できちゃいます。

ジト

使ってみよう！

ということで、この記事では「WP-PageNaviの使い方」について解説していきます！

【WordPress】WP-PageNaviとは？【ページネーション】

WP-PageNaviとは、ページネーションを簡単に作成できるプラグイン。

簡単に下記を作成することができます。

記事一覧ページにほぼ必須となるページネーションが、簡単に実装できてしまう。。かなり便利。

【WordPress】WP-PageNaviの使い方【プラグイン】

WP-PageNaviの使い方はこちらの手順。

順に見ていきましょう。

➀：インストールして有効化

まずWP-PageNaviプラグインをインストールして有効化しましょう。

WP-PageNaviと検索すればでてきますよ。

➁：管理画面の「PageNavi」項目をクリック

有効化すると管理画面の設定に「PageNavi」の項目がでてきます。

この部分をクリックして、設定項目画面へいきましょう。

あとは設定するのみ

あとは設定するのみ。（設定説明は後ほど）

基本的に「PageNavi」は下記のように使用します。（案件にもよりますが）

つまりあとやることは、カスタマイズして表示って感じですね。

【WordPress】WP-PageNaviの設定方法【ページネーション】

コードの記述や、管理画面から行うカスタマイズ方法についてみていきましょう。

管理画面でカスタマイズ

まず管理画面から細かいカスタマイズをしていきます。

といってもそこまで設定することはありません。今回は重要な点のみ紹介していきますね。

ページナビゲーションテキスト

この部分のカスタマイズとしては、いらなかったらテキストを削除。変更したいならテキストを変えるという感じですね。

要はテキストのカスタマイズということ。

デザインによってカスタマイズしましょう。

ページナビゲーション設定

ここはページネーションの番号やスタイルをカスタマイズできる部分。

案件にもよりますが、通常下記の設定をしますね。

ジト

ここは案件のデザインにあわせよう

コードを記述して反映

「WP-PageNavi」によるページネーションは、下記コードをphpファイルに記述して反映します。

メインループの場合

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

実際にメインループ内に入れると↓

<?php if ( have_posts() ) : ?>
  <?php while(have_posts()): the_post(); ?>
    <!-- 処理内容 -->
  <?php endwhile; ?>

  <!-- wp-pagenaviの記述 -->
    <?php if (function_exists('wp_pagenavi')) {
      wp_pagenavi();
    } ?>
  <!-- wp-pagenaviの記述ここまで -->

<?php endif; ?>

メインループの場合は、上記コードを記述すればOK。

サブループの場合

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

実際にサブループ内にいれると↓

<?php
  $paged = get_query_var('paged') ? get_query_var('paged') : 1;
  $args = array(
    'post_type' => 'work',
    'posts_per_page' => 10,
    'paged' => $paged
  );
  $the_query = new WP_Query($args);
?>
<?php if ($the_query->have_posts()): ?>
  <?php while ($the_query->have_posts()) : $the_query->the_post(); ?>
  <?php the_title(); ?>
  <?php endwhile; ?>
  <!-- wp-pagenaviの記述 -->
  <?php if (function_exists('wp_pagenavi')) {
      wp_pagenavi(array('query' => $the_query));
  } ?>
  <!-- wp-pagenaviの記述ここまで -->
<?php endif; wp_reset_postdata(); ?>

$pagedを使ってページネーションが正しく機能するようにしています。

また「wp_pagenavi(array(‘query’ => $the_query));」部分の引数に、WP_Queryの変数を代入することで、上手く機能するようにしております。

$pagedに関しては$pageになる場合もあるので、ちょっとややこしめ。

詳細は下記をどうぞ。

2023年3月7日 【解説】get_query_var(‘paged’)とは？【(‘page’)との違い】

CSSにてページネーションを調整

あとはCSSでデザイン通りにページネーションを調整していくだけですね。

ちなみにデフォルトで表示されるコードがこちら↓

<div class="wp-pagenavi">
  <span class="pages">3 / 5</span>
  <a class="previouspostslink" rel="prev" href="?paged=2">«</a>
  <a class="page larger" title="Page 1" href="?paged=1">1</a>
  <a class="page larger" title="Page 2" href="?paged=2">2</a>
  <span class="current">3</span>
  <a class="page larger" title="Page 4" href="?paged=4">4</a>
  <a class="page larger" title="Page 5" href="?paged=5">5</a>
  <a class="nextpostslink" rel="next" href="?paged=4">»</a>
</div>

あとはそのHTMLに沿ってCSSを記述していけばOK。

.wp-pagenavi {
    
}
.wp-pagenavi .pages {
    
}
.wp-pagenavi .previouspostslink {
    
}
.wp-pagenavi .page {
    
}
// 現在のページ番号
.wp-pagenavi .current {
    
}
.wp-pagenavi .nextpostslink {
    
}

【WordPress】WP-PageNaviの注意点【posts_per_pageを使用する場合】

ループ文で手動で「posts_per_page」を指定する際は注意が必要です。

というのも「管理画面で設定した最大投稿数」「posts_per_pageの値」＜になったとき、不具合がおこり、上手くページネーションが機能しないため。

大前提↓

要は管理画面の下記部分ですね。

ここの数字が１０だとします。
そして「posts_per_page」で指定した投稿数が６だとします。

この場合「１０＞６」になってしまい、2ページ目以降のページャーが表示されない不具合へとつながります。

ちょっと難しいがとりあえず対策しておこう

正直ちょっと難しですよね。

とりあえずWP-PageNaviを使う際に、「posts_per_page」を使うなら、「1ページに表示する最大投稿数」との値の差に気を付けようって話です。

管理画面側の表示数を１にしておけばOK。これでうまく機能するかと。

【WordPress】WP-PageNaviの使い方【ページネーション】：まとめ

ジト

ページネーションを簡単に作れるのでおすすめだよ！

コーディング知識を
『チート級』に得れる教材を作成！

見てみる⋙