【WordPress】投稿記事内に前後の記事へのリンクをサムネイル付きで表示する方法

WordPress2016年12月27日

投稿記事内に前後への記事リンクを設置する方法はいくつかありますが、特にプラグインを使用せずサイトやデザインに応じて、htmlソースを容易にカスタマイズできるよう実装いたしましたのでご紹介したいと思います。

前後の記事へのリンクは「next_post_link」や「previous_post_link」がよく用いられますが、これらのタグでは記事のタイトルやアイキャッチ画像を表示させることができません。そこで以下の記述によって「前後記事へのリンク」「記事タイトル」「アイキャッチ画像」を同時に表示することを実現します。

サンプルコード（single.php）

以下のソースをWordPressの投稿記事のテンプレート内、前後記事ナビゲーションを設置したい場所に記述します。

<ul class="list-prev-next">
<?php $prevpost = get_adjacent_post(true, '', true); if ($prevpost) : ?>
<li><a href="<?php echo get_permalink($prevpost->ID); ?>"><span><?php echo esc_attr($prevpost->post_title); ?></span><?php echo get_the_post_thumbnail($prevpost->ID, 'thumbnail'); ?></a></li>
<?php endif; ?>
<?php $nextpost = get_adjacent_post(true, '', false); if ($nextpost) : ?>
<li><a href="<?php echo get_permalink($nextpost->ID); ?>"><span><?php echo esc_attr($nextpost->post_title); ?></span><?php echo get_the_post_thumbnail($nextpost->ID, 'thumbnail'); ?></a></li>
<?php endif; ?>
</ul>

解説

「$prevpost = get_adjacent_post」「$nextpost = get_adjacent_post」を使って前後の情報を取得しています。
表示したいアイキャッチ画像のサイズは、上記サンプルでは「thumbnail」となっている箇所を「medium」「large」「full」のいずれかもしくは独自に設定したサイズ名があればそれらを呼び出すことも可能です。
任意の画像サイズでアイキャッチ画像を作る方法は以下の記事にてご紹介しておりますので、よければあわせてご参考にしてください。

【WordPress】任意のサイズでトリミングしたアイキャッチ画像のパスを取得する方法

「get_adjacent_post(true, '', true)」の最初が「true」となっていますが、これは記事の同カテゴリのみの記事を対象とすることを表しています。「false」にすることで、カテゴリを問わず全ての記事を対象として前後の記事情報を取得することが可能です。

ちなみに上記のサンプルでページを生成すると、以下のようなソースで出力されます。

<ul class="list-prev-next">
<li><a href="前の記事へのリンクURL"><span>前の記事タイトル</span><img width="300" height="136" src="画像のパス" alt=""></a></li>
<li><a href="次の記事へのリンクURL"><span>次の記事タイトル</span><img width="300" height="136" src="画像のパス" alt=""></a></li>
</ul>

サイトのデザインやテーマによって適宜cssは設定するようにしてください。

まとめ

今回、1アクセスあたりのセッション数を向上させる目的で前後記事へのリンクを設置しました。テキストだけだとやはり味気ないですが、サムネイル付きで実装することでより目を引きやすくなります。

前後の記事へリンクを設置する際は、どうぞ本記事をご参考にしていただければ幸いです。

この記事を読んでいる方にオススメの記事

「WordPress」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。