せっかくだもの…もっと読んで!『Yet Another Related Posts Plugin』を使うよ

2016.7.22

関連記事を自動で挿入してくれるプラグイン『Yet Another Related Posts Plugin』、略してYARPPを使うことにしました。やっと関連が表示できるぐらいには、なってきてるからね、記事数。
今回は、設定とカスタマイズの覚書です。

Yet Another Related Posts Plugin

はじめに『STINGER』にお勧めのプラグインを見直して

当ブログで使わせていただいてる、ワードプレステーマ『STINGER PLUS+』の作者Enjilogさんは、お勧めプラグインも公開してくださってます。親切だよね。いい人だよね。
最初に見たんですが、もう一度チェックしなおしました。理由は

  • 一度見ただけじゃ、忘れてるから。
  • 記録取っておいてないから。
  • 使えそうにないと思ってたヤツの見直し。

見直した結果、いくつか入れておいたほうがいいよねを見つけました。そのひとつが、今回のYARPP。

『Yet Another Related Posts Plugin』インストール後の設定

左の管理メニュー設定YARPP で。

Yet Another Related Posts Plugin

表示しないもの・するものの設定です。カテゴリー“未分類”は やめとこっ。

YARPP2

関連性スコア(評価)の設定。デフォルトのままです。
一番上の『表示する最低関連スコア』の数字は、小さくすると関連性の低いもの、高くすると関連性の高いものを表示するようになるようです。
下から2つ目の『全ての投稿タイプの結果を表示』のタイプとは、固定ページか投稿か、ですね。

YARPP3

どんなふうに表示させるかの設定。サムネイル式が選択されてるのかと思ったら違った。デフォルトは、リスト式。STINGER PLUSだと、このままのほうがいいみたい。
設定を更新すると、こんなふうになりました。

YARPP5

YARPP4

RSS配信などで どう表示させるかの設定。ウェブサイトと同様にしてあります。

やっぱりサムネイルを表示させたい!

イメージって、だいじだと思う! こちらの記事 に、サムネイル表示させるやり方を書いてくださってます。ほんっと親切!

① プラグインで表示を『カスタム』に

YARPP6

マウスを近づけると、吹き出しが出ます。赤丸部分をクリック。一瞬、表示が変わった?と思ったら、ここはいったん放置。

② プラグインのテンプレートで

左側の管理メニュー外観テーマ編集

YARPP7

子テーマを使っていても、追加されてるの、出てますね。赤丸のをクリック。

YARPP8

これを まるごと全部書き換えるよ!

YARPP9

元記事からコピーしてきて貼って、ドキドキしながら更新をクリック! ちょっぴり残念だけど、まだ変化はないからね。プラグインの方に戻るよ。

③ もう一度プラグインの表示で

YARPP10

管理メニュー設定YARPP で、赤丸『?php カスタム』をポチって、下のプルダウンから、赤丸『yarpp-template-thumbnail.php』を選択。変更を保存 押してね。

変わったかにゃん?
YARPP11

変わってる! けど、かっこ悪い…。フムフム、元記事を読むと、ここからがちょっとめんどうっぽい。

がんばるにゃー!

④ ワードプレステーマの『function.php』で

管理メニュー外観テーマの編集 から、赤丸 テーマのための関数 (function.php) を選びます。

YARPP12

 元記事からコピーしてきたのを貼って、さっき以上にドキドキしながら『ファイルを更新』をポチり。 YARPP13

成功! ここで、真っ白になっちゃったりしてないか、サイトを確認しました…だいじょぶだった。ホッ。

⑤ 見た目を整えるのはCSSで

これでCSSの編集ができます。私は プラグイン『Simple Custm CSS』を入れてるので、そっちでやります。

YARPP14 管理メニュー外観カスタムCSS で、元記事からのコピーを貼って、カスタムCSSの更新 をポチり。

YARPP15

わーい! 変わったー! …けど、もうちょっと… 横が40pxぐらいたりなくて2列になっちゃった。

YARPP16

ちょっとずつ変えながらの、まっ、こんなもんかなの形。間違いさがし的に。下にある「@media screen…」はスマホ表示用です。

あ、そっちも確認しとこっ。

エントリー本文との間に少し空白が欲しくて、追記したのが
.yarpp-title{ margin: 3em 0 0 0 !important; }
 それから、アイキャッチを丸くし、周りの線はなしにするために
.related-entry img{
以下を
border-radius: 50%; }
だけにしました。

最後にスマートフォンでも確認

YARPP17

YARPP18

うん、OK。

われながら がんばったですにゃの

作者様には、本当にほんとーに感謝してます! ありがとー!!!

めでたし めでたし