ISHI NOTE WordPressで「前の記事」「次の記事」リンクにサムネイル画像を表示させる方法

WordPressで「前の記事」「次の記事」リンクにサムネイル画像を表示させる方法

WordPressなどのブログには、ほとんどの場合、記事下に「前の記事」「次の記事」へ移動できるリンクが設置されています。

設置した方がSEO的にに有利だと言われていますし、時系列に記事を並べている時など、順番に記事を読んでいくことができるので、ユーザビリティの面から考えてもとても有効だと言われています。

ただ、ほとんどのテーマに設置されているリンクは、テキストと矢印だけのそっけないデザインになっているので、少しでもデザインを華やかにするために、サムネイル画像付きリンクにカスタマイズしてみました。

このブログがデモサイトになるので、僕が作ったリンクを見るにはこの記事の下を見てください。

サンプルコード

それでは、サムネイルを表示させる方法紹介していきたいと思います

作るにあたって参考にしたのは以下のWordPressサポートフォーラムです。↓

参考サイト：Next & Previous Post Titles With Thumbnails

まず、表示させたい箇所へ以下のコードを貼り付けてください。とてもシンプルなコードですが、このコードを貼り付けるだけで、サムネイル画像付きの「前の記事」「次の記事」リンクをブログに表示させることができます。

<div class="prev-next-link clearfix">
    <div class="prev-link">
    <?php
    $prevPost = get_previous_post(true); //「前の記事」データを取得
    $prevThumbnail = get_the_post_thumbnail($prevPost->ID, array(120,80) ); //「前の記事」データのサムネイル取得
    previous_post_link( '%link',$prevThumbnail.'%title' ); //出力
    ?>
  </div>
  <div class="next-link">
    <?php
    $nextPost = get_next_post(true); //「次の記事」データを取得
    $nextThumbnail = get_the_post_thumbnail($nextPost->ID, array(120,80) ); //「次の記事」データのサムネイル取得
    next_post_link( '%link', '%title'.$nextThumbnail); //出力
    ?>
  </div>
</div>

ほぼほぼサポートフォーラム書かれている通りのコードになりますが、後でCSSで装飾しやすいようにdivを追記しています。