WordPressのサムネイルつき関連記事を表示する

今まで関連記事はただ単にテキストだけのリスト表示にしてたんですが、やっぱりサムネイルがあったほうが見た目がいいよなぁと思い、やってみました。

イメージ

• プラグインを使わずWordPressに9の機能をつける | Webクリエイターボックス

今までは、Webクリエイターボックスさんのコードを使わせていただいて、こんな感じにしてました。

これにちょっと手を加えて、こんな感じに。

うん、やっぱ画像あったほうが目に入ってくるような気がする！

実装

functions.php

add_theme_support('post-thumbnails');
add_image_size('rel_tmn', 94, 64); // 関連記事用　縮小モード

テーマにサムネイルを使いますよー（1行目）と言った後、任意のサイズを縦、横の順番で指定して、'rel_tmn'という名前で定義します（2行目）。数値はお好きに変えてください。

single.php

<h3>関連記事</h3>
<ul id="relation">
<?php
	$original_post = $post;
	$tags = wp_get_post_tags($post->ID);
	$tagIDs = array();
	if ($tags) {
		$tagcount = count($tags);
		for ($i = 0; $i < $tagcount; $i++) {
			$tagIDs[$i] = $tags[$i]->term_id;
		}
	$args=array(
	'tag__in' => $tagIDs,
	'post__not_in' => array($post->ID),
	'showposts'=>5,
	'caller_get_posts'=>1
	);
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
	while ($my_query->have_posts()) : $my_query->the_post(); ?>
		<li>
			<a href="<?php the_permalink();?>"><?php the_post_thumbnail('rel_tmn'); ?></a>
			<h4><a href="<?php the_permalink();?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h4>
		</li>
<?php endwhile; wp_reset_query(); ?>
<?php } else { ?>
	関連する記事は見当たりません。
<?php } } ?>
</ul>

22行目で、先ほど指定したサイズのサムネイルを呼び出して、リンクをつけています。

style.css

ul#relation li{
	width:100px;
	margin:0 6px 10px 6px;
	float:left;
	}
ul#relation li img{
	border-top: 1px #ddd solid;
	border-left: 1px #ddd solid;
	border-right: 1px #999 solid;
	border-bottom: 1px #999 solid;
	padding: 3px;
	background: #fff;
	margin-top:0;
	}
ul#relation li img:hover{
	filter: alpha(opacity=80);
	-moz-opacity:0.80;
	opacity:0.80;
	}
ul#relation li h4{
	margin-top: 3px;
	font-weight: normal;
	font-size: 85%;
	line-height: 15px;
	}

このブログで使っているCSSです。imgにもリンクを貼っているので、マウスホバーで何かアクションが欲しいなと思ったのですが、画像を差し替えるのも面倒なのでちょっぴり薄くなるようにしています。あとは、枠をつけたりとか。

参考

• 特定のカテゴリを指定または除外したサムネイル付きの関連記事を表示するphp | ウェビメモ
• WordPressのアイキャッチのサイズ指定色々 | memocarilog

こちらのサイトを参考にさせて頂きました！ありがとうございます！

imgにaltとtitleをつける

さて、この時点でだいたいOKなんですが、表示したサムネイルをマウスホバーすると画像のファイル名がでてきちゃう…。altもないし、なんかちょっとやだなーと思ったので、titelとaltと追加します。

single.php

<?php the_post_thumbnail('rel_tmn', array('alt'=>get_the_title(), 'title'=>get_the_title())); ?>

さっきの22行目の、the_post_thumbnail()の中にこんな感じで追加しましょう。

いかがでしたでしょうか。どなたかのお役に立てれば幸いです！

2014/5/1追記

長らく使わせていただいていたコードですが、現在ではget_posts()を使ってこのように書いておりますので、一応載せておきます。

<h3>関連記事</h3>
<ul class="relation">
<?php
$tags = wp_get_post_tags( $post->ID, 'fields=ids' ); //現在のタグIDを配列で取得
global $post;
$args = array(
	'posts_per_page' => 5,
	'tag__in' => $tags,
	'post__not_in' => array($post->ID),
	'orderby' => 'rand'
);
$myposts = get_posts( $args );
if ( !$myposts ) {
	echo "<li>記事がありません。</li>";
} else {
	foreach( $myposts as $post ) {
		setup_postdata($post);
		if( has_post_thumbnail() ) {
			$rl_img = get_the_post_thumbnail( $post->ID, array(100,100), array('alt'=>get_the_title()) );
		} else {
			$rl_img = '<img src="xxx.png" width="xx" height="xx" />';
		}
		?>
		<li><a href="<?php the_permalink();?>"><?php echo $rl_img; ?><?php the_title(); ?></a></li>
		<?php
	}
}
wp_reset_postdata();
?>
</ul>

現在表示されている記事は除いて、同じタグの記事をランダムで表示します。サムネイルの有無を調べて、ないものは代替imgを指定してます。

実稼働では、併用している人気記事一覧と記事が被らないように、9行目のpost__not_inに人気記事リストを入れて除外して使っています。