ホーム
WP（WordPress）
【WordPress】プラグイン「WP-PageNavi」で手軽にページナビを設定

2019.11.9

【WordPress】プラグイン「WP-PageNavi」で手軽にページナビを設定

コンテンツ

プラグイン「WP-PageNavi」の設定

「WP-PageNavi」というプラグインの紹介です。

こちらは、ページナビを自動で作成してくれる非常に便利なプラグインで、
かなりお世話になっているプラグインの一つです。
※ページナビってオリジナルで作成するは面倒ですからね。。。

基本的には、プラグインをインストールして、ソースコードを少しいじるだけです。

「WP-PageNavi」のインストール方法と有効化

インストールは簡単です。
プラグインのインストール画面から「WP-PageNavi」で検索を行い、「今すぐインストール」をクリックして、
インストールを実行するだけです。
プラグイン「WP-PageNavi」をインストール

↓

インストールが完了したら、「有効化」ボタンに切り替わるので、
その「有効化」ボタンをクリックして、プラグインを有効にして下さい。
プラグイン「WP-PageNavi」を有効化

これで、「WP-PageNavi」のインストールから有効化まで完了です。

このあとは、ページナビを表示させたい場所に「wp_pagenavi()」を記述すれば、ナビが表示されるようになります。
このような感じで。

実際には、1点問題も発生するので、
コードの設定については、以下で詳しく説明していきます。

ページナビの設定方法

ページナビを表示させるには、
テーマファイルを開いてページナビを表示させたい場所に「wp_pagenavi()」を追記するだけです。

基本的なソースコードはこのような感じになるかと思います。

<?php
$query = new WP_Query(
  array(
    'post_type' => '投稿タイプ',
    'posts_per_page' => 10
  )
);
?>
<?php
if ( $query->have_posts() ) : ?>
<ul>
<?php while ( $query->have_posts() ) : $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(); ?>

ただ、このコードの書き方だと、
2ページ目以降が正常に表示されない（404エラーになる）など不具合を起こします。

このプラグインを使用した場合には発生する有名な不具合です。

その為、
「WP-PageNaviは使うな！」といった記事を見かけたこともあります。

が、大丈夫です。

解決策はあるので、上手に使えば問題のない（むしろかなり便利な）プラグインです。

対応としては、「paged」に値をきちんと設定してやることです。

このようにコードを修正すれば、正常に動作します。

<?php
$paged = get_query_var("paged") ? get_query_var("paged") : 1;
$query = new WP_Query(
  array(
    'paged' => '投稿タイプ',
    'posts_per_page' => 10,
    'paged' => $paged
  )
);
?>
<?php
if( $query->have_posts() ) : ?>
<ul>
<?php while ( $query->have_posts() ) : $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' => $query)); ?>

これで問題なく動作すると思いますが、
設定後は、必ず入念に動作確認を行って下さい。

「PageNavi 設定」画面の説明

「WP-PageNavi」をインストールすると、プラグイン専用の設定画面も追加されます。
そちらの画面の説明も行っておきます。

管理画面左カラムの「設定」→「PageNavi」メニューを選択して下さい。
以下のような設定画面に遷移します。
PageNaviメニュー

各設定項目、日本語訳されているので、それぞれ見ていけば、何の設定を行う項目かなんとなく分かると思います。
が、一応、各項目説明していきます。

■総ページ数用テキスト

総ページ数の表示形式を設定します。
デフォルトでは「%CURRENT_PAGE% / %TOTAL_PAGES%」と設定されているので、「1 / 5」のような形式で表示されます。

■現在のページ用テキスト

現在、閲覧中ページのページ番号の表示形式を設定します。
デフォルトでは「%PAGE_NUMBER%」と設定されています。

■ページ用テキスト

他ページのページ番号の表示形式を設定します。
デフォルトでは「%PAGE_NUMBER%」と設定されています。

■最初のページ用テキスト

最初のページ（1ページ目）へのリンクテキストを設定します。
デフォルトでは「« 先頭」が設定されていますが、記事数が少ないと表示されません。

■最後のページ用テキスト

一番最後のページへのリンクテキストを設定します。
デフォルトでは「最後 »」が設定されていますが、記事数が少ないと表示されません。

■前のページ用テキスト

1つ前のページへのリンクテキストを設定します。
デフォルトでは「«」が設定されています。
変更する場合は、「Previous」や「Prev」「前へ」などの表現がピッタリです。

■次のページ用テキスト

1つ後ろのページへのリンクテキストを設定します。
デフォルトでは「»」が設定されています。
変更する場合は、「Nexy」や「次へ」などの表現がピッタリです。

■「前へ…」用テキスト

ページナビが長くなった場合に表示されるテキストです。
「前へ…」用テキスト

■「次へ…」用テキスト

ページナビが長くなった場合に表示されるテキストです。
「次へ…」用テキスト

■pagenavi-css.css を使用

プラグインのデフォルトのCSSである「pagenavi-css.css」を利用するかどうかの設定です。
もし、オリジナルでCSSを用意する場合には、「いいえ」にして下さい。

■Page Navigation スタイル

ページナビの表示形式を設定します。
デフォルトの形式とは別に、「ドロップダウンリスト」を選択することも可能です。

■常にページナビゲーションを表示

「はい」を選択すると、1ページしかない状態でもページナビが表示されるので、
何も選択しなくてOKです。
※もしくは、「いいえ」を選択して下さい。

■表示するページ数

表示するページ数を設定します。

デフォルトだと「5」が設定されているので、
例えば5ページ目を閲覧中であれば、この様に「3」「4」「5」「6」「7」のページ番号が表示されます。
表示するページ数

■省略表示するページ数

この部分に表示するページ番号の数を設定します。
省略表示するページ数

デフォルトでは「3」が設定されていますが、
表示させたくない場合は「0」を設定して下さい。

■省略ページを以下の倍数で表示

上記の「省略表示するページ数」で設定したページ番号の間隔数を設定します。

デフォルトだと「10」が設定されているので、上記画像の例だと「10」「20」「30」と10間隔で表示されていますが、
例えば「5」に変更すると「10」「15」「20」となります。

ページナビのデザインを変更

プラグイン「WP PageNavi Style」が動作しなくなってしまった...

以前は、「WP PageNavi Style」というプラグインを利用することで、
簡単にページナビのデザインを変更できていました。

が、PHP7以降、このプラグインが動作しなくなりました。
具体的には、スタイルの選択を行えなくなりました。
WP PageNavi Styleが動作しない

数年間も更新されていないプラグインなので、仕方ないですね。
既に、最終更新日から5年が経過しています。
WP PageNavi Style

このプラグインは諦めて、別のプラグインを検索すると、「Styles For WP Pagenavi Addon」というプラグインが出てきたので、
こちらを使用してみることにしました。

↓

プラグイン「Styles For WP Pagenavi Addon」を利用する方法

「Styles For WP Pagenavi Addon」をインストールすると、
管理画面左カラムに「WPOS - Pagenavi」メニューが追加されるので、クリックしてみて下さい。
以下のような設定画面に遷移します。

Styles For WP Pagenavi Addon
各項目英語表示になっていますが、
難しい英語表記ではないので、各項目を確認しながら設定を変更して下さい。

テキストの文字色やサイズ、背景色や背景線の色の設定を行えます。
例えば、このような見た目に変更することも可能です。
ページナビを表示

オリジナルでデザインを変更

ページナビのデザインを、サイトデザインに合わせてオリジナルで変更したい場合があります。

その場合は、「WP-PageNavi」で吐き出されているIDやclassを解析して、
オリジナルデザインに変更することも可能です。

その場合、まず、管理画面左カラムの「設定」→「PageNavi」メニューから、
デフォルトのCSS「pagenavi-css.css」を使用しないように設定しておきます。
pagenavi-css.cssを使用しない

↓

で、実際に吐き出されているページナビのHTMLを、ブラウザから確認してみます。
以下のようなソースが吐き出されていると思います。

<div class='wp-pagenavi' role='navigation'>
<span class='sfwppa-pages'>2 / 5</span><a class="sfwppa-pages sfwppa-link sfwppa-link-previous" rel="prev" href="https://example.com/">&laquo;</a><a class="sfwppa-pages sfwppa-current-page smaller" title="Page 1" href="https://example.com/">1</a><span aria-current='page' class='current'>2</span><a class="sfwppa-pages sfwppa-current-page larger" title="Page 3" href="https://example.com/page/3/">3</a><a class="sfwppa-pages sfwppa-current-page larger" title="Page 4" href="https://example.com/page/4/">4</a><a class="sfwppa-pages sfwppa-current-page larger" title="Page 5" href="https://example.com/page/5/">5</a><a class="sfwppa-pages sfwppa-link sfwppa-link-next" rel="next" href="https://example.com/page/3/">&raquo;</a>
</div> </div>

まず、全体に「wp-pagenavi」というclassが設定されており、さらに各ページ番号を囲っているapanやaタグにclassを設定されていることが分かると思います。

これらに対して、オリジナルでスタイルを書いていけば、自由にデザインを変更することが可能です。

今回は、CSSのサンプルなどは用意していないので、
各自で試してみて下さい。