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

Spanish dictionary pages up into the air By: Horia Varlan

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

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

WP-PageNavi

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

WP-PageNaviの導入

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

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

<?php wp_pagenavi(); ?>

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

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

このページでは、表示する文字やページ数が変更できます。とりあえずここでは、デフォルトのCSSを解除します。

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>

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

WP-PageNavi

wp-pagenavi全体を囲ったdivタグ
pages現在のページ数/総ページ数
current現在のページ
previouspostslink前へのリンク
nextpostslink次へのリンク
page smaller現在のページより前のページのリンク
page larger現在のページより後のページのリンク

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

WP-PageNavi3

/* 全体の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);
divider

Trackback URL

http://webnonotes.com/wordpress/pagenavi/trackback/

No Comments Yet

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>