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

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

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

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

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

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

  1. 前後の記事のサムネイル画像を表示
  2. 前後の記事がない場合、記事リンクの代わりに空のボックスを表示する
  3. 記事にサムネイルが設定されていない場合、代替画像を表示する

WordPressにページ送りを設置するソース

<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という関数で前後の記事を取得できます。

参考:関数リファレンス/get adjacent post

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

上でも言いましたが、テキストリンクを取得したい場合はこの関数のみで可能です。今回はサムネイル画像を表示したかったので、get_adjacent_postで取得した投稿のIDからサムネイル画像を取得しています。

WordPressテーマ『HIGHLAND』公開しました

WordPressテーマ『HIGHLAND』を公開しました

このブログで紹介しているカスタマイズを、これでもかと盛り込んだ高性能なテーマになっております。商用・非商用問わず無料、是非ご利用ください。

柴田竹思

柴田竹思

日本&ベトナム二拠点生活中のWeb系フリーランス。最近は育児6:仕事4のバランスで生活してます。これでもかってくらい奥さんの尻に敷かれてる座布団系男子です。

プロフィールはこちら