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

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

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


イメージ

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

120903-1

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

120903-2

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

実装

functions.php

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

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

2012/9/21追記:2行目を書くと、画像をアップロードした際にその画像サイズのものが自動生成されてしまします。画像が増えるのが嫌な方は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行目で、先ほど指定したサイズのサムネイルを呼び出して、リンクをつけています。

2012/9/21追記:'rel_tmn'を定義しなかった方は、the_post_thumbnail(array(100,100));のように書きます。長辺がこの大きさに合うように縮小されます。

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にもリンクを貼っているので、マウスホバーで何かアクションが欲しいなと思ったのですが、画像を差し替えるのも面倒なのでちょっぴり薄くなるようにしています。あとは、枠をつけたりとか。

参考

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

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()の中にこんな感じで追加しましょう。

2012/9/21追記:定義しなかった方は、'rel_tmn'array(100,100)に差し替えてください。

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

2014/5/1追記

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

こちらを参考に、該当記事が存在しない場合にメッセージを出すように修正しました。(2014/7/14)
<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に人気記事リストを入れて除外して使っています。

公開日:2012/09/03
更新日:2014/07/14

5件のピンバック

  1. […] プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する *Ateitexe […]

  2. […] 僕はPHPに関する知識はほぼゼロですが、参考サイトさんでは丁寧にわかりやすく解説されていることが多いので「参考記事を見ながらコードをコピペして自分のブログに合うように多少手を加える」ということなら出来ます。 今回も参考になる記事を見つけて読んだことが導入するきっかけになりました。 ▼参考にしたのはこちら プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する *Ateit…サムネイルつきの関連記事は元々使っていたカタチだったのでこのブログにピッタリでした! 表示させる記事の数を変えて、CSSをこのブログに合うように少し変えただけで今の状態に出来ました! […]

  3. […] スタイルシートはこちらから拝借しましたm(_ _)m プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する […]

  4. […] プラグインを使わずに、WordPressのサムネイルつき関連記事を表示する *Ateitexe […]

5件のコメント

  1. りんご より:

    はじめまして!
    こちらの記事を参考に関連記事を表示させていただいています。
    質問なのですが、こちらの記事ではタグによって関連記事を表示させていますが、これをカテゴリーによって表示させるにはどうしたらいいでしょうか。
    お時間がありましたら、お教え願えると幸いです。
    宜しくお願いします。

  2. りんご より:

    すみません、自己解決しました。失礼いたしました。

    • *you より:

      はじめまして、コメントありがとうございます。
      解決なさったそうで良かったです(*´∀`*)
      お役にたてずにすみません、良ければまたお越しくださいませ!

  3. 吉田哲也 より:

    何時間かかかりましたが、おかげさまでヘッダー部分に関連記事を表示できるようになりました。すごく助かりました。
    ありがとうございます。

    • *you より:

      吉田さん、コメントありがとうございます!

      ブログ拝見しました!ヘッダーに表示するのも良いですね(´∀`*)
      参考にして頂けて光栄ですー!


コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

コメントは承認制ですので、反映までしばらくお待ち下さい。(稀にスパムの誤判定にて届かないこともあるようですので、必要な際はお問い合わせからお願い致します。)

YouTubeでQ&Aコンテンツを企画しています

運営しているYouTubeチャンネルで、ご相談やご質問を募集しています。動画のコメントやお問い合わせページからお気軽にご相談をお寄せください。