WordPress：記事詳細ページでサムネイル付きで前後の記事リンクを出力する方法

割と使う機会多いので、必要なときにすぐ使えるよう備忘録です。
当ブログのページ下部にもあるように（現在は未実装）、WordPressの記事詳細ページで前後の記事リンクをサムネイル付きで出力させる方法です。
また、前後記事がなかった場合にその部分に別途何かを出力させる方法も併せて紹介します。

※当ブログでの実装イメージ

当ブログの場合は、前後の記事がない場合は特に何も出力しない形にしていますが、普段業務などで実装することが多いのは前後の記事がない場合はその箇所に別途何かしらを出力する場合が多いので、今回はそこにトップページへ戻るリンクを出力するというパターンを紹介します。
また、ここで以下で紹介する方法は、サムネイルイメージのパスを取得して背景画像として表示させるというものになりますが、単純にimgとして出力させたいときも画像出力周りのコードを少し変更すれば可能です。

get_adjacent_post()で前後の記事情報を取得する

詳しいことはCodexで確認してもらえばと思いますが、現在見ている記事の前後の記事情報を取得するにはget_adjacent_post()を使用し、下記のように記述することで前後の記事情報を取得できます。

get_adjacent_post( false, '', true ); → 前の記事
get_adjacent_post( false, '', false ); → 次の記事

あとは、これらを条件分岐と組み合わせて表示させたいものをそれぞれ記述していけば、前後記事のリンクを様々な見栄えにすることが可能になります。
ちなみに、今回はタクソノミーなど関係なく前後の記事を取得という想定になりますが、第1引数をtrueにするとかタクソノミー名を指定するなどパラメータを少し変更することで同じタクソノミーでの前後なども指定することが可能です。

関数リファレンス/get adjacent post - WordPress Codex 日本語版

サムネイルが確実に設定されている場合

すべての記事にサムネイルが確実に設定されている（される）という場合のもので、前後記事のタイトルやサムネイル付きで出力させることができ、もし前後の記事がない場合はTOPページへ戻るリンクが出力されます。
まず、functions.phpに下記を記述します。

functions.php

if ( !function_exists( 'post_adjacent_nav' ) ) :
function post_adjacent_nav() {
  $html = '';

  $prev_post = get_adjacent_post( false, '', true );
  if ( !empty( $prev_post ) ) {
    $prev_post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $prev_post->ID ), 'full' );
    $html .= '<div class="adjacent-nav-prev">' . "\n";
    $html .= '<a href="' . get_permalink( $prev_post->ID ) . '" style="background-image: url(' . $prev_post_thumb[0] . ')">' . "\n";
    $html .= '<span>Prev</span>' . "\n";
    $html .= '<span>' . get_the_title( $prev_post->ID ) . '</span>' . "\n";
    $html .= '</a>' . "\n";
    $html .= '</div>' . "\n";
  } else {
    $html .= '<div class="adjacent-nav-prev-none"><a href="' . esc_url( home_url( '/' ) ) . '">TOP</a></div>' . "\n";
  }

  $next_post = get_adjacent_post( false, '', false );
  if ( !empty( $next_post ) ) {
    $next_post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $next_post->ID ), 'full' );
    $html .= '<div class="adjacent-nav-next">' . "\n";
    $html .= '<a href="' . get_permalink( $next_post->ID ) . '" style="background-image: url(' . $next_post_thumb[0] . ')">' . "\n";
    $html .= '<span>Next</span>' . "\n";
    $html .= '<span>' . get_the_title( $next_post->ID ) . '</span>' . "\n";
    $html .= '</a>' . "\n";
    $html .= '</div>' . "\n";
  } else {
    $html .= '<div class="adjacent-nav-next-none"><a href="' . esc_url( home_url( '/' ) ) . '">TOP</a></div>' . "\n";
  }
?>
<nav class="adjacent-nav">
  <?php echo $html; ?>
</nav>
<?php
}
endif;

あとは、single.phpなど表示させたい箇所に<?php post_adjacent_nav(); ?>と記述すれば、上記コードをそのまま使用した場合は前後記事のリンクとタイトル、あとはサムネイルが背景画像として指定されたスタイルが出力されているのを確認できます。

実際には下記のようなHTMLがそれぞれ出力され、あとはCSSで見栄えを調整すれば完成です。
ちなみに詳しくは割愛しますが、このブログと同じような見栄えにしたいというときは.adjacent-nav-prevや.adjacent-nav-next内のa要素へbackground-size: cover;を指定したり、疑似要素で半透明のマスクを作ってそれを重ねたりすれば同じような見栄えにできます。

前記事がない場合の出力HTML

<nav class="adjacent-nav">
  <div class="adjacent-nav-prev-none">
    <a href="xxx">TOP</a>
  </div>
  <div class="adjacent-nav-next">
    <a href="xxx" style="background-image: url(next-thumb.png)">
      <span>Next</span>
      <span>next post title</span>
    </a>
  </div>
</nav>

前後記事がある場合の出力HTML

<nav class="adjacent-nav">
  <div class="adjacent-nav-prev">
    <a href="xxx" style="background-image: url(prev-thumb.png)">
      <span>Prev</span>
      <span>prev post title</span>
    </a>
  </div>
  <div class="adjacent-nav-next">
    <a href="xxx" style="background-image: url(next-thumb.png)">
      <span>Next</span>
      <span>next post title</span>
    </a>
  </div>
