Web’Notes

簡単にページナビゲーションが作れるWordPressプラグイン「WP-PageNavi」

Spanish dictionary pages up into the air By: Horia Varlan

WordPressのページナビゲーションは「« 古い記事へ」「新しい記事へ »」しか表示してくれないため、投稿記事が多くなると古い記事にアクセスするのが難しくなります。

「WP-PageNavi」を使用すると、このようにページ番号を表示してくれるため、古い記事へのアクセスも容易になり、アクセシビリティの向上につながります。

1. WP-PageNaviの導入
2. WP-PageNaviのCSSをカスタマイズする

WP-PageNaviの導入

１．「プラグイン」>「新規追加」から「WP-PageNavi」を検索してインストールし、有効化します。

２．ページナビゲーションを表示したい場所に以下のコードを埋め込み完了です。

<?php wp_pagenavi(); ?>

WP-PageNaviのCSSをカスタマイズする

「設定」>「PageNavi」から「WP-PageNavi」の変更ができます。

次に「WP-PageNavi」のソースを確認します。

<div class='wp-pagenavi'>
<span class='pages'>3 / 4</span>
<a href='http://×××' class='previouspostslink'>«</a>
<a href='http://×××' class='page smaller'>1</a>
<a href='http://×××' class='page smaller'>2</a>
<span class='current'>3</span>
<a href='http://×××' class='page larger'>4</a>
<a href='http://×××' class='nextpostslink'>»</a>
</div>

実際の表示はこうなっているので、各クラスは以下の通りになります。

このクラスに対してCSSを書けばこのようにページナビゲーションのデザインを変更できます。

/* 全体のCSS */
div.wp-pagenavi{
	clear: both;
	text-align:center;
	margin:10px 0;
	font-family:'Goudy Bookletter 1911',Georgia,serif;
	font-style:italic;
}
/* 各リンクのCSS */
div.wp-pagenavi a{
	border: 1px solid #ddd;
	color: #444;
	padding: 5px 5px;
	margin: 0 4px;
	text-decoration: none;
	background: rgba(0,0,0,.1);
	border-radius: 3px;
	-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
/* 各リンクのCSS(マウスオーバー時) */
div.wp-pagenavi a:hover{
	background:rgba(0,0,0,.5);
	border: 1px solid #444;
	color: #fff;
}
/* 総ページ数のCSS */
div.wp-pagenavi span.pages{
	border: 1px solid #ddd;  color: #444;
	padding:5px 5px;  margin: 0 4px;
	background:rgba(0,0,0,.1);
	border-radius: 3px;
	-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
}
/* 現在のページのCSS */
div.wp-pagenavi span.current{
	border:1px solid #222;
	color: #fff;
	padding:5px 5px;
	margin: 0 4px;
	background:#505050;
	border-radius: 3px;
	-border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	box-shadow: 
		0 1px 0 rgba(255, 255, 255, 0.3) inset
		, 0 0 2px rgba(255, 255, 255, 0.3) inset
		, 0 0 10px rgba(0, 0, 0, 0.1) inset
		, 0 1px 2px rgba(0, 0, 0, 0.1);
	-box-shadow:  
		0 1px 0 rgba(255, 255, 255, 0.3) inset
		, 0 0 2px rgba(255, 255, 255, 0.3) inset
		, 0 0 10px rgba(0, 0, 0, 0.1) inset
		, 0 1px 2px rgba(0, 0, 0, 0.1);
	webkit-box-shadow:  
		0 1px 0 rgba(255, 255, 255, 0.3) inset
		, 0 0 2px rgba(255, 255, 255, 0.3) inset
		, 0 0 10px rgba(0, 0, 0, 0.1) inset
		, 0 1px 2px rgba(0, 0, 0, 0.1);
	-moz-box-shadow:  
		0 1px 0 rgba(255, 255, 255, 0.3) inset
		, 0 0 2px rgba(255, 255, 255, 0.3) inset
		, 0 0 10px rgba(0, 0, 0, 0.1) inset
		, 0 1px 2px rgba(0, 0, 0, 0.1);

WordPress WordPress, プラグイン, ページナビゲーション