『WP-PageNavi』の使い方まとめ【コピペOK+表示されない問題】

『WP-PageNavi』の使い方まとめ【コピペOK+表示されない問題】

この記事では、WordPressプラグイン『WP-PageNavi』の使い方について解説しています。

基本的なことから例外まで網羅的にまとめておりますので、初心者の方やページャーが正常に動作しない(表示されない)事でお困りの方は参考にしてみてください、コピペですぐに使える形でコードも公開しています。

『WP-PageNavi』の基本的な使い方

『WP-PageNavi』の基本的な使い方としては、WP-PageNaviをインストールし有効化した上で下記コードをページネーションさせたいところにコピペする、これだけです。

<?php wp_pagenavi(); ?>

固定ページで使いたい時【WP_Query使用】

先ほど解説した方法では上手く動作しない場合がありまして、例えば[WP_Query]を使用してループを回しているとか、固定ページやカスタム投稿タイプをループさせているページで起こりがち。

[WP_Query]で記事をループさせている場合は下記のような感じで実装する必要があります、足らない部分を補う形でご利用ください。

①:WP_Query【オプション】

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 10,
  'paged' => $paged
);

$my_query = new WP_Query( $args );

ポイントは1行目と5行目ですね、『WP-PageNavi』を使用するためのオプションを用意しています。

②:『WP-PageNavi』の実行処理

if(function_exists('wp_pagenavi')){
	wp_pagenavi(array('query'=>$my_query));
}

wp_reset_postdata();

ポイントは5行目、8行目にあるwp_reset_postdata()の手前でwp_pagenaviの処理を実行させます、記述位置が違うだけで動作しなくなるので注意してください。

※2行目にある$my_queryは先ほど解説した「①:WP_Query【オプション】」の8行目にある$my_queryと紐づいていますので、適時変更しておいてください。

アーカイブページで上手く動作しない時

アーカイブページ内のループを[WP_Query]で回しているとページネーションは表示されるも、2ページ目が404となり表示されない場合があります、これはループのオプションで設定している表示件数と、管理画面で設定している表示件数が一致していないことが原因として考えられます。

$paged = get_query_var('paged') ? get_query_var('paged') : 1;
$args = array(
  'post_type' => 'post',
  'posts_per_page' => 10,
  'paged' => $paged
);

$my_query = new WP_Query( $args );

4行目の[posts_per_page]で表示件数を制御しています、この場合は最大10記事表示になります。

設定 > 表示設定 > 1ページに表示する最大投稿数

管理画面から「設定 > 表示設定」とアクセスし、1ページに表示する最大投稿数で設定している数字とコードで設定した表示件数を一致させると表示されます、この場合は両方とも表示件数「10」で一致しているので正常に動作します。

アーカイブページでページネーションが上手く動作しないという方は一度チェックしてみてください。

おまけ:『WP-PageNavi』で任意のクラスを付ける方法

デフォルトのスタイルだと物足りない、カスタマイズしたいという方で『WP-PageNavi』に任意のクラスを付与したいという方は実行時の処理を下記のようにすればOKです(下記はWp_Query使用時)

if(function_exists('wp_pagenavi')){
  wp_pagenavi(array('wrapper_class' => 'ここに変更後のクラス名','query' => $my_query));
}

2行目にある「ここに変更後のクラス名」の部分をクラスに置き換えると、ラッパーに付与されるクラスがそれに変わります、是非お試しあれ。

他の人が読んでいる記事

コメント (0)

コメントする人

セキュリティのためreCAPTCHAを利用しています。
Googleのプライバシーポリシー利用規約が適用されます。
うぇぶとまと|Webエンジニア
うぇぶとまと|Webエンジニア

飲食→派遣→IT系ベンチャーに転職。
本業をベーシックインカムとし、やりたい事に挑戦するWebエンジニア。