</nav>

次記事がない場合の出力HTML

<nav class="adjacent-nav">
  <div class="adjacent-nav-prev">
    <a href="xxx" style="background-image: url(prev-thumb.png)">
      <span>Prev</span>
      <span>prev post title</span>
    </a>
  </div>
  <div class="adjacent-nav-next-none">
    <a href="xxx">TOP</a>
  </div>
</nav>

サムネイルが設定されないのを考慮する場合

先ほどとは違い、確実にサムネイルが設定されるかわからないというときやなかった場合もきっちり考慮したいときは、下記を使用することでサムネイルが設定されていない記事だった場合は指定したイメージを出力させることができます。
また、前後の記事がない場合は同じくTOPページへ戻るリンクが出力され、実装にはfunctions.phpに下記を記述します。

functions.php

if ( !function_exists( 'post_adjacent_nav' ) ) :
function post_adjacent_nav() {
  $html = '';

  $prev_post = get_adjacent_post( false, '', true );
  if ( !empty( $prev_post ) ) {
    if ( has_post_thumbnail( $prev_post->ID ) ) {
      $prev_post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $prev_post->ID ), 'full' );
      $prev_post_image = $prev_post_thumb[0];
    } else {
      $prev_post_image = get_template_directory_uri() . '/images/img_adjacent-nav-prev-none.png';
    }

    $html .= '<div class="adjacent-nav-prev">' . "\n";
    $html .= '<a href="' . get_permalink( $prev_post->ID ) . '" style="background-image: url(' . $prev_post_image . ')">' . "\n";
    $html .= '<span>Prev</span>' . "\n";
    $html .= '<span>' . get_the_title( $prev_post->ID ) . '</span>' . "\n";
    $html .= '</a>' . "\n";
    $html .= '</div>' . "\n";
  } else {
    $html .= '<div class="adjacent-nav-prev-none"><a href="' . esc_url( home_url( '/' ) ) . '">TOP</a></div>' . "\n";
  }

  $next_post = get_adjacent_post( false, '', false );
  if ( !empty( $next_post ) ) {
    if ( has_post_thumbnail( $next_post->ID ) ) {
      $next_post_thumb = wp_get_attachment_image_src( get_post_thumbnail_id( $next_post->ID ), 'full' );
      $next_post_image = $next_post_thumb[0];
    } else {
      $next_post_image = get_template_directory_uri() . '/images/img_adjacent-nav-next-none.png';
    }

    $html .= '<div class="adjacent-nav-next">' . "\n";
    $html .= '<a href="' . get_permalink( $next_post->ID ) . '" style="background-image: url(' . $next_post_image . ')">' . "\n";
    $html .= '<span>Next</span>' . "\n";
    $html .= '<span>' . get_the_title( $next_post->ID ) . '</span>' . "\n";
    $html .= '</a>' . "\n";
    $html .= '</div>' . "\n";
  } else {
    $html .= '<div class="adjacent-nav-next-none"><a href="' . esc_url( home_url( '/' ) ) . '">TOP</a></div>' . "\n";
  }
?>
<nav class="adjacent-nav">
  <?php echo $html; ?>
</nav>
<?php
}
endif;

始めに紹介したいものと基本は同じですが、こちらはサムネイル有無を判断するためにhas_post_thumbnail()を用いた条件分岐を追加しています。
条件分岐内ではサムネイルがある場合はサムネイルイメージのパスを取得、なかった場合には出力したい代替イメージの指定をそれぞれ記述しており、そのどちらかがサムネイル表示する部分へ出力するようにしています。
もしくは、どうせ代替イメージも背景画像として出力しているので、なかった場合の画像指定は直接スタイルを記述するのではなく別途クラスを付加させるような形にして、代替イメージをCSSで指定する形でも良いと思います。

あとは、同じくsingle.phpなど表示させたい箇所に<?php post_adjacent_nav(); ?>と記述し、サムネイルがなかった場合のHTMLとして実際には下記のようにそれぞれ出力されます。

前記事のサムネイルがない場合の出力HTML

<nav class="adjacent-nav">
  <div class="adjacent-nav-prev">
    <a href="xxx" style="background-image: url(http://example.com/wp-content/themes/theme-name/images/img_adjacent-nav-prev-none.png)">
      <span>Prev</span>
      <span>prev post title</span>
    </a>
  </div>
  <div class="adjacent-nav-next">
    <a href="xxx" style="background-image: url(next-thumb.png)">
      <span>Next</span>
      <span>next post title</span>
    </a>
  </div>
</nav>

次記事のサムネイルがない場合の出力HTML

<nav class="adjacent-nav">
  <div class="adjacent-nav-prev">
    <a href="xxx" style="background-image: url(prev-thumb.png)">
      <span>Prev</span>
      <span>prev post title</span>
    </a>
  </div>
  <div class="adjacent-nav-next">
    <a href="xxx" style="background-image: url(http://example.com/wp-content/themes/theme-name/images/img_adjacent-nav-next-none.png)">
      <span>Next</span>
      <span>next post title</span>
    </a>
  </div>
</nav>