うさぎのイラスト

ネットアンサー55備忘録

ワードプレス技術を色々とお試しするサイトです。

プラグイン WP-PageNavi

-2015年03月18日-
1、プラグインを有効化してarchive.phpなどのページャーを付けたい箇所に下記を記述する。
    <?php wp_pagenavi(); ?>

2,デフォルトでもcssが効いていますが、設定→PageNaviで「pagenavi-css.cssを使用」に チェックが入っているのでそれを外して、自身でcssを設定できるようにします。 試しにこちらのチェックを外してページを表示してみるとページャーにcssが効いていないことがわかります。
3,自身でcssを設定しよう。 htmlソースは表向きには見えないがこのように記述されている。
    <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 現在のページより後のページのリンク

4,オリジナルcssを実装する。
.wp-pagenavi{
	display:table;
	margin-left:auto;
	margin-right:auto;
}
.wp-pagenavi span{
	display:inline;
	margin-right:5px;
	font-size:1.1em;
}
.wp-pagenavi span.pages{
	display:inline;
	margin-right:5px;
	font-size:1.1em;
	border:1px solid #FF6092;
	background:#FF6092;
	padding:6px 7px;
	color:#FFF;
}

.wp-pagenavi a{
	display:inline;
	margin-right:5px;
	font-size:1.1em;
	border:1px solid #E3DCD5;
	background:#FFF;
	padding:6px 7px;
}

.wp-pagenavi span.current{
	display:inline;
	margin-right:5px;
	font-size:1.1em;
	border:1px solid #FF6092;
	background:#FF6092;
	padding:6px 7px;
	color:#FFF;
}

.wp-pagenavi a:hover{
	display:inline;
	margin-right:5px;
	font-size:1.1em;
	border:1px solid #FF6092;
	background:#FF6092;
	padding:6px 7px;
	color:#FFF;
}
上記のcssをコピーして独自のcssに書き換えてそのサイトに合うページャーにしよう。
プラグインによって生成されたタグ情報を書き換えるためには下記の記事を参考にしましょう。 タグの書き換え