関連記事を表示させるのに、WordPressプラグインの「Yet Another Related Posts Plugin（YARPP）」を導入してみました。
STINGER5の関連記事
STINGER5にも記事の最後に「関連記事」として、同じカテゴリの記事をランダムで表示してくれます。
色んな記事が目に触れる利点もあるものの、古い記事もランダムに表示されるし、シリーズ記事みたいなのが全然引っかかってきません。
なので、シリーズ記事みたいなのは記事中にリンクを記述する方法を取っていました。
これはこれで良いのですが、前の記事にリンクを追加したりとメンドウです。
内容を評価して順位を決めるYARPP
いくつか関連記事を表示させるプラグインをインストールして試してみたところ、「Yet Another Related Posts Plugin（YARPP）」が良い感じでした。
というか、前に見た時よりすっごい進化してますΣ(ﾟロﾟ)oﾞ
日本語対応はもちろん、設定画面もしっかり作られていて、「あれ？YARPPって、こんな感じだったっけ？Σ(ﾟロﾟ)oﾞ」と思ってしまいました。
表示スタイルも標準で「リスト」形式と、「サムネイル」形式が選べます。
リスト形式はタイトルのみの表示です。
カッコの中の数値は記事の関連度合を表す「スコア（点数）」で、管理者でログインしているときだけ表示されるようです。
サムネイル形式はサムネイルとタイトルが表示されます。
自分でテンプレートファイルを作成する「カスタム」形式も選べます。（いくつかサンプルが付いています）
YARPPのインストール
WordPressの「プラグイン」から「新規追加」を選び、「YARPP」で検索します。
［いますぐインストール］を押して、インストールと有効化を行います。
標準では記事の終わりに「Related Posts:」というタイトルと共に表示されます。
関連記事のスコア設定
YARPPでは、各記事に「スコア（点数）」を付け、点数が高いものを「より関連の高い記事」と判断します。
何の項目を「スコア」の基準とするか、設定画面から選択することができます。
設定画面に入るには、「設定」から「YARPP」を選びます。
「関連スコア設定」で、関連度合を表す「スコア」を「何で判断するか」といった設定が行えます。
- 「表示する最低関連スコア」
関連記事として選択するスコアを設定します。
カテゴリーやタグが一致するだけの記事も表示させたかったので「1」としてみました。
- 「タイトル」
タイトルをスコア計算に含めるか選択します。
「検討する」にすると、タイトルに同じ文字列があると点数が高く付く傾向にあります。
「検討する（重要視）」にすると、タイトル一致時の加点が高くなります。
「内容：検討する」にしておかないと、うまく加算されない気がします（？）。
- 「内容」
記事の内容をスコア計算に含めるか選択します。
記事中のキーワードなどが共通しているほど加点が高いようです。
- 「カテゴリー」
同じカテゴリーの記事を加点します(1点？)。
「共有のカテゴリーをひとつ以上必要とする」の選択肢にすると、他の条件でスコアが高くても、同じカテゴリーに属していない記事は選択されません。
- 「タグ」
同じタグの記事を加点します。記事中のキーワードをタグにしている場合には、重要視するのも良さそうです。
- 「全ての投稿タイプの結果を表示」
投稿も固定ページも関係なく表示したい場合にはチェックをします。
- 「過去の記事だけを表示」
チェックを付けると、「その記事よりも過去の投稿日の記事」のみが表示されます。
どういうときに使うと便利なんだろう？
記事の「タイトル」「内容」の選択肢がグレーになっていて選択できない場合があります。
フルテキスト検索のインデックスが付いていないことが原因のようです（？）。
下記リンクに対応のさせかたがありました。
[link url=”http://love-guava.com/wordpress-yarpp/”]
[link url=”http://tekito-daro.net/wordpress-yarpp.html”]
表示の設定
表示の形式や、順序を設定できます。
- 「Automatically display related content from YARPP Basic on」
自動で表示させる場所を指定します。
「投稿」にチェックをすれば、投稿記事の最後に表示します。
- 「一度に表示する関連記事」
関連記事として表示する数を指定します。
- 「リスト」
リスト形式で表示します。
- 「サムネイル」
サムネイルを表示して、横に並べます。
- 「カスタム」
自分でテンプレートファイルを用意して、表示をカスタムできます。
- 「関連記事表示を囲むタグ」
関連記事のタイトルをHTMLタグで記述できます。
例えば「Related posts:」の部分を「関連記事」とかに直せます。
- 「各関連記事を囲むタグ」
スタイルシートなどに変更すると良さそうです。
- 「抜粋を表示」
チェックを入れると、抜粋文も表示されます。
- 「抜粋を囲むタグ」
標準では「<small>」～「</small>」で囲まれています。
改行したい場合には「<p>」～「</p>」にする等。
- 「関連記事がない時のメッセージ」
該当する関連記事が無い場合に表示されます。空欄にするか、「関連記事がありません」といった感じに直せます。
「サムネイル」の形式にすると、サムネイルとタイトルが表示されるので見栄えが良いです。
STINGER5の関連記事と入れ替えてみる
どうせなので、カスタム形式にして、STINGER5の関連記事と差し替えてみます。
まずは、現在使用しているテーマのフォルダーにYARPPテンプレートファイルを作成します。
子テーマだったら子テーマの入っているフォルダーです。
プラグインのフォルダーでは無いので注意しましょう。
テキストファイルを作成します。
STINGER5のkanren.phpを参考にして同じような形式で表示されるようにします。
[php title=”yarpp-template-stinger5.php” decode=”true”]<?php
/*
YARPP Template: for STINGER5
Description: YARPP template for STINGER5
Author: popozure
*/
echo ‘<div id=”kanren”>’;
if (have_posts()) {
while (have_posts()) : the_post();
echo ‘<dl class=”clearfix”><dt><a href=”‘.get_the_permalink().'”>’;
if (has_post_thumbnail()) {
echo the_post_thumbnail( ‘thumb150’ );
} else {
echo ‘<img src=”‘.get_template_directory_uri().’/images/no-img.png” alt=”no image” title=”no image” width=”100″ height=”100″ />’;
}
echo ‘</a></dt><dd><h5><a href=”‘.get_the_permalink().'”>’.get_the_title().'</a>’;
if (is_super_admin()) {
echo ‘<small> (‘.get_the_score().’)</small>’;
}
echo ‘</h5><div class=”smanone”>’.get_the_excerpt().'</div></dd></dl>’;
endwhile;
} else {
echo ‘<p>関連記事はありませんでした</p>’;
}
echo ‘</div>’;
?>[/php]
[2015/04/30 追記]ログインしていない場合でもスコアが表示されていたため、修正しました。
拡張子に「.php」を指定しつつ、適当な名前で保存します。
今回は「yarpp-template-stinger5.php」としてみました。
YARPPの設定画面から、自分の作成したテンプレートが選べるようになります。
標準の設定では、記事の最後に表示されてしまうので、「投稿」のチェックを外しておきます。
テーマフォルダのkanren.phpの中身を次のとおりにします。
子テーマフォルダなどでファイルが無い場合は、次の空ファイルを作成して「<?php related_posts(); ?>」の一行を書いて保存します。
[php title=”kanren.php” decode=”true”]<?php related_posts(); ?>[/php]
STINGER5の標準の関連記事のように見えつつも、YARPPによる順位づけされた関連表示になりました。
なお、タイトルの後ろの数字は関連度で、管理者でログインした場合のみ見られる数字です。
[2015/04/30 追記]ログインしていない場合でもスコアが表示されていたため、修正しました。
抜粋文の文字を変更する [2015/04/30 追記]
最初に公開したとき、ログインユーザーでなくてもYARPPのスコアが表示されていたので、修正しました。
[php title=”yarpp-template-stinger5.php” start-line=”16″ mark=”2,4″ decode=”true”] echo ‘</a></dt><dd><h5><a href=”‘.get_the_permalink().'”>’.get_the_title().'</a>’;
if (is_super_admin()) {
echo ‘<small> (‘.get_the_score().’)</small>’;
}
echo ‘</h5><div class=”smanone”>’.get_the_excerpt().'</div></dd></dl>’;[/php]
管理者でなくても、ログインユーザーにはスコアを見せたい場合は、「is_super_admin()」を「is_user_logged_in()」にします。
さて、コメントにて、抜粋文の「文字の大きさ」と「文字色」を変更するにはどうしたら良いか質問がありました。
修正するポイントを見てみましょう。
方法1：<small>～</small>タグを付ける
[php title=”yarpp-template-stinger5.php（変更前）” start-line=”19″ mark=”2″ decode=”true”] }
echo ‘<div class=”smanone”>’.get_the_excerpt().'</div>
endwhile;[/php]
[php title=”yarpp-template-stinger5.php（変更後）” start-line=”19″ mark=”2″ decode=”true”] }
echo ‘<div class=”smanone”><small>’.get_the_excerpt().'</small></div>
endwhile;[/php]
「<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 {…}」を追加します。
[css title=”style.css（変更前）” start-line=”406″]/* 抜粋文字 */
#kanren .clearfix dd p {
font-size: 13px;
color: #666;
line-height: 18px;
}[/css]
[css title=”style.css（変更後）” start-line=”406″ mark=”2-6″]/* 抜粋文字 */
#kanren .clearfix dd {
font-size: 9px;
color: #888;
line-height: 16px;
}
#kanren .clearfix dd p {
font-size: 13px;
color: #666;
line-height: 18px;
}[/css]
追加したところの「font-size: 9px;」の数字を変更すれば、文字の大きさが変わります。
「color: #888;」を「color: #444;」にすれば濃く、「color: #ccc;」にすれば薄くなります。
「line-height: 16px;を変更すれば、行の間隔が変わります。
文字を小さくすると、標準の「get_the_excerpt()」の文字数の短かさが気になってきそうです。
抜粋文を少し長くした版です。かなりヤッツケです(^-^;
[php title=”yarpp-template-stinger5.php” mark=”20-24″ decode=”true”]<?php
/*
YARPP Template: for STINGER5
Description: YARPP template for STINGER5
Author: popozure
*/
echo ‘<div id=”kanren”>’;
if (have_posts()) {
while (have_posts()) : the_post();
echo ‘<dl class=”clearfix”><dt><a href=”‘.get_the_permalink().'”>’;
if (has_post_thumbnail()) {
echo the_post_thumbnail( ‘thumb150’ );
} else {
echo ‘<img src=”‘.get_template_directory_uri().’/images/no-img.png” alt=”no image” title=”no image” width=”100″ height=”100″ />’;
}
echo ‘</a></dt><dd><h5><a href=”‘.get_the_permalink().'”>’.get_the_title().'</a>’;
if (is_super_admin()) {
echo ‘<small> (‘.get_the_score().’)</small>’;
}
$excerpt = strip_shortcodes(strip_tags(get_the_content()));
if (mb_strlen($excerpt) > 120) {
$excerpt = mb_substr($excerpt,0,120).’…’;
}
echo ‘</h5><div class=”smanone”>’.$excerpt.'</div></dd></dl>’;
endwhile;
} else {
echo ‘<p>関連記事はありませんでした</p>’;
}
echo ‘</div>’;
?>[/php]
21行目と22行目の「120」を変更すると、抜粋文の文字数を変更できます。
見栄えを良くしたいなら、ショートコードなども省かないといけないのですが…とりあえず参考程度に。
