WordPressで画像のCDN配信URLをCloudinaryで自動生成して使う方法

WordPressの画像をCloudinaryから配信するには、公式プラグインに任せる方法と、Cloudinaryの「自動アップロード（オートアップロード）マッピング」を設定して、WordPressが出力する画像URLをフィルターでCloudinaryの配信URLに書き換える方法があります。この記事では後者を中心に、配信URLの組み立て方、srcset まで含めた自動生成の実装、変換指定の悪用を防ぐ設定、確認方法を説明します。プラグインの機能や画面の詳しい使い方ではなく、「URLがどう作られ、どう差し替わるか」を理解して自分で制御したい人向けの内容です。

CloudinaryのURLの構造を理解する

Cloudinaryの画像配信URLは、おおむね次の形をしています。

https://res.cloudinary.com/<cloud_name>/image/upload/<変換>/<公開ID>.<拡張子>

• <cloud_name>：アカウント（製品環境）ごとの名前
• image/upload：リソースの種類と配信タイプ。Cloudinaryに保存済みの画像は upload、外部URLの画像をその場で取得する場合は fetch を使います
• <変換>：w_800,c_limit,f_auto,q_auto のように、カンマ区切りで並べた変換指定
• <公開ID>：Cloudinary上の画像の識別子（フォルダを含むパス）

よく使う変換指定は次のとおりです。

• w_800：幅800px
• c_limit：元画像より大きくしない（c_fill は指定サイズに切り抜き）
• f_auto：ブラウザが対応する形式（WebPやAVIFなど）を自動で選ぶ
• q_auto：画質を自動で調整する
• g_auto：切り抜き時に被写体を推定して中心を決める

URLを変えるだけで別サイズ・別形式の画像が得られるので、WordPress側で多数のサムネイルを作らなくても、表示幅に合った画像を配信できます。

どの方式でURLを作るか

WordPressの画像をCloudinaryに載せる方式は主に3つあります。

1. 公式プラグイン：Cloudinary社が公開しているWordPressプラグインを使い、メディアライブラリとの同期やURLの書き換えを任せる。設定画面で済むため手軽ですが、同期の範囲や機能は版によって変わります。
2. 自動アップロードマッピング：Cloudinaryの設定で「フォルダ名」と「元画像のURLの先頭部分」を対応付けておくと、初めてアクセスされた画像をCloudinaryが自動で取得・保存します。WordPress側はURLを書き換えるだけです。
3. fetch：image/fetch/<変換>/<元画像のURL> の形で、外部URLの画像をその場で取得して変換します。手軽ですが、アカウントの設定で取得を許可するドメインを制限する必要があります。

この記事では、URLが短く、WordPressのパス構造をそのまま使える2の方式で実装します。なお、プラグインの機能と、プラグインを使ったメディア管理の詳細はこの記事では扱いません。

準備：オートアップロードマッピングの設定

作業はステージング環境で行い、事前にバックアップを取っておきます。

1. Cloudinaryの管理画面（Console）で、アップロード関連の設定にある自動アップロードのマッピング項目を開きます（項目名や場所は変更されることがあります。2026年10月現在の画面で確認してください）
2. フォルダ名に wp、URLの先頭に https://example.com/wp-content/uploads/ を指定して保存します
3. ブラウザで https://res.cloudinary.com/<cloud_name>/image/upload/wp/2026/10/photo.jpg を開き、元画像が表示されるか確認します。初回は取得のため少し時間がかかります

この時点で、WordPressのuploads以下の画像は、wp/ に続けてパスを付けるだけでCloudinaryから配信できる状態です。

WordPressでURLを自動生成する

設定値は wp-config.php に定数で置き、コードは独自プラグインかmu-pluginに書きます。テーマの functions.php に書くと、テーマの変更や更新で消えるためです。

// wp-config.php
define( 'MY_CLD_CLOUD', 'your-cloud-name' );
define( 'MY_CLD_FOLDER', 'wp' );

<?php
/**
 * Plugin Name: My Cloudinary URL
 */
defined( 'ABSPATH' ) || exit;

function mycld_url( $url, $width = 0 ) {
	if ( ! defined( 'MY_CLD_CLOUD' ) || is_admin() ) {
		return $url;
	}
	$base = trailingslashit( wp_get_upload_dir()['baseurl'] );
	if ( 0 !== strpos( $url, $base ) ) {
		return $url; // uploads 以外の画像はそのまま
	}
	$path = substr( strtok( $url, '?' ), strlen( $base ) );
	$t    = array( 'f_auto', 'q_auto' );
	if ( $width > 0 ) {
		array_unshift( $t, 'w_' . (int) $width, 'c_limit' );
	}
	return sprintf(
		'https://res.cloudinary.com/%s/image/upload/%s/%s/%s',
		rawurlencode( MY_CLD_CLOUD ),
		implode( ',', $t ),
		MY_CLD_FOLDER,
		$path
	);
}

