「WP-PageNavi」でページナビを追加
WordPressのプラグイン「WP-PageNavi」を使い、サイト内にページナビを追加してみました。
備忘録として残しておきます。
スポンサーリンク
ページナビとは？
ページナビは、投稿した記事をページ毎に分割してそのページのリンクを表示してくれるものです。
記事数が増えてくると、前後の記事へのリンクだけでは不便なので、
今回、ページナビを追加してみました。
WordPress管理画面の[プラグイン]⇒[新規追加]から、「WP-PageNavi」を検索し、インストールし有効化します。
テンプレートの書き換え
次に、ページナビを設定したい箇所に以下のコードを挿入します。
|
1 |
<?php wp_pagenavi(); ?> |
私は、index.phpの「古い記事」「新しい記事」へのリンクをコメントアウトし、上記コードを挿入しました。(以下サンプル)
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!-- <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です。(以下サンプル)
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
.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」でページナビを追加する方法でした。
少しでも参考になれば幸いです。
スポンサーリンク
関連記事(一部広告含む)
