CHIPS

制作チップス

Wrordpressで前の記事・次の記事への出力方法

2025年6月16日

カテゴリー: 制作チップス

previous_post_link / next_post_link

前の記事・次の記事の投稿タイトルを表示する場合

<?php previous_post_link('&laquo; %link', '%title'); ?>
<?php next_post_link('%link &raquo;', '%title'); ?>

前の記事・次の記事のリンクテキストを変更する場合

<?php previous_post_link('&amp;laquo; %link', '前の記事へ'); ?>
<?php next_post_link('%link &amp;raquo;', '次の記事へ'); ?>

同じカテゴリーに絞って前後の記事を表示する場合は、3つ目の引数に「true」を追加します。

<?php previous_post_link('&laquo; %link', '%title', true); ?>
<?php next_post_link('%link &raquo;', '%title', true); ?>

特定のカテゴリを除外する場合は、4つ目の引数にカテゴリ(ターム)IDを記述します。

<?php previous_post_link('&laquo; %link', '前の記事へ', true, '5'); ?>
<?php next_post_link('%link &raquo;', '次の記事へ', true, '5'); ?>

除外したいカテゴリが複数ある場合

<?php previous_post_link('&laquo; %link', '前の記事へ', true, '5, 6, 7'); ?>
<?php next_post_link('%link &raquo;', '次の記事へ', true, array(5, 6, 7)); ?>

前後に記事が無い時に非表示にする場合

<?php if (get_previous_post()):?>
<?php previous_post_link('&laquo; %link', '前の記事へ'); ?>
<?php endif; ?>

<?php if (get_next_post()):?>
<?php next_post_link('%link &raquo;', '次の記事へ'); ?>
<?php endif; ?>

前の記事・次の記事・一覧ページへのリンクを表示する場合

<div class="navigation post-navigation">
    <?php
    $previous_post = get_previous_post();
    if ( !empty( $previous_post ) ){ ?>
    <div class="nav-previous">
        <a href="<?php echo get_permalink($previous_post->ID); ?>">前の記事へ</a>
    </div>
    <?php } ?>

    <?php $slug = get_post_type_object(get_post_type())->name; ?>
    <div class="pagination_top">
        <a href="<?php echo home_url(); ?>/<?php echo $slug; ?>/">一覧へ戻る</a>
    </div>

  <?php
    $next_post = get_next_post();
    if ( !empty( $next_post ) ){ ?>
    <div class="nav-next">
        <a href="<?php echo esc_url( get_permalink( $next_post->ID ) ); ?>">次の記事へ</a>
    </div>
    <?php } ?>
</div>

get_adjacent_post

<nav class="navigation post-navigation">
<div class="nav-links">
<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ){ //前の記事、次の記事いずれか存在しているとき
?>
<?php
if ( $prevpost ) { //前の記事が存在しているとき
echo '<div class="nav-previous"><span>⟵</span><a href="' . get_permalink($prevpost->ID) . '">' . get_the_title($prevpost->ID) . '</a></div>';
} else { //前の記事が存在しないとき
}

if ( $nextpost ) { //次の記事が存在しているとき
echo '<div class="nav-next"><a href="' . get_permalink($nextpost->ID) . '">' . get_the_title($nextpost->ID) . '</a><span>⟶</span></div>';
} else { //次の記事が存在しないとき
}
?>
<?php } ?>
</div><!-- .nav-links -->
</nav>

前の記事、次の記事に画像(サムネイル)を表示させる場合

<nav class="navigation post-navigation">
<div class="nav-links">
<?php
$prevpost = get_adjacent_post(true, '', true); //前の記事
$nextpost = get_adjacent_post(true, '', false); //次の記事
if( $prevpost or $nextpost ): //前の記事、次の記事いずれか存在しているとき
?>
<?php
if ( $prevpost ) :  //前の記事が存在しているとき
?>
<div class="nav-previous">
      <a href="<?php echo get_permalink($prevpost->ID); ?>">
        <?php echo get_the_post_thumbnail($prevpost->ID, 'thumbnail') ?>
        <?php echo get_the_title($prevpost->ID); ?>
      </a>
</div>
  <?php else: ?>
    <div>前の記事はありません</div>
  <?php endif; ?>

<?php
if ( $nextpost ): //次の記事が存在しているとき
?>
<div class="nav-next">
      <a href="<?php echo get_permalink($next_post->ID); ?>">
        <?php echo get_the_post_thumbnail($next_post->ID, 'thumbnail') ?>
        <?php echo get_the_title($next_post->ID); ?>
      </a>
</div>
  <?php else: ?>
    <div>次の記事はありません</div>
  <?php endif; ?>

<?php endif; ?>
</div>
</nav>