関連記事をサムネイル付きで表示できるWordpressプラグイン

• 2009-05-16
• WordPress
• プラグイン

Wordpressには関連記事を表示させるプラグインがいくつかありますが、せっかく各記事にサムネイルを使っているので、今回はカスタムフィールドに対応した関連記事表示プラグイン、Similar Postsを導入して関連記事にもサムネイル表示をしてみました。

以前はSimple Tagsというプラグインを使って同じタグから関連記事を表示させるという方法を使っていましたが、サムネイル表示を含め、もう少し柔軟な表示方法はないものかと思い、見つけたのがこのプラグインです。

Similar Postsの導入方法

まず、プラグイン本体の前にダウンロードページにある 『This plugin requires the latest version of the Post-Plugin Library: download it now.』 という部分から、Post-Plugin Libraryというファイルをダウンロードします。（Popular Postsを導入済みの場合は必要ありません）

次にプラグイン本体をダウンロード → Similar Posts

※WordPress2.7.1で動作確認済

1. Post-Plugin Libraryをダウンロード
2. ダウンロード先のページからSimilar Postsをダウンロード。
3. 解凍してPost-Plugin LibraryとSimilar Postsをそれぞれwp-content/pluginsにアップロード
4. 最初にPost-Plugin Libraryを有効化
5. Similar Postsを有効化

Similar Postsの設定方法

関連記事を表示したい箇所（single.phpなど）に以下のタグを挿入。

<?php similar_posts(); ?>

または、Placementという設定からOutput after postをYesにすると、自動で記事下に挿入される。

詳細な表示設定は管理画面の設定→Similar Postsから行います。
設定画面の上にサブメニューがあるので、ひとつひとつ見ながら設定していきます。

当ブログでの設定と項目説明

以下は当ブログでの設定です。
よくわからないという方は参考にしてみて下さい。
設定が必要な項目はGeneral、Placement、Output、Other、Manage the Indexです。

General Settings – 通常設定

• Number of posts to show（表示数）：5
• Number of posts to skip（スキップする投稿数）：0
• Show password-protected posts?（パスワードのかかった記事を表示するか）：No
• Show static pages?（ページを含めるか）：No pages,just posts
• Show attachments?（添付ファイル？を表示するか）：No
• Display posts that are（表示させる記事の種類）：Published:Yes 他はNo
• Ignore posts（表示させない記事）：0
• Omit the current post?（現在の記事をリストから省略）：Yes
• Match the current post’s category?（カテゴリーからのみ）：No
• Match the current post’s tags?（タグからのみ）：No
• Match the current post’s author?（同じ投稿者からのみ）：No

Placement – どこに関連記事を表示させるかを設定。

• Output after post（記事の下に表示）：No – 当ブログでは任意の場所に表示させたかったのでNoに設定しています。ただ単に記事下に表示させたい場合はYesを選択して表示用のタグを編集して下さい。
• Output in RSS feeds（RSSに表示）：No – 当ブログではNoにしていますが、RSSに表示したい場合はYesでもかまいません。横の表示用タグを自分好みに編集して下さい。
• Output in widget（ウィジットに表示）：No
• Output in content（コンテンツに表示）：No

Output – 表示設定

こちらはサムネイル表示の部分になるので、後で説明します。

Other – その他

Relative importance of（記事、タイトル、タグから重要なもの順に％を振り分けます）：当ブログでは色々試して70%・10%・20%にしました。正直納得いかない部分もありますが、ある程度の妥協は必要そうです。ここは色々試して自分なりのベスト表示を探してみて下さい。他項目はデフォルト設定のままです。

Manage the Index

あまり意味がよくわからないのですが、日本語や韓国語などのマルチバイト文字は、このオプションを使うと検索結果やスピードが向上するとか何とか書いてあるような気がします（定かじゃありません）。設定項目が上から拡張を利用しますか？や、文字は韓国語や日本語ですか？ということなので、本来ならYesに設定するべきかもしれませんが、色々試した結果、当ブログではYesにすると関連記事とかけ離れた記事を表示するようになったので、全てNoにしています。他の設定も全てデフォルトのままです。逆にデフォルトでいい結果にならない場合はYesにしてみて下さい。

サムネイルを表示する

ここが一番悩みました。

Output設定で独自タグに{image}や{imagesrc}などがあるので、簡単に表示できるものと思っていましたが、どのように設定しても全然画像を引っ張ってきません。検索しても設定方法を書いているサイトが見当たらず、困ったなぁと思って色々見ると{custom}というタグがあるのを発見。案の定、カスタムフィールドを読み込むタグで、何とかこれを使って表示させることができました。

以下は当ブログでの表示用ソース。

<div class="other"><a href="{url}"><img src="http://www.meblog.info/wp-content/uploads/{custom:post_icon}.jpg" width="46" height="46" alt="{title}" /></a><p><a href="{url}">{title}</a></p></div>

ほんとはもっと単純にできるのかもしれませんが、これで何とか表示されているのでよしとします。{custom:post_icon}のpost_iconは当ブログでのサムネイル表示用カスタムフィールド名なので要変更。classやタグも自分の環境に合わせて変更して下さい。

このSimilar PostsとjQueryプラグイン、jCarouselなどとを組み合わせることにより、見せ方だけになりますがAmazonの『この商品を買った人はこんな商品も買っています』部分の動きも簡単に再現できるようになります。

カスタムフィールドを使って各記事にサムネイルを表示させているという方は、是非このプラグインを試してみて下さいね。