WordPressのアーカイブページによくあるページナビ（ページネーション、ページャー）を作る方法をご紹介したいと思います。
導入はすごく簡単なので、キャプチャとコードで簡単に解説しておきます。
まずはじめにWordPressにログインして「プラグイン」を開きます。
そして画像の様に「プラグイン」のタイトルの横にある「新規追加」をクリックします。
次にプラグインのインストール画面が表示されたら「検索」のテキスト入力エリアに
「WP-PageNavi」と入力し「プラグインの検索」をクリックします。
上の画像の様にプラグインのリストに「WP-PageNavi」が表示されるので、
「いますぐインストール」をクリックします。
そしてインストールが完了したら、プラグインの有効化をします。
ここまででプラグインのインストールは終わりです。
次にインストールした「WP-PageNavi」の設定を行います。
WordPressのログイン画面にあるサイドナビの「設定」を選択し、「PageNavi」をクリックします。すると下の様な画面になります。
簡単に説明しておきます。
【総ページ数用テキスト】
「1/8」の様に総ページ中の現在ページを表示します。
また、ページナビの一番左に表示されます。
【現在のページ用テキスト】
現在表示されているページを表す設定項目です。
標準で入力されている%PAGE_NUMBER%のままで良いかと思います。
【ページ用テキスト】
現在表示されているページ以外を表す設定項目です。
これも標準のままページ番号が表示されるままで良いかと思います。
【最初のページ用テキスト】
最新のページへのリンク用の設定項目です。
標準では「<< 先頭」と入っていますが、「<< First」などに変更するのも良いかもしれませんね。
【最後のページ用テキスト】
最古のページへのリンク用の設定項目です。
標準では「最後 >>」と入っていますが、「Last >>」などに変更するのも良いかもしれませんね。
【前のページ用テキスト】
現在表示されているページの前のページへのリンク用の設定項目です。
標準では「<<」と入っていますが、「前のページ」や「Prev」などに変更するのも良いかもしれませんね。
【次のページ用テキスト】
現在表示されているページの次のページへのリンク用の設定項目です。
標準では「>>」と入っていますが、「次のページ」や「Next」などに変更するのも良いかもしれませんね。
【「前へ…」用テキスト】【「次へ…」用テキスト】
ページ数が多いときに後述の「表示するページ数」で設定したページ数を超えた時に表示されるテキストの設定項目です。
次に「ページナビゲーション設定」です。
【pagenavi-css.cssを使用】
「WP-PageNavi」の標準のCSSを使用するかを選択する設定項目です。
「No」を選択し、開発ツール等でクラス定義を確認し自作のCSSを使用してもOK。
「Yes」を選択し標準のCSSを使うのも良いかと思います。
「pagenavi-css.css」の場所は
「wp-content」→「plugins」→「wp-pagenavi」の中にあります。
そのままオリジナルを編集しても適用されますが、プラグインをアップデートしたときに「pagenavi-css.css」が元に戻ってしまうので、テーマフォルダにコピーしてそこで編集するのがベターだと思います。
「Yes」を選択していれば、テーマフォルダ内の「pagenavi-css.css」を参照し、テーマフォルダ内に「pagenavi-css.css」が無ければプラグインフォルダ内の「pagenavi-css.css」を参照する設定になっているのでテーマフォルダ内に「pagenavi-css.css」をコピーし編集すれば問題はありません。
【Page Navigation スタイル】
「通常」が「ドロップダウン」かを選択出来ます。
CSSを理解出来る人であれば「通常」を選択し、「pagenavi-css.css」で好きなスタイルに変更するのが良いと思います。
【常にページナビゲーションを表示】
説明の通り、1ページしかない場合でもナビゲーションを表示するかを決める設定項目です。
【表示するページ数】
表示するページナビの数を決める設定項目です。
例えば20ページ存在した時「5」に設定すると「1 2 3 4 5 …」となります。
2ページ目を表示したときは「… 2 3 4 5 6 …」となります。
「…」の部分は前述の【「前へ…」用テキスト】【「次へ…」用テキスト】で設定した内容が適用されます。
【省略表示するページ数】【省略ページを以下の倍数で表示】
こちらの2項目に関しては解説が表示されているので省略します。
これで「WP-PageNavi」プラグインの設定は終了です。
次にページナビを表示する設定です。
表示する為のソースは以下の用に記述します。
<ul>
<?php query_posts('posts_per_page=10&amp;paged='.$paged); ?>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
//コンテンツ
<?php endwhile; if(function_exists('wp_pagenavi')) { wp_pagenavi();} endif; ?>
<?php wp_reset_query(); ?>
</ul>
まず<?php query_posts(‘posts_per_page=10&paged=’.$paged); ?>から説明します。
「query_posts();」は投稿の内容を取得する記述です。
「’posts_per_page=10」は記事を10ページ分表示する。という記述です。
「&」はそのままの意味です。
「paged=’.$paged」はページナビを表示する為の記述です。
次に<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>ですが、これは取得した投稿の内容をループさせる為の通常のループの記述です。
<?php endwhile; if(function_exists(‘wp_pagenavi’)) { wp_pagenavi();} endif; ?>ですが、これは通常のループの閉じタグが<?php endwhile; endif; ?>となっている所に
「if(function_exists(‘wp_pagenavi’)) { wp_pagenavi();}」を追加したものになります。
この「if(function_exists(‘wp_pagenavi’)) { wp_pagenavi();}」を追加することで、プラグインを呼び出し、前述で設定した内容を表示させます。
これを記述し忘れるとWordpress標準の「<< 前ページへ」「次ページへ >>」のままでプラグインが適用されません。
以上でページナビの設定が全て完了しました。
いかがでしたでしょうか？
ざっくりとした解説なのでお分かり頂けない方もいらっしゃると思いますが、そういった場合はコメントで質問を頂けましたら、可能な範囲で回答致します。
でわでわ
Good bye!
参考にしたサイト
ワードプレス> WP-PageNavi«ワードプレスプラグイン
関連
