ブログ初心者・Web制作の情報サイト
Regenerate Thumbnailsの使い方(サムネイル再生成)

Regenerate Thumbnailsの使い方(サムネイル再生成)

WordPressのテーマを変更して記事の並びが崩れた、自動生成画像を整理したら記事の画像が表示されなくなった。このような場合にはサムネイル画像を再生成してしまえば簡単に問題を解決できます。

この記事ではアップロードした画像を再生成できるWordPressのプラグイン「Regenerate Thumbnails」の使い方を紹介します。

Regenerate Thumbnails

Regenerate Thumbnailsプラグインの詳細

Regenerate Thumbnailsはサムネイルに限らずWordPressにアップロードした画像をリサイズし再生成してくれるプラグインです。

Regenerate Thumbnailsはシンプルなプラグインで画像再生成以外の余計な機能を持っていないので使い方が簡単です。ボタンをワンクリックして後は待つだけ、後は自動で完了します。

すべての画像を再生成したいアイキャッチ画像のみ再生成したいという人におすすめですが特定の画像を指定して再生成も可能です。

Regenerate Thumbnailsプラグインは一度使えばそれで完了する場合が多いので使うときだけインストールすればOK です。WordPressが重くならずセキュリティ面の心配もないのでプラグイン使用が負担にならない利点があります。

Regenerate Thumbnails

設定画面の日本語訳

Regenerate Thumbnailsの使い方は難しくありませんが設定画面は英語だらけです。これだけで敬遠する人もいるかもしれません。そこでRegenerate Thumbnails設定画面の必要部分を日本語に訳してみました。

管理画面メニューのツールにRegenerate Thumbnailsが追加される

まずはRegenerate Thumbnailsをインストールしましょう。有効化すると管理画面メニューのツールにRegenerate Thumbnailsが追加されます。

Regenerate Thumbnailsの設定画面

Regenerate Thumbnailsの管理画面

以下日本語訳です。

Regenerate Thumbnailsの説明文

Regenerate Thumbnailsの説明

WordPressテーマの変更やSettings > Mediaでサムネイルを変更したとき以前にメディアライブラリにアップロードした画像が新しい画像サイズに合わずサムネイルが見つからない状態になるでしょう。このツールはすべての画像に対してこれら見つからないサムネイルを作成することができます。

特定の画像のみ再生成する場合、メディアライブラリを開き「サムネイル再生成」のリンクもしくはボタンを押します。複数の画像を指定して再生成する場合はリストビューであることを確認し、1つ以上の画像を選択後ドロップダウンからアクションを選択します。

複数の指定画像を一括で再生成する
複数の指定画像を一括で再生成する

画像再生成時の設定

Regenerate Thumbnails:実行オプション

上:正しいサイズのサムネイルが存在する場合は再生成をスキップする(速い)

下:サーバー容量確保のために使われていない古いサムネイルを削除します。これは投稿や固定ページの画像を破損させる可能性があります。

サムネイル生成ボタン

Regenerate Thumbnails:実行ボタン

上:“個数” すべての添付ファイルについてサムネイルを再生成する

下:“個数” のアイキャッチ画像のみサムネイルを再生成する

生成するサムネイルサイズの情報欄

現在設定されているすべての自動生成サムネイルサイズ

④現在設定されているすべてのサムネイルサイズ(画像アップロード時に自動生成される画像サイズ)

⑤は自動生成で作成されるサムネイルサイズのリストです。上の画像では11種類のサムネイルが表示されていますが、上4つはサイズが0x0で無効になっています。

この場合実際に生成される可能性があるサイズは7種類です。(下5つはCocoonテーマによって予約されたサイズ、Retina対応の機能を使用しています)

サムネイルサイズの後に (proportionally resized to fit inside dimensions)とか(cropped to fit)と書かれています。これは生成される画像が「可変でのサイズ調整」なのか「トリミングでの切り抜き」なのかを表すのですがあまり気にしなくていいです。

Regenerate Thumbnailsの使い方

Regenerate Thumbnails使用前にバックアップを取っておくことをおすすめします。

Regenerate Thumbnailsの実行

Regenerate Thumbnailsの使い方は③の開始ボタンを押すだけです。

アップロードしたすべての画像を再生成する場合は
Regenerate Thumbnails For All “数” Attachments

投稿等に使用したアイキャッチ画像のみ再生成する場合は
Regenerate Thumbnails For The “数” Featured Images Only

を押します。

②の Delete thumbnail files for~ にチェックを入れると不要な過去の自動生成画像を削除してくれます。

サムネイルが既に存在する場合スキップできる Skip regenerating existing correctly~ は私の環境(WordPress 5.4.2・Cocoon バージョン:2.1.9.1)では機能していませんでした。正しいサイズが存在していてもすべて再生成されます。

Regenerate Thumbnails実行中のプログレスバー

生成開始後はプログレスバーが表示されるので完了するまで待ちます。ファイルのが多い場合は時間がかかるかもしれません。

画像が生成できないとき

Regenerate Thumbnailsは安定しており評価も高いプラグインですが環境によっては画像が生成されない、何も変わらずリサイズされないといったエラーが起こる場合もあります。ここではRegenerate Thumbnailsで画像が生成されない場合の対処法を紹介します。

サムネイルが生成できない原因として考えられるのは次の事柄です。

  • WordPressの画像自動生成機能をOFFにしている
  • 元画像のサイズが小さく再生成できない

WordPressの画像自動生成を停止している

WordPressの画像自動生成を停止・無効にしている場合は画像が再生成されません。

Regenerate ThumbnailsプラグインはWordPressの画像自動生成設定を使用して画像を再生成します。このためWordPressの設定で画像の自動生成を停止・無効にしている場合はRegenerate Thumbnailsの再生成も行われなくなります。

画像が再生成されない場合はWordPressの画像自動生成設定を見直してみてください。

画像アップロード時の自動生成を追加・停止する – WordPress
WordPressには画像アップロード時にリサイズを行い複数の画像を生成してくれる自動生成機能があります。この記事ではWordPressでアップロード画像の自動生成を追加または停止し自分で管理する方法を紹介します。

元画像のサイズが小さく再生成できない

WordPressの自動生成でも同じですがアップロードした画像よりも大きいサイズを生成することはありません。元画像のサイズが小すぎる場合画像が再生成できないので注意してください。

WordPressではアップロードした画像が sample.jpg(1280×720)だとすると、これを元にして sample-300×300.jpgや sample-150×150.jpgなど1280×720以下の画像が作成されます。

WordPressのデフォルト設定で画像をアップロードしたときに自動生成される画像の横幅は次の通りです。

WordPressのデフォルト設定で自動生成される画像サイズ

  • 150px
  • 300px
  • 1024px
  • 768px
  • 1536px
  • 2048px
  • 2560px

sample.jpg(1280×720)をアップロードした場合は横幅1280px以下の画像が生成されることになります。1536px・2048px・2560pxの3種類は生成されません。

自動生成される画像の例

  • sample-150×150.jpg
  • sample-300×300.jpg
  • sample-1024×683.jpg
  • sample-768×512.jpg

サムネイルに使用するアイキャッチ画像は高解像にしておく方が今後役に立つかもしれません。

今後のために解像度の高いアイキャッチ画像をアップロードしよう

最後に

サムネイルを再生成するプラグイン Regenerate Thumbnailsの使い方を紹介しました。

サムネイル画像の再生成はWordPressのテーマを変更時だけでなくRetinaのような画素密度が高いディスプレイに対応する際にも必要になります。その際にもRegenerate Thumbnailsが役に立ちますよ。

CocoonでRetinaに対応したら画像のぼやけが改善した話
PCでは綺麗に表示されていてもスマートフォンでサイトを見ると画像が粗くぼやけて見えてしまうことがよくあります。この記事ではその対策としてCocoonでRetinaに対応する方法を紹介します。