ブログ初心者・Web制作の情報サイト
サムネイル画像「以外の」自動生成を停止する – WordPress

サムネイル画像「以外の」自動生成を停止する – WordPress

WordPressには画像アップロードの際に自動で複数のレスポンシブ画像を生成する機能があります。

レスポンシブ画像は記事のサムネイル画像表には便利なのですが記事中の画像にはあまり活用されず、使用されても表示する画像のサイズが変動するというデメリットがあります。

この記事ではWordPressでサムネイル画像だけ自動生成し、それ以外の画像自動生成を停止する方法を紹介します。サムネイル画像「以外の」自動生成を停止する方法です。

レスポンシブ画像を無効にして表示する画像サイズを指定したい場合に役立つでしょう。

サムネイル画像以外の自動生成を停止する

サムネイル画像とその他の画像は違いを判断できないので、画像のアップロード場所を変えることで画像の自動生成を使い分けます。

具体的には、投稿・固定ページの編集画面上でアップロードした画像は自動生成せず、メディアライブラリからのアップロード画像は自動生成を行います。

コード

下記コードをfunctions.phpに追加してください。

functions.phpの編集方法と注意点

//投稿編集ページの場合は画像の自動生成を停止する
function disable_responsive_images($new_sizes)
{
  if (isset($_REQUEST['post'])) {
    unset($new_sizes['thumbnail']);
    unset($new_sizes['medium']);
    unset($new_sizes['large']);
    unset($new_sizes['medium_large']);
    unset($new_sizes['1536x1536']);
    unset($new_sizes['2048x2048']);
  }
  return $new_sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_responsive_images');

このコードが動くのは投稿・固定ページの編集画面です。メディアライブラリからアップロードするといつも通り画像が自動生成されます。

使い方

使い方はコードを保存した後、投稿・固定ページの編集画面で画像をドロップしてアップロードします。

画像をドロップしてアップロード

編集画面からアップロードした画像はアイキャッチ画像を含め自動生成されません。

アイキャッチ画像(サムネイル画像)を自動生成したい場合はメディアライブラリからアップロードします。

画像アップロード後FTPソフトで以下のディレクトリを確認してみましょう。自動生成画像がないはずです。

/wp-content/uploads

サムネイル画像だけ自動生成する

サムネイル画像を自動生成したいときはメディアライブラリを開いて画像をアップロードします。

画面右の設定メニューから「アイキャッチ画像を設定」をクリックしてメディアライブラリを開き画像をアップロードしてください。

直接ドロップするとレスポンシブ画像が自動生成されません。

サムネイル画像だけ自動生成する

メディアライブラリから画像をアップロードしてください。レスポンシブ画像が自動生成されます。

アイキャッチ画像のアップロード

多少面倒ですが、こうすることでレスポンシブ画像の生成・停止を使い分けできるようになります。

画像の自動生成が停止できないとき

テーマやプラグインの中には自動生成画像を追加しているものがあります。上のコードではWordPressの自動生成のみを停止しているので、テーマやプラグインが追加した自動生成は無効にできません。

プラグインに関しては停止することで対応できます。画像系のプラグインが関係していることが多いです。

テーマに関しては個別に対応するのが難しいですが、ここではCocoonテーマの例を紹介します。

Cocoonの画像自動生成を停止させる

Cocoonは複数種類の画像を自動で生成します。

以下はWordPressとCocoonの自動生成を停止させる(編集画面で画像をアップロードした場合のみ停止させる)コードです。functions.phpに追加してください。

//投稿編集ページの場合は画像の自動生成を停止する
function disable_responsive_images($new_sizes)
{
  if (isset($_REQUEST['post'])) {
    //WordPressの自動生成を停止
    unset($new_sizes['thumbnail']);
    unset($new_sizes['medium']);
    unset($new_sizes['large']);
    unset($new_sizes['medium_large']);
    unset($new_sizes['1536x1536']);
    unset($new_sizes['2048x2048']);
    //Cocoonの自動生成を停止
    unset($new_sizes[THUMB100]);
    unset($new_sizes[THUMB150]);
    unset($new_sizes[THUMB120]);
    unset($new_sizes[THUMB160]);
    unset($new_sizes[THUMB320]);
    unset($new_sizes[get_vertical_card_2_thumbnail_size()]);
    unset($new_sizes[get_vertical_card_3_thumbnail_size()]);
    unset($new_sizes[get_tile_card_2_thumbnail_size()]);
    unset($new_sizes[get_tile_card_3_thumbnail_size()]);
  }
  return $new_sizes;
}
add_filter('intermediate_image_sizes_advanced', 'disable_responsive_images');
Cocoonが自動生成する9つの画像サイズについての解説
Cocoonを使っているといつの間にか知らない画像が生成されていて驚いた人はいないでしょうか? この記事ではCocoonが自動生成する画像のサイズ・自動生成された画像使の使用用途・自動生成の停止方法について説明します。

最後に

WordPressでサムネイル画像だけ自動生成し、それ以外の画像自動生成を停止する方法を紹介しました。

レスポンシブ画像は読込み容量削減に便利ですが、表示される画像のサイズを固定できないデメリットがあります。自動詞生成される画像を適切に管理すれば綺麗な画像を表示できるでしょう。