YARPPでサムネイル画像が潰れる問題を解決


WordPress  Yet Another Related Posts Plugin  YARPP  WordPress Plugins
先日紹介したYARPP(WordPressで「この記事を読んだ人はこんな記事も読んでいます」を実装する「YARPP」の紹介)ですが、サムネイル表示にした時に画像が横に潰れていて見た目が悪かったので、コードを読んでみたところ一部修正して直すことが出来ましたので紹介します。

なお、この方法は直接コードを修正する方法なので、予期しない動作をするなどの可能性もありますので、修正する際は自己責任でお願いします。また、YARPPをバージョンアップすると修正部分も戻ってしまうので、もう一度修正するなど注意が必要です。

スポンサーリンク

コードを修正する

ダッシュボードの「プラグイン」→「プラグイン編集」をクリック。
ダッシュボードプラグインの編集

画面右上にある「編集するプラグインを選択」から「Yet Another Related Posts Plugin」を選択し、「選択」をクリック。
YARPPを選択

「yet-another-related-posts-plugin/template-thumbnails.php」をクリックし、編集をする。

追記:バージョンアップによりファイル名が「yet-another-related-posts-plugin/includes/template_thumbnails.php」に変わっています。

見つけにくかったらMacなら「command + F」Windowsなら「ctrl + F」で検索できるので、「yet-another-related-posts-plugin/template-thumbnails.php」を入力して検索する。

「yet-another-related-posts-plugin/template-thumbnails.php」の編集画面で

$post_thumbnail_html = get_the_post_thumbnail( null, $dimensions['size'] );

を探しコピーして一行下にコピーする。見つけにくい場合は先程のようにし「get_the_post_thumbnail( null, $dimensions[‘size’] );」を検索すれば見つけられる。

コピー元の一行は先頭に半角スラッシュを2つつけてコメントアウトする。

//$post_thumbnail_html = get_the_post_thumbnail( null, $dimensions['size'] );

コピー先の一行の「$dimensions[‘size’] 」を「’thumbnail’」に変更し、「ファイルを更新」をクリック。

$post_thumbnail_html = get_the_post_thumbnail( null, 'thumbnail');

プラグイン編集

これで指定してある最小のサムネイル画像が使用されるようになり、画像が通常表示に近い状態になるはず。

解説

「YARPP」はサムネイル表示をする時に「120×120」のサムネイルを作成するようだが、書き込み権限の問題や、ライブラリの問題などでサムネイル画像が作成できない場合がある。(私の場合はサムネイル画像が作成されていなかったので、これに該当)

サムネイルを取得する時に「YARPP」専用のサムネイル画像がないので、元の大きい画像を取得してその画像を「120×120」のサイズに凝縮してしまっているので横に潰れて縦長の画像になってしまう。

という流れなので、普通に「thumbnail」を取得してあげるようにした。

ただ、サムネイルも「150×150」なので、凝縮されてしまうが、縦横比が同じなので、それほど気にならない。

最後に

修正前は元の「600×300」の画像を取得していたので、サイトの表示時間に多少なりとも影響を及ぼしていたはずです。ファイルの転送サイズはなるべく抑えたいので、早急に修正してみました。


タグ:

スポンサーリンク



この記事が役に立ったらシェアして頂けると嬉しいです!
このブログをフォロー・RSS購読もお願いします!

スポンサーリンク



  • Pingback: YARRPでアイキャッチ画像のサムネイルを表示するときに注意すべきこと | ブログの気になる気になーる()

  • cyu

    はじめまして。こちらの記事を参考にthumbnailとましたが、見た目が120×120サイズになってしまいます。見た目を150サイズにするにはどうすればよいのでしょうか?ソースでは150サイズとなっています。バージョンは4.25を使用しています。

    • コメントありがとうございます!
      画像自体は150pxが表示されているはずなのでCSSを変更すれば対応可能だと思います。

      ご自身のCSSに

      .yarpp-thumbnail > img, .yarpp-thumbnail-default {
      width:150px;
      height:150px;
      }

      上記で適用されない場合は「!important」を付けて
      .yarpp-thumbnail > img, .yarpp-thumbnail-default {
      width:150px !important;
      height:150px !important;
      }
      とすると150×150pxで表示されると思います。
      お試し下さい。