投稿ナビゲーション(投稿ページの「次/前へ」リンク)に アイキャッチ画像をつける

Posted on Update by admin


最近のテーマでは 投稿ナビゲーション(投稿ページの「次へ/前へ」リンク)では「the_post_navigation」を使ってる場合が多いですよね。デフォルトテーマでは TwentyFifteen から使われています。

「the_post_navigation」は シンプルなコードで投稿ナビゲーションを生成してくれるのでとても便利です。でもさらに「the_post_navigation」で「次へ/前へ」リンクにアイキャッチ画像を追加したくなりますよね?

そこで「the_post_navigation」でも簡単にアイキャッチ画像を追加するコードを紹介します。
　

コード

以下のコードを テーマの funtions.php か my-plugin.php に張り付けてください。

/**
 * 投稿ナビゲーションにアイキャッチ画像を追加する
 *
 * @param string  $output   The adjacent post link.
 * @param string  $format   Link anchor format.
 * @param string  $link     Link permalink format.
 * @param WP_Post $post     The adjacent post.
 * @param string  $adjacent Whether the post is previous or next.
 *
 * @since WordPress 4.2.0
 * License: GPLv2 or later
 */
function nendebcom_add_img_next_prev_post_link( $output, $format, $link, $post, $adjacent ){

	if( has_post_thumbnail( $post ) ){
		// ①アイキャッチ画像	thumbnail,medium
		$post_thumbnail_img = get_the_post_thumbnail( $post, 'thumbnail' );
	}else{
		// ②画像が無い場合のダミー画像
		$post_thumbnail_img = '<img src="' . includes_url( 'images/blank.gif' ) . '" alt="" />';
	}
	// ③画像タグを <div> の中に入るように置換する
	$output = str_replace( '<div class="nav-' . $adjacent . '">', '<div class="nav-' . $adjacent . '">' . $post_thumbnail_img, $output );

	return $output;
}
add_filter( 'next_post_link', 'nendebcom_add_img_next_prev_post_link', 10, 5 );
add_filter( 'previous_post_link', 'nendebcom_add_img_next_prev_post_link', 10, 5 );

【解説】
①「次」又は「前」の投稿のアイキャッチ画像があれば thumbnailサイズ の画像を返します。(mediumにしてもいいですが 画像の縦横をCSSとかで調整する必要があります)
②画像が無い場合はダミー画像を返すようにします。(blank.gifがさみしい場合は何か作ってリンクを変更してください。それか無しにしてもいいです)
③あとでCSSで調整しやすくするために、画像タグを <div class=”nav-previous”> や <div class=”nav-next”>の中に入るように置換して返すようにします。
※{$adjacent}_post_linkフィルターを使います。
※「the_post_navigation」を使ってる場合で書いていますが 別の方法の next_post_link や previous_post_link を使っていても画像表示されます。

設置前　TwentySixteen 標準の状態

設置後　それぞれのアイキャッチ画像が thumbnailサイズ で追加表示されました。

　
　

CSS

このままでは見た目が悪いのでCSSで調整します。
今回は TwentySixteen で やってみます。
以下のコードを テーマの funtions.php か my-plugin.php に張り付けてください。
CSS部分を style.css に書き込んでもいいです。

function nendebcom_add_img_next_prev_post_link_css( ){
?>
<style type="text/css">

	div.nav-previous img{
		background-color: #ddd;
		float: left;
		margin: 20px 20px 0 0;
		width: auto;
		height: 80px;
	}
	div.nav-next img{
		background-color: #ddd;
		float: right;
		margin: 20px 0 0 20px;
		width: auto;
		height: 80px;
	}
	div.nav-next{
		text-align: right;
	}
</style>
<?php
}
add_filter( 'wp_head', 'nendebcom_add_img_next_prev_post_link_css' );


※ついでに「次」の部分を右寄せにしています。

　

スポンサードリンク



　

おまけ

the_post_navigation には prev_text と next_text 以外にも array()の中に追加する事で いくつか設定が追加できます。

デフォルトは以下の様に設定されています。

	array(
		'prev_text'          => '%title',
		'next_text'          => '%title',
		'in_same_term'       => false,
		'excluded_terms'     => '',
		'taxonomy'           => 'category',
		'screen_reader_text' => __( 'Post navigation' ),
	) );

in_same_term

	'in_same_term'       => true,

にすると 開いてるページのと同じカテゴリの中で投稿ナビゲーションを表示します。
カテゴリが複数あってもどれかに該当すれば投稿ナビゲーションを表示します。

taxonomy

		'taxonomy'           => 'post_tag',

にすると カテゴリではなく同じタグの中で投稿ナビゲーションを表示します。

excluded_terms

		'excluded_terms'     => '1,2,10',

にすると カンマ区切りで入力したカテゴリ(タグ)IDの投稿は除外されます。。

screen_reader_text

		'screen_reader_text' => '投稿ナビゲーション'),

投稿ナビゲーションのタイトル文字を変更できます。
しかし デフォルトテーマではタイトル自体 CSS で見えなくしています。

　

スポンサードリンク



　

参考

the_post_navigation() | Function | WordPress Developer Resources

the_post_navigation()

{$adjacent}_post_link | Hook | WordPress Developer Resources

{$adjacent}_post_link

テンプレートタグ/get the post thumbnail – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E3%83%86%E3%83%B3%E3%83%97%E3%83%AC%E3%83%BC%E3%83%88%E3%82%BF%E3%82%B0/get_the_post_thumbnail

関数リファレンス/has post thumbnail – WordPress Codex 日本語版
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/has_post_thumbnail




スポンサードリンク