WordPressのメディア・アップロードまわりのカスタマイズ

カテゴリー その他

この回では、「メディアまわりの運用ルール」を functions.php で整える話をまとめます。

  • SVG をアップロードできるようにする(+セキュリティ注意)
  • アップロードできる拡張子を「画像+PDF」に絞り込む
  • 不要な大きい画像サイズ(1536 / 2048 / medium_large)を生成しない

どれもやっていることはシンプルですが、サイトの安全性・ストレージ消費量・運用ルールに直結する部分です。

前提:どこに書くコード?

いつも通り、

  • 子テーマの functions.php に書く想定です。
  • パス例:wp-content/themes/your-child-theme/functions.php

親テーマに直接書くと、アップデートで消えるので避けたほうがいいです。

1. SVG のアップロードを許可する(要セキュリティ注意)

なぜデフォルトだとアップできないのか

SVG はただの「画像」ではなく、XMLベースで書かれたテキストファイルです。
中に JavaScript や外部参照などのコードも埋め込めてしまうため、

  • 悪意ある SVG をアップされると、XSS(クロスサイトスクリプティング)のリスクになる

というセキュリティ上の問題があります。
そのため、WordPress は標準では SVG を拒否します。

コード:SVG を許可する

// SVG のアップロードを許可(要セキュリティ注意)
add_filter( 'upload_mimes', function ( $mimes ) {
  $mimes['svg'] = 'image/svg+xml';
  return $mimes;
} );

注意点(ここ重要)

  • 信頼できる人だけが管理画面にログインできるサイト向けです。
  • 会員制サイトや、不特定多数がファイルをアップするサービスでは、
    SVGを許可すべきではありません。
  • SVG の中身をサーバー側でサニタイズする仕組み(例:アップロード時に自動で無害化)を入れるのが理想ですが、
    functions.php レベルだけでそこまでやるのは難しいです。

結論:

  • 社内用・クライアント管理者だけの運用 → 許可してもOKなケースが多い
  • 誰でもアップできるサービス    → かなり慎重に。基本は「許可しない」

2. アップロード可能な拡張子を「画像+PDF」に絞る

逆に、「むやみに何でもアップされると怖い」というケースもあります。

  • Word / Excel / PowerPoint のファイルはいらない
  • zip や exe などの実行ファイルは絶対NG
  • 画像と PDF だけにしてしまいたい

そんなときは、upload_mimes で**許可する拡張子のリストを「上書き」**するのが手っ取り早いです。

コード:画像+PDFだけ許可

// アップロード可能な拡張子を絞り込む(画像+PDFのみ)
add_filter( 'upload_mimes', function ( $mimes ) {
  $mimes = array(
    'jpg'  => 'image/jpeg',
    'jpeg' => 'image/jpeg',
    'png'  => 'image/png',
    'gif'  => 'image/gif',
    'pdf'  => 'application/pdf',
  );
  return $mimes;
} );

ここで SVG と組み合わせる場合

上のコードは $mimes を丸ごと上書きしているので、
別の upload_mimes フィルタで svg を追加しても消えてしまいます。

SVGも許可したいなら、最初から SVG を含めた1本のフィルタにまとめるほうが安全です。

// 画像+PDF+SVGのみ許可(SVGは要注意)
add_filter( 'upload_mimes', function ( $mimes ) {
  return array(
    'jpg'  => 'image/jpeg',
    'jpeg' => 'image/jpeg',
    'png'  => 'image/png',
    'gif'  => 'image/gif',
    'pdf'  => 'application/pdf',
    'svg'  => 'image/svg+xml', // SVGを許可(運用者を限定すること)
  );
} );

ポイント:

  • 同じフィルタで何をしているかを把握しておく
  • 「あとから別の場所で $mimes['svg'] = … だけ追加」は、
    他のフィルタの書き方次第で効いたり効かなかったりする

3. 不要なデフォルト画像サイズを生成しない

WordPress は、画像をアップロードすると、
オリジナルに加えていくつかのサイズを自動生成します。

  • thumbnail(150×150)
  • medium
  • large
  • medium_large
  • 1536×1536(大きめ)
  • 2048×2048(さらに大きめ)
  • テーマ/プラグインが追加したオリジナルサイズ

これが積み重なると、ストレージをかなり食います。

特に、

  • medium_large
  • 1536×1536
  • 2048×2048

は「そこまで大きい画像を使わないサイト」だと無駄になることが多いので、
生成しないようにカットしてしまうのも一案です。

コード:特定サイズを無効化する

// 不要なデフォルト画像サイズを生成しない
add_filter( 'intermediate_image_sizes_advanced', function ( $sizes ) {
  unset( $sizes['medium_large'] );
  unset( $sizes['1536x1536'] );
  unset( $sizes['2048x2048'] );
  return $sizes;
} );

効果

  • 以後アップロードする画像については、これらのサイズが生成されなくなります。
  • すでにアップしてある画像のファイルはそのままです(自動では消えません)。

どこまで削っていいのか?

  • mediumlarge まで消すと、
    テーマ側のレスポンシブ画像機能と噛み合わなくなることがあります。
  • まずは大きすぎる 1536 / 2048 から削り、
    それでもまだ容量が辛いようなら、サイト設計とセットで見直す感じです。

画像サイズ削減だけでなく、

  • そもそもアップロードする元画像サイズを小さくする
  • WebP / AVIF を活用する
  • 不要画像の一括削除・最適化ツールの導入

なども一緒に検討したほうが、効果は大きいです。

4. 実務での組み合わせ例

パターンA:会社サイト・管理者のみ運用

  • SVG:OK(管理者だけが使う前提)
  • 拡張子:画像+PDF+SVG
  • 画像サイズ:大きいものは削る
add_filter( 'upload_mimes', function ( $mimes ) {
  return array(
    'jpg'  => 'image/jpeg',
    'jpeg' => 'image/jpeg',
    'png'  => 'image/png',
    'gif'  => 'image/gif',
    'pdf'  => 'application/pdf',
    'svg'  => 'image/svg+xml',
  );
} );

add_filter( 'intermediate_image_sizes_advanced', function ( $sizes ) {
  unset( $sizes['medium_large'] );
  unset( $sizes['1536x1536'] );
  unset( $sizes['2048x2048'] );
  return $sizes;
} );

パターンB:会員制サービス・ユーザーもファイルをアップする

  • SVG:基本は禁止
  • 拡張子:用途に必要なものだけ(画像+PDF+必要なOfficeなど)
  • 画像サイズ:アクセス規模とストレージ料金と相談
add_filter( 'upload_mimes', function ( $mimes ) {
  return array(
    'jpg'  => 'image/jpeg',
    'jpeg' => 'image/jpeg',
    'png'  => 'image/png',
    'gif'  => 'image/gif',
    'pdf'  => 'application/pdf',
    // 必要であれば docx / xlsx などを追加
  );
} );

add_filter( 'intermediate_image_sizes_advanced', function ( $sizes ) {
  unset( $sizes['1536x1536'] );
  unset( $sizes['2048x2048'] );
  return $sizes;
} );

5. まとめ

今回のメディア編のポイントを整理すると:

項目目的注意点
SVG許可ロゴやアイコンをベクターで使いたいXSSリスク。運用者を絞ること
拡張子制限危険・不要なファイルのアップを防ぐ他の upload_mimes フィルタとの競合に注意
画像サイズ削減ストレージ節約・生成時間短縮どこまで削るかはテーマと相談

functions.php に数行足すだけで、「メディア運用のルール」が明確になるので、
クライアント案件でも最初に決めておくと後々楽になります。

その他の記事

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)