5月 22 2010

関連記事を自動表示するWordPressプラグイン「jRelated」をカスタマイズして、サムネイル表示する方法

私のブログは、検索エンジンからキーワードで入ってきてくれる方がかなり多いのですが、直帰率が非常に高く90%弱。少しでも関連記事をご覧頂く機会を作りたいと思い、simple tagsプラグインやpopular postプラグインで関連記事をテキスト表示していましたが、jRelatedプラグインを改造してサムネイル表示してみることにしました。

jRelatedプラグインとは

「WordPress Related Post for Japanese」プラグインのことです。日本語に特化していて、記事中の文章を解析して関連記事を探してくれます。Yahoo APIを使うのでちょっと設定がややこしいですが、下の記事が分かりやすいかと。
■WordPressに『WordPress Related Post for Japanese』を導入する方法 – IDEA*IDEA ～ 百式管理人のライフハックブログ

プラグインソースをちょっといじってサムネイル表示

関連記事タイトルのテキストだけなくサムネイルも表示したいと思い、プラグインソースを修正しました。このブログでは、トップページやカテゴリーページの記事一覧でサムネイル画像を表示出来るように、カスタムフィールドにサムネイル画像URLを管理しているため、これを活用。カスタムフィールドの使い方は下の記事を参考にしてください。
■WordPressのトップページにエントリーのサムネイルを表示した | 本質思考道場

wp-content/plugins/wp-jrelated/wp-jrelated.phpのソースを見ると、以下のような箇所があります。

		//リンク文字列作成
		$content .= '<div id="wpjr">' . "\n";;
		if(trim($this->relatedHeader) != '') {
			$content .= $this->relatedHeader . "\n";
		}
		$content .= '<ul id="wpjrelated">' . "\n";
		$related = array();
		foreach($entries as $entry) {
			$title = get_the_title($entry->ID);
			$link = get_permalink($entry->ID);
			$text = join(", ", $this->excludeStopWord($entry->texts, $this->outputWordCount));
			$content .= "<li><a href=\"{$link}\">{$title}</a></li>\n";
			$related[$entry->ID]['title'] = $title;
			$related[$entry->ID]['link'] = $link;
			$related[$entry->ID]['text'] = htmlspecialchars($text);
		}
		$content .= '</ul>' . "\n";

これを次のように変えます。takamorryコメントで囲んでいるところが変更箇所です。

		//リンク文字列作成
		$content .= '<div id="wpjr">' . "\n";;
		if(trim($this->relatedHeader) != '') {
			$content .= $this->relatedHeader . "\n";
		}
// Takamorry 2010.05.12 start
		$content .= '<div id="container">' . "\n";
// Takamorry 2010.05.12 end
		$related = array();
		foreach($entries as $entry) {
			$title = get_the_title($entry->ID);
			$link = get_permalink($entry->ID);
			$text = join(", ", $this->excludeStopWord($entry->texts, $this->outputWordCount));
// Takamorry 2010.05.12 start
			$values = get_post_custom_values("image_thumb", $entry->ID);
			$imgSrc = $values[0];
			if ($imgSrc == '') {
				$imgSrc = "/image/noimage.gif";
			}
			$content .= "<div id=\"related\"><a href=\"{$link}\">";
			$content .= "<img align=\"medium\" width=\"140px\" src=\"{$imgSrc}\">";
			$content .= "<p>{$title}";
			$content .= "<img alt=\"hatena count\" src=\"http://b.hatena.ne.jp/entry/image/{$link}\">";
			$content .= "</p></a></div>\n";
// Takamorry 2010.05.12 end
			$related[$entry->ID]['title'] = $title;
			$related[$entry->ID]['link'] = $link;
			$related[$entry->ID]['text'] = htmlspecialchars($text);
		}
// Takamorry 2010.05.12 start
		$content .= '</div>' . "\n";
// Takamorry 2010.05.12 end

プラグインが探し出した関連記事$entryのIDより、カスタムフィールド”image_thumb”の値を、get_post_custom_values()で取り出し、あとは適切にaタグやimgタグを$contentに詰め込んで出来上がり。

こんな風に表示されます。

image
↑サムネイルが表示された！画像の大きさで縦アラインがガタガタ。。。こういうのCSSで調整するの苦手。誰か教えてくれー。画像をスクエアに変換するAPIがあるといいんだけど。。。

ということで、自分でも想像していなかった関連記事が表示されるのも個人的には楽しみです。jRelatedプラグインは安定していて、2009/9/30以来アップデートされていませんから、コード埋め直す煩わしさはあまりないはず。お試しください。

ついでにちょっと宣伝。2010/6/5(Sat)にWordBench福井として福井市で勉強会します。まだ余裕がありますので、お申込みお待ちしてます。
■WordBench福井 第１回勉強会「デザイナーのためのWordPress講座」のお誘い。2010/6/5(Sat) 15:00です。 | 本質思考道場


By Takamorry • WordPress • 11 • Tags: