[WPプラグイン]STINGER5の関連記事をYARPPにしてみた

シェアする

  • このエントリーをはてなブックマークに追加
  • 64

関連記事を表示させるのに、WordPressプラグインの「Yet Another Related Posts Plugin(YARPP)」を導入してみました。

STINGER5の関連記事

STINGER5にも記事の最後に「関連記事」として、同じカテゴリの記事をランダムで表示してくれます。

色んな記事が目に触れる利点もあるものの、古い記事もランダムに表示されるし、シリーズ記事みたいなのが全然引っかかってきません。

なので、シリーズ記事みたいなのは記事中にリンクを記述する方法を取っていました。

これはこれで良いのですが、前の記事にリンクを追加したりとメンドウです。

内容を評価して順位を決めるYARPP

いくつか関連記事を表示させるプラグインをインストールして試してみたところ、「Yet Another Related Posts Plugin(YARPP)」が良い感じでした。

というか、前に見た時よりすっごい進化してますΣ(゚ロ゚)o゙

日本語対応はもちろん、設定画面もしっかり作られていて、「あれ?YARPPって、こんな感じだったっけ?Σ(゚ロ゚)o゙」と思ってしまいました。

表示スタイルも標準で「リスト」形式と、「サムネイル」形式が選べます。

リスト形式はタイトルのみの表示です。

カッコの中の数値は記事の関連度合を表す「スコア(点数)」で、管理者でログインしているときだけ表示されるようです。

yarpp-list-admin

サムネイル形式はサムネイルとタイトルが表示されます。

yarpp-thumbnail

自分でテンプレートファイルを作成する「カスタム」形式も選べます。(いくつかサンプルが付いています)

YARPPのインストール

WordPressの「プラグイン」から「新規追加」を選び、「YARPP」で検索します。

plugins-install-yarpp

[いますぐインストール]を押して、インストールと有効化を行います。

標準では記事の終わりに「Related Posts:」というタイトルと共に表示されます。

yarpp-list

関連記事のスコア設定

YARPPでは、各記事に「スコア(点数)」を付け、点数が高いものを「より関連の高い記事」と判断します。

何の項目を「スコア」の基準とするか、設定画面から選択することができます。

設定画面に入るには、「設定」から「YARPP」を選びます。

settings-yarpp

「関連スコア設定」で、関連度合を表す「スコア」を「何で判断するか」といった設定が行えます。

yarpp-setting-score

  • 「表示する最低関連スコア」
    関連記事として選択するスコアを設定します。
    カテゴリーやタグが一致するだけの記事も表示させたかったので「1」としてみました。
  • 「タイトル」
    タイトルをスコア計算に含めるか選択します。
    「検討する」にすると、タイトルに同じ文字列があると点数が高く付く傾向にあります。
    「検討する(重要視)」にすると、タイトル一致時の加点が高くなります。
    「内容:検討する」にしておかないと、うまく加算されない気がします(?)。
  • 「内容」
    記事の内容をスコア計算に含めるか選択します。
    記事中のキーワードなどが共通しているほど加点が高いようです。
  • 「カテゴリー」
    同じカテゴリーの記事を加点します(1点?)。
    「共有のカテゴリーをひとつ以上必要とする」の選択肢にすると、他の条件でスコアが高くても、同じカテゴリーに属していない記事は選択されません。
  • 「タグ」
    同じタグの記事を加点します。記事中のキーワードをタグにしている場合には、重要視するのも良さそうです。
  • 「全ての投稿タイプの結果を表示」
    投稿も固定ページも関係なく表示したい場合にはチェックをします。
  • 「過去の記事だけを表示」
    チェックを付けると、「その記事よりも過去の投稿日の記事」のみが表示されます。
    どういうときに使うと便利なんだろう?

記事の「タイトル」「内容」の選択肢がグレーになっていて選択できない場合があります。

フルテキスト検索のインデックスが付いていないことが原因のようです(?)。

下記リンクに対応のさせかたがありました。

【WordPress】YARPPの関連スコア設定が選択できない場合の対処方法
WordPressのYARPP(Yet Another Related Posts)プラグインをご存知でしょうか?かなり有名なプラグインで、関連記事を表示してくれる機能を有しています。
YARPPでタイトル・内容の設定が変更できない人。もしかしてサクラサーバーじゃありませんか? | てきと...
YARPP(Yet Another Related Posts)便利ですよね! デフォルトで日本語に対応しており、カテゴリやタグなど、細かい設定によって表示する記事を絞り込むことができます。 自分もブログのカスタマイズを機に導入したのですが、なぜか関連スコア設定でタイトルと内容...

表示の設定

表示の形式や、順序を設定できます。

yarpp-setting-display

  • 「Automatically display related content from YARPP Basic on」
    自動で表示させる場所を指定します。
    「投稿」にチェックをすれば、投稿記事の最後に表示します。
  • 「一度に表示する関連記事」
    関連記事として表示する数を指定します。
  • 「リスト」
    リスト形式で表示します。
  • 「サムネイル」
    サムネイルを表示して、横に並べます。
  • 「カスタム」
    自分でテンプレートファイルを用意して、表示をカスタムできます。
  • 「関連記事表示を囲むタグ」
    関連記事のタイトルをHTMLタグで記述できます。
    例えば「Related posts:」の部分を「関連記事」とかに直せます。
  • 「各関連記事を囲むタグ」
    スタイルシートなどに変更すると良さそうです。
  • 「抜粋を表示」
    チェックを入れると、抜粋文も表示されます。
  • 「抜粋を囲むタグ」
    標準では「<small>」~「</small>」で囲まれています。
    改行したい場合には「<p>」~「</p>」にする等。
  • 「関連記事がない時のメッセージ」
    該当する関連記事が無い場合に表示されます。空欄にするか、「関連記事がありません」といった感じに直せます。

「サムネイル」の形式にすると、サムネイルとタイトルが表示されるので見栄えが良いです。

STINGER5の関連記事と入れ替えてみる

どうせなので、カスタム形式にして、STINGER5の関連記事と差し替えてみます。

まずは、現在使用しているテーマのフォルダーにYARPPテンプレートファイルを作成します。

子テーマだったら子テーマの入っているフォルダーです。

プラグインのフォルダーでは無いので注意しましょう。

テキストファイルを作成します。

file-manager-new-file

STINGER5のkanren.phpを参考にして同じような形式で表示されるようにします。

[2015/04/30 追記]ログインしていない場合でもスコアが表示されていたため、修正しました。

拡張子に「.php」を指定しつつ、適当な名前で保存します。

今回は「yarpp-template-stinger5.php」としてみました。

yarpp-template-stinger5

YARPPの設定画面から、自分の作成したテンプレートが選べるようになります。

yarpp-template-original

標準の設定では、記事の最後に表示されてしまうので、「投稿」のチェックを外しておきます。

yarpp-no-check

テーマフォルダのkanren.phpの中身を次のとおりにします。

子テーマフォルダなどでファイルが無い場合は、次の空ファイルを作成して「<?php related_posts(); ?>」の一行を書いて保存します。

STINGER5の標準の関連記事のように見えつつも、YARPPによる順位づけされた関連表示になりました。

related-stinger5

なお、タイトルの後ろの数字は関連度で、管理者でログインした場合のみ見られる数字です。

[2015/04/30 追記]ログインしていない場合でもスコアが表示されていたため、修正しました。

抜粋文の文字を変更する [2015/04/30 追記]

最初に公開したとき、ログインユーザーでなくてもYARPPのスコアが表示されていたので、修正しました。

管理者でなくても、ログインユーザーにはスコアを見せたい場合は、「is_super_admin()」を「is_user_logged_in()」にします。

さて、コメントにて、抜粋文の「文字の大きさ」と「文字色」を変更するにはどうしたら良いか質問がありました。

修正するポイントを見てみましょう。

方法1:<small>~</small>タグを付ける

「<div class=”smanone”>’.get_the_excerpt().'</div>」に、smallタグを追加して、「<div class=”smanone”><small>‘.get_the_excerpt().’</small></div>」にすることで、「気持ち」文字が小さくなります。

方法2:スタイルシートを修正する

もっと細かく変更したい場合には、style.cssの「#kanren .clearfix dd p {」というところを検索して、「#kanren .clearfix dd {…}」を追加します。

