インストールするだけ簡単!プラグイン「wordpress related posts」でおすすめ記事を表示する

SEROの嫁です。
夫とニコ生で喋ったり、ブログに投稿したりしています。
2級ウェブデザイン技能士。

この記事は2017年2月17日に書かれたものです。
現在は内容が古い可能性もありますのでご注意ください。

自分のサイトを訪れてくれた人には、なるべく長く滞在してもらいたいと制作者なら誰しもが思います。回遊率というやつですね。
そしてそのために特に有効なのが、「関連記事」の表示です。

ニュースサイトやブログなどでも、記事の最後に別の記事へのリンクがずらりと並んでいるのをよく見かけます。

プラグイン「Wordpress Related Posts」は、その関連記事をあっという間に表示できちゃうのでオススメです!
→ WordPress Related Posts — WordPress Plugins
 

インストール

  1. プラグインの新規追加ページで「wordpress related posts」と検索し、今すぐインストール>有効化 をクリックします。

     
  2. するとその時点で、記事ページの一番下に関連記事が表示されています!

     

設定

そのままでも特に問題ありませんが、さらに細かい設定も可能です。
設定>Wordpress Related Posts をクリックします。


 

Basic settings

Related Posts Title 見出し部分のテキスト
Number of Posts 表示する関連記事の数

 

Advanced settings

Advanced settingsの部分は最初は閉じていますが、▼の部分をクリックすると開きます。

Themes

Enable Themes プラグインのテーマを有効にする(デフォルトでチェックが入ってます)
Layout 8種類のレイアウトから選べます

 

Customize

Display Thumbnails For Related Posts 関連する投稿のサムネイルを表示する
Display Number of Comments コメント数を表示する
Display Publish Date 公開日を表示する
Display Post Excerpt ◯◯ Maximum Number of Characters. 本文の抜粋を最大◯◯文字表示する
Display Post Categories カテゴリを表示する
Enable custom CSS カスタムCSSを有効にする(下の枠にオリジナルのCSSを書き込むことができます)
Default thumbnails 記事にアイキャッチが無い場合に表示させる画像を指定できます
Use custom field for thumbnails サムネイルにカスタムフィールドを使用する
Custom size thumbnails サムネイルのサイズをカスタムする場合はチェックを入れ、上のcustom CSSに入力します

 

Other Settings

Exclude these Categories 関連記事から除外したいカテゴリーがあればチェックします
Auto Insert Related Posts 関連記事を自動挿入する
Display Related Posts in Feed RSSフィードに関連する投稿を表示する
Support us (show our minimized logo) 開発者のロゴを表示する

 

ページ毎の設定

編集モードでログインしていると、関連記事の下に「Edit Related Posts」というボタンが表示されています。

クリックすると、ページ毎に関連記事を指定することができます。
(ドラッグ&ドロップで移動させる)

 

おまけ・custom CSSが反映されない…

デフォルトでは、関連記事の見出し部分の上にマージンが全然なくて、見づらいので修正したい!
そう思って、設定画面の「custom CSS」という箇所にスタイルを書き込んでみたんですが、何度やっても反映されない…。

そこで、プラグインフォルダのcssを直接修正しました。
(もちろん、プラグインの更新があれば消えてしまうと思いますので自己責任で…)

cssファイルは、「Advanced settings>Layout」にある8種類のデザイン毎に存在します。スタイルシートの場所は
wp-content/plugins/wordpress-23-related-posts-plugin/static/themes
配下にあります。
今回は「Vertical (Medium)」というデザインなので、「vertical-m.css」を修正しました。

.wp_rp_wrap .related_post_title {
	clear: both;
	padding: 0 !important;
	margin: 2em 0 0 0 !important;
}

これで、やっと上の部分に間隔が空きました。

もしかするとテーマとの相性などもあるかもしれませんので、プラグインフォルダを触る前に、まずは設定画面の「custom CSS」を試してからにしてくださいね。

というわけで、「Wordpress Related Posts」のご紹介でした。
他のプラグインも試してみましたが、今のところこれが一番デザインもよく、導入も簡単でした。

他にも気になる記事があれば、覗いてみてくださいね!