【WP-PageNavi】ページネーションを簡単設置するプラグイン。

カレンダーDate: | カテゴリーCategory:【無料】便利なWordPressプラグインとその使い方を紹介
※景品表示法に基づく表記:本記事には商品の広告が含まれています

簡単にページナビを設置する!

通常のワードプレステンプレートには、ページナビゲーションメニュー(=ページネーション)が存在しません。

ですが、投稿数が多くなった際の導線を考えると、ブログの様なページナビが欲しいところです。

今回は、さまざまデザインのページナビを簡単に設置するためのプラグイン、【WP-PageNavi】&【WP PageNavi Style】を紹介します。

WP-PageNaviプラグインでナビを設置。

WP-PageNaviのインストール画面

まず、管理画面 >プラグイン >新規追加 から、WP-PageNaviをインストールし有効化。

その後、使用されているテーマファイルにおける、ページナビゲーションを設置したい部分に下記のPHPコードを追記します。

すると、コードを追記した部分にナビが出力されます。

WP-PageNavi設定画面

また、管理画面 > 設定 > PageNavi Style から遷移できる WP-PageNavi設定画面において、ページネーションに出力される文字列(「先頭」「最後」といった文字列)などを変更したり、各種カスタマイズを行うことも可能です。

WP PageNavi Styleプラグインでデザインを変更。

WP PageNavi Styleインストール画面

上記で設置したページネーションは、WP PageNavi Styleというプラグインをインストールすると33種類のデザインから、お好きなものを選んで変更できるようになります。

WP PageNavi Style Options画面

管理画面 > 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】の紹介は以上になります。

Tags

Trackbacks & Comments

Trackback URL for this post:

Leave a Reply

flight