簡単にページナビを設置する!
通常のワードプレステンプレートには、ページナビゲーションメニュー(=ページネーション)が存在しません。
ですが、投稿数が多くなった際の導線を考えると、ブログの様なページナビが欲しいところです。
今回は、さまざまデザインのページナビを簡単に設置するためのプラグイン、【WP-PageNavi】&【WP PageNavi Style】を紹介します。
WP-PageNaviプラグインでナビを設置。
まず、管理画面 >プラグイン >新規追加 から、WP-PageNaviをインストールし有効化。
その後、使用されているテーマファイルにおける、ページナビゲーションを設置したい部分に下記のPHPコードを追記します。
1 |
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?> |
すると、コードを追記した部分にナビが出力されます。
また、管理画面 > 設定 > PageNavi Style から遷移できる WP-PageNavi設定画面において、ページネーションに出力される文字列(「先頭」「最後」といった文字列)などを変更したり、各種カスタマイズを行うことも可能です。
WP PageNavi Styleプラグインでデザインを変更。
上記で設置したページネーションは、WP PageNavi Styleというプラグインをインストールすると33種類のデザインから、お好きなものを選んで変更できるようになります。
管理画面 > PageNavi から、WP PageNavi Style Options画面を立ち上げ、プルダウンメニューから項目を選ぶとプレビューが表示されます。
その中から好きなデザインを選んで「save setting」ボタンを押下するだけの手軽さです。
デザインラインナップ33種
WP PageNavi Styleプラグインを使用して、選ぶことができるページナビデザインは、以下の33種類となります。
- 01. CSS3 RED
- 02. CSS3 ORANGE GLOSSY
- 03. RED
- 04. GRAY
- 05. PURPLE
- 06. CSS3 LIGHT BLUE
- 07. DEFAULT
- 08. GREEN
- 09. BLACK RED
- 10. BLACK
- 11. CSS3 BROWN
- 12. BROWN
- 13. CSS3 GRAY GLOSSY
- 14. ORANGE
- 15. WHITE BLUE
- 16. CSS3 YELLOW GLOSSY
- 17. CSS3 BLACK GLOSSY
- 18. ROUND WHITE
- 19. CSS3 GREEN
- 20. CSS3 BROWN GLOSSY
- 21. CSS3 PURPLE
- 22. CSS3 PURPLE GLOSSY
- 23. CSS3 LIGHT BLUE GLOSSY
- 24. CSS3 GREEN GLOSSY
- 25. RED BLACK
- 26. YELLOW
- 27. CSS3 YELLOW
- 28. CSS3 BLACK
- 29. CSS3 RED GLOSSY
- 30. CSS3 GRAY
- 31. MINIMAL
- 32. CSS3 BLUE GLOSSY
- 33. BLUE
プラグイン【WP-PageNavi】&【WP PageNavi Style】の紹介は以上になります。
超多機能でSEOに強い!ブロガー・アフィリエイターを虜にするWPテーマDIVER
国内最速のサイト表示スピード!最新技術が詰め込まれたWPテーマTHE THOR