関連記事をサムネイル付きで表示できる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 light=”true”][/php]

または、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}というタグがあるのを発見。案の定、カスタムフィールドを読み込むタグで、何とかこれを使って表示させることができました。

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

[text]

[/text]

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

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

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

コメント

“関連記事をサムネイル付きで表示できるWordPressプラグイン” への26件のフィードバック

  1. …関連記事をサムネイル付きで表示できるWordpressプラグイン – ミblog : レビューや日常など …

  2. なおのアバター
    なお

    はじめまして。このサイトすごく素敵ですね。勉強のためすごく参考にささせていただいてます。いろいろ見てみてどうしてもわからなかったので教えてください。
    このサイトのように各カテゴリのトップページにカテゴリごとのサムネイルとタイトルと記事の一部を表示させるようにするにはどうしたらよいのでしょうか?
    ぜひ解説をお願いいたします!

  3. ミのアバター

    > なおさん

    ありがとうございます。
    各表示については次のようになっています。

    タイトル表示: <a href=”<?php the_permalink() ?>”><?php the_title(); ?></a>
    記事の一部(抜粋)表示: <?php the_excerpt(); ?>

    サムネイルの表示は「WordPressの記事にサムネイルを表示する方法」に書いていますので見てみて下さいね。

  4. …関連記事をサムネイル付きで表示できるWordpressプラグイン – ミblog : レビューや日常など サムネイルを表示する …

  5. freatのアバター

    はじめまして。コメント失礼いたします。
    というよりもコチラの記事を拝見させていただいていてサムネイル表示を関連する記事の部分に表示させたいと思い設定をしていたのですが、どうしてもうまくいきません。

    。classやタグも自分の環境に合わせて変更して下さい。

    と書いてあるのですがここがうまくできていないのでしょうか・・・
    自分の環境に合わせて変更とありますが初歩的な質問かもしれませんがどうやったら自分の環境にあうのでしょうか?

  6. ミのアバター

    > freatさん

    はじめまして。
    返信が遅くなってしまいすいません。

    freatさんのブログを拝見させて頂きましたが、WordPressの「その他の設定」にある『アップロードしたファイルを年月ベースのフォルダに整理』にチェックが入っていて画像のURLが都度違ってしまうため、そのままでは上記例のソースでは表示されません。

    『アップロードしたファイルを年月ベースのフォルダに整理』のチェックをはずして、wp-content/uploads直下に画像ファイルがアップロードされるように設定してみて下さい。あとは以下の手順で表示されるはずです。

    サムネイル部分のソースは

    <a href=”{url}” rel=”nofollow”><img src=”<?php bloginfo(‘home’); ?>/wp-content/uploads/{custom:post_icon}.jpg” width=”46″ height=”46″ alt=”{title}” /></a>

    になります。

    例として、上記ソースをそのまま使用して、example.jpgという画像をサムネイル表示したい場合、wp-content/uploadsフォルダにexample.jpgをアップロードし、カスタムフィールドのキー(名前)に「post_icon」、値に「example」と設定します。

    あとは記事を書いて公開すると、{custom:post_icon}の部分にexampleという値が入り、example.jpgとして表示されます。

    サムネイルを表示する方法とあわせて見ていただくとわかりやすいかもしれません。

    また、classは見た目の部分ですので、サムネイル表示については直接関係ありません。

  7. kazurahasimuのアバター
    kazurahasimu

    はじめまして。
    Wordpressなどの動的サイトはどうしてもテキストやテンプレートだらけになってしまうので、こういったアクセントはとっても大切だと思います!

  8. ミのアバター

    > kazurahasimuさん

    はじめまして。

    そうですね。
    サイトコンセプトにもよりますが、サムネイルなどちょっとした画像を置くことは、アクセントをつけるということにおいて有効ですね。

    特にこのプラグインは関連記事という意味のあるものをそれなりの精度で表示してくれるので、使い勝手がいいです。

  9. feartのアバター
    feart

    返答ありがとうございます!お返事が遅くなり申し訳ございません!アドバイスいただいたようにやってみます!!

  10. […] 参考サイト 関連記事をサムネイル付きで表示できるWordpressプラグイン – ミblog : レビューや日常など […]

  11. kobatakuのアバター
    kobataku

    いつもすごく参考にさせて頂いております。

    関連記事は表示できました!

    新着記事ですが、どのように表示しておりますか?

    もしよければ教えて頂けますか?

  12. ミのアバター

    > kobatakuさん

    はじめまして。
    返信遅くなってしまいすいません。

    新着記事はシングルテンプレートの該当部分に以下のソースを記述しています。

    <h3>新着記事</h3>
    <?php $my_query = new WP_Query(‘showposts=5’);
    while ($my_query->have_posts()) : $my_query->the_post();
    $do_not_duplicate = $post->ID;?>
    <div class=”other”><a href=”<?php the_permalink() ?>”><?php echo c2c_get_custom(‘post_icon’, ‘<img width=”46″ height=”46″ alt=”‘.the_title(”, ”, false).’” src=”http://www.meblog.info/wp-content/uploads/’, ‘.jpg” />’, ‘blank’); ?></a><p><a href=”<?php the_permalink() ?>”><?php the_title(); ?></a></p></div>
    <?php endwhile; ?>
    <?php wp_reset_query();?>

    上記ソースは独自なので、本当に正しく書けているのかわかりません;
    また、詳しい説明は省略させて頂きますので、URL部分をご自分のサイトに書き換えて、色々試して頂ければと思います。

  13. […] 関連記事をサムネイル付きで表示できるWordPressプラグイン・ミblogさんの記事が分かり易かったです。 […]

  14. MUのアバター

    はじめまして。
    前からステキなブログだと思って知っていましたがコメントはお初です^^

    WUさんのビクーニャのカスタマイズサイトの中ではこの「ミblog」さんが一番好きです!

    更新あまりないみたいですけど次回記事楽しみにしています☆

  15. […] ・カスタムフィールドに対応した関連記事表示プラグイン、Similar Posts こちらはカスタムフィールドを使って表示をコントロールするようです。使い方はこちらの記事が詳しかったです→関連記事をサムネイル付きで表示できるWordPressプラグイン こちらも同一投稿記事内で投稿したい写真とそうでないものの区別の仕方がわからなかったので保留。自動的に表示するのかな? […]

  16. […] http://www.meblog.info/553.html tweetmeme_url = 'http://lethkuni.heteml.jp/ryo/?p=221&#039;;tweetmeme_source = 'kotyan0309';tweetmeme_style = 'compact'; This entry was posted in wordpress1. Bookmark the permalink. ← phpを記事内で使う …

  17. ミのアバター

    > MUさん

    とんでもない亀レスで申し訳ありません。

    コメントありがとうございました。
    そう言って頂けるととても嬉しいです。

    1記事更新するのにかなり時間がかかっていたので、なかなか更新することができませんでしたが、レビューだけでもぼちぼち更新していこうかなと思っています。

    MUさんのブログもスッキリしていてとても見やすく素敵ですね。
    マウスとキーボードがおそろです。

  18. […] 関連記事をサムネイル付きで表示できるWordPressプラグイン – ミblog …

  19. […] ・ミblog : レビューや日常など 関連記事をサムネイル付きで表示できるWordPressプラグイン …

  20. […] がまとまってくれば正確に表示してくれる・・・ハズ。 参考にさせていただいたサイト→関連記事をサムネイル付きで表示できるWordPressプラグイン – ミblog : レビューや日常など:  …

  21. […] 参考:関連記事をサムネイル付きで表示できるWordPressプラグイン – ミblog : レビューや日常など …

  22. globalwpのアバター

    初めてサイトを訪問させて頂きましたがサイトのデザインと記事のわかりやすさが非常に秀逸ですね!今後共参考にさせて頂きます。

  23. […] ほかにはこちらで紹介があります […]

コメントを残す

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