個別投稿ページで前後の投稿へのナビゲーションを表示する|WordPressテーマ作成
個別投稿ページで次の投稿(新しい)とひとつ前の投稿(古い)へのリンクを表示するには、next_post_link()とprevious_post_link()を使用します。
記述例
<div class="post-navi">
<div class="post-navi-prev"><?php previous_post_link( '« %link', __( 'PREV' ) ); ?></div>
<div class="post-navi-next"><?php next_post_link( '%link »', __( 'NEXT' ) ); ?></div>
</div><!-- /.post-navi -->
次の投稿や、前の投稿がない場合、リンクは出力されません。但し、上記の<div class="post-navi-prev">などは表示されるため、注意が必要です。表示したくない場合は下記のようにしてください。
<div class="post-navi">
<?php previous_post_link( '<div class="post-navi-prev">« %link</div>', __( 'PREV' ) ); ?>
<?php next_post_link( '<div class="post-navi-next">%link »</div>', __( 'NEXT' ) ); ?>
</div><!-- /.post-navi -->
記述例に対する HTML の出力例
<div class="post-navi">
<div class="post-navi-prev">« <a href="#prev-post" rel="prev">PREV</a></div>
<div class="post-navi-next"><a href="#next-post" rel="next">NEXT</a> »</div>
</div><!-- /.post-navi -->
スタイルシートのサンプル
.post-navi {
border: 1px solid #BDBDBD;
margin: 2px;
font-size: 16px;
padding: 10px;
}
.post-navi-prev,
.post-navi-next {
border: 1px solid #1976D2;
border-radius: 8px;
display: inline;
margin-right: 50px;
padding: 4px 20px;
}
出力イメージ
ボタン部分もリンクとする方法
上記出力イメージでは文字列の部分しかクリックできません。ボタン全体をクリック対象としたい場合は、以下のように記述します。
<div class="post-navi">
<?php previous_post_link( '%link', '<div class="post-navi-prev">« ' . __( 'PREV' ) . '</div>' ); ?>
<?php next_post_link( '%link', '<div class="post-navi-next">' . __( 'NEXT' ) . ' »</div>' ); ?>
</div><!-- /.post-navi -->
