WordPressの記事詳細の本文の下にある「次の記事へ」と「前の記事へ」のリンク
ブログ系のサイトなら、ほとんどの場合存在する項目ですよね。

今まではシンプルに「previous_post_link」と「next_post_link」で表示させていましたが、a要素の中にタグを入れたくなったりとか、デザイン上、ちょっと複雑なHTMLを組まないといけなかったので、変数格納型で自由にHTMLを組めるようなやり方を試してみたので、メモ。

「previous_post_link」と「next_post_link」のシンプルな書き方

こんな感じで書くと…

<ul class="prev_next_list">
  <li class="prev"><?php previous_post_link('« %link', '%title', TRUE, ''); ?></li>
  <li class="next"><?php next_post_link('%link »', '%title', TRUE, ''); ?></li>
</ul>

↓こう出力されます。

<ul class="prev_next_list">
  <li class="prev">« <a href="パーマリンク" rel="prev">前の記事のタイトル</a></li>
  <li class="next"><a href="パーマリンク" rel="next">次の記事のタイトル</a> »</li>
</ul>

previous_post_linkとnext_post_linkを変数で使う

<?php previous_post_link( $format, $link, $in_same_term, $excluded_terms, $taxonomy ); ?>

「previous_post_link」と「next_post_link」はパラメーターが結構用意されてるので、この書き方でも色々カスタマイズできますが、今回はこんな感じで書きました。

<?php
  $prev_post = get_previous_post(); // 前の投稿を取得
  $next_post = get_next_post(); // 次の投稿を取得
?>
<?php if( $prev_post || $next_post ): //次の記事か前の記事かどちらかあれば ?>
  <ul class="prev_next_list">
    <?php if ($prev_post): // 前の記事 ?>
        <li class="prev">
          <a href="<?php echo esc_url(get_permalink($prev_post->ID)); ?>">
            <span class="eng">Prev</span>
            <b class="ttl"><?php echo get_the_title($prev_post->ID); ?></b>
          </a>
        </li>
    <?php endif; ?>
    <?php if ($next_post): // 次の記事 ?>
      <li class="next">
        <a href="<?php echo esc_url(get_permalink($next_post->ID)); ?>">
          <span class="eng">Next</span>
          <b class="ttl"><?php echo get_the_title($next_post->ID); ?></b>
        </a>
      </li>
    <?php endif; ?>
  </ul>
  <!-- /.prev_next_list -->
<?php endif; ?>

これで、視覚的にもHTMLの自由度が高いリンク設定ができそうです。

ちなみに、この書き方だと投稿の全ての記事の対象になるので

同一カテゴリのみで「前の記事」と「次の記事」を出す

※取得部分以外は上記の書き方と同じです。

<?php
  $prev_post = get_previous_post(true,''); // 前の投稿を取得
  $next_post = get_next_post(true,''); // 次の投稿を取得
?>

カスタム投稿の場合はこう書く

地味に忘れがちな書き方ですよね

<?php
  $prev_post = get_previous_post(true,'','works_cat'); // 前の投稿を取得
  $next_post = get_next_post(true,'','works_cat'); // 次の投稿を取得
?>

参考サイト

• テンプレートタグ/previous post link – WordPress Codex 日本語版