*

YARPPの関連記事サムネイルのアスペクト比(縦横比)がおかしい時の修正方法

公開日: : WordPress

YARPP(Yet Another Related Posts Plugin)は有名なプラグインなので WordPress でブログやサイトを運営している人なら目にした事もあるでしょう。関連記事を表示してページ回遊を促すプラグインです。

便利なプラグインなので当ブログでも導入していますが、プラグインをアップデートした所とある問題に直面しました。上の画像のように、関連記事のサムネイルのアスペクト比がおかしくなって縦長でギュッと圧縮されたような状態になっています。それも全てのサムネイルではなく一部のみです。

原因

何故そのような事が起こっているのか原因を探ってみました。正しいサムネイルの場合は指定したサイズで表示されていますが、アスペクト比がおかしいサムネイルはフルサイズの画像をギュッと圧縮している為縦長の画像になっている事がわかりました。

続いて、正しいサムネイルの時と縦長のサムネイルの時で何が違うのか調べてみました。

縦長のサムネイルが表示されている画像のアップロードフォルダを FFFTP で見ると上図のような状態です。WordPress では画像をアップロードすると自動でサムネイルが生成されます。通常サムネイルは 150px × 150px です。ですが YARPP ではサムネイルを 120px × 120px で表示している為、120px 四方の画像が存在しない事が原因でフルサイズの画像が出力されてしまっている事が原因でした。

対処方法

つまり、120px 四方の画像を作ってあげれば解決するという事です。

WordPress の外観設定からテーマの為の関数 functions.php を開きましょう。

add_theme_support('post-thumbnails');
add_image_size('thumb120',120,120,true);

サムネイルを使っているなら「add_theme_support('post-thumbnails');」という記述がある筈なので、その下に「add_image_size('thumb120',120,120,true);」を追加します。120px 四方のサムネイルを追加しますという意味です。しかしこれだけではこれからアップする画像については 120px のサムネイルが生成されますが、アップ済みの画像については生成されません。

Regenerate Thumbnails」というプラグインを使えばアップ済みの画像も追加したサムネイルサイズの画像を一括生成してくれます。

新たなプラグインをインストール、できればしたくない。面倒くさい。そう思いました?私もそうです。新たなサイズのサムネイルを一括生成すれば、今までにアップロードした画像枚数分だけ新しい画像ができるという事です。その分サーバー容量も圧迫する事になります。

別の視点から考えてみましょう。デフォルトサイズの 150px のサムネイルは既にあります。150px のサムネイルを 120px に縮めて表示するのはどうでしょう。ページを軽くする観点からは数KB無駄ですが、既にある画像を活用できます。

その為には YARPP のテンプレートを編集します。サーバー上で「wp-content/plugins/yet-another-related-posts-plugin/includes」の場所に「template_thumbnails.php」というファイルがあります。これがテンプレートです。編集する前に編集前のファイルをコピーして残しておきましょう。もし不具合が発生した時に編集前のファイルをアップロードしたらすぐに元に戻す事ができます。

サムネイルを出力する部分はそのファイルの38行目あたりです。

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

これがデフォルトの記述ですが、これを以下のように変更します。

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

「$dimensions['size']」が「thumbnail」に変わりました。thumbnail を指定する事によりデフォルトサイズの 150px のサムネイルを出力せよという指定になります。

Before

After

これで縦長サムネイルを正方形に整形する事ができました。

補足

functions.php にて add_image_size で100pxや110pxのサムネイルを生成している場合は、この画像を拡大表示する方法も一つの手です。10px 程度拡大しても劇的に画像が荒くはなりませんし問題ないでしょう。

その場合は

$post_thumbnail_html = get_the_post_thumbnail(null,'任意の名前');

という風にします。任意の名前は

add_image_size('この部分',110,110,true);

この部分で示したサムネイルサイズの識別子です。

  • Pocket

おすすめトピックス

関連記事

WordPressのパーマリンクを連番にしたいがあるカテゴリだけ除外したい

WordPress のパーマリンクを連番にする方法は既に様々なブログで取り上げられておりここでは割愛しますが、それに加えてやりたい事があったのでメモします。 それは基本的にはパーマリンクは連番にするが、あるカテゴリの投稿 […]

アイキャッチ画像を自動で投稿に表示
WordPressで中サイズ画像を取得しアイキャッチ画像を自動で投稿に表示する

WordPress でブログやサイトをやっている人なら、冒頭にアイキャッチ画像を入れる人も多いと思います。今このブログ記事でも上のような画像の事です。 通常 WordPress ではまず投稿のアイキャッチ画像の設定画面で […]

全記事一覧
WordPressで全記事一覧と投稿日を一緒に出力する方法

WordPress を使う前は Movable Type や Serene Bach を使用しておりましたが、その時は対して苦労しなかった「全記事一覧と投稿日を一緒に出力する」事が WordPress では結構実現に手間 […]

常時SSL
wpXが無料でWordPressの常時SSL機能を提供開始!簡単にhttps化できちゃいます

SSL という言葉は馴染みがないかもしれませんが、https という言葉なら見たことがあるでしょう。ウェブサイトの URL の始まりは「http://」か「https://」のどちらかです。普通のサイトなら前者の方が多い […]

ダウンロードモニター
WordPressのDownload Monitorでショートコードを使わずにダウンロード数をページに表示する

WordPress のプラグインに「Download Monitor(ダウンロードモニター)」というファイルのダウンロード数をカウントできるものがあります。登録したファイルがどれだけダウンロードされたのか、いつダウンロー […]

WordPressでリンク元によってデザインを変える、phpでリンク先に変数を送る方法

ちょっと変わったケースの依頼で1つの WordPress に2つのサイトを共存させ、一部ページは2つのサイトで共通に使いたいというものがありました。ようするに1つの WordPress 管理画面で2つのサイトを管理したい […]

著者について

名前:Azell
作曲したり風景写真撮ったりWeb制作したりする人です。 好きな事を楽しくブログに綴れていけたらと思います。

フォローはこちら

       

       
長浜市の長浜城近くの高級ケーキ屋「パティスリー Ichigo IchiE(イチゴイチエ)」

滋賀県長浜市にあるケーキ屋「パティスリー Ichigo Ich

岐阜県輪之内町の「寅ちゃんラーメン」昭和レトロ全開な創作ラーメン屋さん

お店の外観と看板が強烈な岐阜県輪之内町の「寅ちゃんラーメン」へ

和とイタリアンが融合、長浜市の「Chobitto菜」でパスタランチ

滋賀県長浜市にあるイタリアンレストラン「Chobitto菜(ち

滋賀と京都の境目にある花の美しい庭園「ガーデンミュージアム比叡」

ゴールデンウィークに滋賀と京都の境目にあるガーデンミュージアム

濃厚なカスタードが魅力!東京限定土産「ベイカーズカスタード」が上品で美味しいのでレビューします

羽田空港で東京土産を物色していた時、とても気になる商品を見つけ

→もっと見る