アイキャッチ画像付き、最終更新日基準で前後の投稿へのリンクを表示するショートコード

前後の投稿を出力する方法を紹介している多くのページでは、「get_previous_post()」「previous_post_link()」関数を使ったものが多いのですが、これだと公開日基準になってしまうため、そのサイトにおける本当の前後のページにならないケースがあります。

そこで本ページでは、最終更新日を基準として、前後の投稿をアイキャッチ画像付きで表示させるショートコードプログラムの作成例を紹介します。

表示デモ

今回のショートコードを使うと以下のような表示ができます。

このサイトに合わせるため、紹介しているコードでのデザインとは違うかも知れません

更新日が1つ前の投稿へのリンク表示例

更新日が1つ後ろの投稿へのリンク表示例

カラムブロックを使って左右に表示させた例

コード例と解説

追加するコード

PHPプログラム

有効化しているテーマのfunctions.phpへ以下のコードを追加します。

/*** 前の投稿へのリンクを表示するショートコード ***/
function pwcn_previous_post_link_shortcode() {
// 現在の投稿IDを取得
	$current_post_id = get_the_ID();
// 現在の投稿の最終更新日を取得
	$current_post_modified_date = get_the_modified_date('Y-m-d H:i:s', $current_post_id);
// 現在の投稿に割り当てられているカテゴリーを取得
	$categories = get_the_category($current_post_id);
	$category_ids = array();

// カテゴリーIDのみを抽出
	if (!empty($categories)) {
		foreach ($categories as $category) {
			$category_ids[] = $category->term_id;
		}
	}

// カスタムクエリの引数
	$args = array(
		'post_type' => 'post',
		'post_status' => 'publish',
		'posts_per_page' => 1,
		'orderby' => 'modified',
		'order' => 'DESC',
		'category__in' => $category_ids, // 同一カテゴリー
		'date_query' => array(
			array(
				'before' => $current_post_modified_date,
				'inclusive' => false,
			),
		),
		'post__not_in' => array($current_post_id), // 現在の投稿を除外
	);

// クエリ実行
	$post_query = new WP_Query($args);

// 結果の確認
	if ($post_query->have_posts()) {
		$post_query->the_post();
		$post_url = get_permalink();
		$post_title = get_the_title();
		$post_thumb = get_the_post_thumbnail( get_the_ID(), array( 75, 75 ));

		wp_reset_postdata();

		$output = '';
		
		$output .= '<div class="pwcn-prev-next-post">';
		$output .= '<a href="'.$post_url.'" aria-label="next-post"></a>';
		$output .= '<div class="pwcn-prev-next-post-mark"> < </div>';
		$output .= '<div class="pwcn-prev-next-post-img">'.$post_thumb.'</div>';
		$output .= '<div class="pwcn-prev-next-post-content">';
		$output .= $post_title;
		$output .= '</div>';
		$output .= '</div>';

		return $output;
    
	} else {
		return '';
	}
}
add_shortcode('pwcn-prev-post', 'pwcn_previous_post_link_shortcode');

/*** 次の投稿へのリンクを表示するショートコード ***/
function pwcn_next_post_link_shortcode() {
// 現在の投稿IDを取得
	$current_post_id = get_the_ID();
// 現在の投稿の最終更新日を取得
	$current_post_modified_date = get_the_modified_date('Y-m-d H:i:s', $current_post_id);
// 現在の投稿に割り当てられているカテゴリーを取得
	$categories = get_the_category($current_post_id);
	$category_ids = array();

// カテゴリーIDのみを抽出
	if (!empty($categories)) {
		foreach ($categories as $category) {
			$category_ids[] = $category->term_id;
		}
	}

// カスタムクエリの引数
	$args = array(
		'post_type' => 'post',
		'post_status' => 'publish',
		'posts_per_page' => 1,
		'orderby' => 'modified',
		'order' => 'ASC',
		'category__in' => $category_ids,
		'date_query' => array(
			array(
				'after' => $current_post_modified_date,
				'inclusive' => false,
			),
		),
		'post__not_in' => array($current_post_id), // 現在の投稿を除外
	);

// クエリ実行
	$post_query = new WP_Query($args);

// 結果の確認
	if ($post_query->have_posts()) {
		$post_query->the_post();
		$post_url = get_permalink();
		$post_title = get_the_title();
 		$post_thumb = get_the_post_thumbnail( get_the_ID(), array( 75, 75 ));

		wp_reset_postdata();

		$output = '';
		
		$output .= '<div class="pwcn-prev-next-post next">';
		$output .= '<a href="'.$post_url.'" aria-label="next-post"></a>';
		$output .= '<div class="pwcn-prev-next-post-content">';
		$output .= $post_title;
		$output .= '</div>';
		$output .= '<div class="pwcn-prev-next-post-img">'.$post_thumb.'</div>';
		$output .= '<div class="pwcn-prev-next-post-mark">&nbsp;>&nbsp;</div>';
		$output .= '</div>';

		return $output;
    
	} else {
		return '';
	}
}
add_shortcode('pwcn-next-post', 'pwcn_next_post_link_shortcode');

