ワードプレスで「関連記事」を表示する方法

ブログに「関連記事」を表示する重要性について、
前回の記事、「これがあるだけで売り上げが飛躍的に伸びますよ」で解説しました。

今回は、
ワードプレスで作成しているブログに、
実際に「関連記事」を表示するための方法を解説していきますね。

ワードプレスで作成しているブログに、関連記事を表示するには、
Similar Postsというプラグインを使います。

Similar Posts　～関連記事を表示するワードプレスのプラグイン～

Similar Postsはワードプレスで簡単に
関連記事を表示するためのプラグインです。

関連記事は文字だけでの表示もできますし、
アイキャッチのような、
サムネイル画像付きの関連記事を表示させることもできますよ。

サムネイル画像付きで関連記事を表示した方が、
クリック率は高くなる傾向にあります。

Similar Postsをインストールする前に必要な事

では、早速Similar Postsをインストールしたいところですが、ちょっと待ってください。

Similar Postsをインストールする前に、
「Post-Plugin Library」というプラグインのインストールが必要です。

Post-Plugin Libraryがインストールされていないと、
Similar Postsが動きませんので、最初にインストールしておきましょう。

すでに、他のプラグインを利用する為に、
Post-Plugin Libraryをインストール済みという方は、
そのままSimilar Postsのインストールに進んでください。

Post-Plugin Libraryのインストール方法

Post-Plugin Libraryをインストールするには、
まず、ワードプレスのダッシュボードメニューの
「プラグイン」の中の「新規追加」をクリックします。

そして、画面右上の検索ボックス内に
「Post-Plugin Library」と入力してENTERをクリックします。

すると、Post-Plugin Libraryが出てきますので、
「今すぐインストール」をクリックします。

Post-Plugin Libraryのインストールが終わると、
「プラグインを有効化」をクリックします。

Post-Plugin Libraryはインストール→有効化すれば、
特に設定等は必要ありませんので、ここまで完了すればＯＫです。

Similar Postsのインストール方法

Post-Plugin Libraryのインストール→有効化が完了したら、
Similar Postsをインストールしていきましょう。

Similar Postsをインストールするには、
まず、ワードプレスのダッシュボードメニューの
「プラグイン」の中の「新規追加」をクリックします。

そして、画面右上の検索ボックス内に
「Similar Posts」と入力してENTERをクリックします。

すると、Similar Postsが出てきますので、
「今すぐインストール」をクリックします。

Similar Postsのインストールが終わると、
「プラグインを有効化」をクリックします。

これで、Similar Postsが使えるようになりました。

Similar Postsの設定について

Similar Postsのインストール→有効化が完了したら、
Similar Postsの設定を行っていきましょう。

Similar Postsの設定を行うには、
まずは、ワードプレスダッシュボードメニュー内の
「設定」の中の「Similar Posts」をクリックします。

すると、General Settingsという画面が表示されます。

ここでの設定で覚えておいてほしいのは、
「Number of posts to show」という箇所です。

デフォルトでは数字が「５」になっていますが、
この数字を変更することで、表示させる関連記事の数を変更することができます。

変更が完了したら、「Save General Settings」をクリックして設定を保存します。

次に画面上部の「Output」をクリックして、
Output Settingsを表示させます。

ここでの設定で覚えておいてほしいのは、
「Output template」という箇所です。

デフォルトでは、
「<li>{link}</li>」と表示されていますが、
このままだと、テキストのみのリンクで画像が表示されません。

関連記事は、テキストのみのリンクよりも、アイキャッチのような
サムネイル画像付きのリンクの方が、クリック率が高くなる傾向にあるので、
サムネイル画像付きのリンクを表示したい場合は、
「<li>{link}</li>」のコードを削除して、以下のコードを入力してください。

<div style=”list-style: none;width:85%;height:85px;border-bottom:1px solid #ccc;margin:15px 0 5px 0;”>
<div style=”padding:2px;float:left;margin:0 10px 5px 10px;”><a href=”{url}”>{php: echo get_the_post_thumbnail({postid}, array(80,80)); }</a></div>
<li>{link}</li>
<p class=”similar_posts_snippet”>{snippet:60}…</p>
</div>

上記のコードの「array(80,80)」の数字で画像のサイズを指定し、
「{snippet:60}」の数字で本文の抜粋文字数を指定していますので、
任意の数字に変更することも可能です。

入力が終われば、「Save Output Settings」をクリックして設定を保存します。

次に画面上部の「Placement」をクリックして、
Placement Settingsを表示させます。

ここでの設定で覚えておいてほしいのは、
「Output after post」という箇所です。

この中の「Activate」という設定が、
「YES」と「NO」を選択できるようになっています。

「YES」を選択すれば、本文の下に関連記事を表示します。

「NO」を選択すれば、本文のしたではなく、任意の場所に関連記事を表示します。

「NO」を選択した場合は、関連記事を表示したい場所に、
<?php similar_posts(); ?>というコードを入力してください。

設定が完了したら、「Save Placement Settings」をクリックして設定を保存します。

次に画面上部の「Other」をクリックして、
Other Settingsを表示させます。

ここでの設定で覚えておいてほしいのは、
「Relative importance of」という箇所です。

ここでは、関連記事で表示させる記事の比率を変更することができます。

「content」「title」「tags」という３つの項目があるので、
合わせて１００％になるように比率を設定します。

contentは記事の本文、titleは記事タイトル、tagsは記事のタグという意味です。

特にこだわりがなければ、デフォルトのままでも構いません。

設定が完了したら、「Save Other Settings」をクリックして設定を保存します。

最後に画面上部の「Manage the Index」をクリックして、
Manage Indexを表示させます。

この中の「Handle extended characters?」と
「Treat as Chinese, Korean, or Japanese?」がデフォルトではNOになっています。

ここがNOのままだと、日本語で正しく表示されないので、
必ず２箇所ともYESに変更するようにしましょう。

YESに変更したら、「Recreate Index」をクリックして設定を保存します。

Similar Postsは、もっと細かく設定することも可能ですが、
ここで紹介した設定をしておけば、問題ありませんよ。