WordPressでカテゴリー一覧などのアーカイブページで「ページ送り」実装をする方法です。
フォーラムをみてもイマイチわからないのが残念。でも結構みんな同じところで悩んでいるんだなぁ、とちょっと安心。
「カテゴリーページでページ送りをしたいんだ！」という、同じお悩みをお持ちの方にサクッと説明します。
アーカイブページやカテゴリーページで、エントリー一覧を表示させるには、次のような流れになっていると思います。
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 投稿のループ処理
endwhile;
// ページ送りの処理
else :
// 投稿がない場合の処理
endif;
?>
このページ送りの処理に、
<?php posts_nav_link();?>
と記述するだけでも、「« 前ページへ — 次ページへ »」というふうに表示されますが、スタイルを変えたいときにちょっと厄介です。
そこで、以下のように記述するとクラスが指定できるので、スタイルをあてることができます。
<?php
// リンクが無い場合はNULLが返ってくる
$prev_link = get_previous_posts_link('前のページ');
$next_link = get_next_posts_link('次のページ');
if ( isset( $prev_link ) or isset( $next_link ) ) {
echo '<ul id="pagination">', PHP_EOL;
if( isset( $prev_link ) ) {
echo '<li>',$prev_link,'</li>', PHP_EOL;
}
if( isset( $next_link ) ) {
echo '<li>',$next_link,'</li>', PHP_EOL;
}
echo '</ul>', PHP_EOL;
}
?>
はい、これでクラス指定ができるようになりました。あとは、お好みでスタイルを整えれば完成です。
例えば、こんな感じで。
ul#pagination {
list-style-type: none;
overflow: hidden;
padding: 0 10px;
margin: 15px 0;
}
ul#pagination.posts li {
}
ul#pagination.posts li a {
display: block;
padding: 3px 5px;
border: 1px solid #aaa;
border-radius: 3px;
background-color: #556b2f;
color: #fff;
}
ul#pagination.posts li a:hover {
background-color: #99C348;
}
ul#pagination.post li.next,
ul#pagination.posts li.prev {
float: left;
}
ul#pagination.post li.prev,
ul#pagination.posts li.next {
float: right;
}
