【WordPress】ページナビゲーションを簡単に設置できるWP-PageNavi

WordPressでの基本機能してページナビゲーションは[ « 古い投稿へ ][ 新しい投稿へ » ]のリンクしかなく、ページが増加した際に過去の記事を探すとき不便に感じます。WP-PageNaviはページをナンバリングし設置できる便利なプラグインです。

1

WP-PageNaviのインストール

WordPressの管理画面メニューよりプラグイン>新規追加の検索フォームより「WP-PageNavi」で検索しインストール後に有効化します。

2

WP-PageNaviの導入

プラグインを有効化した後は、使用しているテーマに記述してあるページナビゲーションのコードと以下のコードを差し替えるだけです。(テーマによってページナビゲーションのコードは異なります。)

html
<?php wp_pagenavi(); ?>

管理画面メニュー設定>PageNaviより表示設定を行うことができます。

3

CSSのカスタマイズ

先程紹介した管理画面メニュー設定>PageNaviの設定ページ下部に「pagenavi-css.cssを使用」という項目がありますので、Noにチェックを入れ「変更を保存」します。これはプラグイン自体のCSSを使用するか否かを選択する項目です。

まずPageNaviが出力するHTMLは以下になります。

html
<!--pagevavi-->
<div class='wp-pagenavi'>
<span class='pages'>5 / 10</span><a class="first" href="#">« 先頭</a><a class="previouspostslink" rel="prev" href="#">«</a><a class="page smaller" href="#">3</a><a class="page smaller" href="#">4</a><span class='current'>5</span><a class="page larger" href="#">6</a><a class="page larger" href="#">7</a><a class="nextpostslink" rel="next" href="#">»</a><a class="last" href="#">最後 »</a>
</div>
<!--/pagevavi-->

表示を整理するとこんな感じです。

html
<!--pagevavi-->
<div class='wp-pagenavi'>
<span class='pages'>5 / 10</span>
<a class="first" href="#">« 先頭</a>
<a class="previouspostslink" rel="prev" href="#">«</a>
<a class="page smaller" href="#">3</a>
<a class="page smaller" href="#">4</a>
<span class='current'>5</span>
<a class="page larger" href="#">6</a>
<a class="page larger" href="#">7</a>
<a class="nextpostslink" rel="next" href="#">»</a>
<a class="last" href="#">最後 »</a>
</div>
<!--/pagevavi-->

このソースのclassをCSSでカスタマイズし、テーマのCSSに追加することでデザインが反映されます。

css
.wp-pagenavi a, .wp-pagenavi span {
	color:#999;
	background-color:#FFF;
	border:solid 1px #999;
	padding: 8px 15px;
    margin:0 2px;
	white-space: nowrap;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-webkit-transition: 0.2s ease-in-out;
	-moz-transition: 0.2s ease-in-out;
	-o-transition: 0.2s ease-in-out;
	transition: 0.2s ease-in-out;
}
.wp-pagenavi a:hover{
	color:#FFF; 
	background-color:#999; 
	border-color:#999;
	}
.wp-pagenavi span.current{
	color:#FFF;
	background-color:#333;
	border-color:#333;
	font-weight: bold;
	}

手っ取り早くって方はWP PageNavi StyleというPageNaviのスタイルを変更できるプラグインがありますのでこのプラグインでスタイルを変更するといいと思います。こちらも同様にプラグイン検索で見つかります。



PICK UP
RELATED POSTS
  • 【WordPress】続きを読むのリンクURLから#moreを削除する
  • WordPress向けのおすすめレンタルサーバー【初心者向け】
  • 【WordPress】パーマリンクの設定はどうしたらいいんだろ?
  • 導入しておきたいWordPressのおすすめプラグイン
  • WordPressのエディタを前のエディタに戻すプラグイン「Classic Editor」
  • WordPressのおすすめテーマ19選【無料版・有料版】
POPULAR POSTS
  • 長いURLを短くするオススメの短縮URLサービス
  • 無料で使用できるフリーイラスト素材サイトまとめ
  • 漢字が使えるおすすめの日本語フリーフォントまとめ
  • CSSで実装するボタンデザインとホバーエフェクトのアイデア
  • CSSで簡単に作れるおしゃれな見出しデザイン20選
RECENT POSTS
  • プライス・値段表示などに使えそうな英数字フォント13選
  • hulu (フールー)で観れるおすすめの海外ドラマ・国内ドラマ【2019年4月版】
  • 無料で使えるレトロ・ヴィンテージな雰囲気の英語フォントまとめ
  • Photoshopで簡単に背景を伸ばすテクニック
  • CSSで作成する吹き出しとデザインのアイデア