関連記事を簡単に記事下に設定する方法

  • LINEで送る

WordPress Related Posts の設定

WordPress Related Posts は、WordPress の記事の下に関連記事を表示する機能を備え、簡単に表示することができるプラグインです。

複数のスタイル・デザインを用意されていて、パフォーマンス向上のために、内容も細かくカスタマイズすることが可能です。

プラグインのインストールと設定

WordPress Related Posts のインストール

まず、WordPress Related Posts をインストールします。

WordPrss の管理画面の左メニューの「プラグイン」の「新規追加」をクリックします。

すると、「プラグインを追加」画面にプラグインの検索窓があります。 そのテキストエリアにプラグイン名を入力します。

related-posts-add-plugin-youyou-wordpress

①   プラグイン名を入力します。

② 「 今すぐインストール 」ボタンをクリックします。

related-posts-instll-now-youyou-wordpress

すぐにインストールが始まります。 インストールされている間は 「インストール中」ボタンが表示されます。

related-posts-%e6%9c%89%e5%8a%b9%e5%8c%96-youyou-wordpress

インストールが終了すると、「 有効化」 ボタンが表示されます。 その「 有効化 」 ボタンをクリックします。

related-posts-menu-in-youyou-wordpress

すると、インストール済みプラグインの中に 「WordPress Related Posts」 が有効化されて表示されています。

これで、「WordPress Related Posts」 のインストールが完了しました。

WordPress Related Posts の設定

Related Posts の設定をします。 まず、管理画面の左メニューの「設定」に「WordPress Related Posts」が追加されています。

「WordPress Related Posts」をクリックして、設定画面を表示させます。

Basic settings (基本設定)

まず、最初に「Basic settings」の設定をします。

related-posts-settings-youyou

Related Posts Title : タイトル名を入力します。(大方は、「関連記事」とすることが多い)

Number of Posts     : 表示する数  (レスポンシブ対応ですので、スマホ、タブレットなどのユーザビリティを考慮して数を決める)

Advanced settings (詳細設定)

「Advanced settings」は通常はテキストのみの表示ですが、右側にある矢印をクリックすると、「Themes」の設定する画面がドロップ画面で表示されます。

related-posts-advanced-settings-youyou

Themes

Themes のデフォルト設定では、

Enable Themes : 有効(チェックボックスにチェックが入っている)

Layout

Layout のデフォルト設定では

Layout               : 「vertical (Medium)」にチェックが入っている

*通常はデフォルトの設定で、すぐにもページに反映されます。

「Basic settings」

「Related Posts Title」 : 「関連記事」

「Number of Posts」     : 「 6 」   に設定すると

related-posts-tablepress-%e3%81%ae%e8%a8%ad%e5%ae%9a

 

このように、関連記事がページの記事下に表示されます。

その他の Layout 設定は

  •  Momma
  •  Modern
  •  Vertical ( Large )
  •  Vertical ( Medium ) (デフォルト設定)
  •  Vertical ( Small )
  •  Pinterest Inspired
  •  Two Columns
  •  Plain ( you own css )

好みに応じて色々と試してみてください。

ちなみに、「Modern」にチェックを入れると、下のような表示になります。

related-posts-advanced-settings-modern-youyou

「Pinterest Inspired」にチェックを入れると、下の画面のようになります。

related-posts-advanced-settings-pinterest-youyou

「Two Columns」の場合は、この様になります。

related-posts-advanced-settings-two-columns-youyou

「Plain」の場合は、サムネール画像がなく記事のタイトルのみが表示されます。

related-posts-advanced-settings-plain-youyou

 

Customize

Display Thumbnails For Related Posts

記事のサムネールを表示する

Display Number of Comments

コメント数を表示する

Display Publish Date

日付を表示する

Display Post Excerpt  200  Maximum Number of Characters

記事の抜粋文字数は最大200文字で表示する

Display Post Categories

カテゴリーを表示する

Enable custom CSS

カスタム CSS を有効にする

* CSS の知識がある方は好みのスタイルをカスタマイズして下さい。

related-posts-customize-youyou

 

Default thumbnails

記事にイメージ画像がな場合は、デフォルト画像を表示されます。

ファイルを選択してデフォルト画像として設定する事が出来ます。

* 下はファイルを選択してみたところです。

related-posts-default-image-webvarious

Use custom field for thumbnails (サムネールのカスタムフィールドを設定する)

 

Other Settings

Exclude these categories : カテゴリー群の中から、除きたいカテゴリーがある場合は、チェックを入れる

related-posts-other-settings-webvarious

Auto Insert Related Posts

自動的に関連記事を挿入する(または、シングルポストテンプレートに <?php wp_related_posts()?> を挿入する)

Display Related Posts in Feed

関連記事をフィードに表示する

Support us ( show our minimized logo )

 

これで、基本的な設定は終了です。 好みに応じて色々試して見てください。

 

  • LINEで送る

SNSでもご購読できます。