はじめに
WordPressをローカル環境(LocalWPやMAMPなど)で構築していると、
いざ本番サーバーに移すときに「画像(uploadsフォルダ)」だけが表示されない問題、ありますよね。
この記事では、ローカル環境のuploadsフォルダをエックスサーバーに移す完全手順を、
実際の作業経験をもとにわかりやすく解説します。
1. 今回のゴール
- ローカルの wp-content/uploadsにある画像を
- エックスサーバーの wp-content/uploadsへ正確に移動する。
これで、記事や固定ページ内の画像がすべて本番環境でも表示されるようになります。
2. ローカル環境のuploadsフォルダを探す
LocalWPの場合
- Localを開き、対象サイトをクリック
- 「Open Site Folder(サイトフォルダを開く)」をクリック
- app → public → wp-content → uploadsの順に開く
📁例(Mac)~/Local Sites/sitename/app/public/wp-content/uploads
📁例(Windows)C:\Users\[ユーザー名]\Local Sites\sitename\app\public\wp-content\uploads
3. uploadsフォルダをZIP圧縮
Macの場合:右クリック → 「圧縮」
Windowsの場合:右クリック → 「送る → 圧縮(zip形式)フォルダー」
→ uploads.zip ができればOK。
4. Cyberduckでエックスサーバーに接続
接続設定
| 項目 | 入力内容 | 
|---|---|
| 接続方式 | SFTP(SSH File Transfer Protocol) | 
| サーバー | svXXXX.xserver.jp | 
| ユーザー名 | FTPユーザー名またはサーバーID | 
| パスワード | FTPパスワード | 
| ポート | 22 | 
接続できたら、以下のフォルダに移動します👇public_html/wp-content/
5. uploads.zipをアップロード
- Cyberduckで wp-contentを開いた状態にする
- ローカルの uploads.zipをドラッグ&ドロップでアップロード
アップロード完了後、エックスサーバー側で解凍(展開)します。
6. エックスサーバーで展開
- サーバーパネル → 「ファイル管理」
- public_html/wp-content/を開く
- uploads.zipを選択 → 上部メニューの「展開」をクリック
展開後、フォルダ構成がこうなっていればOK
wp-content/
├ plugins/
├ themes/
├ uploads/
│   ├ 2023
│   ├ 2024
│   ├ 2025
│   ├ wc-logs
│   └ woocommerce
7. 入れ子(uploads/uploads)になった場合の対処法
展開後に下のようになっていたら、入れ子状態です
wp-content/
└ uploads/
   └ uploads/
      ├ 2023
      ├ 2024
      └ 2025
この場合は:
- 正しい中身のある「uploads(内側)」を選択
- 「移動」ボタンで上位の wp-content/に移動
- 空のuploadsフォルダは削除
これで階層が正しくなります。
8. URLの修正(Better Search Replace)
ローカル環境では画像URLが「http://localhost」になっているため、
本番ドメインに置き換える必要があります。
手順
- WordPress管理画面 → プラグイン → 新規追加
- 「Better Search Replace」をインストール&有効化
- ツール → Better Search Replace
- Search for: http://localhost
- Replace with: https://本番ドメイン
- 全テーブル選択 → 実行
 
- Search for: 
9. メディアライブラリに表示されない場合
プラグイン「Media Sync」を使えば解決できます。
- インストール → 有効化
- 管理画面 → メディア → Media Sync
- 「Scan」→「Import」でメディアを再登録。
10. まとめ
- ローカルのuploadsをzip化してFTPでアップする
- 展開(解凍)後、入れ子になっていないか確認
- Better Search ReplaceでURLを置換
- Media Syncで未登録画像を認識させる
これで、ローカルのWordPressで作った画像が
本番サイトでも完全に再現されます。
結果
今回の手順を実践して、
- uploadsの二重構造を解消
- 画像URLを修正
- メディア表示を完全復旧
という流れを再現できました。


 
	 
			 
			 
			 
			 
			 
			 
			