WordPressで関連記事を一覧表示する

WordPressで関連記事一覧を表示する方法WordPressでの記事が増えてくると、関連する記事を自動的に一覧表示したくなる時があります。
そういったプラグインも多数あるようですが、プラグインを使用せずに関連記事の一覧表示をやってみたいと思います。

プラグインを使わないことのメリットは、自分の好きなように応用できることです。
CSSなどで表示の仕方を工夫できます!
WordPress動作も重くなりにくいと思います!

Salty WordPress的コード

私が実際に使用しているコードを紹介します。
私は同じカテゴリーに属する記事を関連記事として表示しております。
同じタグが付いたものを関連記事として表示するやり方も載せておきます。

カテゴリーの場合


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<?php
	// 同じカテゴリーの記事を関連記事として表示する
	$categories = wp_get_post_categories($post->ID, array('orderby'=>'rand')); // 複数カテゴリーを持つ場合ランダムで取得
	if ($categories) {
		$args = array(
			'category__in' => array($categories[0]), // カテゴリーのIDで記事を取得
			'post__not_in' => array($post->ID), // 表示している記事を除く
			'showposts'=>5, // 取得記事数
			'caller_get_posts'=>1, // 取得した記事の何番目から表示するか
			'orderby'=> 'date' // 記事を日付順にする
		);
		$my_query = new WP_Query($args);
		if( $my_query->have_posts() ) { ?>
			<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
				<div class="termlist_one">
						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(100,100) ); ?></a>
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
						<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>
					<br clear="all" />
				</div><!-- .termlist_one -->
 
			<?php
			endwhile;
		}
		wp_reset_query();
	}
?>

タグの場合


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<?php
	// 同じタグの記事を関連記事として表示する
	$tags = wp_get_post_tags($post->ID, array('orderby'=>'rand')); // 複数タグを持つ場合ランダムで取得
	if ($tags) {
		$first_tag = $tags[0]->term_id;
		$args=array(
			'tag__in' => array($first_tag), // タグのIDで記事を取得
			'post__not_in' => array($post->ID), // 表示している記事を除く
			'showposts'=>5, // 取得記事数
			'caller_get_posts'=>1, // 取得した記事の何番目から表示するか
			'orderby'=> 'date' // 記事を日付順にする
		);
		$my_query = new WP_Query($args);
		if( $my_query->have_posts() ) { ?>
			<?php while ($my_query->have_posts()) : $my_query->the_post(); ?>
 
				<div class="termlist_one">
						<a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( array(100,100) ); ?></a>
						<a href="<?php the_permalink(); ?>"><?php the_title(); ?></a><br>
						<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>
					<br clear="all" />
				</div><!-- .termlist_one -->
 
			<?php
			endwhile;
		}
		wp_reset_query();
	}
?>

CSS

CSSはカテゴリー・タグの両方で共通です。

1
2
3
4
5
6
7
8
.termlist_one {
	padding-bottom: 2px;
	margin-bottom: 2px;
}
.termlist_one img {
	float: left;
	margin-right: 5px;
}


上記のコードでは、
  • アイキャッチ画像の表示・記事へのリンク
  • タイトルの表示・記事へのリンク
  • All in One SEO Packでの詳細(Description)の表示
という表示になります。
All in One SEO Packの詳細(Description)の表示をやめたい場合には、

<?php echo get_post_meta($post->ID, _aioseop_description, true); ?>

を削除してください。

関連記事表示の効果

関連記事を表示した場合には、
  • 訪問者の回遊性を高める
  • 訪問者の直帰率を下げる
  • 記事ボリュームのアップ – SEO
という効果があると思います。
仕事などで情報を求めて訪問している方にとっては、関連情報は本当にありがたいものですよね。
サイトオーナーにも訪問者にもありがたいことが多いですね。

筆者の感想

関連記事をアイキャッチ画像付きで一覧表示すれば、見栄えもかなりよくなります!
色々なページを見てもらえる機会も増えますし、絶対にやるべきたと思います。
プラグインを使わずしても、難しい作業なしでできますしね!

CSSを工夫すれば色々な表示の仕方が可能ですので、自分のサイトに合った表示のさせ方を作り上げてください!

参考サイト

関連記事をプラグインを使わずに表示する!WordPress高速化Tips!


関連記事

WordPressの画像を連続で投稿に挿入する 連続で画像を投稿に挿入
WordPressにて何枚もの画像を連続で挿入したい時があります。メディアを追加ウィンドウを自動で閉じないカスタマイズを紹介します。
WordPressでの子ページの作り方 固定ページを階層化し親ページに子ページ一覧を表示
WordPressの固定ページを階層化し、親ページに子ページの一覧を表示する方法を紹介します。プラグイン不使用です。
アイキャッチ画像の上に半透明の帯と記事タイトルをテキスト表示 画像の上に半透明の帯とテキストを表示
最近よく見かける、画像の上に半透明の帯を表示しテキストを配置する方法。簡単なCSSで実現できますのでお勧めです。
WordPressの固定ページや投稿記事に個別にcssを追加する 固定ページや投稿記事ごとに個別のCSSとJavaScriptを追加
WordPressテーマのスタイルシートとは別に、記事やページごとに追加指定したいcssがある場合には、function.phpをカスタマイズすれば可能となります。JavaScriptも同様に可能です。
WordPressの記事タイトル一覧にアイキャッチ画像を表示する WordPressの記事タイトル一覧にアイキャッチ画像を表示
WordPressをカスタマイズして、記事タイトル一覧のページを作成している方も多いと思います。各タイトルと一緒にアイキャッチ画像を表示すれば、さらに見やすいページができあがります。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

*

次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>