add_filter( 'wp_get_attachment_image_src', function ( $image ) {
	if ( is_array( $image ) && ! empty( $image[0] ) ) {
		$image[0] = mycld_url( $image[0], (int) $image[1] );
	}
	return $image;
} );

add_filter( 'wp_calculate_image_srcset', function ( $sources ) {
	foreach ( $sources as $key => $source ) {
		if ( 'w' === $source['descriptor'] ) {
			$sources[ $key ]['url'] = mycld_url( $source['url'], (int) $source['value'] );
		}
	}
	return $sources;
} );

wp_get_attachment_image_src はアイキャッチなど wp_get_attachment_image() を通る画像の src に、wp_calculate_image_srcset は srcset の各候補に効きます。srcset の幅ごとに w_ を付けているため、ブラウザが選んだ幅の画像がCloudinaryで生成されます。

本文中の画像は保存済みのHTMLから出力されるため、WordPress 6.0以降なら wp_content_img_tag フィルターでタグごとに src を書き換えます。srcset は本文の画像でも上の wp_calculate_image_srcset が使われるので、二重に処理しないよう注意します。

中間サイズのファイルをどう扱うか

上のコードでは、WordPressが作った中間サイズ（例: photo-300x200.jpg）もそのままCloudinaryに取得させています。動作はしますが、同じ画像の複数サイズがCloudinary上に保存されます。保存容量を抑えたい場合は、中間サイズのファイル名を元画像のファイル名に戻してから w_ で縮小させる方法があります。その場合、c_fill などで切り抜きのサイズ（サムネイルの正方形など）も再現する必要があるため、まずは上の形で始め、運用しながら調整するのが無難です。

変換指定の悪用を防ぐ

URLの変換部分は誰でも書き換えられるため、第三者が多数の組み合わせでアクセスすると、そのたびに新しい変換が発生します。変換回数や保存量が利用枠に影響するため、公開前に次の対策を検討します。

• 厳格な変換（Strict transformations）：事前に許可した変換以外を拒否する設定です。有効にすると、許可していない指定のURLは表示されなくなります
• 名前付き変換：t_card のように名前を付けた変換を登録し、URLではその名前だけを使う
• fetch方式の制限：fetchを使う場合は、取得を許可するドメインを自分のサイトに絞る

設定項目の名前と既定値はアカウントの作成時期やプランで異なることがあるため、Cloudinaryのドキュメントで確認してください。料金や利用枠もここでは扱いません。

確認とトラブルの切り分け

ブラウザの開発者ツールのネットワークタブで、画像のリクエストを順に確認します。

1. 画像のURLが res.cloudinary.com になっているか
2. 対応ブラウザで Content-Type が image/webp や image/avif になっているか（f_auto の効果）
3. srcset の候補ごとに幅の異なる画像が返っているか

表示されない場合は、生成されたURLを直接開いてエラーを見ます。404なら、マッピングのURLの先頭部分とWordPressのuploadsのURL（http と https、www の有無）が一致しているかを確認します。サイトがBasic認証などで保護されたステージング環境だと、Cloudinaryが元画像を取得できないこともあります。

同じファイル名で画像を差し替えた場合は、Cloudinary側に古い画像が残ります。管理画面やAPIで削除・再取得するか、別のファイル名でアップロードし直してください。また、CDN書き換え機能のある画像最適化・キャッシュ系プラグインと併用すると、URLが二重に変換されることがあるため、書き換えはどちらか一方に任せます。

まとめ

• Cloudinaryの配信URLは「cloud_name / 配信タイプ / 変換 / 公開ID」で構成され、f_auto・q_auto・w_ などの変換をURLで指定します。
• 自動アップロードマッピングを使えば、WordPressのuploads以下のパスをそのまま使って配信URLを作れます。
• wp_get_attachment_image_src・wp_calculate_image_srcset・wp_content_img_tag でURLを書き換え、設定値は wp-config.php の定数で管理します。
• 厳格な変換や名前付き変換で、第三者による変換の乱用を防ぎます。
• 管理画面の項目や仕様は変わることがあるため、公式ドキュメントで確認し、ステージングで表示を確かめてから本番に反映してください。

• WordPressのメディアをS3にオフロードする設定方法
• WordPressのレスポンシブ画像とsizes属性を調整する方法