WordPressでサイトを作ると、テキストの次に扱うことが多いのが画像や動画などのメディアです。
しかし実務になると、こんなモヤモヤや困りごとに直面しませんか?
「画像をアップしたはずなのに記事で表示されない……どう直せばいいの?」
「メディアが増えすぎて管理が大変。どこから手を付ければいい?」
「サイトが遅い気がする。画像のせいかな? 最適化ってどうやるの?」
「FTPで一括アップしたのにライブラリに出てこない……登録方法がわからない」
「古い画像を消したら記事の表示が崩れないか心配で削除できない」
「写真に含まれる位置情報(GPS)って、そのまま公開していいの?」
「ひとつでも当てはまる」ならこのガイドはあなたのためのものです。
本記事では、初心者にもわかりやすく、メディアの基本操作から整理術・最適化・トラブル対応・運用ルールまでを実務目線で丁寧に解説します。
具体的には以下のような内容を順を追ってカバーします:
- メディアライブラリの基本(アップロード/挿入/編集の流れ)
- 対応ファイルやサーバー制限の理解と対処法
- 個別/一括アップロード、FTP→ライブラリ反映の手順
- 画像のメタ情報(alt・キャプション等)や簡易編集のコツ
- 検索・整理術、命名ルール、プラグインを使った効率化
- 表示速度改善(圧縮・WebP・CDN・Lazy Loading)と実践ワークフロー
- トラブルシューティング(表示されない/サムネイル問題/権限・ログの確認方法)
- 定期メンテナンス、バックアップ方針、誤削除を防ぐ運用ルール
- 高度運用(EXIF/IPTCの扱い、カスタムメタの追加、写真アーカイブ公開例)
最初から最後まで読み進めれば、「迷ったときに何を確認するか」「すぐ使える手順」「長く運用するためのルール」が手に入ります。
まずは基本操作と“まずやるべきチェック”を押さえて、次に整理・最適化・トラブル対処へと進んでいきましょう。📸✨
概要とアクセス
メディアライブラリの役割と基本機能(定義・何ができるか)
メディアライブラリは、画像・動画・音声・ドキュメントなどサイトで使うファイルを一元管理するための機能です。
初心者でも直感的に扱えるように設計されており、主に以下を行えます。
- アップロード:単体/複数ファイルを追加できる。
- 管理(メタ情報の編集):タイトル、代替テキスト(alt)、キャプション、説明を編集してSEOやアクセシビリティに活かせる。
- 挿入:投稿や固定ページにファイルを挿入(表示)できる。
- 簡易編集:画像のトリミング、回転、リサイズなどの軽微な加工が可能。
- 検索・フィルタ:種類・日付・キーワードで目的のファイルを見つけられる。
ポイント:
- 代替テキスト(alt)はSEOとアクセシビリティに重要。画像をアップするたびに必ず設定する習慣をつけると良いです。✅
- メディアライブラリはファイルの“保管庫”であり、表示は投稿側で制御する(ファイル自体を削除すると、投稿内の画像が表示されなくなる点に注意)。⚠️
ライブラリの画面への行き方と表示形式(グリッド/リスト)
WordPress管理画面から簡単にアクセスできます。
アクセス手順(管理画面)
- 管理画面のメニューで「メディア」→「ライブラリ」をクリック。
- 画面上部の「新規追加」ボタンでファイルを追加可能。
- 投稿編集画面でも「画像を追加/メディアを挿入」からライブラリへアクセスできます。
表示形式の違い
- グリッド表示:サムネイル中心。視覚的に探したいときに便利。
- 長所:画像を素早く把握できる。
- 短所:ファイル詳細(代替テキスト等)の一覧性は低い。
- リスト表示:行形式でタイトル・投稿者・日付・サイズなどの列が表示される。
- 長所:詳細確認・一括操作に向く。
- 短所:画像の見た目確認には不向き。
ちょっとしたコツ🔎:
- 多数のファイルを扱う場合は「リスト」で一覧→必要時に個別で「グリッド」に切り替えると効率的です。
- ブロックエディタでは、画像ブロックからドラッグ&ドロップで直接アップロードでき、作業が速くなります。
メディアが保存される場所とURLのルール(uploads フォルダの構造・パス)
WordPressはアップロードしたファイルをサーバー上のディレクトリ(フォルダー)へ保存します。既定の保存場所とURLの仕組みは概ね次の通りです。
保存先(サーバー上のパス)
通常は以下のフォルダに格納されます(例):
/wp-content/uploads/2025/08/your-image.jpg
wp-content/uploadsがメディアの基本フォルダ。- デフォルトでは 年/月(例:
2025/08)で自動的に振り分けられる設定になっています(設定で無効化可能)。
公開URL の作り方(例)
サイトのURLが https://example.com の場合、上記ファイルは以下のようにアクセスできます:
https://example.com/wp-content/uploads/2025/08/your-image.jpg
簡単な例
| 項目 | 例 |
|---|---|
| サイトURL | https://example.com |
| サーバーパス | /var/www/html/wp-content/uploads/2025/08/your-image.jpg |
| 公開URL | https://example.com/wp-content/uploads/2025/08/your-image.jpg |
注意点・運用上のポイント 🛠️
- 年月ベースのフォルダ分けを無効化すると、ファイルがすべて同一フォルダに入るため管理が難しくなる場合があります。
- マルチサイトや特殊なプラグインを使うと、保存場所やURLが変わることがあります。(例:外部ストレージ/CDNに保存するケース)
- ファイル名に日本語や空白を含めるとURLが複雑になることがあるので、英数字とハイフンで命名するのが無難です。(例:
my-image.jpg)
まとめ(ここでの最優先チェックリスト)
- 代替テキストを必ず入れる ✍️
- 管理画面の「メディア」→「ライブラリ」からグリッド/リストを切り替えて効率よく管理 🔁
- 保存パスと公開URLの関係を理解しておく(移行やバックアップで役立つ) 💾
対応ファイルとアップロード制限
サポートされるファイル種類(画像・動画・音声・文書)
WordPress のメディアライブラリは 画像・動画・音声・ドキュメント を扱えます。デフォルトで受け入れられる代表的な形式と用途は以下のとおりです。
使い分けのポイント
- 画像:ページの装飾や本文内表示、サムネイル(アイキャッチ)に使用。画質とファイルサイズのバランスを重視。
- 動画:長時間・高画質の動画は外部ホスティング(YouTube/Vimeo 等)を推奨。直接アップロードする場合はストレージと帯域に注意。
- 音声:ポッドキャストや短い効果音に向く。長尺の音声は専用配信サービスの検討を。
- ドキュメント:PDF や Office 書類の配布に使う。ユーザーがダウンロードする前提なら PDF が無難。
代表的な形式(例)
| 種類 | 推奨形式(例) | メリット |
|---|---|---|
| 画像 | JPEG (.jpg/.jpeg)、PNG (.png)、WebP (.webp) | JPEG:写真向け(圧縮優秀)。PNG:透過や図版向け。WebP:同等品質で小さくなりやすい。 |
| 動画 | MP4(H.264) | 広い互換性と効率的な圧縮率。 |
| 音声 | MP3、M4A | 幅広いプレーヤー互換性。 |
| ドキュメント | PDF、DOCX | PDFは配布に最適、DOCXは編集前提。 |
注意:最近の WordPress のバージョンでは WebP を扱える場合が多いですが、環境によっては未対応のことがあるため、動作確認を行ってください。
アップロードサイズやサーバー側の制限の考え方(PHP設定など)
アップロードできる最大サイズは WordPress 固有の設定ではなく、サーバー(PHP)の設定やホスティング制約によって決まります。管理画面の「メディア→新規追加」画面には通常「最大アップロードファイルサイズ: XXMB」と表示されるので、まずはそこを確認しましょう。
重要なサーバー設定(よく使う項目)
upload_max_filesize:単一ファイルのアップロード上限。post_max_size:POSTリクエスト全体のサイズ上限(複数ファイルやフォームデータを含む)。post_max_sizeはupload_max_filesizeより大きく設定する必要があります。memory_limit:PHPが使えるメモリ上限。大きい画像や生成処理で影響を受けることがあります。max_execution_time:長い処理でタイムアウトするか否かに影響。
上限確認方法
- 管理画面の「メディア → 新規追加」で表示される上限を確認。
- または、ホスティングのコントロールパネル(PHP情報)で
phpinfo()を参照します。
上限を引き上げる方法(代表的な手段)
変更はホスティングやサーバーの権限に依存します。共有ホスティングでは管理画面から変更できる場合が多く、編集できない環境ではサポートに依頼してください。
- php.ini を編集(サーバーに直接アクセスできる場合)
upload_max_filesize = 64M
post_max_size = 64M
memory_limit = 128M
max_execution_time = 300
- .htaccess に記載(Apache環境で許可されている場合)
php_value upload_max_filesize 64M
php_value post_max_size 64M
php_value memory_limit 128M
php_value max_execution_time 300
- wp-config.php に設定を追加(限定的効果)
@ini_set( 'upload_max_size' , '64M' );
@ini_set( 'post_max_size', '64M');
@ini_set( 'memory_limit', '128M' );
- ホスティングのコントロールパネル(cPanel 等)で PHP バージョン/設定を変更する。
- プラグインを使う方法(管理画面上でアップロード上限を調整するもの。ただし根本的にサーバーの制限を超えることはできない)。
セキュリティと実務上の注意点
- 無闇にアップロード上限を大きくすると、サーバー負荷やディスク消費が早まります。必要最小限に設定するのが安全です。
- 許可する MIME タイプを拡大すると、悪意あるファイルがアップされるリスクが上がるため慎重に。例えば実行ファイル(.php 等)は許可しない。
- 共有ホスティングでは他ユーザーへの影響もあるため、ホスティング会社のルールを遵守しましょう。
実践的な運用ガイド(初心者向けチェックリスト)
- 画像は事前に圧縮する:できれば 100–500KB を目安に。ページ用途に合わせて品質を調整。📉
- 動画は外部ホスティングを検討:直接アップロードは帯域と容量を消費するため、YouTube/Vimeo 等の埋め込みを使うと高速かつ安定。🎬
- 音声は必要に応じて配信サービスを利用:ポッドキャスト配信サービスを使うと配信管理が楽。🎧
- 大きなファイルが必要な場合:ホスティングの上限を確認し、サーバー側で
upload_max_filesizeとpost_max_sizeを調整するか、ファイルを分割・外部ストレージを利用する。 - アップロード後の確認:アップロードしたファイルが正しく表示・再生できるか、代替テキストが入っているかを確認する習慣を付ける。✅
短いまとめ
- WordPress は画像・動画・音声・ドキュメントを扱えるが、「何がアップできるか」はサーバー(PHP)設定で決まる。
- 大きなファイルはホスティングの上限やサーバー負荷を考慮して、事前圧縮・外部ホスティング・CDN活用を検討することが最善策です。
メディアの追加方法(個別・一括)
サイトに画像や動画を追加する方法はいくつかあります。
ここでは 管理画面(ドラッグ&ドロップ)/投稿編集画面(ブロック挿入)/FTPでの一括配置+反映/バックアップからの復元・インポート を、初心者にもわかりやすく段階的に説明します。
まずは特徴の比較表で全体像をつかみましょう。
方法の比較
| 方法 | 向いている状況 | 長所 | 短所 |
|---|---|---|---|
| 管理画面からアップロード | 単発の画像・小規模追加 | 直感的、すぐ使える | 一括作業には非効率 |
| 投稿編集画面(ブロック) | 記事作成中に画像を追加 | 作業流れが止まらない | 事前整理には不向き |
| FTP + 同期プラグイン / WP-CLI | 大量ファイルを一括投入 | 高速/大量処理に強い | 手順がやや技術的(権限注意) |
| バックアップ/インポート | 別サイトへ移行/復元 | サイト単位・メディア単位で移行可能 | 設定やURL調整が必要になる場合あり |
管理画面からのアップロード(ドラッグ&ドロップ含む)
使い方(手順)
- 管理画面の「メディア」→「ライブラリ」を開く。
- 画面上部の「新規追加」ボタンをクリックするか、画面中央へファイルをドラッグ&ドロップする。
- アップロードが完了したら、サムネイルをクリックしてタイトル/代替テキスト(alt)/キャプション/説明を編集する。
- 必要なら画像編集(トリミング・回転・リサイズ)を行う。
実務Tips
- 複数ファイルを一度にドロップ可。ただし大量すぎるとブラウザが固まることがあるので分割推奨。⚠️
- アップロード後は必ず alt(代替テキスト)を入れる とSEOとアクセシビリティに好影響。✅
投稿・固定ページ編集画面からの追加(ブロック挿入)
使い方(ブロックエディタ:Gutenberg)
- 投稿や固定ページの編集画面で、追加したい場所にブロックを挿入(「+」ボタン)。
- 「画像」ブロックや「メディアとテキスト」ブロックを選択。
- ブロック内の「アップロード」ボタンで新規ファイルを選ぶ、または「メディアライブラリ」から既存ファイルを選択して挿入。
- 挿入後にキャプションや代替テキスト、表示サイズを調整する。
実務Tips
- 記事作成の流れで画像を入れられるため作業効率が高い。✍️
- 複数箇所で同じ画像を使う場合、まずライブラリにアップしてから呼び出すと重複管理が楽になります。
FTPでの一括配置とWordPress側への反映(Media Syncなどの扱い)
大量の画像や既存のファイル群を一括でアップロードするにはFTPが有効です。
ただしFTPでファイルを置いただけではライブラリに自動登録されない点に注意してください。
以下に一般的な手順と反映方法を紹介します。
流れの概略
- FTPでサーバーの
wp-content/uploads/以下にファイルを転送(年月フォルダに配置するのが望ましい)。 - WordPress 側で「アップロード済みだがライブラリに無いファイル」を検出して登録する(方法は後述)。
- 登録後、ライブラリから挿入・編集が可能になる。
反映方法の代表例
- プラグインを使う(例:Media Sync / Add From Server など)
- 管理画面でプラグインをインストール → 指定フォルダをスキャン → ライブラリへインポート(選択して一括登録)
- 利点:GUIで操作でき、失敗時に取り消しやすい。
- WP-CLI を使う(サーバーでコマンド実行できる場合)
- 例:サイトのルートで
wp media import wp-content/uploads/2025/08/* --path=/var/www/htmlのように実行すると、ファイルをメディアとして登録できる。 - 利点:大量ファイルの高速処理に向く。
- 注意:サーバーにSSHアクセスとWP-CLIが必要。
- 例:サイトのルートで
H4 ステップ例:FTPで置いてからライブラリに登録する手順
- フォルダを決める:
wp-content/uploads/2025/08/のように年月フォルダを作る(可能なら既存の構成に合わせる)。 - FTPでアップロード:FTPクライアント(FileZilla等)でファイルを転送。転送中にエラーが出ないか確認する。
- パーミッションを確認:アップロード後、ファイルとフォルダの権限が適切か確認(一般的にはフォルダ755、ファイル644が多い)。権限不足だとWordPressが読み取れないことがある。🔐
- プラグインでスキャン→登録:管理画面でMedia Syncなどを使い、uploads内をスキャンしてインポートする。
- 公開URLと表示確認:ライブラリでサムネイルが見えるか、記事に挿入して表示確認する。問題があればパーミッションやキャッシュを疑う。
- 必要ならサムネイル再生成:既存サムネイルが作られていない場合は「Regenerate Thumbnails」などで作成する。
トラブル対処(よくある原因)
- アップロードしたのにライブラリに表示されない → 権限(パーミッション)、プラグインのスキャン設定、uploadsパスが異なる を確認。
- サムネイルが壊れている → サムネイル再生成ツールを使用する。
- WP-CLI実行時エラー →
wp-cliのバージョンと--path指定を確認。
代替手段(バックアップからの復元・インポート)
サイトを丸ごと移行したり、別サイトへメディアだけ移したりする場合は エクスポート/インポートやバックアップツール が便利です。
代表的なアプローチ
- メディア単体のエクスポート/インポート
- 一部のエクスポートツールやプラグインでメディアのみをエクスポートし、別サイトへインポートできます。
- インポート時にURLの書換(置換)やファイルパス調整が必要になる場合があるため注意。
- サイト丸ごとバックアップを復元
- Duplicatorやバックアップツールでサイト全体を取得 → 復元するとメディアもそのまま移行されます。
- 完全復元は最も確実ですが、設定やプラグインの互換性に注意。
- WP-CLI を利用した一括インポート
wp media importで大量のファイルを一括登録し、必要であれば--featured_imageやメタデータを追加するスクリプトを併用。
移行時のチェックリスト
- メディアの公開URLが新サイトで正しく機能するか確認。🔗
- 投稿内に埋め込まれた古いURLを一括で置換する必要がないかチェック。
- 権限・所有者(owner)やパーミッションが適切であることを確認。
- 大量のファイル移行後は、ページキャッシュ・CDNキャッシュのクリアを忘れずに。
最後に:初心者向けの安全なやり方と注意点
- まずは管理画面から少量ずつ試す:慣れるまではドラッグ&ドロップ→挿入→表示確認の流れを繰り返すと安心。🟢
- 大量作業はバックアップを取ってから:FTPで一括投入やプラグインでインポートする前にサイトのバックアップを取得。💾
- 権限(パーミッション)に注意:FTPでのアップは読み取り権限が重要。権限ミスで表示されないケース多数。🔒
- 外部ストレージやCDNを検討:大量メディアや動画は外部保管でサーバー負荷を下げられる。🌐
- 失敗時の対応手順を用意:インポート前にリストを作り、問題が起きたら差分を確認できるようにする。
ファイルの基本設定と編集
各ファイルのメタ情報(タイトル/代替テキスト/キャプション/説明)の使い方
メディアに付けるメタ情報は「見つけやすさ」「アクセシビリティ」「運用のしやすさ」に直結します。
以下は各フィールドの目的と実務的な書き方の例です。
フィールド別の目的と記入例
| フィールド | 目的 | 実務的な書き方の例 |
|---|---|---|
| タイトル | 管理上の名前。ライブラリ表示や検索に使う | 2025-08-イベント-集合写真-01(日付+用途で整理) |
| 代替テキスト(alt) | 画面読み上げや画像未表示時に代替される説明。SEOにも影響 | 商品Aの正面写真(白背景、サイズ縦800px)(短く・意味が伝わる形) |
| キャプション | 記事内で画像の下に表示される短い説明 | 商品A:新モデル(2025年) |
| 説明(詳細) | 管理用の補足。撮影情報や権利情報などを記録 | 撮影:山田太郎 / クレジット:提供元 / 使用制限:商用可 |
運用ルール(おすすめ)
- 必ず alt を入れる(短く・具体的に)。
- タイトルは検索・整理に使いやすい命名規則(例:
YYYY-MM-用途_番号)にする。 - キャプションは公開用、説明は管理用に使い分ける。
- ファイル名は英数字とハイフンで統一(URL可読性向上)。📝
画像の簡易編集(切り抜き・リサイズ・回転)と注意点
WordPress のメディア編集機能で簡単な加工は可能です。
とはいえ編集操作は一部が元ファイルに影響する/運用上の副作用があるため注意して使いましょう。
よく使う編集操作と手順
- 「メディア→ライブラリ」で対象画像をクリック。
- 「画像を編集」をクリックすると編集画面(トリミング、回転、反転、縮尺)が開く。
- 必要な編集を行い「保存」または「保存して閉じる」。
注意点とベストプラクティス
- 元ファイルのバックアップを残す:編集で元ファイルが上書きされる(または派生ファイルに影響する)ケースがあるため、元画像はローカルに保存しておくと安全。💾
- 加工はコピーで行う:重要な原稿や商用素材は、まずローカルでコピー(もしくは別名でアップ)してから編集する。
- 画質の劣化に注意:何度も再保存するとJPEGなどで劣化することがある。可能なら非破壊(元を残す)で作業。
- アスペクト比を維持する:トリミングやリサイズで縦横比を崩すと、意図しない表示崩れが発生することがある。レスポンシブ表示を考えて幅基準で調整するのが無難。
- EXIF情報の扱い:回転や向きはEXIFに依存する場合がある。編集後に向きが正しく反映されているか確認する。
サイズやサムネイル設定(メディア設定のカスタマイズ)
WordPress はアップロード時に自動で複数サイズを生成します(例:サムネイル、ミディアム、ラージなど)。これらは設定で調整可能で、テーマや表示用途に合わせて最適化することが重要です。
Settings → メディアで変更可能な基本項目(概念)
- サムネイルサイズ(幅×高さ)
- 中サイズ(幅×高さ)
- 大サイズ(幅×高さ)
- 「サムネイルの切り抜き(ハードクロップ)」の有無
推奨サイズの一例(ブログ向け)
| 用途 | 推奨幅(px) |
|---|---|
| サムネイル(一覧) | 150 |
| 記事内の標準画像 | 600〜1200(コンテンツ幅に依存) |
| ヒーローヘッダー / 横幅いっぱい | 1600〜2400 |
| 高解像度(Retina 用) | 上記の2倍を用意(WPの srcset が自動で選択) |
テーマでのカスタムサイズ追加(functions.php の例)
// サムネイル(アイキャッチ)サイズを設定
set_post_thumbnail_size( 300, 200, true ); // 幅300px, 高200px, 切り抜きあり
// カスタム画像サイズを追加
add_image_size( 'hero-large', 1600, 800, true ); // テーマで 'hero-large' を利用可能
- 追加後は既存画像に対してサムネイルを再生成する必要があります(下記参照)。
サムネイルを再生成する理由と手順
- サイトの設定やテーマを変えたとき、新しいサイズが追加されたときは、既にアップ済みの画像に新サイズが存在しません。
- この場合は 「Regenerate Thumbnails」 のようなプラグインで再生成します(GUIで全画像を一括処理)。🔁
レスポンシブ対応(srcset)について
- WordPress はアップロード時に複数サイズを生成し、
<img>にsrcsetを自動付与してくれます。これにより、閲覧する端末に最適な画像が配信され、表示速度が改善されます。 - テーマやカスタム出力で img の srcset を無効化しないことが望ましく、ブラウザに最適サイズを選ばせる仕組みを活用するのがベストです。✅
実務チェックリスト(サイズ周り)
- コンテンツ幅を測って、それに合った中〜大サイズを設定する。📐
- 画像は可能であれば適切なサイズにリサイズしてからアップロード(超大サイズをそのまま上げない)。
- サイズを変更したらサムネイル再生成を実行。
- Retina(高解像度)対応は WP の srcset に任せるか、特別な要件があれば 2x 画像を用意する。
まとめ(実務的な短いチェックリスト)
- メタ情報は“管理用”と“公開用”で使い分ける(タイトル=管理/説明=管理詳細/キャプション=公開表示/alt=アクセシビリティ)。
- 編集は元ファイルを残してから行う(上書きリスク回避)。💾
- 画像サイズは用途に合わせて事前に決めておく(記事内、サムネ、ヘッダー等)。
- 設定変更後は必ずサムネイルを再生成して既存メディアも新ルールに合わせる。🔁
- レスポンシブ用の srcset を活用して表示速度と見た目を両立する。⚡
記事・ページでの利用方法
ライブラリから記事へ画像・動画を挿入する手順
以下はブロックエディタ(Gutenberg)を前提にした手順です。クラシックエディタを使っている場合は「メディアを追加」ボタンを使う流れが同じ目的を果たします。
ブロックエディタでの基本手順(画像)
- 編集画面で挿入したい場所にカーソルを置き、
+ボタンを押す。 - 「画像」ブロックを選択。
- ブロック内で 「メディアライブラリ」 を選び、既存の画像をクリックして「選択」。
- 右側のサイドバーで 代替テキスト(alt)/キャプション/表示サイズ/配置 を設定。
- 必要なら画像をクリックして表示されるツールバーから 配置(左寄せ/中央/右寄せ)やリンク設定 を行う。
動画(自己ホスト)を挿入する場合
- 「動画」ブロックを使うか、一般の「カスタムHTML」ブロックで
<video>タグを書くことも可能。 - 大きな動画は外部ホスト(YouTube/Vimeo)を使い、URLをそのまま貼るだけで埋め込みできる(oEmbed機能)。
クラシックエディタの場合
- エディタ上の「メディアを追加」ボタン → ライブラリから選択 → 「投稿に挿入」をクリック。
- サイズやリンク設定は挿入後に編集可能。
実務Tips
- 画像は記事用に最適なサイズに調整してからアップロードすると表示速度が上がります。⚡
- 同じ画像を複数記事で使うなら、ライブラリから呼び出す。重複アップロードは避ける。🧩
アイキャッチ(サムネイル)や埋め込み方法の違い
アイキャッチ(featured image)と本文に挿入する画像、そして外部埋め込み(YouTube等)は目的が異なります。使い分けを理解しましょう。
比較表:アイキャッチ vs 本文画像 vs 外部埋め込み
| 項目 | アイキャッチ | 本文画像 | 外部埋め込み(YouTube等) |
|---|---|---|---|
| 主な用途 | 記事一覧やSNSでのサムネイル | 記事本文のコンテンツ強化 | 大容量のメディアを軽く公開 |
| 表示場所 | テーマが決める(一覧・記事上部等) | 記事内好きな位置 | 記事内やウィジェットに埋め込み |
| ファイル負荷 | 小〜中(1枚) | 中(複数) | サーバー負荷ほぼ不要(外部再生) |
| SEO・アクセス性 | タイトル代わりに目を引く | コンテンツの文脈補助(altが重要) | 再生数は外部サービスに依存 |
アイキャッチ設定手順(ブロックエディタ)
- 投稿編集画面の右サイドバーで「文書」タブを選択。
- 「アイキャッチ画像」セクションで「設定」をクリックして画像を選ぶ。
- 必要ならキャプションや代替テキストを設定。
外部埋め込みのポイント
- YouTube/Vimeo:URLを貼るだけで自動的に埋め込みが作られる(レスポンシブ対応も自動的にされることが多い)。
- 自ホスト動画:帯域とストレージを消費するため、長時間動画や高画質は外部ホスト推奨。
- セキュリティ:外部コンテンツはプライバシーや埋め込み元の規約を確認すること。
保存済メディアのURL確認と直接リンクの利用法
メディアの公開URLを知っておくと、ファイルを直接リンクしたり、ダウンロード用に配布したり、外部サービスで参照させることができます。
URL確認手順
- 管理画面 → 「メディア」→「ライブラリ」を開く。
- 対象のファイルをクリックして詳細ウィンドウを開く。
- 「ファイルの URL」欄に表示されているアドレスをコピーする(例:
https://example.com/wp-content/uploads/2025/08/your-image.jpg)。
直接リンク(ダウンロード)を作る方法
- ブロックエディタでテキストを選択 → リンクアイコン → コピーしたファイルURLを貼る。
- リンクに
download属性を付けたい場合は「カスタムHTML」ブロックで以下のように記述:
<a href="https://example.com/wp-content/uploads/2025/08/manual.pdf" download>マニュアルをダウンロード</a>
- 注意点:
download属性は一部ブラウザやクロスドメイン条件で動作制限があります。
直接リンク運用時の注意点
- ホットリンク(他サイトが直リンクする)対策:公開ファイルを他サイトに無断で使われたくない場合、CDN設定や .htaccess の制御でホットリンクを防止できます。🔒
- 公開/非公開の切り替え:メディア自体に公開/非公開設定は標準では薄いため、非公開にしたければアクセス制限プラグインや外部ストレージの権限を使う。
- URL変更時の影響:メディアURLを変える(移行・リネーム)と、投稿内の直リンクが切れるため、移行時は検索置換やリダイレクトを実行する。🔁
画像を直接URLで表示するHTML例
<img src="https://example.com/wp-content/uploads/2025/08/photo.jpg" alt="イベント写真">
実践的なチェックリスト(公開前に必ず確認すること)
- alt(代替テキスト)が全ての重要画像に入っているか ✅
- アイキャッチは適切なサイズか(一覧で崩れないか) ✅
- 動画は外部ホストにして帯域を節約できないか検討したか 🎬
- ダウンロードリンクは正しいURLと動作(保存)を確認したか 💾
- 表示崩れ(レスポンシブ)をスマホ・PCでチェックしたか 📱💻
まとめ
記事やページでメディアを使うときは「目的(見せる/装飾/配布)」「サーバー負荷」「ユーザー体験(読み込み速度・アクセシビリティ)」を意識して、アイキャッチ/本文画像/外部埋め込みを使い分けることが重要です。
検索・絞り込み・整理テクニック
キーワード検索・種類・日付でのフィルタ利用法
管理画面の検索・フィルタ機能を使いこなすと、目的のメディアを素早く見つけられます。探し方の基本と実践テクニックを段階的に紹介します。
基本的な使い方
- キーワード検索:ファイル名・タイトル・キャプション・説明に入れた語で検索できます。
- 種類フィルタ:画像/動画/音声/ドキュメントなどで絞り込むと候補が限定されます。
- 日付フィルタ:年・月で絞ると、特定期間に作業したファイルを探しやすいです。
実践テクニック
- 複合検索:まず種類で絞り(例:画像)、次にキーワード(例:
イベント2025)を入れると高速に発見できます。⚡ - 代替テキストを検索用に活用:alt にキーワード(製品名、場所、日付)を含めておけば、表示用だけでなく検索時にもヒットします。
- 日付の粒度を活かす:例えば「キャンペーン2024年11月分」を年月フォルダと代替テキスト両方に入れておくと、どちらのフィルタでも見つかる確率が上がります。🔎
ファイル名ルールの作り方(管理しやすい命名規則)
ファイル名は管理効率に直結します。チーム運用でも個人でも再現性のある命名規則を作り、徹底することが重要です。
命名ルールの設計ポイント
- 一貫性:形式を決めたら必ず守る(例:
YYYY-MM-DD_用途_識別子_バージョン.ext)。 - 短く、意味が伝わること:検索で使う語を優先して含める。
- 英数字+ハイフン or アンダースコア:URLの可読性と互換性を保つ。日本語やスペースは避ける。
- バージョン管理:差し替えが発生しやすい素材は
_v1,_v2を付ける。
具体例(テンプレート)
- 商品写真:
2025-08-10_productA_front_v1.jpg - イベント写真:
2024-11-05_event_tokyo_group01.jpg - マニュアルPDF:
2025-03_manual_shipping_v2.pdf
命名ルールの簡易チェック表
| チェック項目 | Yes / No |
|---|---|
| 日付が先頭にあるか | |
| 用途・識別子が含まれるか | |
| 拡張子が正しいか (.jpg/.png/.pdf) | |
| スペースや日本語を含んでいないか | |
| バージョン管理が必要なら付与されているか |
年/月フォルダ自動整理や分類の習慣化
年月で自動整理する設定を活用すると、数が増えてもフォルダ構成である程度の秩序が保てます。日常運用での習慣化方法を説明します。
自動整理(年/月)を使う利点
- 自動で年月フォルダに振り分けられるため、手動分類の手間を削減。
- 移行やバックアップの単位(年月)が明確になる。
運用ルール(おすすめ)
- アップロード前にファイル名ルールを適用(自動フォルダと組み合わせると探しやすい)。
- 毎月の整理タスクをルーチン化:月末に未使用ファイルや重複をチェックする時間を確保。⏲️
- 重要な素材は別フォルダで二次保管(例:
/wp-content/uploads/backup/originals/)を設ける。 - 年月ベースが合わない場合はプラグインでカテゴリ分け(後述)を併用。
簡単な月次ルーチン(例)
- 月初3日以内:先月アップロード分の未使用チェック(未使用なら保留リストへ)。
- 四半期ごと:大きな画像の圧縮・古い未使用画像の削除候補リスト作成。
フォルダ管理やタグ付けを実現するプラグイン活用(FileBird等の役割)
デフォルトのメディアはフォルダを持ちません。フォルダやタグ、拡張検索を追加するプラグインを導入すると、大量のメディアが扱いやすくなります。
ここでは導入前の判断基準と使い方の実例を示します。
プラグイン導入の判断ポイント
- 必要性:ファイル数が増え、年月だけでは管理できなくなったら検討。
- 互換性:テーマや他プラグインと干渉がないかテスト環境で確認。
- パフォーマンス影響:検索や一覧表示が遅くなる可能性があるため、軽量なものを選ぶ。
- バックアップと復元:プラグインを外す際にメディアの参照関係が壊れないか確認する。
よく使われる機能と活用例
- フォルダ(階層)表示:視覚的に分類でき、直感でドラッグ&ドロップで整理できる。
- タグ/カテゴリ付け:複数軸での絞り込み(例:
用途:商品ページ、権利:商用可)。 - バルク操作:複数ファイルを一括で移動・削除・タグ付けできる。
- 検索拡張:タイトル以外のカスタムフィールドやメタで検索可能にする。
導入後の基本手順(安全な流れ)
- テストサイトでプラグインを試す(動作・互換性チェック)。🔁
- 本番で導入する前に完全バックアップを取得。💾
- 小さなフォルダ構成から始め、運用ルールをチームで共有。📘
- 定期的に不要フォルダやタグの整理を行う。
プラグイン利用上の注意
- 一部のフォルダ系プラグインはファイルの物理配置を変えずに“仮想フォルダ”で見せるだけのものと、実際に
uploads配下を移動するものがあります。どちらの挙動かを理解してから使うこと。⚠️ - プラグインを外すとフォルダ表示がなくなるが、ファイル自体は残る設計が多いですが、事前に動作確認することが必須です。
まとめ:すぐ実践できる整理ワークフロー(チェックリスト)
- 短期(今すぐ)
- 命名規則を1つに決める。✍️
- ライブラリの検索で alt とタイトルが機能しているか確認する。
- 中期(毎月)
- 月次で未使用ファイルのリスト化と削除判定を行う。🗂️
- 必要ならフォルダ系プラグインを検討・テスト導入する。
- 長期(四半期〜年次)
- 重要素材を外部バックアップ(クラウド等)へ二重保存。☁️
- 命名規則やタグの運用を見直し、チームへ周知する。
プラグインによる機能拡張(カテゴリ別)
メディア管理はプラグインで大きく使いやすくなる反面、増やしすぎるとトラブルの原因にもなります。
ここではカテゴリごとに「何ができるか」「導入時の注意点」「実務での使い方」を初心者向けにやさしく解説します。
フォルダ/分類強化プラグイン(例:フォルダ管理系)
できること
- メディアを「フォルダ」「コレクション」「カテゴリ」のように視覚的に整理できる。
- ドラッグ&ドロップでファイルを移動・並べ替え、バルク操作が可能になる。
メリット
- 多数のファイルを扱うサイトで検索時間を大幅短縮。
- チーム運用でのルール適用がしやすくなる。
注意点/運用のコツ
- 「仮想フォルダ(表示のみ)」か「物理移動(uploadsのパス変更)」かを必ず確認する。
- 仮想表示型はプラグインを外すと元に戻るが、物理移動型はパスが変わるため投稿中の直リンクに影響する可能性あり。
- 導入はバックアップ&テストサイトでの検証を推奨。🔁
画像最適化・WebP変換ツール(例:変換・圧縮系)
できること
- アップロード時/アップロード後に自動で画像を圧縮・最適化。
- WebP などモダンフォーマットへの変換と、HTML の
srcset/<picture>出力対応。
メリット
- ページ読み込み速度が改善し、ユーザー体験とSEOに好影響。⚡
- 手動で圧縮する手間を省ける。
注意点/運用のコツ
- 圧縮レベルを上げすぎると画質劣化が発生するため、品質=画質の目視確認を必ず行う。👀
- サーバー側で変換を行うプラグインはCPU負荷が高くなる場合がある。共有ホスティングでは注意。
- CDNやブラウザ互換性(古いブラウザはWebP非対応)へのフォールバックがあるか確認する。
自動リサイズ・アップロード制限緩和ツール(例:Imsanity等)
できること
- 大きな画像を自動で指定サイズにリサイズして保存(アップロード時に自動処理)。
- サイトに最適な画像サイズを強制して容量削減。
メリット
- ユーザーが誤って超大サイズをアップしてしまう事故を防げる。
- ディスク容量の節約と表示速度の向上。📉
注意点/運用のコツ
- 自動で縮小されると「元の高解像度ファイルが失われる」場合があるため、オリジナルはバックアップしておく。💾
- リサイズポリシー(どの幅で止めるか)を運用ルールとしてチームで決める。
透かし・画像差替え系ツール(ウォーターマーク、置換)
できること
- 画像に自動でウォーターマーク(透かし)を付与。
- 登録済画像の差し替えやバージョン管理を行う機能。
メリット
- 著作権保護やプレビュー用途に便利。🔒
- 既存の画像をまとめて差し替える際に作業効率が上がる。
注意点/運用のコツ
- ウォーターマークはユーザー体験(見辛さ)に影響するため、位置や透過率は慎重に設定。
- 差し替え機能は旧URLを維持できるものとできないものがあるので、URLの維持要否を判断して選定する。
- 差し替え時はキャッシュ(ブラウザ/CDN)クリアが必要になることが多い。
未使用ファイル抽出・クリーンナップ系(Media Cleaner等)
できること
- 投稿に紐づかないファイル(未使用の画像や孤立ファイル)を検出し、削除候補としてリストアップ。
- 重複ファイルの検出や参照状況の可視化も可能。
メリット
- サイトのディスク容量を節約し、不要データの蓄積を防ぐ。🧹
- 定期的なクリーンアップで運用コストを下げられる。
注意点/運用のコツ
- 誤検出のリスクがある(特に外部で参照されているファイルやカスタムフィールドで使われている場合)。
- 削除前は必ずバックアップを取り、削除は「一旦隔離(バックアップフォルダ)」→ 一週間程度問題がなければ完全削除、という段階を踏むのが安全。🔁
プラグイン導入時の基本フロー(インストール→設定→動作確認)
- 目的を明確化:何を自動化/改善したいのかを整理する(例:画像圧縮で表示速度改善)。
- テスト環境で動作検証:プラグインの互換性・パフォーマンス影響をチェック。
- フルバックアップを取得:データベース+
wp-content/uploadsの完全バックアップを取る。💾 - プラグインをインストール → 最小限の設定で試験運用(まずは少数ファイルで確認)。
- 動作確認:表示、画質、アクセス速度、管理画面への影響をチェック。
- 運用ルール化:設定値(圧縮率、フォルダ構成、除外リストなど)をドキュメント化しチームへ共有。📘
注意:プラグインは最小限に、バックアップを必ずとること
- 複数の似た機能を持つプラグインを同時に使うと競合し、ファイル破損や表示不具合を招くことがある。必要な機能だけを厳選しましょう。⚠️
- プラグインでファイルの物理配置やURLが変わると、既存の投稿が影響を受ける可能性があるため、ロールバック手順(差し戻し)を準備しておくこと。
- 定期的にプラグインの更新を行い、互換性チェックとバックアップをルーチン化することが安心な運用につながります。🛡️
カテゴリ別の簡易比較表(選定の参考に)
| カテゴリ | 代表的な効果 | 導入の要注意点 |
|---|---|---|
| フォルダ管理 | 視覚的整理・バルク移動が可能 | 仮想/物理の挙動差を把握すること |
| 画像最適化 | 表示速度向上・容量削減 | 圧縮で画質劣化する可能性 |
| 自動リサイズ | 大容量アップを防止 | 元画像の保存ルールを決める |
| 透かし・差替え | 著作権保護・差し替え効率化 | URLやキャッシュの影響に注意 |
| クリーンナップ | 不要ファイル削除で容量節約 | 誤削除対策(バックアップ)必須 |
実務チェックリスト(導入前/導入後)
- 導入前:目的は明確か? ✅ バックアップ取ったか? ✅ テスト環境で検証したか? ✅
- 導入後:画像の画質は許容範囲か? ✅ サイト速度に変化はあるか? ✅ 投稿内リンクや表示に問題ないか? ✅
- 定期運用:プラグインの更新と影響確認のルーチンはあるか? ✅
パフォーマンス最適化
サイトの表示速度はユーザー体験とSEOに直結します。
ここでは 画像を中心にした実践的な最適化手法(アップ前の圧縮/モダンフォーマット/CDN・遅延読み込み)を、初心者でも実行できる手順とチェックリストでわかりやすく解説します。
「具体的に何をすれば速くなるか」にフォーカスします。
画像圧縮とサイズ管理の実践(アップ前の圧縮推奨)
なぜ必要か
画像はページ重量の大部分を占めがちです。事前に適切なサイズと圧縮を行うだけで表示速度が劇的に改善します。
実務手順(初心者向け)
- 用途ごとに目標サイズを決める
- サムネイル:~20–100KB(幅150px程度)
- 記事内画像:~50–300KB(幅600–1200px)
- ヒーロー画像(フル幅):~200–600KB(幅1600–2400px)
目標は「必要最小限の画質で小さいファイルサイズ」を目安にすること。
- アップロード前に画像をリサイズする
- 元画像が4000px以上なら、記事用に幅1200px程度へリサイズして保存。
- ヒーロー等だけ大きめに(1600–2400px)を用意。
- 圧縮ツールを使う(ローカル or プラグイン)
- ローカル:画像編集ソフトの「Web用に保存」「エクスポート」機能、またはSquooshなどの圧縮ツールで品質(品質: 60–85)を試す。
- サイト内:自動で圧縮するプラグインを導入(アップロード時に圧縮)して運用コストを下げる。
ポイント:圧縮率を上げすぎると画質が劣化するため、必ず目視チェックを行う。
- 品質とファイルサイズのバランスを測る
- 画像を圧縮していく中で、同じ見た目で最小のKBを選ぶ。
- 表示確認はPC・スマホ両方で行う。
ワンポイント表
| 用途 | 推奨幅(px) | 目安ファイルサイズ |
|---|---|---|
| サムネイル | 150 | 20–100KB |
| 記事内(標準) | 600–1200 | 50–300KB |
| ヒーロー/全幅 | 1600–2400 | 200–600KB |
モダンフォーマット(WebP)と対応方法
WebP を使う理由
同じ視覚品質なら JPEG/PNG よりファイルサイズが小さくなることが多く、表示速度改善に効果大です。ただし環境によってはフォールバックが必要です。
実装パターン(初心者でもできる順)
- プラグインで自動変換(最も簡単)
- アップロード時に自動で WebP を生成し、互換性のために JPEG/PNG のフォールバックも用意する設定にする。
- メディアURL を差し替えずに
<picture>やsrcsetを自動で出力してくれるものが便利。
- 変換はバックエンドで行う(やや上級)
- 既存画像を一括で WebP に変換(プラグインや WP-CLI スクリプト)。
- サーバーのリライトルールで WebP を優先して配信させる方法もある(サーバー設定が必要)。
- HTML側でフォールバックを用意(手動)
<picture>を使って WebP とフォールバック画像を指定する例:
<picture>
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="説明文" width="1200">
</picture>
注意点
- 古いブラウザが WebP に対応していないケースがあるため必ずフォールバックを用意する。
- プラグインによってはサーバー負荷が高まることがあるので、共有ホスティングでは変換処理の影響を確認する。
CDNや遅延読み込み(Lazy Loading)による表示高速化
CDN(Content Delivery Network)の導入
効果:世界中のユーザーへ最寄りサーバーから配信することで、読み込み時間とサーバー負荷を大幅に減らせます。
導入の基本手順
- CDN プロバイダを選ぶ(初めは設定がシンプルなものを選ぶとよい)。
- サイトのオリジン(元サーバー)を設定し、プル型(既存のアップロードを自動で取得)を選ぶのが初心者向け。
- DNS に CNAME レコードを追加して CDN のエンドポイントを割り当てる(プロバイダの指示に従う)。
- メディアの URL を CDN ドメインに置き換える設定(プラグインがあると自動化できる)。
- キャッシュの設定(キャッシュTTL)やキャッシュパージ(更新時のクリア)を確認する。
CDN運用の注意
- メディア更新時は CDN キャッシュをクリアしないと古い画像が表示されることがある(自動パージ設定が便利)。
- HTTPS 設定(証明書)と CORS(外部ドメインからの読み込み制限)に注意。
遅延読み込み(Lazy Loading)
ネイティブ対応(推奨):現代のブラウザでは loading="lazy" 属性を <img> に付けるだけで遅延読み込みが可能です。
<img src="image.jpg" alt="説明" loading="lazy">
プラグインを使う場合:古いブラウザ対応や高度なプレースホルダ(低解像度画像の先読み)をしたい場合は専用プラグインを利用。
Lazy Loading の注意点
- ファーストビュー(画面最初に表示される画像)には遅延を付けないほうが UX は良い(しきい値を設定するか、ビューポート内は遅延無効にする)。
- SEOやクローラーの影響を気にする場合、重要画像は適切にプレロード(
<link rel="preload">)することを検討。
実践的な最適化ワークフロー(優先順)
- 画像のサイズ最適化(リサイズ+圧縮)を徹底(最も効果大)✔️
- WebP を導入してファイルサイズを削減(フォールバックを忘れずに)🟢
- Lazy Loading を導入して初期読み込みを軽くする(
loading="lazy"で簡単実装)⚡ - CDN を導入して配信を高速化・負荷分散(サイト成長に合わせて)🌐
- モニタリング:PageSpeed Insights 等で効果を定期測定し、必要に応じて調整。📈
よくある失敗と回避策
- 失敗:圧縮しすぎて画像がザラザラに → 回避:複数品質で比較して肉眼で確認する。
- 失敗:CDN導入後に更新が反映されない → 回避:キャッシュパージの手順を用意する。
- 失敗:WebPフォールバックがないため一部ユーザーで画像が見えない → 回避:
<picture>かプラグインで自動フォールバックを設定。 - 失敗:遅延読み込みでファーストビューが遅く感じる → 回避:above-the-fold の画像は遅延しない設定にする。
チェックリスト(導入後に必ず確認すること)
- 画像の平均ページサイズが目標値(例:< 1–2MB)に収まっているか。
- 主要ページのファーストコンテンツ描画(FCP)と最大コンテンツ描画(LCP)が改善しているか。
- WebP が対応ブラウザで配信され、非対応ブラウザにはフォールバックがあるか。
- CDN を導入した場合、更新時にキャッシュが正しくパージされるか。
- Lazy Loading によりファーストビューの画像が遅延されていないか(UX確認)。
まとめ
最も費用対効果が高いのは「適切なリサイズ+圧縮(アップ前)」です。その上で WebP → Lazy Loading → CDN の順で導入すると、手間を抑えつつ確実に表示速度を改善できます。まずは1ページ分を代表例として最適化し、効果を測ってから全体に広げるのが安全で効率的です。🚀
ダウンロード・エクスポート・バックアップ
メディアを安全に取得・保存・移行するための方法を、初心者でも実行できる手順とともに整理します。
用途別(「メディアだけ取得したい」「サイト丸ごとバックアップしたい」「サイト間で移行したい」)に分けて解説します。
メディアのみを取得する方法(バックアッププラグイン・エクスポート手順)
メディアだけを手元に保存したい場合は「ファイル群(uploads)を取得」+「ライブラリ登録情報(DB)の有無」で方法が分かれます。
物理ファイルの取得とメタ情報(タイトル / alt / キャプション 等)の取得は別物だと理解しておきましょう。
代表的なアプローチ(特徴)
| 方法 | 物理ファイル(uploads)の入手 | メディアDB(attachment ポスト)の入手 | 向いている場面 |
|---|---|---|---|
| プラグインでメディア単体エクスポート | ○(ZIP等で出力) | ○(プラグインによる) | メディアだけ欲しいとき |
FTPで uploads を丸ごとダウンロード | ○ | ×(ファイルのみ) | ファイルのみを手早く取得したいとき |
| サイトエクスポート(XML) | ×(外部参照のみ) | ○(添付情報の参照) | 投稿と紐づく添付情報を移したいがファイルは別取得する場合 |
| サイト丸ごとバックアップ(フルイメージ) | ○ | ○ | 完全な復元が必要なとき |
実務ポイント
- ファイルだけダウンロードしたいならFTPが一番確実(
wp-content/uploads/を取得)。 - メディア情報(alt等)も欲しいなら、エクスポートプラグインやフルバックアップが確実。
- エクスポート時は 必ずバックアップを取ること。✔️
例:バックアッププラグインを使ったメディア単独の書き出しステップ
(ここでは汎用的な手順を示します。プラグインによってUIは異なります)
- 管理画面 → プラグイン → 新規追加で「メディアエクスポート系」または「バックアップ系」プラグインをインストール・有効化。
- プラグインの設定画面へ移動し、エクスポート対象を「ファイル(uploads)」のみに設定する(DBを含めないオプションがある場合は外す)。
- 「バックアップ/エクスポート実行」ボタンを押し、処理が終わったら生成された ZIP 等をダウンロードする。
- ダウンロード後、ローカルで解凍してファイル構成(年/月フォルダ)が揃っているか確認する。
- 必要に応じて、メタ情報を別途エクスポート(CSV等)できるプラグインを使えば、タイトルやキャプションを管理しやすくなります。
注意:プラグインのバックアップ設定で「DBを含む」を選ぶとサーバー負荷が上がる・時間がかかることがあります。最初はファイルのみで試すと安心です。💡
例:WordPressエクスポーター/サイト丸ごとバックアップとの違い
- WordPressのエクスポート(ツール → エクスポート)
- 出力は XML(WXR)で、投稿・固定ページ・添付ファイルの参照情報が含まれるが、実際のメディアファイル(uploads の物理ファイル)は含まれない。
- 別サイトで「添付ファイルをダウンロードしてインポート」するオプションがある場合でも、元サーバーのURLにアクセスできることが前提になります。
- サイト丸ごとバックアップ(例:Duplicator/Updraft系)
wp-content/uploadsを含む物理ファイルと データベース(メディアのメタ情報を含む) の両方を取得でき、完全復元が可能。- 移行や復元の手間は少ないが、ファイルサイズが大きくなるためダウンロードに時間がかかります。📦
使い分けの目安:
- メディアだけ短期間保存したい → メディア専用エクスポート or FTP。
- サイト全体を移行・復元したい → フルバックアップ。
サイト間でメディアを移行する際の実務(URL書換えやパスの扱い)
サイト間移行で最もトラブルになりやすいのは「ファイルは移したが、投稿内やDB中のURLが古いまま」というケースです。以下は実務で押さえるべき手順と注意点です。
移行の実務フロー(推奨)
- 準備:完全バックアップを取得(DB と
wp-content/uploads)。 - 物理ファイルを移す:FTP/SFTP で
wp-content/uploads/を新サーバーへコピーする(同じパス構成にすると簡単)。 - DB の URL を書き換える:投稿内やメタデータに残る旧サイトの URL を新サイトの URL に置換する。
- 安全に行うツール:WP-CLI の
search-replace(事前に--dry-runを実行)や、シリアライズ対応の置換ツール(例:Search Replace DB)を使うとシリアライズデータを壊さずに置換できます。 - 注意:
guidカラムは通常置換しない方がよいケースが多い(テーマ/プラグインに依存)。まずは--dry-runで影響範囲を確認。
- 安全に行うツール:WP-CLI の
- メディア登録(attachment ポスト)の再作成が必要な場合:もしファイルだけコピーしてメディアライブラリに反映されていない場合は、Media Sync / Add From Server / Media from FTP 等のプラグインでファイルをライブラリへ登録する。
- サムネイル再生成:テーマで要求するサイズが新サイトで未生成の場合、
Regenerate Thumbnailsプラグインで一括生成する。 - 動作確認:代表的な投稿ページを開いて画像表示、ダウンロード、リンク、キャプションなどをチェック。
- キャッシュ/CDN のクリア:CDNやキャッシュがある場合は、移行後にパージして正しいファイルが配信されるようにする。🔁
よくある注意点
- シリアライズされたデータ(ウィジェット設定やオプションに含まれる)は単純な文字列置換で壊れる恐れがある。専用ツールを使って置換すること。
- ファイル権限(パーミッション):新サーバーで適切な権限(通常はディレクトリ 755、ファイル 644)に設定しないと、WPが画像を読み込めないことがある。🔐
- 異なるドメイン→プロトコル(http→https):プロトコルが変わる場合は URL の置換で
httpsに揃える。混在コンテンツに注意。 - 外部で参照されているファイル(他サイトやメール、SNS等)がある場合、それらのリンク切れが発生する可能性がある。移行計画に含める。
- 大きなアップロード量:大量のファイルはFTP転送中に切断されることがある。分割して転送するか、サーバー側でアーカイブ(tar/zip)してから解凍する方法が効率的。⚙️
実践的チェックリスト(移行・取得時に必ずやること)
- [ ] 本番サイトの完全バックアップ(DB + uploads)を取得したか? 💾
- [ ] 新環境で uploads を正しい場所に配置したか?(
wp-content/uploads)📂 - [ ] DB 内の旧 URL を シリアライズ安全 に置換したか?(まずは dry-run)🔍
- [ ] attachment テーブルと投稿内の参照が整合しているか確認したか? ✅
- [ ] サムネイルを必要に応じて再生成したか? 🔁
- [ ] パーミッションと所有者(owner)が適切か確認したか? 🔒
- [ ] CDN/キャッシュをパージして最新ファイルが配信されるか確認したか? 🌐
まとめ(初心者への安全な推奨ワークフロー)
- 目的を明確にする(ファイルだけ? メタ情報も? サイト丸ごと?)。
- バックアップを必ず取る(失敗時に戻せることが最重要)。
- 小さく試す(まずは数ファイルで手順を検証)。
- 移行は「ファイル移動 → DB 置換(シリアライズ対応) → 登録/再生成 → 確認」の順で行う。
- トラブル対策:問題が出たらすぐにバックアップから復元できるよう手順を用意しておく。🛡️
削除・移行時の注意事項
メディアを削除したり外部へ移すときは、表示切れやデータ破損などのトラブルが起きやすいです。
ここでは「安全に実行するための段取り」「一括操作のやり方とチェックリスト」「別ドメイン/外部ストレージ化に関する実務的な留意点」を、初心者でも実行できるように丁寧に解説します。
画像削除の手順と記事側での「画像切れ」リスク
なぜ慎重に扱うか
投稿内で使っている画像を削除すると、その投稿は画像が表示されない(=画像切れ)状態になります。検索エンジンやSNSの表示にも影響しますし、ユーザー体験が損なわれます。
安全な削除の基本手順(個別削除)
- バックアップを取得(必須)
- データベースと
wp-content/uploadsを含む完全バックアップを必ず取る。💾
- データベースと
- 使用箇所を確認
- その画像がどの投稿・ページ・ウィジェットで使われているかを調べる(ライブラリの「添付ファイルのページ」を使うか、検索置換ツールで URL を検索)。
- 代替案を準備
- 同じ見た目を保ちたい場合は、代替画像を用意しておく(同名に差し替える・投稿内で差し替える)。
- ステージングでテスト
- 本番で削除する前にステージング環境で同じ手順を試し、表示崩れが出ないか確認する。🔁
- 本番で削除 or 隔離
- すぐ削除せずにまずは「隔離フォルダ」へ移す(例:
uploads/quarantine/yyyy-mm/)。数日〜数週間問題なければ完全削除する運用が安全。🗂️
- すぐ削除せずにまずは「隔離フォルダ」へ移す(例:
- 削除後の確認
- 代表ページを複数ブラウザ・スマホで確認し、画像切れがないかチェックする。
注意点
- 手動で
uploadsのファイルを削除しても、attachmentポスト(DB)に参照が残る場合がある → 先にライブラリから削除するか、DB整合性を確認する。 - CDN を使っている場合、削除後に古い画像が表示されることがある → CDN キャッシュのパージが必要。
安全に一括削除する方法とチェックリスト
一括削除は便利だが危険。未使用ファイル判定ミスで重要な画像を消す可能性があります。必ず段階的に実施しましょう。
一括削除の推奨ワークフロー
- 完全バックアップ(DB + uploads)を取得。
- 未使用ファイルのリストを作成
- プラグイン(例:Media Cleaner 等)や専用ツールで「参照されていないファイル」の候補リストを作る。
- 隔離(キュランティーン)フェーズ
- 候補ファイルを一旦別フォルダに移す(自動で移動してくれるプラグインもある)。この段階でサイトに問題が出ないか数日〜数週間監視する。👀
- モニタリング期間(推奨:7〜30日)
- 問題報告がないか・表示切れがないかを確認。アクセスログやサポート問い合わせも見る。
- 完全削除
- 問題がなければ永久削除。問題があればバックアップから復元して原因を追う。🔁
一括削除チェックリスト(実行前)
- [ ] バックアップは取得済みか?
- [ ] 未使用候補リストを人の目でサンプリング確認したか?
- [ ] ステージング環境で同じ操作をテストしたか?
- [ ] 隔離フォルダへ移動する運用にしているか?
- [ ] CDNやキャッシュの影響範囲(パージ手順)は整備されているか?
ツール活用のポイント
- 「未使用検出」ツールは便利だが外部参照(他サイトで直リンクされているファイル)やカスタムフィールドで使われているファイルを誤判定する場合がある。必ずサンプル確認を。
- 一括削除は小分けに実施(例:100件ずつ)すると復旧が容易。
別ドメインへ移す/外部ストレージ化する際の留意点
目的:ディスク節約、配信性能向上(S3+CDN 等)、メンテナンス性向上。
注意すべきポイントを項目別に整理します。
A. URL の置換と参照整合性
- 物理ファイルを外部に移したら、投稿内やメタに残る旧 URL を新 URL に置換する必要があります。
- 推奨ツール:WP-CLI の
search-replace(シリアライズ対応)やシリアライズ安全な置換ツールを使う。まずは--dry-runで影響範囲を確認。- 例(dry-run):
wp search-replace 'https://old.example.com/wp-content/uploads' 'https://cdn.example.com/uploads' --dry-run
(※実行する際は --dry-run を外す前に必ずバックアップ)
guidカラムは基本的に不用意に置換しない方が安全な場合があります。ケースによるので確認を。
B. サービス構成と配信の仕組み
- CDN(配信) + オリジン(S3 / 外部ストレージ) を組み合わせることが一般的。
- 「URL を置換せずに CDN 側でプル」か「URL を直接 CDN に差し替える」か方針を決定。差し替えは速いが作業量は多い。プル型は設定が楽。
C. パーミッションとアクセス制御
- 外部ストレージ(例:S3)へ移す場合、公開用と非公開用の扱いを分ける。公開ファイルは公開ポリシー、非公開は署名付きURLや認証で制御。
- CORS 設定:外部ドメインから画像を読み込む場合、CORS を正しく設定しておかないとブラウザで読み込めないことがある。
- HTTPS(証明書):外部ドメイン・CDN の HTTPS 設定を忘れずに。混在コンテンツの問題を避ける。
D. パフォーマンスとキャッシュ管理
- 外部化すると配信は速くなるが、更新時のキャッシュクリア手順を整備しておかないと古い画像が表示され続ける。自動パージ設定があるか確認。
- TTL(キャッシュ期間)を長くするとパフォーマンスは上がるが、更新時の反映が遅くなる。目的に応じた設定を。
E. コストと運用負荷
- 外部ストレージや CDN は容量・転送量に応じて課金される。アクセス頻度の高いファイルはコストに影響するため、事前に試算を行う。💰
F. メタデータ・サムネイルの扱い
- 外部へ移行した後、テーマが要求するサムネイルサイズが生成済みかを確認。必要なら再生成を行う。
- メタデータ(alt / キャプション 等)は DB に残るため、ファイル移行のみで失われることはないが、URL の不整合には注意。
G. 移行手順(実務の流れ)— 簡潔版
- 計画:対象ファイル・バケット設計・URLポリシーを決定。
- バックアップ:DB と uploads をフルバックアップ。
- テスト移行:少量ファイルで移行テスト(公開→表示確認→キャッシュ挙動確認)。
- ファイル移行:S3 などへアップロード(場合によりバッチで実施)/CDNに連携。
- URL置換(必要なら):WP-CLI 等でシリアライズ安全に置換(dry-run から実行)。
- サムネイル再生成:必要があれば。
- モニタリング:表示・エラー・コストを観察。
- 最終切替:問題なければ旧ファイルの削除(または隔離)→ CDN キャッシュ最終パージ。🔁
実務チェックリスト(削除・移行共通)
| フェーズ | 確認事項 |
|---|---|
| 事前 | 完全バックアップ取得(DB + uploads) |
| 事前 | ステージング環境で手順を検証 |
| 実行 | 未使用判定は人の目でサンプル検証 |
| 実行 | 隔離(quarantine)運用で即削除を避ける |
| 実行後 | 主要ページで表示確認(PC・モバイル) |
| 実行後 | CDN/ブラウザキャッシュのパージ手順を実行 |
| 実行後 | 監視期間(例:7–30日)を設ける |
| トラブル時 | バックアップから迅速に復元できる手順を用意 |
短いまとめ(安全第一の精神で)
- バックアップ→ステージングで検証→隔離→本削除/本移行 の順を守れば、多くの事故は防げます。🛡️
- URL置換やシリアライズデータの扱いは慎重に。
--dry-runを使って必ず影響範囲を確認してください。 - 外部化は効果的ですが アクセス制御・キャッシュ管理・コスト の三点に十分注意して計画的に実施しましょう。
よくある表示トラブルと対処法
以下は、メディアが正しく表示されないときに現れる代表的な症状を「原因/確認手順/対処法」の形式で整理したトラブルシューティング集です。
初心者でも実行できる段階的チェックリストと、必要に応じたコマンドやプラグインの例を併記しています。
実行前に必ずバックアップを取ってください。💾
1) 画像がライブラリに出ない/表示されない
症状例:メディアライブラリにサムネイルが表示されない、投稿ページで画像が404や空白になる。
考えられる原因(早見表)
| 症状 | 主な原因 |
|---|---|
| ライブラリに表示されない(サムネイル空白) | ファイル権限/所有者不整合、uploadsパスが異なる、DB参照が壊れている |
| 画像をクリックすると404 | ファイルがサーバーに存在しない、URLが間違っている |
| 画像が表示されない(ブラウザでエラー) | MIMEタイプ・.htaccessの問題、CDNキャッシュ、CORS、mod_securityによるブロック |
段階的チェック(やること)
- ブラウザで直接URLを開く(ライブラリ → ファイルURLをコピー → 新しいタブで貼る)
- 直接表示されればファイルは存在します。
- ファイルの存在をFTP/SFTPで確認:
wp-content/uploads/...にファイルがあるか。 - パーミッション/所有者確認
- 推奨例:ディレクトリ
755、ファイル644。 - 例:
find wp-content/uploads -type d -exec chmod 755 {} ;/find wp-content/uploads -type f -exec chmod 644 {} ; - 所有者はWebサーバーユーザー(例:
www-dataやapache)に設定。例:chown -R www-data:www-data /var/www/html/wp-content/uploads(環境によりユーザー名は異なります)。
- 推奨例:ディレクトリ
- WP の設定確認:
設定 → メディアやupload_pathオプションがカスタマイズされていないか。 - プラグイン/テーマ競合チェック:プラグインをすべて無効化 → 問題が消えるか確認。問題消えたらプラグインを1つずつ戻して特定する。テーマも同様にデフォルトテーマへ切替えて確認。
- キャッシュ/CDN の確認:CDN やキャッシュプラグインを使っている場合はパージ(クリア)して再確認。
- ブラウザコンソールとネットワークタブを確認:CORSや403/500などのHTTPステータスが出ていないかを確認。
- サーバーログ確認:Apache/nginx の error log を確認(例:
tail -n 200 /var/log/apache2/error.log)。mod_security のブロックログがないかも確認。
代表的な対処例
- パーミッション修正(上記コマンド)→ 再確認。
upload_pathが間違っていれば修正(管理画面/DBのwp_optionsのupload_path)。- mod_security によるブロックが疑われる場合、ホスティング側へ連絡して一時除外またはルールの緩和を依頼。
- CDNキャッシュをパージし、必要なら一時的に CDN を無効化して現象を切り分ける。
2) サムネイルが壊れる・再生成が必要な場合(Regenerate Thumbnails 等)
症状例:テーマを変えたら表示が崩れる/サイズが合わない/サムネイルが無い。
原因:テーマや add_image_size() による新しい画像サイズが既存の画像に対して生成されていない。
対処手順
- Regenerate Thumbnails(GUIプラグイン)を使う方法
- プラグインをインストール → ツールやプラグイン画面から「全画像を再生成」。
- WP-CLI で実行する方法(サーバーで実行可能なら)
# すべての画像を再生成(実行前にバックアップ推奨)
wp media regenerate --yes
- 対象画像のみ再生成(大量ファイルで分割実行したい場合)
wp media regenerate 123 456 789 --yes
注意点
- 再生成はCPUやディスクI/Oを消費するため、本番で一気に回す際はピーク時間を避けるか少量ずつ実行。
- プラグインやテーマがカスタムサイズを作る場合、その設定が正しくあるか
functions.phpを確認。
3) サーバーエラー、PHPメモリ不足、mod_security、CDN の影響調査手順
よくあるエラー:500 Internal Server Error、413 Request Entity Too Large、502/504(ゲートウェイ系)、403 Forbidden(一部リクエスト)
チェックリスト
- 一時的にデバッグを有効にして詳細エラーを見る(開発環境 or ステージング推奨)
wp-config.phpに以下を追加(表示させる場合は本番ではなくステージングで):
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true );
define( 'WP_DEBUG_DISPLAY', false ); // 本番では false 推奨
- エラーログは
wp-content/debug.logに出力されます。
- PHPエラーログ/サーバーログを確認(例)
# Debian/Ubuntu Apache
tail -n 200 /var/log/apache2/error.log
# Nginx
tail -n 200 /var/log/nginx/error.log
- PHPメモリ制限の確認と一時増加
memory_limitを確認(phpinfo()やホスティングの PHP 情報画面)。- 一時的に
wp-config.phpで増やす(環境依存で効果がない場合あり):
define( 'WP_MEMORY_LIMIT', '256M' ); // 例:256M
- 根本は
php.iniのmemory_limitを変更するか、ホスティング会社に設定を依頼。
- mod_security の影響
- 画像アップロード時や特定のURLアクセスで403や500が出る場合は mod_security のルールに引っかかっている可能性あり。
- ホスティングのサポートへログ確認とルール除外を依頼する(自分で無効化できない共有ホスティングが多い)。
- 413 Request Entity Too Large(アップロードサイズ超過)
upload_max_filesizeとpost_max_sizeを確認して引き上げる必要あり(php.ini/.htaccess/wp-config等で設定)。
- CDNやプロキシ(Cloudflare 等)の影響
- CDN を一時的にバイパス(開発モード)にして、問題が CDN に由来するかを切り分ける。
- CDN のエッジキャッシュやオリジン接続が問題なら、CDN のダッシュボードでエラー詳細を確認。
4) FTPでアップしたのにライブラリに反映されない時の対処(同期ツールの使用)
原因:FTPでファイルを uploads に置いただけでは WordPress の attachment(DB)に登録されず、管理画面のライブラリに表示されません。
対応パターン
- プラグインで一括インポート(GUI)
- 例:Media Sync / Add From Server / Media from FTP 等(名称はプラグインによって異なる)
- 手順:プラグインをインストール → uploadsフォルダをスキャン → 対象ファイルを選択してライブラリへインポート。
- メリット:GUIで確認しながら登録できる。
- WP-CLI を使って一括登録(コマンドライン)
# サイトのルートで実行(パスは環境に合わせる)
wp media import wp-content/uploads/2025/08/* --allow-root
--skip-copyや--porcelain等のオプションも利用可能。--allow-rootは root 実行時の例(注意して使う)。- メリット:大量ファイルを高速に登録できる。
- 同期の注意点
- 登録時にメタ情報(タイトル・alt・キャプション)を一括で付与することは難しい。必要なら後からメタを CSV 等でインポートするプラグインを検討。
- サムネイルが生成されていない場合は、インポート後に
Regenerate Thumbnailsを実行する。
5) ユーザー向け簡易トラブルシューティングチャート(短縮版)
- 画像が見えない → まずブラウザで直接URLを開く(存在確認)。
- 404なら → FTPでファイルの存在とパーミッションを確認。
- 403/500なら → サーバーログを確認、mod_security/権限/プラグインをチェック。
- ライブラリに出ない → FTPで置いたなら Media Sync / WP-CLI でライブラリ登録。
- サムネイル問題 → Regenerate Thumbnails(プラグイン or WP-CLI)を実行。
- すべてダメなら → テーマをデフォルトへ、プラグインをすべて無効化して切り分け。
付録:よく使うコマンド(参考)
実行前に必ずバックアップ、サーバー環境によってコマンドやユーザー名は異なります。
# サムネイル再生成(WP-CLI)
wp media regenerate --yes
# メディア一括インポート(WP-CLI)
wp media import wp-content/uploads/2025/08/* --allow-root
# uploads 配下のパーミッションを修正(例)
find wp-content/uploads -type d -exec chmod 755 {} ;
find wp-content/uploads -type f -exec chmod 644 {} ;
# ログを確認(例:Apache)
tail -n 200 /var/log/apache2/error.log
最後に:実務上の注意点(必読)
- テスト環境で再現→本番で実行が安全。
- 重要な操作(パーミッション変更、WP-CLI、プラグイン導入)は必ずバックアップを取ってから。
- ホスティング環境によっては、自分でできることに制限がある(mod_security の無効化や php.ini 編集など)。その場合はホスティングサポートへ連絡するのが早いです。☎️
高度な運用:メタデータと公開表示
メディアファイルに含まれる撮影情報(EXIF / IPTC)や、独自のカスタムメタを管理画面で扱えるようにして、サイトのフロントで一覧・検索・公開できるようにする方法を解説します。
開発寄りの実装例(管理画面の入力欄追加、アップロード時にメタを保存、フロントで表示するショートコード)を含め、セキュリティ・プライバシー配慮や運用上の注意点も示します。
EXIF/IPTCなど撮影情報の表示と管理(管理画面での見せ方)
ポイント(要点)
- EXIF(カメラ情報、シャッタースピード、撮影日時など)は
wp_get_attachment_metadata()のimage_metaに含まれることが多いです。 - IPTC(キャプション・キーワードなど)は画像ファイル内部の APP13 セグメントに入っており、
iptcparse()+getimagesize()で取得できます。 - 公開時にはGPS情報など個人が特定できるデータを除外するかマスクする運用が必須です(プライバシー保護)。🔒
実務的な表示例(管理画面)
- 管理画面の「メディア編集」画面やメディアモーダルに 「撮影情報」セクションを追加し、EXIF要約(カメラ名/レンズ/撮影日時/ISO/絞り値/シャッタースピード)を表示。
- 重要:表示は読み取り専用にして、編集は可能な項目(クレジット、キャプション)だけに限定すると安全で運用しやすい。
実装(概念)
- アップロード時に EXIF/IPTC を読み取り、要約データを attachment のメタ(例:
_exif_summary)として保存しておくと、管理画面では DB を参照するだけで高速に表示できます(ファイル解析を毎回行わないため)。⚡
添付ファイル投稿タイプへのカスタムメタ追加方法(開発寄りの手順)
ここでは 管理画面のメディア編集画面にフィールドを追加して保存し、REST/ブロックエディタでも使えるようにする 最低限のコード例を示します。実運用では検証環境で先にテストしてください。
1) メタを登録(REST にも公開)
// functions.php など
add_action('init', function() {
register_post_meta('attachment', 'photographer_credit', [
'show_in_rest' => true,
'single' => true,
'type' => 'string',
'auth_callback' => function() { return current_user_can('edit_posts'); },
]);
});
2) メディア編集画面にメタボックスを追加(添付ファイル編集ページ)
add_action('add_meta_boxes', function(){
add_meta_box('attachment_photographer', 'Photographer credit', function($post){
$val = get_post_meta($post->ID, 'photographer_credit', true);
echo '<label>クレジット(例:撮影者名)</label><br/>';
echo '<input type="text" name="photographer_credit" value="'. esc_attr($val) .'" style="width:100%"/>';
}, 'attachment', 'normal', 'high');
});
add_action('edit_attachment', function($post_id){
if( isset($_REQUEST['photographer_credit']) ){
update_post_meta($post_id, 'photographer_credit', sanitize_text_field($_REQUEST['photographer_credit']));
}
});
3) メディアモーダル(メディア挿入ダイアログ)でも編集したい場合
メディアモーダルのデータは AJAX と JS で構成されています。簡単に対応するなら attachment_fields_to_edit/attachment_fields_to_save フィルタを使います(レガシーだが手っ取り早い)。
add_filter('attachment_fields_to_edit', function($form_fields, $post){
$form_fields['photographer_credit'] = [
'label' => 'Photographer credit',
'input' => 'text',
'value' => get_post_meta($post->ID, 'photographer_credit', true),
'helps' => '表示用のクレジットを入力',
];
return $form_fields;
}, 10, 2);
add_filter('attachment_fields_to_save', function($post, $attachment){
if (isset($attachment['photographer_credit'])) {
update_post_meta($post['ID'], 'photographer_credit', sanitize_text_field($attachment['photographer_credit']));
}
return $post;
}, 10, 2);
備考
register_post_meta()を使えばブロックエディタや REST API からもこのメタを利用できます。- 管理画面での入力は必ず
sanitize_*→ 保存、フロントではesc_html()等で出力逃避して下さい(XSS対策)。🛡️
フロントエンドに拡張メタデータを表示する実装例(写真アーカイブの作成)
以下は「添付ファイル(画像)を一覧表示し、EXIFサマリとカスタムメタを併せて出力する」ショートコードの簡易実装例です。実運用ではスタイル(CSS)やキャッシュを追加してください。
// functions.php に追加
add_shortcode('photo_archive', function($atts){
$atts = shortcode_atts(['per_page'=>20], $atts, 'photo_archive');
$q = new WP_Query([
'post_type' => 'attachment',
'post_mime_type' => 'image',
'posts_per_page' => intval($atts['per_page']),
'post_status' => 'inherit',
'orderby' => 'date',
'order' => 'DESC',
]);
if (!$q->have_posts()) return '<p>No images found.</p>';
$out = '<div class="photo-archive-grid">';
while ($q->have_posts()) {
$q->the_post();
$id = get_the_ID();
$img = wp_get_attachment_image($id, 'medium'); // 画像タグはWPが安全に出力
$photographer = get_post_meta($id, 'photographer_credit', true);
$meta = wp_get_attachment_metadata($id);
$exif = isset($meta['image_meta']) ? $meta['image_meta'] : [];
$camera = !empty($exif['camera']) ? esc_html($exif['camera']) : '';
$created = !empty($exif['created_timestamp']) ? date('Y-m-d', $exif['created_timestamp']) : '';
$out .= '<figure class="photo-item">';
$out .= $img;
$out .= '<figcaption>';
$out .= '<div class="photo-meta">';
if ($photographer) $out .= '<div class="meta-photographer">📸 ' . esc_html($photographer) . '</div>';
if ($camera) $out .= '<div class="meta-camera">Camera: ' . esc_html($camera) . '</div>';
if ($created) $out .= '<div class="meta-date">Taken: ' . esc_html($created) . '</div>';
$out .= '</div>'; // .photo-meta
$out .= '</figcaption>';
$out .= '</figure>';
}
wp_reset_postdata();
$out .= '</div>'; // .photo-archive-grid
return $out;
});
補足
wp_get_attachment_image()はsrcsetを自動で付けるためレスポンシブに対応します。- EXIF を都度パースする負荷が気になる場合は、アップロード時に要約 EXIF をポストメタに保存(後述)しておくと表示が高速です。
付加:アップロード時に EXIF/IPTC を保存しておく(パフォーマンス向上)
アップロードイベントでメタを抽出して DB に保存しておく例:
add_action('add_attachment', function($post_id){
$file = get_attached_file($post_id);
if (!file_exists($file)) return;
// WordPressの関数で読み取れる基本的なimage_meta
$imeta = wp_read_image_metadata($file);
if ($imeta && is_array($imeta)) {
update_post_meta($post_id, '_exif_summary', $imeta);
}
// IPTCの読み取り(APP13)
$size = getimagesize($file, $info);
if (!empty($info['APP13'])) {
$iptc = iptcparse($info['APP13']);
if ($iptc) update_post_meta($post_id, '_iptc_raw', $iptc);
}
});
利点:フロント表示時にファイル解析を繰り返さないため高速化。
注意:wp_read_image_metadata() や iptcparse() の結果は環境差(PHP拡張)があります。必ず存在チェックを行ってください。
実運用のポイント・ベストプラクティス(チェックリスト)
- 個人情報を公開しない:GPSや撮影場所など、個人を特定しうる情報は公開しない運用を必ず策定する。🚫
- 解析は一度だけ保存:アップロード時に EXIF/IPTC を解析してメタに保存し、表示は DB を参照する(パフォーマンス向上)。
- 権限設計:誰がメタを編集できるかを制御(
auth_callbackやcurrent_user_can()を利用)。 - エスケープ:すべての出力を
esc_html()/esc_attr()/esc_url()で処理。 - キャッシュ:大量の画像一覧は transient / object cache を活用して描画負荷を下げる。
- バックアップ:メタスキーマを変更する前に DB バックアップを必ず取得。💾
注意点(トラブルを避けるために)
- EXIF/IPTC の取り扱いは環境依存(PHP の exif 拡張や GD/imagick の挙動)。テスト環境で動作確認を行ってください。
- IPTCパースは元データの形式に依存するため、全ファイルで取得できるとは限りません。
- 大量アップロード後に一括解析を走らせる場合はサーバー負荷に注意し、バッチ処理にする(WP-CLI の cron 実行など)。
まとめ(導入フローの例)
- 要件定義:どのメタを管理し、誰が編集できるかを決める。
- 実装:
register_post_meta()、管理 UI、アップロード時の抽出処理を作る。 - フロント:ショートコードやテンプレートで表示。出力は必ずエスケープ。
- 運用:プライバシー配慮・キャッシュ・バックアップの運用を整備。
定期メンテナンスと運用ルール
メディアライブラリは「放置すると肥大化して性能低下や運用トラブルにつながる」ため、ルール化+定期作業+自動化のバランスで運用するのが安全です。
ここでは具体的な方針、スケジュール例、実行コマンド例、そして現場で使えるチェックリストをわかりやすく提示します。
不要ファイルの定期チェックと削除方針(自動化の可否)
方針のポイント
- 安全第一:自動削除は効率的だが誤削除リスクがある。まずは「検出→隔離→監視→完全削除」の段階運用を採る。
- 検出基準を明確化:未使用期間(例:90日以上 投稿・参照されていない)、重複、低解像度のテスト画像、テンポラリファイル等を候補にする。
- 人の目での最終確認を残す:自動判定で候補を出し、担当者がサンプル確認してから隔離する。
運用ワークフロー(推奨)
- 自動スキャン(週次/月次):未使用ファイル候補をリスト化(プラグイン or WP-CLI)。📝
- 隔離(quarantine)フェーズ:候補を
uploads/quarantine/YYYYMM/に移動(自動で移動できるツールなら可)。この段階はすぐに削除しない。📂 - 監視期間:7〜30日程度、サイト表示やユーザーからの報告を監視。👀
- 完全削除:問題なければ削除。問題があればバックアップから復旧。🔁
自動化の可否
- 検出→隔離:自動化は「推奨」。
- 隔離→完全削除:半自動(人の承認付き) が安全。
- 自動完全削除を採用する場合は「厳格なルール」「複数承認」「長めの監視期間(30日以上)」を必須にする。
注意点(落とし穴)
- 外部参照(他サイトやメール等)があるファイルは未使用判定で漏れることがある。直リンク確認ルールを入れること。
- カスタムフィールド/プラグインで動的に参照される場合は誤検出が発生するので除外リストを準備する。
- 削除前に必ずバックアップ(差分可)を取ること。
バックアップ頻度・保存ポリシー、プラグイン管理ルール
バックアップ方針(例)
| 種類 | 頻度(目安) | 保存先 | 保持期間 |
|---|---|---|---|
| メディア(uploads フォルダ)差分バックアップ | 毎日 | ローカルバックアップ+クラウド(S3等) | 30日(ローテーション) |
| フルサイト(DB + files) | 週次 | オフサイト(クラウド) | 90日 |
| 重要リリース前のスナップショット | 毎回リリース時 | 冗長保存(別リージョン) | リリース終了後1年 |
運用ルール(必須)
- テスト復元を定期実施:バックアップが正しく復元できるかを3か月毎にステージングで検証。✅
- 暗号化とアクセス制御:クラウド保存時は暗号化、バックアップ用アクセスキーは限定ユーザーのみ。🔒
- バックアップの自動化:cron やホスティングのスナップショット機能で自動化。失敗時に通知が来るように設定。📣
プラグイン管理ルール
- テスト環境で先に検証:本番に入れる前にステージングで動作確認。🔁
- プラグインの最小化:同機能のプラグインは1つだけ。複数導入は競合リスク。⚠️
- 更新方針:重要なセキュリティ更新は 72 時間以内に適用(テスト済み)。その他は定期(例:週次)のまとめ更新。
- 変更ログ(Changelog)を残す:プラグイン導入・更新・設定変更は必ず変更ログを残す。チーム運用時の責任追跡に有用。🗂️
- ロールバック手順を用意:更新失敗時の復旧手順(復元ポイント)をドキュメント化しておく。
実用コマンド例(WP-CLI を使える場合)
# DB バックアップ(例)
wp db export /backups/db-$(date +%F).sql
# uploads を tar としてアーカイブ(例)
tar -czf /backups/uploads-$(date +%F).tar.gz wp-content/uploads
(※実行前に権限とストレージ容量を確認)
運用時のベストプラクティス(命名・圧縮・アップロード前の確認)
命名規則(テンプレート & ルール)
- 推奨フォーマット:
YYYYMMDD_用途_識別子_vX.ext- 例:
20250830_campaign_bannerA_v1.jpg
- 例:
- ルール:英数字・ハイフン/アンダースコアで統一。スペース・日本語は避ける。URLが読みやすくなる。🔡
アップロード前チェックリスト(必須)
- [ ] 適切な解像度にリサイズ済みか(用途に合わせる)📐
- [ ] 圧縮(品質)は最適化済みか(例:JPEG 80–85、WebP を検討)📉
- [ ] 代替テキスト(alt)とタイトルのテンプレは入力済みか(アクセシビリティ)✍️
- [ ] ファイル名が命名規則に従っているか(検索性向上)🔎
- [ ] 権利情報(クレジット/ライセンス)をメタに記録したか(必要時)📝
圧縮・最適化の運用
- 事前圧縮を基本:Photoshop、Squoosh、ImageOptim 等でローカル圧縮→アップロードが理想。
- サーバー側自動圧縮プラグインを使う場合は、品質パラメータをチームで決定し、必ずサンプル確認を行う。👀
- WebP/modern format の採用は推奨。ただしフォールバックの設定を忘れない。
メタデータ運用
- alt テキストのテンプレ化:商品の場合は「商品名+撮影角度」、記事の図版は「図の要約」など簡単なルール化。
- キャプションは公開向け、説明は内部管理用と明確に分ける。
品質ガバナンス(チーム向け)
- 各アップロード担当者に 短い SOP(標準作業手順) を配布:命名、圧縮基準、保存場所、タグ付けルールなど。📘
- 定期的(例:四半期)に運用ルールをレビューし、不要な画像運用やコスト増を抑制する。
具体的な定期スケジュール例(すぐ使えるテンプレ)
- 毎日:uploads 差分の自動バックアップ(夜間)+成功/失敗通知。
- 毎週:未使用ファイルの自動スキャン(候補リスト生成)、プラグイン更新のまとめ確認(ステージングで検証)。
- 月次:隔離フォルダの確認・整理、サムネイルの再生成(必要時)、容量レポートの確認。
- 四半期:フルバックアップの復元テスト、運用ルールのレビュー、コスト分析(ストレージ・転送量)。
- リリース前:必ずスナップショット(フルバックアップ)を取得し、ロールバック手順を明文化。
チェックリスト:デプロイ/アップロード前の最終確認(印刷可)
- [ ] バックアップは直近で取得済みか?
- [ ] アップロード画像は命名ルールに従っているか?
- [ ] alt とタイトルが適切に記入されているか?
- [ ] ファイルサイズと解像度は用途に合っているか?
- [ ] 圧縮後に画質を肉眼で確認したか?
- [ ] 新しいプラグインを導入する場合、ステージングでの動作検証済みか?
- [ ] 変更ログ(誰がいつ何をしたか)が記録されているか?
まとめ(運用の心得)
- ルール化(命名・メタ・圧縮)+自動化(スキャン・バックアップ)+人のチェック(隔離・承認)が最も安全で効率的な運用パターンです。
- まずは 小さな運用ガイド(1ページ) を作り、担当者全員に共有して守らせることが、最も効果が出る初手です。📣
すぐ使える小ワザ・FAQ
管理が楽になる4つのコツ
- 命名ルールを最初に決める(そして守る)
例:YYYYMMDD_用途_識別子_v1.jpg。検索しやすく、バージョン管理もしやすくなります。日付+用途+番号があればまず困りません。📁 - アップロード前に必ず先圧縮する
ローカルでリサイズ&圧縮(例:幅1200px、JPEG品質70–85)してからアップロードすると、表示速度とディスク容量の双方で得します。一括処理ツールを用意しておくと作業が早いです。⚡ - “隔離フォルダ(quarantine)運用”で安全に削除
未使用ファイルは即削除せず、まずuploads/quarantine/YYYYMM/に移動→一定期間(7〜30日)監視→問題なければ完全削除、という流れを習慣化します。誤削除リスクが激減します。🛡️ - 小さな自動化を取り入れる(スキャン→通知)
毎週自動で未使用候補のリストを出す、バックアップ成功/失敗を通知する、という“確認だけ自動化”は現場の負担を大きく減らします。自動で完全削除は避け、必ず人の判断をはさみましょう。🤖➡️👀
まとめ表:コツと期待できる効果
| コツ | 効果 |
|---|---|
| 命名ルール | 検索性・運用効率の向上 |
| 先圧縮 | 表示高速化・容量節約 |
| 隔離運用 | 誤削除のリスク低減 |
| 部分自動化 | 定常作業の負担軽減 |
よくある質問集(FAQ)
Q1 ─ メディアを一括でダウンロードできますか?
A1:はい。主な方法は3つです。
- FTP/SFTPで
wp-content/uploads/を丸ごとダウンロード(最も確実)。 - バックアッププラグインでメディアのみエクスポート(ZIP)。
- サーバー上で圧縮(tar/zip)→ダウンロード(大量ファイルのときに効率的)。
ダウンロード後はローカルで解凍して構成が揃っているか確認してください。💾
Q2 ─ メディアをローカルに複製したい(開発環境で使う)
A2:基本は「ファイル(uploads)を取得」+「DB(attachment ポスト)を同期」します。簡単手順:
- FTPで
uploadsを取得。 - 本番DBの
wp_posts(attachment) とwp_postmetaの関連部分をエクスポート(必要ならフィルタ)。 - ローカルにインポートしてパスが合うか確認。手順が不安な場合はまず少数ファイルでテスト。🧪
Q3 ─ 「この画像、どこで使っているか調べたい」方法は?
A3:
- 管理画面の添付ファイル詳細で「添付ファイルのページ」を開き確認。
- プラグインで参照箇所を調べる(プラグイン名は環境に合わせて選定)。
- WP-CLI が使えるなら
wp db queryやgrepで投稿内の URL を検索すると速いです。🔎
Q4 ─ 大量の画像を一括登録(FTPで置いた後にライブラリに反映)するには?
A4:FTPで置いた後、Media Sync系プラグインか WP-CLI の wp media import を使ってライブラリ登録します。登録後、必要ならサムネイルを再生成してください。⤴️
Q5 ─ 画像の容量が大きすぎる/アップロードできない時は?
A5:まずは ローカルでリサイズ&圧縮。それでも大きい場合は、サーバーの PHP 設定(upload_max_filesize / post_max_size)を確認し、必要ならホスティングへ依頼または分割・外部ホスティング(動画はYouTube等)を検討してください。⚠️
Q6 ─ すぐに使えるショートカット(実務)
- 編集前にローカルで画像を2サイズ用意(記事用とヘッダー用)。
- 同名で差し替える運用を避ける(キャッシュや参照不整合が起きやすい)。新バージョンには
_v2を付与。 - よく使う代替テキストのテンプレを作成(商品、イベント、図版でテンプレ化すると入力ミスが減る)。✍️
Q7 ─ 急いで画像切れを修正するには?
A7:1) CDNとブラウザキャッシュをクリア、2) 直リンク(公開URL)をブラウザで確認、3) ファイルが無ければFTPでファイルを戻す、4) 迅速修正用に「代替画像」1枚を常備しておくと安心です。🚑
Q8 ─ 小さなチームで最低限守る運用ルールは?
A8:以下3つを必須ルールにしてください。
- 命名規則を1つだけ採用して周知。
- アップロード前に必ず圧縮してからアップ。
- 隔離運用を導入してから完全削除。
この3つで事故率が大幅に下がります。✅
最後に:即実行できるワンランナー(3分でできる作業)
- 命名ルールのテンプレを1行で作ってチームに送る(例:
YYYYMMDD_用途_識別子_v1.ext)。 - 1つの代表ページを選び、画像を最適化して差し替え速度を体感する(効果がわかります)。
- 隔離フォルダを一つ作り、未使用候補を1週間移動して様子を見る(安全性を体感できます)。
まとめ
ここまでで押さえておきたい最重要ポイントを短くまとめます。
- 代替テキスト(alt)は必ず入れる:SEOとアクセシビリティ双方に効く基礎。
- アップロード前にリサイズ&圧縮:ページ速度に対して最も即効性のある改善策。
- FTPで置いただけではライブラリに反映されない:Media Sync や WP-CLI を使って正しく登録すること。
- 削除は“隔離→監視→完全削除”の順で行う:誤削除による記事崩れを防げる。
- プラグインは目的に合わせて厳選:フォルダ管理・画像最適化・未使用検出など、必要最小限に留める。
- 定期バックアップと復元テストを忘れない:万が一に備えて復元まで確認する運用が安全。
今すぐできるアクション(3分でできる)
- 代表的な記事1本を選んで、使っている画像のaltが入っているかチェック。
- その記事の主要画像をローカルで最適化(リサイズ+圧縮)して差し替え、表示速度の違いを体感する。
- 未使用と思われる画像を1つ隔離フォルダに移して、数日様子を見る運用を始める。

