WordPress 画像挿入時に最大サイズに自動設定する

WordPress ブロックエディタで画像を挿入すると、通常は「最大サイズ」ではなく「大きいサイズ」に設定されます。このため、画像の解像度が少しぼやけてしまうことがあります。画像が元の画像サイズで鮮明に表示されるように、画像を挿入するときに最大サイズに自動的に設定することができます。

WordPress 画像を挿入するときに最大サイズに自動的に設定する方法

WordPressから画像をアップロードして挿入すると、大きいサイズ(Large)'として追加されます。

参考までに 解像度 オプションに '最大サイズ'が二つあります。これは翻訳の過程で L와 原寸大を等しく翻訳しながら韓国語版で上の図のように少し荒々しく表示される問題が現れています。この部分を英語版を見てみると、簡単に理解できます。

上の図に示すように、4つの解像度オプションがあります。

1. Thumbnail → サムネイル
2. Medium → 通常
3. ラージ→最大サイズ（？）
4. フルサイズ→最大サイズ

Lを '大きいサイズ'など他の表現に翻訳を変えなければユーザーの混乱が減るように見えます。この記事では混乱しないように大きいサイズ(Large)」、「最大サイズ（Full Size）'のように表記させていただきます。

※数年前 WordPress 翻訳が全体的に奇妙に変わって問題になったことがあります。ある翻訳者がスペルに合わない単語（例： パイジー、アップデート）に変えたり翻訳を変に変える風に翻訳エラーを修正するのにかなり時間がかかりましたが、まだ変な翻訳が残っています。😥

デフォルトで設定されているLargeサイズ設定のために画像がぼやけている場合は、画像をアップロードするときに強制的に「最大サイズ」に自動的に設定することを検討してください。

ここについて WordPress 開発者フォーラムの記事How to make image uploads default to full size?「では、次のようなコードを提示しています。

add_filter('pre_option_image_default_size', function($param) { return 'full'; });

上記のコード FTP / SFTPに接続して チャイルドテーマの関数ファイル（functions.php）に追加できます。

今すぐアップロードする画像は '最大サイズ（Full Size）'として挿入されます。 （既存に挿入した画像解像度の設定はチェックしてみると、既存の設定が維持されます。）

最大サイズ（Full Size）で画像解像度が設定されている場合...

1. 画像はより鮮明に表示されますが、
2. 画像サイズが増加すると、ページの読み込み速度に影響を与え、トラフィックを消費する可能性があります。

画像をアップロードする前にWEBP形式に変換して画像圧縮サイトでさらに圧縮すると、画像サイズを大幅に削減できます。私はこのようにして普通の画像サイズが50KB内外で、大きい場合でも100KBを超えていません。😄

• 無料のWebP変換プログラム - ハニービュー画像ビューア

画像解像度オプションに「最大サイズ」（フルサイズ）が表示されない場合

画像解像度オプションには「最大サイズ」（Large）まで表示され、「最大サイズ」（Full Size）が表示されない場合があります。

これは、その画像のサイズが「大きいサイズ」（Large）画像に設定されている最大幅/最大高さより小さいためです。

雪チョン » メディアで画像のサムネイルサイズを設定できます。 大きいサイズ(Large)の最大幅と最大高さがそれぞれ 1030pxの場合、アップロードされた画像のサイズが 「中サイズ」(Medium)より大きく 「大きいサイズ」(Large)より小さい場合 「最大サイズ」(Full Size) オプションは表示されません。

同様に、アップロードされた画像が「サムネイルサイズ」と「中間サイズ」の間にある場合、アップロード時に解像度オプションには「サムネイル」と「通常」のみが表示されます。

※参考までに メディア設定 ページにも翻訳エラーが目立ちますね。 '最大幅「は」最大幅'でなければなりません。さらに、サムネイル「これ」明日'に翻訳されたのも目に馴染みますね。そして '月と海に基づく「は誤解ではありませんが」月と年ベース'に変えれば、もう少し自然ではないかと思います。

最後に、

以上で WordPressで画像をアップロードするときに解像度を自動的に「最大サイズ」に設定する方法について説明しました。この方法では、後でアップロードされる画像に自動的に適用されると、既存にアップロードした画像の解像度設定は維持されます。

既存にアップロードした画像の解像度オプションも「最大サイズ」にまとめて設定する場合は、JavaScriptコードまたはPHPコードを使用して強制することを検討できます。

例 JavaScript コード:

<script>
document.addEventListener('DOMContentLoaded', function () {
	// 본문 영역 선택자: 사이트에 맞게 조정(ex. .entry-content, .post-content 등)
	const imgs = document.querySelectorAll('.entry-content img');

	imgs.forEach(function (img) {
		// data-src(lazyload) 대응
		const getCurrentSrc = () => img.getAttribute('data-src') || img.currentSrc || img.src || '';
		let src = getCurrentSrc();
		if (!src) return;

		// -123x456 패턴을 확실히 끝부분 확장자 앞에서만 제거
		const re = /-\d+x\d+(?=\.(?:jpe?g|png|gif|webp|avif)(?:[\?#]|$))/i;
		if (!re.test(src)) return;

		const candidate = src.replace(re, '');

		// 원본 파일이 실제로 존재하는지 사전 로드로 확인 후 교체
		const test = new Image();
		test.onload = function () {
			// lazyload 속성 처리
			if (img.hasAttribute('data-src')) {
				img.setAttribute('data-src', candidate);
				// 일부 lazylib는 data-srcset도 갖고 있음
				if (img.hasAttribute('data-srcset')) {
					img.removeAttribute('data-srcset');
				}
				// 이미 로드된 경우 src도 동기화
				img.src = candidate;
			} else {
				img.src = candidate;
			}

			// 브라우저가 작은 이미지로 대체 선택하지 않도록 srcset/sizes 제거
			img.removeAttribute('srcset');
			img.removeAttribute('sizes');

			// 스타일 충돌 방지(테마가 width 지정했을 때)
			img.style.maxWidth = '100%';
			img.style.height = 'auto';
		};
		test.onerror = function () {
			// 원본이 없으면 그대로 둠
		};
		test.src = candidate;
	});
});
</script>

上記のコードは、すべての環境で正常に動作するかどうかを十分にテストしませんでした。必要な上記のコードを参考に状況に合わせて変更してご利用ください。

参照

• WooCommerce 商品画像拡大ライトボックス機能を無効にする方法
• WordPressドットコムのプライベート/プレミアムプランにプラグインをインストールすることを許可＆ AdSense 広告を表示可能