TwentyFourteenに関連記事を表示する機能を追加する

WordPress のテーマ TwentyFourteen カスタマイズのメモ書きです。

今回、内部リンク強化も兼ねて「関連する記事」表示機能を TwentyFourteen に追加してみました。

WordPress プラグインでいう所の Similar Posts みたいな感じで、こんな風になりました。

以前は画像付きにしていましたがアイキャッチ画像は基本使い回し、かつ、下記記事で抽出精度を上げた (と思っている) ら余計同じ画像ばかり出るようになったので今回は文字のみにしてみました。

スポンサーリンク

TwentyFourteen に関連記事を表示するコード

まずは関連記事を表示するコードから書いていきます。

下記のコードを functions.php に追加。

function relation_post( $post = false, $num = 3 ) {

	if ( ! $post ) { return; }

	$cat = wp_get_post_categories( $post->ID );
	$tag = wp_get_post_tags( $post->ID );

	if ( $cat && $tag ) {

		$tag_array = array();

		foreach ( $tag as $value ) {
			array_push( $tag_array, $value->term_id );
		}

		$args = array(
			'posts_per_page'      => $num,
			'post__not_in'        => array( $post->ID ),
			'ignore_sticky_posts' => 1,
			'orderby'             => rand,
			'tax_query'           => array( 
				'relation' => 'and',
				array(
					'taxonomy' => 'category',
					'terms'    => $cat,
					'field'    => 'id',
					'operator' => 'and'
				),
				array(
					'taxonomy' => 'post_tag',
					'terms'    => $tag_array,
					'field'    => 'id',
					'operator' => 'IN'
				)
			)
		);

	} else {

		$args = array(
			'posts_per_page'      => $num,
			'post__not_in'        => array( $post->ID ),
			'ignore_sticky_posts' => 1,
			'orderby'             => rand,
			'tax_query'           => array( 
				array(
					'taxonomy' => 'category',
					'terms'    => $cat,
					'field'    => 'id',
					'operator' => 'IN'
				)
			)
		);
	}

	$my_query = new WP_Query( $args );

	if( $my_query->have_posts() ) {

		echo "<nav class='page-content' role='navigation'>\n";
		echo "<h2>関連記事</h2>\n";
		echo "<ul class='list-group'>\n";

		while ( $my_query->have_posts() ) : $my_query->the_post();
			$permalink = get_permalink();
			$title     = get_the_title();
			echo "<li class='list-group-item'><a href='$permalink' title='$title'>$title</a></li>\n";
		endwhile;

		echo "</ul>\n";
		echo "</nav>\n";

		wp_reset_query();

	}

	return;
}

投稿に「カテゴリ、タグ」が付いている場合は、「全てのカテゴリが一致」かつ「いずれかのタグが一致」する一覧を検索。

投稿が「カテゴリ」のみの場合は、「いずれかのカテゴリが一致」する一覧を検索するという感じです。

後者はあんまり関連しない記事も出てくるのですが、なるべく関連記事を表示するようにといったためのものです。

次に、関連記事を表示させるコードを single.php に追加します。追加するのは下記の一行です。

relation_post( $post, 5 );

グローバル変数の $post と表示する最大投稿数を指定します。省略すると最大で 3 記事が表示されます。

single.php へは下記の辺りに追加してみました。

	get_template_part( 'content', get_post_format() );

	relation_post( $post, 5 );

	// Previous/next post navigation.
	twentyfourteen_post_nav();

これで表示は完了です。最後はスタイルシートを調整します。

位置的には項番 7.0 Sidebars の上です。

/**
 * 6.15 Customize
 * -----------------------------------------------------------------------------
 */

.list-group {
	margin-bottom: 20px;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	border: 1px solid #dcdcdc;
	border-radius: 2px;
}

.list-group-item {
	position: relative;
	display: block;
	padding: 10px 15px;
	margin-bottom: -1px;
	border-bottom: 1px dashed #dcdcdc;
	font-size: 13px;
}

.list-group-item:hover,
.list-group-item:focus {
	background-color: #f5f5f5;
}

.list-group-item a {
	text-decoration: none;
	color: #464646;
}

.list-group-item a:hover {
	color: #21759b;
}
・
・ ~省略~
・
/**
 * 7.0 Sidebars
 * -----------------------------------------------------------------------------
 */

これでカスタマイズは完成です。

ちなみに、デザインを考えるのが面倒だったので Bootstrap3 のリストグループをほぼ踏襲しちゃいました。

コードは使い回しだし手抜き感が半端ないですが結構良くできたと思います。

簡単ですが、TwentyFourteen に関連記事を表示する機能を追加するはこれでお終いです。