【wordpress】サムネイル画像の高さをプラグインを使って揃える方法

wordpress

WordPressで運営しているブログで、インデックスページ(トップページ)などに表示される記事一覧。

二段組みで記事一覧を表示させるようにしたところ、記事一覧で表示されるアイキャッチ用のサムネイル画像が左右で高さが揃っておらず、見た目がガタガタしてしまいました。

これだと美しくないだろう、ということで、WordPressのプラグインを使ってサムネイル画像の最適化を行い、高さが揃うようにしました。

導入したプラグインは、

Regenerate Thumbnails

というプラグインになります。

環境

プラグイン導入時のPHPやWordPressのバージョンは以下となります。

項目ツールとバージョン
PHPバージョンPHP 7.4
WordPressバージョンWordPress 5.5.3
WordPressテーマCocoon 2.2.4.5

テーマはCocoonを使用しています。

テーマによっては、別途プラグインを使わなくてもサムネイル画像のサイズをうまく調整してくれるものもあるようですので、まずは使っているテーマがどこまで対応しているか調べてみるとよいと思います。

Cocoonテーマは無料なのに高機能で素晴らしいテーマなのですが、ここは対応していなかったので、今回のプラグイン導入で対処しました。

「Regenerate Thumbnails」をインストールする

WordPressのダッシュボードから、「Regenerate Thumbnails」プラグインをインストール/有効化します。

プラグインの導入方法を忘れてしまった、という方は↓こちらの記事を参考にしてみてください。

検索キーワードに「Regenerate Thumbnails」と入力すれば一番上に出てくると思います。

「Regenerate Thumbnails」を使って画像を一括最適化

プラグインをインストールしたら、以下の手順で画像を一括処理します。

操作自体は簡単ですぐに終わりますが、プラグインによるリサイズ処理自体には画像の数に応じて長時間掛かる場合があります。

まず、ダッシュボードの左メニューから「ツール」→「Regenerate Thumbnails」をクリックします。

すると、下の画像のようなページが表示されます。

ここで、「すでに正しいサイズで存在するサムネイルの再生成をしない(高速)。」のチェックを入れた上で、「Regenerate Thumbnails For All XX Attachments」ボタンをクリックしてください。

サムネイル画像のリサイズが開始されます。

画面上部のプログレスバーが一番右端(100%)に到達するまで待ちましょう。

処理が完了すると、以下のような画面に切り替わります。

「0.1分で完了しました。」となっていますが、これは「嘘つけ!」という感じで、わたしの場合は約5分ほどかかりました。

さて、これでトップページの記事一覧を確認してみると。

綺麗に左右の画像の高さが揃いました。

注意事項

わたしの場合は、処理した画像数385ファイルで約5分ほどで処理が完了しました。

画像のサイズや、もしかしたらNW環境などにも影響されるかもしれませんが、長く運営を続けているブログであると画像数が膨大になっているかと思うので、数十分から、下手したら1時間以上かかる場合もあるかもしれません。

わたしは特に問題なく終わりましたが、画像数が多くて処理に時間が掛かる場合は、途中でなんらかのエラーが発生した時に画像が壊れてしまったりした時に備え、念のためバックアップを取っておくとよいでしょう。

コメント

タイトルとURLをコピーしました