関連記事表示プラグイン「Similar Posts」の設定方法

どうも青春野郎です。

ここでは、関連記事表示のためのプラグインとして「Similar Posts」の設定方法を解説していきます。

ワードプレスでは関連記事表示のプラグインは多数存在していますが、その中でも一番使いやすく、シンプルな「Similar Posts」をご紹介します。

関連記事を表示することで内部SEOや訪問者の閲覧数、滞在時間を高める効果もあります。

なので関連記事の表示は必須になります。

「Similar Posts」の設定方法

「Similar Posts」をうまく稼動させるためには、「Post-Plugin Library」というプラグインもインストールする必要があります。

いつものように、ダッシュボードからプラグイン→新規追加をクリックします。

Post-Plugin Library」を検索し、インストール&有効化をします。

Post-Plugin Library」は設定不要なのでこれでオッケーです。

次に「Similar Posts」も同様に、ダッシュボードからプラグイン→新規追加をクリックします。

Similar Posts」を検索、インストール&有効化をします。

設定→Similar Postsをクリックします。

スクリーンショット 2014-02-01 21.39.04

1.General Settings

スクリーンショット 2014-02-01 21.45.10
・Number of posts to show(関連記事の表示数)

・Show static pages?(表示するページ設定)
No pages, just posts:投稿記事のみ表示
Both pages and posts:固定ページ/投稿記事の両方とも表示
Pages but no posts:固定ページのみ表示

・Omit the current post?(関連記事に表示されているページを含めるか)

 

General Settingsでは、関連記事の表示数を設定します。

他はデフォルトで大丈夫です。

2.Output Settings

次にOutput Settingsです。

スクリーンショット 2014-02-01 22.16.40

ルレアテンプレート表示の最適化のために、Output templateにこちらを入力します。


<div class="similar_posts">
<a href="{url}">
{php: echo get_the_post_thumbnail( {postid}, array(80,80), array('title' => ' {title}' )); }</a>
<div class="similar_posts_title">
<a href="{url}">{title} </a></div>
<p class="similar_posts_snippet">{snippet:60}…</p>
</div>
<div style="clear: both"></div>

画像と本文の文字数を自分でカスタマイズすることができます。

array(80,80)では、表示する画像のサイズ

{snippet:60}では、本文出だしの抜粋文字数となります。

実際に確認しながら作業するといいでしょう。

次に、調整のために外観→テーマ編集→スタイルシート(style.css)をクリックします。

一番下にコードを追加します。

.wp-post-image {
        border:solid 1px #ccc;
        padding: 4px;
        float: left;
        margin-right: 5px;
}
.similar_posts {
        padding: 3px;
        margin-top: 3px;
        margin-left: 0px;
}
.similar_posts_title {
        margin:2px;
        font-size: 14px; /* テキストリンクのサイズ */
}
.similar_posts_snippet {
        margin:2px auto;
        font-size: 12px; /* 抜粋文字のサイズ */
        color: #0f0f0f; /* 抜粋文字の色 */
}

これで正常にアイキャッチ画像とともに関連記事が表示されます。

 

 

まとめ

関連記事表示については、訪問者の直帰率やPVにも影響するので必ず導入するようにしましょう。

また、WPtouchの関連記事表示についても解説しているのでこちらも参考にしてみてください。

この記事はあなたのお役に立てたでしょうか?

ブログランキングへ破ってみませんか?

破る

ビリビリビリ・・。


本日も破って頂きありがとうございました(´∀`)
dogezas.gif

 
看板      
お名前 メールアドレス
記事を読んで少しでも興味深く思われましたら、
以下のソーシャルメディアボタンで共有してもらえると青春野郎は喜びます!

yaji-006

コメントを残す




CAPTCHA