スタイルコード

有効化しているテーマのstyle.cssへ以下のコードを追加します。

/* 前、次への投稿リンク全体 */
.pwcn-prev-next-post {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 8px;
	border: 1px solid #eee;
	border-radius: 4px;
	justify-content: left;
	position:relative;
	height:100%;/* カラムなどに入れても高さが揃うようにする */
	transition: all  0.3s ease;
}

/* 次の投稿リンクはコンテンツを右寄せにする */
.pwcn-prev-next-post.next {
	justify-content: right;
}

/* 画像の縦位置を中央に、画像の切り抜き */
.pwcn-prev-next-post-img img {
	display: block;
	margin: auto 0;
	object-fit:cover;
}

/* 全体をクリック可能にする */
.pwcn-prev-next-post a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ホーバー時に枠線と背景色を変更 */
.pwcn-prev-next-post:hover {
	border:1px solid #ccc;
	background: #eee;
}

リンク表示の仕方

最終更新日が一つ前（昔）の投稿へのリンクを表示させるには、以下のショーコードを挿入します。

[pwcn-prev-post]

最終更新日が一つ後ろ（未来）の投稿へのリンクを表示させるには、以下のショーコードを挿入します。

[pwcn-next-post]

ブロックテーマの場合は、単一投稿テンプレートなどへ上記のショートコードを入れれば動作します

クラシックテーマの場合はdo_shortcode()関数を使って挿入してください

コードの簡易解説

PHPプログラムについて

冒頭で紹介した「get_previous_post()」「previous_post_link()」では、比較的短いコードで前後の投稿へのリンクを出力できるものの、基準の指定はカテゴリーに属するか否かに限られていますから、どうやっても最終更新日基準にはできません。

そこでこのコードでは、投稿の一覧などで使われ、データの中から何かの条件で抽出した結果を表示させるための「WP_Query()」を使用して、「前」または「後」の投稿を1件表示させるということをしています。

どんな条件を指定しているのかはコード内随所にコメントを入れていますので確認ください。

また、例えば投稿タイプを限定する、カテゴリーを限定するなど「WP_Query()」でできることはすべて指定可能ですので、自身の環境に合わせてカスタマイズしてください。

スタイルコードについて

「次へ」のコンテンツを右寄せにするために「next」というクラスを追加している点を除き、プログラムがほとんど変わらないので「前へ」「次へ」リンクコンテンツのCSSクラスは共通にしています。

また、以下のページで紹介しているように、コンテンツ全体をクリックできるようにするためのaタグの書き方を工夫していることで、スタイルコードが少なく済むようにしています。

親要素全体をクリック可能にする恐らく一番簡単な方法

これにより、前述のスタイルコードをご覧いただいて分かる通り、かなり簡素なコードで両方のコンテンツがそれなりに表示できます。

また、以下の点でなるべく不都合が出ないようにも工夫しています。

• 「次へ」「前へ」をカラムブロックへ横並びで入れた際に、高さが揃うようにする
• ホーバー時、フォーカス喪失時に、背景画像と枠線をふわっと変えるようにする
• display:flex;で画像の縦位置が微妙にズレるのをなくし、中央になるようにする

画像の縦位置の工夫（調整方法）については以下で詳しく解説していますのでよかったらどうぞ。

display:flexで画像の縦位置を中央にする方法（メモ）

あとはデベロッパーツールなどで確認しながら、いい感じのデザインに仕上げてください。