投稿記事に関連記事を表示するWordPressプラグイン「WordPress Related Posts」
投稿記事の下などに「関連記事」の一覧を表示するプラグイン「WordPress Related Posts」についてのメモです。このプラグインは、見ためがカスタマイズしやすくきれいに表示できるので、当ブログでも使用しています。
使用するプラグイン
「WordPress Related Posts」
[browser-shot url=”http://wordpress.org/plugins/wordpress-23-related-posts-plugin/” width=”610px”]
→ WordPress Plugin Directoryのページ：WordPress › WordPress Related Posts « WordPress Plugins
→ 開発者さまのサイト：Zemanta – Trusted Content DiscoveryRelated posts for bloggers – Zemanta – Trusted Content Discovery
表示イメージ
個別記事ページの下などに、こんな感じで関連記事の一覧を表示できます。
プラグインのインストール
まず、プラグインをインストールします。
WordPress管理画面の［プラグイン］＞［新規追加］から「WordPress Related Posts」を検索して、
検索結果に表示された「WordPress Related Posts」の「いますぐインストール」をクリックします。
インストールが終わったら「有効化」します。
有効化すると管理画面の上の方に下記のバナーがどーんと表示されるようになりますので、さっそく設定しましょう。
プラグインの設定
有効化すると管理画面のメニューに「Related Posts」のメニューが追加されていますので、これをクリックして設定します。
基本設定
以下の項目を設定できます。
- Related Posts Title：関連記事のコーナーのタイトルを設定できます
- Number of Posts：表示する関連記事の数を設定できます
表示する関連記事を投稿日で区切りたい場合は、下記の選択肢から直近何ヶ月の記事を表示するかを選べます。
テーマの設定
デスクトップ＆タブレットでの表示とiPhoneなどのモバイルでの表示の見ためを設定できます。
デスクトップ／タブレットのテーマ
あらかじめ用意されたテーマを画面左側の一覧と右側に表示されるプレビューを見ながらえらべます。
以下は、テーマで表示される見ための例です。
- Momma
- Modern
- Vertical (Large)
- Vertical (Medium)
- Vertical (Small)
- Pinterest Inspired
- Two Columns
- Plain (your own css)
また、「Customize」のところで表示する項目の設定もできたり、カスタマイズ用のCSSを書くこともできます。
表示する項目は、上から順に
- サムネイルを表示するかどうか
- コメント数を掲載するか
- 投稿日を掲載するか
- 抜粋を掲載するか（最大文字数を設定）
これらを設定できます。たとえば全部表示してみると、下記のように表示されます。
カスタムCSSの例としては、たとえば当ブログでは、上記の「Plain (your own css)」をえらんだ上で、下記のスタイルを適用させていました（ご参考・2014年1月23日一部修正、2014年2月10時点）。
[code].related_post_title {
border-top: 1px solid #EEEEEE;
padding: 1em 0 0;
}
ul.related_post {
width: 100%;
margin: 0!important;
padding: 0!important;
display: inline-block;
position: relative;
list-style: none;
}
ul.related_post li {
font-size: 14px;
line-height: 1.5;
background-image: none;
width: 23%;
margin: 0 2% 15px 0;
padding: 0;
display: inline-block;
position: relative;
zoom: 1;
vertical-align: top;
}
ul.related_post li a {
border-radius: 2px;
color: #333333;
}
ul.related_post li a:hover {
border-bottom: 2px solid #CCCCCC;
}
ul.related_post li img {
border: 1px solid #EEE;
border-radius: 4px;
display: block;
width: 91%;
max-width: 100%;
height: 100%;
margin: 0 0 10px 0;
padding: 5px;
}[/code]
（2014年2月10日追記）上記のCSSを適用すると、こんなかんじで表示されます。
モバイルのテーマ
デスクトップ／タブレットのテーマと同様に、モバイル用のテーマも設定できます。
カスタムCSSの例としては、たとえば当ブログでは、上記の「Plain (your own css)」をえらんだ上で、下記のスタイルを適用させていました（ご参考・2014年2月10時点）。
[code]ul.related_post li {
width: 100%;
margin: 0 0 15px;
}
ul.related_post li img {
float: left;
display: block;
width: 17%;
margin: 0 15px 0 0;
}
[/code]
（2014年2月10日追記）上記のCSSを適用すると、こんなかんじで表示されます。
デフォルトイメージ
投稿記事に表示するサムネイル画像がない場合に表示するデフォルトイメージを設定することもできます。その場合は、画像ファイルを用意して「ファイルを選択」からアップロードします。また、表示するサムネイル画像をカスタムフィールドから指定することもできるようです。
サムネイル画像サイズのカスタマイズ
表示されるサムネイル画像のサイズも指定できます。デフォルトだと150px×150pxで表示されるので、それを変えたい場合は、「Use Custom Size Thumbnails」にチェックを入れて、任意の数値を入力します。
そのほかの設定
表示から除外するカテゴリーを選べたり、そのほかの細かい設定ができます。
そのほかの細かい設定については、下記が設定できます。
- 自動で関連記事を表示するかどうか
自動で関連記事を表示する場合はチェックを入れ、もしくは、WordPressの「単一記事の投稿」のテンプレート（例：single.php）に下記ソースを書くと、その箇所に表示できます
[code]<?php wp_related_posts()?>[/code] - RSSフィードに関連記事を表示するか
- アクセス解析をするかどうか
これにチェックを入れると「WordPress Related Posts」の管理画面に統計情報が表示されます - 開発者についての表示をするかどうか
- 「admin」ユーザのみが「Related Posts」の編集ができるようにするかどうか
記事ごとの関連記事の設定
また、「WordPress Related Posts」では、記事ごとに表示する関連記事を自分で選べます（選ばない場合は「ある程度」関連している記事が自動で表示されます）。
WordPressにログインした状態でブログを表示し、投稿した記事に表示されている関連記事の下のほうに、「Edit Related Posts」というボタンがあるので、これをクリックします。
編集画面が表示されるので、画面下の方に表示される記事の一覧から、関連記事として表示したいものを選んで、上の枠にドラッグします。編集が完了したら、右上の「Save and Close」ボタンをクリックして完了です。
以上です。
まとめ
当ブログでは、以前は関連記事の表示に「Yet Another Related Posts Plugin (YARPP)」を使っていたのですが、見ためのカスタマイズがいまいちうまくいかず、この「WordPress Related Posts」を使うことにしました。表示される記事を自動的に選んでくれる精度が高いのはYARPPのほうだと思いますが、当ブログの記事の数やカテゴリ分けのざっくりさを考えると、とりあえずは精度よりもそれなりの数の記事が見やすく表示されるほうがよいかと思い、こちらを選びました。いまのところ満足して使っております。
