• HOME
• WordPress
• 個別投稿ページで前後の投稿へのナビゲーションを表示する|WordPressテーマ作成

個別投稿ページで前後の投稿へのナビゲーションを表示する|WordPressテーマ作成

Tweet

個別投稿ページで次の投稿(新しい)とひとつ前の投稿(古い)へのリンクを表示するには、next_post_link()とprevious_post_link()を使用します。

記述例

<div class="post-navi">
    <div class="post-navi-prev"><?php previous_post_link( '&laquo; %link', __( 'PREV' ) ); ?></div>
    <div class="post-navi-next"><?php next_post_link( '%link &raquo;', __( 'NEXT' ) ); ?></div>
</div><!-- /.post-navi -->

次の投稿や、前の投稿がない場合、リンクは出力されません。但し、上記の<div class="post-navi-prev">などは表示されるため、注意が必要です。表示したくない場合は下記のようにしてください。

<div class="post-navi">
    <?php previous_post_link( '<div class="post-navi-prev">&laquo; %link</div>', __( 'PREV' ) ); ?>
    <?php next_post_link( '<div class="post-navi-next">%link &raquo;</div>', __( 'NEXT' ) ); ?>
</div><!-- /.post-navi -->

記述例に対する HTML の出力例

<div class="post-navi">
    <div class="post-navi-prev">&laquo; <a href="#prev-post" rel="prev">PREV</a></div>
    <div class="post-navi-next"><a href="#next-post" rel="next">NEXT</a> &raquo;</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">&laquo; ' . __( 'PREV' ) . '</div>' ); ?>
    <?php next_post_link( '%link', '<div class="post-navi-next">' . __( 'NEXT' ) . ' &raquo;</div>' ); ?>
</div><!-- /.post-navi -->

Tweet

前の記事

コメント一覧のページ送りリンクを追加する|WordPressテーマ作成

次の記事

トップレベルメニューを追加する|WordPressテーマ作成