【WordPress】前の記事・次の記事のリンクをサムネイル画像付きで表示する

こんにちは、Ryohei（@ityryohei）です！

WordPressで前の記事・次の記事のリンクをサムネイル画像付きで表示する方法のご紹介です。

前の記事・次の記事で取得可能なデータと、パーマリンクとサムネイル画像を取得する方法を解説しています。

本記事の内容

前の記事・次の記事を取得する方法
前の記事・次の記事で出力できるデータ
前の記事・次の記事のリンクを表示する

では、解説していきます。

前の記事・次の記事を取得する

WordPressでは、標準で前の記事と次の記事を取得する関数が用意されています。

下記の関数になります。

//隣接する前の記事を取得する
get_previous_post();

//隣接する次の記事を取得する
get_next_post();

使い方はとても簡単で、シングルページで上記の関数を呼び出すことで、隣接している前・次の記事を取得することができます。

デフォルトでは、すべての記事の中から隣接している記事を取得するようになっていますが、引数を指定することで取得する記事を絞り込むことができます。

例えば、同じカテゴリの中で隣接している記事を取得する場合は、下記のように記述します。

get_previous_post(true);
get_next_post(true);

他にも特定のカテゴリを除外したり、タクソノミーを指定する引数が用意されています。

詳しくは下記をご参照いただければと思います。

前の記事・次の記事の投稿データを取得する

前項でご紹介した「get_previous_post()」と「get_next_post」で取得することができるデータを詳しくご紹介します。サイトによって取得したいデータは異なると思いますので、適宜参照していただければと思います。

※本記事では下記の変数に関数で取得したオブジェクトを代入して解説しています。

$prev_post = get_previous_post();
$next_post = get_next_post();

取得可能なデータ

ID

各関数で取得した投稿IDを取得します。

$prev_post->ID;
$next_post->ID;

post_author

各関数で取得した投稿の投稿者IDを取得します。

$prev_post->post_author;
$next_post->post_author;

post_date

各関数で取得した投稿の投稿時間を取得します。

$prev_post->post_date;
$next_post->post_date;

post_date_gmt

各関数で取得した投稿の投稿時間をGMT(グリニッジ標準時)で取得します。

$prev_post->post_date_gmt
$next_post->post_date_gmt;

post_content

各関数で取得した投稿の投稿内容(本文)を取得します。

$prev_post->post_content;
$next_post->post_content;

post_title

各関数で取得した投稿の投稿タイトルを取得します。

$prev_post->post_title;
$next_post->post_title;

post_excerpt

各関数で取得した投稿の抜粋を取得します。

$prev_post->post_excerpt;
$next_post->post_excerpt;

post_status

各関数で取得した投稿の状態(公開、非公開等)を取得します。

$prev_post->post_status;
$next_post->post_status;

comment_status

各関数で取得した投稿のコメントの受付状態をを取得します。

$prev_post->comment_status;
$next_post->comment_status;

ping_status

各関数で取得した投稿のピンバック・トラックバックの受付状態を取得します。

$prev_post->ping_status;
$next_post->ping_status;

post_password

各関数で取得した投稿のパスワードを取得します。投稿がパスワード保護されている場合に有効です。

$prev_post->post_password;
$next_post->post_password;

post_name

各関数で取得した投稿のスラッグを取得します。

$prev_post->post_name;
$next_post->post_name;

to_ping

各関数で取得した投稿のPING送信先リストを取得します。

$prev_post->to_ping;
$next_post->to_ping;

pinged

各関数で取得した投稿のPING通知済みのURLを取得します。

$prev_post->pinged;
$next_post->pinged;

post_modified

各関数で取得した投稿の更新時間を取得します。

$prev_post->post_modified;
$next_post->post_modified;

post_modified_gmt

各関数で取得した投稿の更新時間をGMT(グリニッジ標準時)で取得します。

$prev_post->post_modified_gmt;
$next_post->post_modified_gmt;

post_content_filtered

調査してみましたが、詳細不明な値になります。

$prev_post->post_content_filtered;
$next_post->post_content_filtered;

post_parent

各関数で取得した投稿の親ページのIDを取得します。

$prev_post->post_parent;
$next_post->post_parent;

guid

各関数で取得した投稿のGUID(オブジェクトに割り当てられた一意のID)を取得します。WordpressのGUIDはURLに似た形式となっています。

$prev_post->guid;
$next_post->guid;

menu_order

各関数で取得した投稿のメニューの順序を取得します。

$prev_post->menu_order;
$next_post->menu_order;

post_type

各関数で取得した投稿の投稿タイプを取得します。

$prev_post->post_type;
$next_post->post_type;

post_mime_type

各関数で取得した投稿のMIMEタイプを取得します。

$prev_post->post_mime_type;
$next_post->post_mime_type;

filter

各関数で取得した投稿に適用されたフィルター名を取得します。

$prev_post->filter;
$next_post->filter;

前の記事・次の記事にあると便利な情報

上記でご紹介した取得データの中には、前の記事や次の記事のリンクを表示するのに必要なパーマリンクやアイキャッチ画像がありません。ただ、前の記事と次の記事の投稿IDを取得することができますので、パーマリンクやアイキャッチ画像は別の関数を使用して取得します。

パーマリンク

get_permalink($prev_post->ID);
get_permalink($next_post->ID);

アイキャッチ画像のURL

wp_get_attachment_url(get_post_thumbnail_id($prev_post->ID))
wp_get_attachment_url(get_post_thumbnail_id($next_post->ID))

以上、前の記事・次の記事を表示に必要なデータの取得方法のご紹介でした。

最後に、簡単なサンプルを使って前の記事・次の記事のサムネイル付きリンクを作成してみます。

前の記事・次の記事のリンクを表示する

<div id="prevNextPost">
  <?php
  $prev_post = get_previous_post(true);
  $next_post = get_next_post(true);
  ?>

  <?php if($prev_post){ ?>
  <a class="prevPost" href="<?php echo get_permalink($prev_post->ID); ?>">
    <h4><?php echo $prev_post->post_title; ?></h4>
    <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($prev_post->ID)); ?>" alt="">
  </a>
  <?php } ?>

  <?php if($next_post){ ?>
  <a class="nextPost" href="<?php echo get_permalink($next_post->ID); ?>">
    <img src="<?php echo wp_get_attachment_url(get_post_thumbnail_id($next_post->ID)); ?>" alt="">
    <h4><?php echo $next_post->post_title; ?></h4>
  </a>
  <?php } ?>
</div>

以上、WordPressで前の記事・次の記事のリンクをサムネイル画像付きで表示する方法のご紹介でした！