追加したところの「font-size: 9px;」の数字を変更すれば、文字の大きさが変わります。

「color: #888;」を「color: #444;」にすれば濃く、「color: #ccc;」にすれば薄くなります。

「line-height: 16px;を変更すれば、行の間隔が変わります。

文字を小さくすると、標準の「get_the_excerpt()」の文字数の短かさが気になってきそうです。

抜粋文を少し長くした版です。かなりヤッツケです(^-^;

21行目と22行目の「120」を変更すると、抜粋文の文字数を変更できます。

見栄えを良くしたいなら、ショートコードなども省かないといけないのですが…とりあえず参考程度に。

広告

『[WPプラグイン]STINGER5の関連記事をYARPPにしてみた』へのコメント

  1. 名前:セム 投稿日:2015/04/29(水) 15:56:40 ID:27ee491d3 返信

    commuさんのおっしゃっているのと重複するかもしれませんが、わたしもひとつ気になる点があります。
    現在カスタムで、こちらで紹介されているコードを子テーマに入力しました。

    初期設定の関連記事では、タイトルは黒の太字で、抜粋文字はグレーでタイトルより少し小さい文字で表示されていたのですが、こちらでご紹介いただいた方法を試したところ、グレーで小文字だった抜粋文字が黒になり、タイトルと同じ大きさになってしまいました。

    できれば初期設定と同じように抜粋文字は少し小さめのグレー文字で表示されると嬉しいのですが、あいにくその方法がわかりません。
    お手数ですがお時間のある時にご回答いただければ助かります。
    よろしくお願いいたします。

    • 名前:ぽぽろん 投稿日:2015/04/30(木) 21:03:23 ID:ea211a3e1 返信

      セムさん、コメントありがとうございます。
      サイトを見させていただきまして状況が分かりました。
      抜粋文字の大きさや色についてはスタイルシートで変更する必要がありますので、記事中に追記しようと思います。
      同時に気付いたのですが、ログインユーザー以外にも「スコア」がそのまま表示されていたため、記事中のコードを修正しました。
      お手数ですが、「yarpp-templete-stinger5.php」の中身を記事中のものに差し替えていただけると幸いです。

    • 名前:ぽぽろん 投稿日:2015/04/30(木) 22:08:45 ID:ea211a3e1 返信

      抜粋文の文字を小さくする方法を追記しました。
      を追記するだけでも良さそうですが、スタイルシートを直した方が細かく調整できるのでお勧めです。

      • 名前:セム 投稿日:2015/05/01(金) 11:02:58 ID:722256e25 返信

        ぽぽろんさん、こんにちは。
        先日質問させていただいたセムです。

        記事の追記、ありがとうございます。
        PHPの内容を入れ替え、スタイルシートで文字のサイズを調整しました。
        おかげさまで思い通りの(STINGER5のデフォルトと同じ)表示にすることができました。本当にありがとうございます^^助かりました~

        • 名前:ぽぽろん@モバイル 投稿日:2015/05/01(金) 12:27:25 ID:bdfd7f797 返信

          セムさん、返信ありがとうございます。
          お役に立てたようで良かったです。
          また何かありましたらお気軽にどうぞ(^-^)o

  2. 名前:commu 投稿日:2015/04/06(月) 00:17:41 ID:fe0540982 返信

    お忙しいところ申し訳ございません。

    ver20141227のSTINGER5を使っているのですが、
    並べられた関連記事のフォントが初期と変わってしまいます。
    通常通りのフォントのままYARPPに置き換えたい場合は方法はないでしょうか?

    • 名前:ぽぽろん 投稿日:2015/04/07(火) 00:02:28 ID:ba786c9e8 返信

      commuさん、コメントありがとうございます。
      フォントが変わっているというのは、本文がゴシックなのに関連記事が明朝体という感じでしょうか、文字サイズが大きいとか小さいという感じでしょうか。

      「リスト」や「サムネイル」ではなく、「カスタム」で使用している場合、どのテーマを使用しているかなど教えていただけると助言しやすいかも知れません。
      早く思ったのと同じように設定できると良いですね。