ちょっとおしゃれなページャーをWordPressにつける方法

ブログなどでよく見るページャーですが、WordPressのデフォルトでは
「次のページへ→」のようなちょっと寂しいリンクになっています。

1 2 3 4 .. >> のような、ページ数の分かりやすいページャーにしたいですね。

WordPressにページャーをつける方法はいろいろありますが、
今回は簡単便利なページャープラグインと使い方を紹介します。

WP-PageNavi

とっても有名なプラグインです。

プラグインをインストールする

管理画面のプラグインから「新規追加」を選び、「WP-PageNavi」で検索します。

ひっかかりました。インストールしましょう。

無事インストールが終わりました。
有効化して完了です。

プラグインの設定を変更する

設定を変えたい方はこの方法で変更しましょう。

プラグインを有効化すると、設定のポップアップメニューに「PageNavi」が増えてます。

ページャーの設定画面がでました。
ここで戻るリンクの文字列などを指定します。日本語なのでわかりやすいですね。

ページャーを設置する

準備は完了しました！それではページャーを設置してみます。
コードは簡単、ページャーを設置したい場所（※記事ループ外）に

<?php wp_pagenavi(); ?>

このコードを貼り付けるだけです。

できました！ページャーが現れました。設定はデフォルトのままです。
上の画像の例ではページ数はまだまだ少ないですが、これがどんどん増えていくと
ページャーのありがたみが身にしみます。。

ページャーのCSSを変更する

ページャーのデザインを変更したい場合は、
プラグインフォルダの pagenavi-css.cssの中身をコピーして
style.cssなど、現在使っているテーマテンプレートのスタイルシート内にペーストします。
編集はテーマテンプレートのスタイルシート内で行います。

現パージョンのpagenavi-css.css　※2013年7月現在

/*
Default style for WP-PageNavi plugin

http://wordpress.org/extend/plugins/wp-pagenavi/
*/

.wp-pagenavi {
	clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: 1px solid #BFBFBF;
	padding: 3px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	border-color: #000;
}

.wp-pagenavi span.current {
	font-weight: bold;
}

最後に管理画面のページャー設定画面で
「pagenavi-css.css を使用」のチェックを外すことをお忘れなく！