ページ送りをかっこ良くする：WP-PageNavi

WordPressのデフォルトのページ送りは、前のページと次のページがそれぞれ1ページずつ表示されるというもの。個別記事のページならそれでもいいと思いますが、トップページやカテゴリ別ページが全部で何ページあるのか分かったり、直前または次以外のページにもジャンプできたりするのがこの「WP-PageNavi」です。

インストールは一般的なWordPressのプラグインと同じく、ダウンロードしてフォルダをアップロードし、管理画面でプラグインを利用開始するのですが、それだけでなくテンプレートの書き換えが必要になってきます。

WP-PageNavi 2.31 のUsage Instructionsにはfooter.phpに指定したPHPのコードを埋め込むように書いてありましたが、私の場合これではうまくいきませんでした。現在のテーマでは本文部分が白背景、その外側が黒背景となっていますが、私が使っているテーマのfooter.phpは黒背景の部分のようで、footer.phpの最初にコードを埋め込むと、白背景と黒背景をまたぐようにページナビゲーションが表示されてしまい、元々あった（あるいは、今使っているテーマで埋め込まれている？）ページナビゲーションも消えないのです。

なので、以下は私が使っている「ligneous」というテーマ限定かもしれませんが、以下のようになりました。

コードを埋め込むのはテーマエディタのアーカイブ （archive.php :月ごと、カテゴリごとの記事）、メインインデックスのテンプレート （index.php :トップページの表示）の2つ。<div class=”navigation”>と指定している部分に入れました。

以下の太字にした「<?php if～」という部分が埋め込んだコードです。さらに、元々あったページ送りのリンクはコメントアウトしています。


<div class="navigation">
<?php if(function_exists(’wp_pagenavi’)) { wp_pagenavi(); } ?>
<!– wp_pagenaviを入れるため、代わりに消す
<div class=”alignleft”><?php next_posts_link(’&laquo; Older Entries’) ?></div>
<div class=”alignright”><?php previous_posts_link(’Newer Entries &raquo;’) ?></div>
–>
<br style=”clear: both” />
</div>


次に、スタイルシートで見た目をいじります。スタイルシートはプラグイン解説にある通り、「/wp-content/plugins/wp-pagenavi/pagenavi-css.css」にあるので、ローカルでテキストエディタを使っていじり、FTPでサーバにあげました。これが管理画面でできるようになると良いなあと思います。

デフォルトでは、ジャンプできるページのリンク色が#0066cc（青色）なのでこれを置換します。ここでは、このテーマでポイント的に使っている#ff4666（ピンク）にしました。

見た目は、このブログのトップページをずずっと一番下までスクロールしてみてください。「Page 1 of 4」（10月17日時点）に続いてページごとのリンクがついていると思います。