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

Spanish dictionary pages up into the air By: Horia Varlan
WordPressのページナビゲーションは「« 古い記事へ」「新しい記事へ »」しか表示してくれないため、投稿記事が多くなると古い記事にアクセスするのが難しくなります。
「WP-PageNavi」を使用すると、このようにページ番号を表示してくれるため、古い記事へのアクセスも容易になり、アクセシビリティの向上につながります。
WP-PageNaviの使い方
WP-PageNaviの導入
1.「プラグイン」>「新規追加」から「WP-PageNavi」を検索してインストールし、有効化します。


2.ページナビゲーションを表示したい場所に以下のコードを埋め込み完了です。
<?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>
実際の表示はこうなっているので、各クラスは以下の通りになります。
wp-pagenavi | : | 全体を囲ったdivタグ |
---|---|---|
pages | : | 現在のページ数/総ページ数 |
current | : | 現在のページ |
previouspostslink | : | 前へのリンク |
nextpostslink | : | 次へのリンク |
page smaller | : | 現在のページより前のページのリンク |
page larger | : | 現在のページより後のページのリンク |
このクラスに対して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);
Related Posts

Trackback URL
http://webnonotes.com/wordpress/pagenavi/trackback/No Comments Yet