• HOME
  • BLOG
  • Web制作
  • 投稿記事に関連記事を表示するWordPressプラグイン「WordPress Related Posts」

投稿記事に関連記事を表示する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

表示イメージ

個別記事ページの下などに、こんな感じで関連記事の一覧を表示できます。
140120_02

プラグインのインストール

まず、プラグインをインストールします。
WordPress管理画面の[プラグイン]>[新規追加]から「WordPress Related Posts」を検索して、
140117_04

検索結果に表示された「WordPress Related Posts」の「いますぐインストール」をクリックします。
140117_01

インストールが終わったら「有効化」します。
140117_02

有効化すると管理画面の上の方に下記のバナーがどーんと表示されるようになりますので、さっそく設定しましょう。
140117_03

プラグインの設定

有効化すると管理画面のメニューに「Related Posts」のメニューが追加されていますので、これをクリックして設定します。
140117_05

基本設定

以下の項目を設定できます。
140117_07

  • Related Posts Title:関連記事のコーナーのタイトルを設定できます
  • Number of Posts:表示する関連記事の数を設定できます
    表示する関連記事を投稿日で区切りたい場合は、下記の選択肢から直近何ヶ月の記事を表示するかを選べます。
    140117_06

テーマの設定

デスクトップ&タブレットでの表示とiPhoneなどのモバイルでの表示の見ためを設定できます。

デスクトップ/タブレットのテーマ

あらかじめ用意されたテーマを画面左側の一覧と右側に表示されるプレビューを見ながらえらべます。
140117_08

以下は、テーマで表示される見ための例です。

  • Momma
    140117_16
  • Modern
    140117_17
  • Vertical (Large)
    140117_18
  • Vertical (Medium)
    140117_19
  • Vertical (Small)
    140117_20
  • Pinterest Inspired
    140117_21
  • Two Columns
    140117_22
  • Plain (your own css)
    140117_23

また、「Customize」のところで表示する項目の設定もできたり、カスタマイズ用のCSSを書くこともできます。
140117_14

表示する項目は、上から順に

  • サムネイルを表示するかどうか
  • コメント数を掲載するか
  • 投稿日を掲載するか
  • 抜粋を掲載するか(最大文字数を設定)

これらを設定できます。たとえば全部表示してみると、下記のように表示されます。
140117_24

カスタム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を適用すると、こんなかんじで表示されます。
2014-02-10_01

モバイルのテーマ

デスクトップ/タブレットのテーマと同様に、モバイル用のテーマも設定できます。
140117_13140117_12

カスタム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を適用すると、こんなかんじで表示されます。
2014-02-10_02

デフォルトイメージ

投稿記事に表示するサムネイル画像がない場合に表示するデフォルトイメージを設定することもできます。その場合は、画像ファイルを用意して「ファイルを選択」からアップロードします。また、表示するサムネイル画像をカスタムフィールドから指定することもできるようです。
140117_11

サムネイル画像サイズのカスタマイズ

表示されるサムネイル画像のサイズも指定できます。デフォルトだと150px×150pxで表示されるので、それを変えたい場合は、「Use Custom Size Thumbnails」にチェックを入れて、任意の数値を入力します。
140117_10

そのほかの設定

表示から除外するカテゴリーを選べたり、そのほかの細かい設定ができます。
140117_09

そのほかの細かい設定については、下記が設定できます。

  • 自動で関連記事を表示するかどうか
    自動で関連記事を表示する場合はチェックを入れ、もしくは、WordPressの「単一記事の投稿」のテンプレート(例:single.php)に下記ソースを書くと、その箇所に表示できます
    [code]<?php wp_related_posts()?>[/code]
  • RSSフィードに関連記事を表示するか
  • アクセス解析をするかどうか
    これにチェックを入れると「WordPress Related Posts」の管理画面に統計情報が表示されます
  • 開発者についての表示をするかどうか
  • 「admin」ユーザのみが「Related Posts」の編集ができるようにするかどうか

記事ごとの関連記事の設定

また、「WordPress Related Posts」では、記事ごとに表示する関連記事を自分で選べます(選ばない場合は「ある程度」関連している記事が自動で表示されます)。

WordPressにログインした状態でブログを表示し、投稿した記事に表示されている関連記事の下のほうに、「Edit Related Posts」というボタンがあるので、これをクリックします。
140120_01.png

編集画面が表示されるので、画面下の方に表示される記事の一覧から、関連記事として表示したいものを選んで、上の枠にドラッグします。編集が完了したら、右上の「Save and Close」ボタンをクリックして完了です。
140120_03

以上です。

まとめ

当ブログでは、以前は関連記事の表示に「Yet Another Related Posts Plugin (YARPP)」を使っていたのですが、見ためのカスタマイズがいまいちうまくいかず、この「WordPress Related Posts」を使うことにしました。表示される記事を自動的に選んでくれる精度が高いのはYARPPのほうだと思いますが、当ブログの記事の数やカテゴリ分けのざっくりさを考えると、とりあえずは精度よりもそれなりの数の記事が見やすく表示されるほうがよいかと思い、こちらを選びました。いまのところ満足して使っております。

WEB制作・開発、iPhoneアプリ、DTMなどのTipsやメモを書いています。

関連記事