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

WordPress

2014/12/10 2022/07/25

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

WP-PageNaviのインストール
WP-PageNaviの導入
CSSのカスタマイズ

WP-PageNaviのインストール

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

WP-PageNaviの導入

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

html

<?php wp_pagenavi(); ?>

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

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;
	}

5 / 10« 先頭 «3 456 7 »最後 »

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