YARPPで表示されるサムネイルが横長になって正方形で揃わない原因は、WordPressが自動的に作成しているサムネイルの中に正方形の画像がないことが原因です。対処方法の1つはプラグインを使って登録済みの画像に対して追加でサムネイル画像を作成することです。

YARPPのサムネイル画像が横長で正方形でない事象

yet-another-related-posts-plugin(YARPP)で、「表示設定」で”サムネイル”を選んでいる場合に、表示されるサムネイル画像が横長になって正方形で揃わない原因と対処方法についてご紹介します。

これがうまく表示されていない場合の例です。

左から4番目の画像だけ、横長になっています。

srcset属性の箇所が異なる

そしてこれがこの部分のHTMLです。(左から3番目と4番目の部分)

赤枠で囲った部分、imgタグのsrcset属性が違うことが分かります。

3番目の画像には120x120pxの画像がありますが、4番目には120x79pxしかありません。

ここに列挙されているのは、WordPressが保存している画像です。(メディアにアップロードしたタイミングでオリジナルとは別にサイズを変えて自動的に作成される画像)

imgタグのsrcset属性についてざっくりご説明します。(詳しく知りたい方は、以下のサイトなどをご参考にしてください。)

参考サイト:https://laboradian.com/brief-desc-srcset-sizes-for-wp/

srcset属性ですが、レスポンシブWebデザインで作られたサイトの場合は、画面の幅が変わった際に(メディアクエリーのブレークポイントで)、画像サイズを変更します。

srcset属性には、その際に使うべき画像の候補が設定してあります。

WordPressで自動的に作成されるサムネイル画像

WordPressは、ページを表示する際に自動的にHTMLを生成しますが、imgタグにはsizes属性を追加して画像の候補を列挙します。

そして、この候補の画像は、すでに作成済みの画像です。

この中に、正方形のサムネイルファイルが存在しないことがあり、その場合に代わりに他の横長の画像が表示されてしまうことがあるのですが、これが今回のYARPPのサムネイル画像に横長が画像が表示されてしまう問題となります。

つまり、正方形の画像が保存されていれば(ベストは120x120pxサイズ)今回の問題は解決します。

ところで、これらの画像候補が作成されるタイミングですが、、「メディア」でファイルをアップロードした際に自動的に作られます。

どういうサイズの画像が自動的に作られるかは、WordPressのシステム情報として設定済みなのですが、基本的には、管理画面の「設定ーメディア」で設定されている3種類が作られます。

加えて、プラグインなどが自動的にこれら種類を増やすことがあり、YARPPプラグインをインストールすると120x120pxが追加されます。

解決方法は登録済みの画像に正方形のサムネイルを追加する

今回の問題は、列挙する画像候補の中に正方形の画像がないことですから、サムネイルが存在しない画像に対してサムネイルを追加で作成すればいいことになります。

方法はいくつかありますが、プラグイン「Regenerate Thumbnails」を使うのがお手軽な方法です。

このプラグインを使うと、メディアに登録済みの画像を一括で処理することもできますし、画像を個別に処理することもできます。

メディアの一覧を表示すると、以下の様に”Regenarate Thumbnails”というリンクが使えるようになります。

クリックすると、以下のような画面になり「Regenarate Thumbnails」という青いボタンをクリックすると画像が生成されます。(存在しないサムネイルの横に「×」マークが表示されています。)

サムネイルを生成した後に、再度YARPPが表示する関連記事部分を表示すると、サムネイルが正方形で表示されているはずです。(※変わらない場合は、キャッシュが残っていることが原因の場合もありますので、強制再読み込み(スーパーリロード)してください。)

今後は別のプラグインを使うべき

以上、解決方法をご紹介していきましたが、YARPPは使い続けない方がいい問題があります。

実は、ガイドライン違反でWordPressの公式サイトからはダウンロードできなくなっています。(2018年10月)

いいプラグインだったので残念ですが、今後は他のプラグインを探して、早い段階で乗り換えるしかありません。