YARRPでアイキャッチ画像のサムネイルを表示するときに注意すべきこと


またお久しぶりになってしまいました(苦笑)

以前関連記事を表示するWordPressのプラグインとして

Yet Another Related Posts plugin(YARPP)

というのが結構いいよってことを書きました。

関連記事をYARPPを用いて表示してみよう

その後このブログでもとってもありがたくこのプラグインを利用させてもらっています。
特にサムネイルの画像を一緒に表示できたりするんで、見た目もgoodでいいんですよね。

しかし使用する上でちょっと注意しておかないといけないことが判明しましたので、今日はそのことについて書いていきますね。

Google Adsenseのページを見て発覚しました

このYARPPですが、普通にプラグインを使っている分には全くなんの問題もありませんでした。

しかしある日、アドセンスのトップページを見たところ

yarpp1-1

 

ムムム、”サイトの状況”のところが悪化している!!

と気づいたのでした。

今までは4-5個で推移していたので、3個までの減少にはちょっとびっくりしました。
で、”サイトの状況”のところをクリックすると、よく表示されているページのリンクがいくつか表示されます。
そのリンクをクリックすると、PageSpeed InsightsというGoogle先生が提供しているサイトの表示スピード計測サイトに移行します。

そこで実際にスコアを見てみると

確かに点数が明らかに悪化している!!

ってことが発覚。

今までモバイルの方は多少点数が低かったんですが、パソコンの方は80点以上はありましたから。
それが

まさかの50点台

まで悪化していたのでした。

これはやばいってことで、原因をいろいろ検索したところ、どうもYARPPが悪さをしているらしきことが判明したのでした。

原因はサムネイルで表示される画像のファイルが大きかったから

PageSpeed Insightsでは、いろいろ修正すべき個所が表示されるのですが、その中で目立っていたのが

画像を最適化しろ

ってことでした。

つまりは表示される画像のファイルサイズが大きいぞと。

確かにうちのブログは画像とかをたくさん載せてはいますが、表示される画像はそんなに大きくないはずなのになぁと困っていました。
しかし画像ファイルが大きいと指摘されたものをよく見てみると

YARPPがサムネイルとして表示しているファイル

ということが判明。

たしかによくよく考えてみると「YARPPが表示している画像は、時々たてよこがつぶれていたりしたなぁ」と後になって気が付いたのでした。

サイト表示を早くするための修正方法

では早速その修正方法を解説していきましょう。

まずは左のメニューから“プラグイン”>”プラグイン編集”を選びます。

yarpp1-2続いて、画面右上の

yarpp1-3

編集するプラグインを選択(①)

のところで

Yet Another Related Posts Plugin

ってのを選んで右横にある“選択”ボタンを押します。

そうするとYARPPに関するファイルがずらっと下に出てきます。
その中で

yet-another-related-posts-plugin/includes/template_thumnails.php (②)

ってファイルをクリックします。

ファイルの内容が画面に表示されますが

yarpp1-4

 

この中の

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

ってところを変更します。

ここでサムネイル画像をどう表示されるかが選ばれているわけですね。
デフォルトだと”元の大きな画像を圧縮して表示する”という形の指示になっています。

そこでアイキャッチ画像の小さくされた画像を使うために

yarpp1-5

 

上図のように

get_the_post_thumbnail( null, $dimensions[‘size’] );の「$dimensions[‘size’]」の部分を「’thumnail’」に変更する

とアイキャッチ画像を元にサムネイルが作成されるようになります。

 

具体的には

$post_thumbnail_html = get_the_post_thumbnail( null, ‘thumbnail’);

としてあげればOKです。

実際にどう変わるかというと

自分のサイトでも試してみましたが、変える前は

yarpp1-6

こんな風に関連記事が表示されていました。
元の画像を正方形になるように圧縮して表示しています。
だから縦横比がちょっと狂うんですよね。

で、変更後は

yarpp1-7

変わったのがお分かりいただけるでしょうか?

基本的にワードプレスのアイキャッチ画像って、元画像が横長だったりすると、作られた画像はその真ん中しか表示されませんよね。
“カエレバ”さんも、真ん中の”エレ”しか表示されていません(^^;
Google AdSenseのロゴも、左右が微妙に切れています。

ですからアイキャッチ画像を元にリンクの画像が作られたんだなってことがこれにて確認できました。

見た目は変更前の方がよいかもしれませんが、画像サイズがすごく大きくなっちゃうんですよね。
(元のファイルを小さくしておけばいいのかもしれませんが)

でもこれを変更したことによって

PageSpeed Insightsの評価はほぼ元通りまで回復

しましたよ(^^)/

ですからこれが悪さしていたことは間違いないかと思われます。

もしYARPPを導入して、サイトの表示速度が遅くなったとか、評価が落ちたという場合には、ぜひこちらを見直しすることをお勧めします。

ちなみに修正方法については以下のサイトを参考にさせていただきました。

 

YARPPでサムネイル画像が潰れる問題を解決 (経験値さん)

 

私の拙い説明で分かりにくい方は、ぜひ上記を参考にしてくださいね。

本日もありがとうございました。


→ この記事がお役に立てば、ブログランキングかSNSで応援クリックしていただけるととっても嬉しいです(^^)/

人気ブログランキングへ

コメントを残す

CAPTCHA


サブコンテンツ

スポンサー-楽天-

このページの先頭へ