「WP-PageNavi」でページナビを追加

WordPressのプラグイン「WP-PageNavi」を使い、サイト内にページナビを追加してみました。
備忘録として残しておきます。

ページナビとは？

ページナビは、投稿した記事をページ毎に分割してそのページのリンクを表示してくれるものです。

記事数が増えてくると、前後の記事へのリンクだけでは不便なので、
今回、ページナビを追加してみました。

プラグイン「WP-PageNavi」をインストール

WordPress管理画面の[プラグイン]⇒[新規追加]から、「WP-PageNavi」を検索し、インストールし有効化します。

テンプレートの書き換え

次に、ページナビを設定したい箇所に以下のコードを挿入します。

<?php wp_pagenavi(); ?>

私は、index.phpの「古い記事」「新しい記事」へのリンクをコメントアウトし、上記コードを挿入しました。(以下サンプル)

<!--
    <div class="pagenav">
      <span class="old">
        <?php next_posts_link('<i class="fa fa-chevron-circle-left"></i> 古い記事 '); ?>
      </span>

      <span class="new">
        <?php previous_posts_link('<i class="fa fa-chevron-circle-right"></i> 新しい記事 '); ?>
      </span>
    </div>
  -->
  <?php wp_pagenavi(); ?>

出力方法のカスタマイズ

WordPressの[設定]⇒[PageNavi]から出力方法をカスタマイズできます。
今回私は、デフォルトの設定から変更しませんでした。

CSSでページナビのスタイルを変更

WordPressのインストール先⇒[wp-content]⇒[plugins]⇒[wp-pagenavi]フォルダにある[pagenavi-css.css]ファイルを自分のテーマフォルダへコピーします。
そのファイルを変更してページナビのスタイルを変更できます。
以下は今回私が変更したpaagenavi-css.cssです。(以下サンプル)

.wp-pagenavi {
	clear: both;
	text-align: center;
}

.wp-pagenavi a, .wp-pagenavi span {
	text-decoration: none;
	border: solid 1px #cccccc;
	border-radius: 2px;
	color: #666666;
	font-size: 14px;
	padding: 3px 5px;
	margin: 2px;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
	background-color: #e6cc1c;
	color: #ffffff;

}

.wp-pagenavi span.current {
	background-color: #4a5f7e;
	color: #ffffff;
}

最後に

以上、プラグイン「WP-PageNavi」でページナビを追加する方法でした。
少しでも参考になれば幸いです。