prev・nextリンクの設置について

トップページや個別記事ページなどに設置する前後リンクについての覚え書き。

トップ、一覧ページ

<?php previous_posts_link();?>
<?php next_posts_link(); ?>

右へめくるなら上の順序で使える。
日本語がややこしいが、next が古い記事へのアクセスとなる。

個別記事など

<?php next_post_link(); ?>
<?php previous_post_link(); ?>

個別記事だと、previos next の位置に注意しないと、
古い記事と新しい記事へのリンクが逆になってしまう。

この辺り、じゃあどうするかをまとめたかったので、
以下のようにした。

トップ、一覧ページの前後リンク

<?php endwhile ; ?>

  <div class="page-nav clearfix">
    <div class="nav-prev"><?php previous_posts_link('←最新の投稿');?></div>
    <div class="nav-next"><?php next_posts_link('以前の投稿→'); ?></div>
  <!-- end .page-nav --></div>

<?php else : ?>

トップページでは上記をループの外に設置。

個別記事などの前後リンク

<div class="page-nav clearfix">
  <div class="nav-prev"><?php next_post_link('&laquo; %link'); ?></div>
  <div class="nav-next"><?php previous_post_link('%link &raquo;'); ?></div>
<!-- end .page-nav --></div>

個別記事ではループの中に上記のように収めた。
%link の部分にタイトルが出力される。

追記(2014/02/22)

.page-nav 内のdivに、これも使う人によってややこしいかと思いclassを振ってなかったが、個人的に使いやすくするため .nav-next .nav-prev とクラスを振り直した。

スタイルシートは

.page-nav {} /* .page-nav 全体のスタイリング */
.page-nav .nav-prev,
.page-nav .nav-next {} /* .nav-prev, .nav-next 共通のスタイリング */
.page-nav .nav-prev {
  float: left;
}
.page-nav .nav-next {
  float: right;
}

だいたい上記のような感じ。

 


参考

 385 Views