ネットアンサー55備忘録

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に書き換えてそのサイトに合うページャーにしよう。

---

プラグインによって生成されたタグ情報を書き換えるためには下記の記事を参考にしましょう。 タグの書き換え