<!–nextpage–>で投稿した記事をwp_link_pagesで『前へ　１　２　３　・・・　次へ』と表示する

前々回から連続でWordpressの記事分割機能、
<!–nextpage–>について扱ってきました。

前回の記事で、
分割された記事のナビゲーションを表示させるPHPテンプレートタグの
<?php wp_link_pages(); ?>の引数を指定することで、
『１　２　３　・・・』　と数字でページを並べて表示したり、
任意の文字で『前の記事へ　次の記事へ』などと表示する方法を紹介しました。

さて、<?php wp_link_pages(); ?>の特性上、
ページ数を表示するか文字列を表示するかの二者択一である事が分かったと思うのですが、

それでも
前の記事へ　１　２　３　・・・　次の記事へ
と言う形でナビゲーションを表示させたいあなたに、

何とか編み出した上記の表示を実現させる方法を伝授致します。

種明かしをしますと、スタイルシートを使います。

<?php wp_link_pages(); ?>において、『前へ』と『次へ』の文字列が
引数previouspagelinkとnextpagelinkでそれぞれ任意に設定できることを利用し、
それぞれ<span>で別々のclass属性を与えることによって別々のスタイルを適用させ、
回り込みによって『前へ』と『次へ』の間にページ数を表示させます。

難しい！！
意味がわかんない！！
時のための、

～そのままコピペしてしまえばいい実例～

・テンプレートに埋め込む<?php wp_link_pages(); ?>の引数指定例

<span id=”linkpages”>
<?php wp_link_pages(‘before=&after=&next_or_number=next&previouspagelink=<span class=”pre”>前へ</span>&nextpagelink=<span class=”next”>次へ</span>’); ?>
<span class=”number”><?php wp_link_pages(‘before=&after=&next_or_number=number&pagelink=%’); ?></span>
</span>
<div style=”clear:both;”></div>

・スタイルシートで指定する内容

#linkpages{float:left;}
.next {float:right;}

これでひとまず、　『前へ　１　２　３　・・・　次へ』と言う形での表示が可能になりました。

後の見かけの整頓は各自スタイルシードで行って下さい。
☆私が指定している例

#linkpages{float:left;margin:0px 0px 10px 60px;font-size:16px;color:#666;height:30px;}
#linkpages a:hover{
color:#ff6600;
}
.number a{
padding:5px;
margin:5px;
border:outset #0066ff;
}
.number a:hover{
padding:10px;
margin:0px;
border:outset #0066ff;
background:#ddddff;
}
.pre {margin-right:10px; border:solid #999 1px;padding:5px;}
.next {margin-left:10px;float:right;border:solid #999 1px;padding:5px;top:-5px;position:relative;}