【WordPress】レコメンド機能yet-another-related-posts-pluginの設定と文字が途中で切れる問題の解決

Pocket
LINEで送る

はじめに

こんにちは、中村です。昨日アフィリエイトのASPから「広告出しませんか。」というメールを頂いて少し浮かれてます。が、まだPV数など全然上がっていないので、まだペンディングしておこうと思います。
さて、今回WordPressの記事で、レコメンド機能を追加する「yet-another-related-posts-plugin」を導入しました。初期設定だとなかなかイケてなく、一部修正しましたのでその備忘録です。

yet-another-related-posts-plugin とは

Yet Another Related Posts Plugin(YARPP)プラグインはブログで記事が表示される時にそのブログと関連する記事を表示してくれるプラグインです。何を使って関連する記事と判断するかどうかの設定や、表示方法のカスタマイズも行えます。
【Yet Another Related Posts Pluginプラグインの使い方・http://www.adminweb.jp/wordpress-plugin/list/index4.html・2015/12/04】

こまかな設定の内容に関しては、「【Yet Another Related Posts Pluginプラグインの使い方】」の説明がわかりやすかったので、こちらを参照していただいたほうが良さそうです。

初期設定の変更とテキストが途中までしか表示されない問題

初期設定としてyet-another-related-posts-pluginの設定画面から行ったことです。

初期設定で運用するとテキストのみ表示

スクリーンショット 2015-12-04 06.25.02

初期の設定で表示をさせると、テキストだけの表示になります。僕は画像も表示させたいので、設定を変更しました。

画像を表示させたが・・・

スクリーンショット 2015-12-04 06.06.44

画像をリストで表示するように設定しました。するとこのように長いテキストは途中で切れてしまいます。これでは何の記事かわからないため、見ていた頂いているユーザーにもわかりにくいですよね。そこで隠れているテキストを表示させました。

テキストを最後まで表示させる方法

cssファイルを修正して、テキストを最後まで表示させます。修正内容は、以下になります。

styles_thumbnails.css.phpの修正

スクリーンショット 2015-12-04 06.07.45

「編集」をクリックしてください。

phpファイルがたくさん出てくるので、styles_thumbnails.css.phpを探してクリックしてください。

cssの記述変更

.yarpp-thumbnails-horizontal .yarpp-thumbnail {
  border: 1px solid rgba(127,127,127,0.1);
  width: <?php echo $width_with_margins; ?>px;
  height: auto /*<?php echo $height_with_text; ?>px*/;
  margin: <?php echo $margin; ?>px;
  margin-left: 0px;
  vertical-align: top;
}
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
  font-size: 1em;
  max-height: none /*2.8em*/;
  line-height: 1.4em;
  margin: <?php echo $extra_margin; ?>px;
  margin-top: 0px;
  width: <?php echo $width; ?>px;
  text-decoration: inherit;
  overflow: hidden;
}

完成!

スクリーンショット 2015-12-04 06.12.18

ちゃんと、最後までテキストが表示されるようになりました!

おわりに

yet-another-related-posts-pluginでは、他にも色々な設定ができるみたいなので、色々といじってみて最適化していきたいと思います。

SNSでもご購読できます。