single.php（個別記事ページ）では、前の記事・次の記事へのリンク を表示することがよくあります。
これは、
- 回遊率を上げる
- 記事を続けて読んでもらう
- UX（使いやすさ）を良くする
といった点で、実務でもよく使われる実装です。
目次
previous_post_link() / next_post_link() を使う一番シンプルな方法（初心者向け）
<div class="post-navigation">
<div class="prev-post">
<?php previous_post_link( '%link', '＜ 前の記事へ %title' ); ?>
</div>
<div class="next-post">
<?php next_post_link( '%link', '次の記事へ %title ＞' ); ?>
</div>
</div>表示イメージ
＜ 前の記事へ 前の記事タイトル
次の記事へ 次の記事タイトル ＞- 自動で前後の記事を判定
- タイトルも自動取得
- リンクも自動生成
👉 まずはこの形を覚えればOK
previous_post_link()
- 現在の記事より「1つ前」の記事を取得
- アーカイブ上の並び順（投稿日）を基準に判定
- なければ何も表示されない
next_post_link()
- 現在の記事より「1つ後」の記事を取得
- 同様に自動判定
%link と %title の意味
previous_post_link( '%link', '＜ 前の記事へ %title' );
%link
→<a href="...">タイトル</a>全体%title
→ 記事タイトルのみ
この指定があるおかげで、自由にテキストを組み合わせられる。
HTML構造を少し整える（実務向け）
デザインしやすい形にするとこうなる。
<nav class="post-navigation">
<div class="post-nav prev">
<?php previous_post_link(
'%link',
'<span class="label">＜ 前の記事へ</span><span class="title">%title</span>'
); ?>
</div>
<div class="post-nav next">
<?php next_post_link(
'%link',
'<span class="label">次の記事へ ＞</span><span class="title">%title</span>'
); ?>
</div>
</nav>- span を分けることで
- CSSで「矢印」「タイトル」を別デザインにできる
カテゴリー内だけで前後移動したい場合（補足）
<?php previous_post_link( '%link', '＜ 前の記事へ %title', true ); ?>
<?php next_post_link( '%link', '次の記事へ %title ＞', true ); ?>第3引数を true にすると、
- 同じカテゴリー内のみで前後移動
- 技術記事・シリーズ物でよく使う
前後記事リンクの a タグに class を付ける方法
WordPress化の場合、既にHTMLコーディングを終えているケースがあります。やり方によっては「aタグにクラスを付けている」ということも。
丸ごとHTMLを任意の形にしたい場合は、以下のような方法があります。
previous_post_link() が使えない理由
<?php previous_post_link(
'<a href="%link" class="post-link prev">%title</a>'
); ?>実はこれはできないのです！
理由は%link はすでに <a> タグを含んでいるから。
get_previous_post() / get_next_post() を使って自分で a タグを書く
これが 一番自由度が高い方法です。
<?php
$prev_post = get_previous_post();
if ( $prev_post ) :
?>
<a href="<?php echo esc_url( get_permalink( $prev_post->ID ) ); ?>"
class="post-link prev">
＜ 前の記事へ <?php echo esc_html( get_the_title( $prev_post->ID ) ); ?>
</a>
<?php endif; ?><?php
$next_post = get_next_post();
if ( $next_post ) :
?>
<a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>"
class="post-link next">
<?php echo esc_html( get_the_title( $next_post->ID ) ); ?> 次の記事へ ＞
</a>
<?php endif; ?>- a タグに自由に class を付けられる
- img / span / SVG も好きに入れられる
- 条件分岐も書ける
👉 デザインを作り込むならこれが一番対応がしやすいのです
初心者向けまとめ
- single.php で前後記事リンクを作るなら
previous_post_link()とnext_post_link() - タイトル付き・リンク付きで自動生成される
- まずはシンプルな形でOK
- デザイン調整は span 分けで対応
コメント