WordPressの投稿ページ(シングルページ)に記事送り(前後の記事へのリンク)を設置する方法のメモです。

投稿ページに記事送りを設置する場合、テキストリンクのみであればget_adjacent_postという関数で簡単に取得できます。

しかし今回の場合は、前後の記事のサムネイル画像も表示したかったので、ちょっと工夫が必要でした。

いちおう、今回のページ送りの仕様はこんな感じです。

WordPressにページ送り(前後の記事へのリンク)を設置する方法

PHP

<div class="prev_next">

<?php
  $next = get_adjacent_post(false, '', false); //$nextに次の記事を代入
  $prev = get_adjacent_post(false, '', true); //$prevに前の記事を代入
?>

<?php if($next): //次の記事があったら… ?>

<div class="next"><a href="<?php echo get_permalink($next->ID) //次の記事URL ?>">

<div class="arrow"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="prev_next_inner">
<div class="thumb">
  <?php if( has_post_thumbnail($next->ID) ): //サムネイル画像を表示 ?>
    <?php echo get_the_post_thumbnail( $next->ID, array(150,150) ) ?>
  <?php else: //サムネイル画像が設定されてなかったら代替画像を表示 ?>
    <img src="<?php echo get_bloginfo( 'stylesheet_directory' ) ?>/images/no_image.png" alt="<?php echo get_the_title( $next->ID ); ?>" />
  <?php endif; ?>
</div>
<div class="title">
<?php //記事タイトルの先頭30文字を表示
  if( mb_strlen( get_the_title( $next->ID ) ) > 30 ):
    $title= mb_substr( get_the_title( $next->ID ), 0, 30 ) ; echo $title. '...' ;
  else:
    echo get_the_title( $next->ID );
  endif;
?>
</div>
</div>
</a></div>

<?php else: //次の記事がなかったら… ?>

<div class="no_post">
<div class="arrow"><i class="fa fa-angle-left" aria-hidden="true"></i></div>
<div class="prev_next_inner"></div>
</div>

<?php endif; //次の記事終わり ?>

<?php if($prev): //前の記事があったら… ?>

<div class="prev clearfix"><a href="<?php echo get_permalink($prev->ID) //前の記事URL ?>">
<div class="prev_next_arrow prev_arrow"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
<div class="prev_next_inner prev_inner">
<div class="thumb">
  <?php if( has_post_thumbnail($prev->ID) ): //サムネイル画像を表示 ?>
    <?php echo get_the_post_thumbnail( $prev->ID, array(150,150) ) ?>
  <?php else: //サムネイル画像が設定されてなかったら代替画像を表示 ?>
    <img src="<?php echo get_bloginfo( 'stylesheet_directory' ) ?>/images/no_image.png" alt="<?php echo get_the_title( $prev->ID ); ?>" />
  <?php endif; ?>
</div>
<div class="title">
<?php //記事タイトルの先頭30文字を表示
  if( mb_strlen( get_the_title( $prev->ID ) ) > 30 ):
    $title= mb_substr( get_the_title( $prev->ID ), 0, 30 ) ; echo $title. '...' ;
  else:
    echo get_the_title( $prev->ID );
  endif;
?>
</div>
</div>
</a></div>

<?php else: //前の記事がなかったら… ?>

<div class="prev clearfix no_post">
<div class="prev_next_arrow prev_arrow"><i class="fa fa-angle-right" aria-hidden="true"></i></div>
<div class="prev_next_inner prev_inner"></div>
</div>

<?php endif; //前の記事終わり ?>

</div>

前後の記事を取得する関数get_adjacent_post

WordPressでは、get_adjacent_postという関数で前後の記事を取得できます。

細かい内容は下記の参考ページを見て頂ければと思いますが、3番目のパラメータがtrueの場合は前の記事、falseの場合は次の記事を取得します。

冒頭でも言いましたが、テキストリンクを取得したい場合はこの関数のみで可能です。

今回はサムネイル画像を表示したかったので、get_adjacent_postで取得した投稿のIDからサムネイル画像を取得しています。