【stinger5】記事下に関連記事を表示させるプラグインの設定

サムネイル関連記事

 

Stinger5の関連記事は縦並びで読みにくいため、関連記事を表示させるプラグインを使用します。

私は文字の関連記事一覧と、画像の関連記事一覧を両方表示させているので「WordPress Related Posts」と「Yet Another Related Posts Plugin」の2種類を使用します。

設置はとても簡単ですし、見栄えも良くなりますので最初から導入しておきたいプラグインですね。

Yet Another Related Posts Pluginの設定

プラグインで「Yet Another Related Posts Plugin」を検索し有効化をします。

①管理画面のサイドバーから設定→YRPPPをクリックします。

yarpp

②各項目の設定をしていきます。

フィルターの設定

フィルター
  1. このカテゴリーの記事を表示しない
    関連記事に含めたくないカテゴリーがある場合チェックを入れます。
  2. このタグの記事を表示しない
    関連記事に含めたくないタグがある場合チェックを入れます。
  3. パスワードで保護されている記事も表示
    パスワードで保護されている記事も表示する場合はチェックを入れます。
  4. 過去の○○の記事だけを表示
    どの程度前の過去記事を表示するか指定できます。

関連記事のスコア設定

関連記事のスコア設定
  1. 表示に最低関連するスコア
    記事どの程度まで関連させた記事を表示させるか指定できます。数値が高いほど関連した精度が高まりますが、「3」でも充分精度が高いです。
  2. タイトル
    関連性の精度の計算をする際の重要度を指定出来ます。
  3. 内容
    同上
  4. カテゴリー
    同上
  5. タグ
    同上
  6. すべての投稿タイプの結果を表示
    チェックを入れると投稿も固定ページも全部含めた関連記事が表示されます。チェックを外すと投稿の関連記事のみ表示されます。
  7. 過去の記事だけを表示
    チェックを入れると該当記事の投稿日以降に投稿した記事は対象になりません。(例)2月18日に投稿した記事には、2月19日以降に投稿した関連記事は表示されないということです。基本はチェック不要。

 表示設定

表示設定
  1. 関連記事を表示させる場所の指定
    ここにチェックを入れると自動で関連記事が表示されますが、アドセンス広告より上に表示されてしまうので、チェックを入れません。詳細は後述しますが<?php related_posts(); ?>をsingle.phpに入れて任意の場所に関連記事を表示させます。
  2. 一度に表示する関連記事数
    関連記事を何記事分表示させるか指定できます。
  3. 関連記事を表示させる種類の指定
    リストはタイトルのみ表示、サムネイルは画像とタイトル表示。今回はリストを選択します。
  4. 関連記事表示を囲むタグ、各関連記事を囲むタグ
    ここは英文の箇所のみ「関連記事一覧」といった日本語に変更するのみで大丈夫です。
  5. 抜粋を表示
    記事の冒頭も表示させるか指定できます。好みによりますが、私は表示させないほうが読みやすいと感じてます。
  6. 表示順番
    関連記事の表示順番を指定できます。
  7. このプラグインを宣伝するかどうか、チェック不要

※表示設定RSS/Atomフィード用の設定は不要です。(固定読者を必要とするブログには設定したほうがいいです)

WordPress Related Postsの設定

プラグインで「WordPress Related Posts」を検索し有効化をします。

①管理画面のサイドバーから設定→WordPress Related Postsをクリックします。

WordPress Related Posts

②▼をクリックし設定画面を表示させます。

設定画面

Basic settingsの設定

Basic settings
  1. Related Posts Title
    関連記事のタイトルを表示させます。YRPPPでタイトルを付けたので、私はここは空欄にしています。
  2. Number of Posts
    表示させる記事数を指定できます。表示させるサムネイルの大きさでここは増減します。

Advanced settingsの設定

サムネイルの設定
  1. Enable Themes
    チェックを入れるとサムネイルのプレビューを確認出来ます。
  2. Layout
    サムネイルの表示形式を選択できます。私はVertical(Medium)にしています。Largeにしたかったのですが、スマホで表示を確認したら表示が崩れていました。

 

Customizeの設定

ここは基本デフォルトのままでOKです。

カスタマイズ
  1. CSSをいじって関連記事の表示をカスタマイズできます。
    CSSが分かる人は設定してみると良いですね。
  2. Default thumbnails
    関連記事が無いときに表示させる画像を指定できます。
  3. Custom size thumbnails
    上記のサムネイルの表示サイズを指定できます。

Other Settingsの設定

その他設定
  1. Exclude these Categories
    除外したいカテゴリーがある場合チェックを入れます。
  2. Auto Insert Related Posts
    ここにチェックを入れると自動で関連記事が表示されますが、YRPPPと同様に表示位置を指定しますので、チェックを入れません。
  3. Display Related Posts in Feed
    チェックを入れるとRSSフィールドにも関連記事が表示されます。固定読者を必要とするブログはチェック入れると良いですね。
  4. Support us (show our minimized logo)
    チェックを入れるとプラグインの開発者が表示されます。

関連記事の表示を位置を指定

プラグインの設定が終わったら、single.phpに関連記事を表示させるタグを入れます。※必ず作業前にバックアップを取っておきましょう。

YRPPP

<?php related_posts(); ?>

WordPress Related Posts

<?php wp_related_posts()?>

①管理画面の外観→エディタ

エディタ

②single.phpを表示させます。

singlephp

③関連記事とコメントを削除した時に残した<!–関連記事–>を「Ctrl+F」で検索します。下記のタグを貼り付けで保存します。

<!–関連記事–>
<?php related_posts(); ?><center>
<?php wp_related_posts()?></center>
<!–関連記事–>

関連記事

※ちなみ<center></center>はスマホ表用に入れてます。スマホで見ると左寄せになってしまうので真ん中表示のタグが必要です。

④保存をしたらトップページに戻って記事をクリックし表示を確認します。

以下のように文字の関連記事 → サムネイルの関連記事になっていればOKです。お疲れ様でした!

*メールアドレス
*お名前(HN可)