wordpress.comのブログをローカル環境で再現する方法

本記事は、wordpress.comでホスティングされているブログサイトを、Dockerを使ってローカル環境で再現する方法を解説します。

移行の目的と背景

WordPressをローカル環境に再現する主な目的は、ブログサイトをwordpress.comから別のプロバイダー（セルフホスティング）に移行するための準備です。

wordpress.comは、手軽にブログを始められるホスティングソリューションですが、詳細なカスタマイズ（例: ブログ記事のURL構造）を行うには上位プランへの加入が必要で、月額数千円の費用がかかる場合があります。

ブログ運営が軌道に乗ってきた時点で、以下の2ステップでセルフホスティングに移行するのがおすすめです。

wordpress.comのブログをローカル環境に移行（本記事の内容）
ローカル環境をベースに、新しいセルフホスティング環境を設定

本記事では、上記のステップ1を詳しく解説します。ステップ2については「WordPressを静的ウェブサイトに変換してAWSでホスティングする方法」で解説しています。

dockerでWordPressローカル環境構築
wordpress.comからのエクスポートとインポート
- Jetpackのバックアップ取得
- wp-contentをWordPressコンテナに反映
- SQLファイルをDBコンテナでインポート
トラブルシューティング
- 文字化けの修正方法
- 個別ページにアクセスできない
- 管理ダッシュボードでCSSが効かない
- 画像が表示されない
ローカル環境の保存
まとめ

dockerでWordpressローカル環境構築

まず、docker composeを使ってローカル環境を構築します。

作業用の空ディレクトリを作成し、移動します。

mkdir wordpress
cd wordpress

エディターでdocker-compose.ymlを作成し、MySQLとWordPressコンテナをそれぞれ以下のように設定します。

# ~/wordpress/docker-compose.yml
services:
  db:
    image: mysql:5.7
    volumes:
      - db_data:/var/lib/mysql
    restart: always
    environment:
      MYSQL_ROOT_PASSWORD: mysql_root_password
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress_password

  wordpress:
    depends_on:
      - db
    image: wordpress:latest
    ports:
      - "80:80"
    volumes:
      - .:/var/www/html　# ルートディレクトリをマウント
    restart: always
    environment:
      WORDPRESS_DB_HOST: db:3306
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress_password
      WORDPRESS_DB_NAME: wordpress
      WORDPRESS_DB_CHARSET: utf8mb4
      WORDPRESS_DB_COLLATE: utf8mb4_unicode_ci 
      WORDPRESS_DEBUG: true
      WORDPRESS_CONFIG_EXTRA: |
        define( 'WP_DEBUG_LOG', true );

volumes:
  db_data: {}

コンテナを起動します。

docker compose up -d

up: docker-compose.yml で記載されたコンテナをビルド、作成、起動します。
-d: detachedモード（バックグラウンドで実行）でコンテナを実行します。

ブラウザーで https://engineerjutsu.com にアクセスするとWordPressのインストール画面が表示されます。後ほどデータベースを丸ごとインポートするため、ここでは言語、サイトタイトル、ユーザー名、パスワード等はダミーの情報で構いません。 セットアップを完了させてください。

WordPress管理者画面には、https://engineerjutsu.com/wp-admin/ でアクセスできます。

wordpress.comからのエクスポートとインポート

wordpress.comの標準エクスポート機能は記事やページなどのコンテンツのみが対象で、プラグインやテーマ設定は含まれません。

そこで、データベース、メディアファイル、プラグイン、テーマなどサイト全体をバックアップできるJetpackプラグイン（wordpress.comのビジネスプラン以上に含まれます）の自動バックアップ機能を使います。

注）もしビジネスプランでない場合、移行作業の間だけ一時的にアップグレードするのがおすすめです。多少のコストはかかりますが、手動で再設定する手間と時間を大幅に節約でき、ミスも少なくなります。

Jetpackのバックアップ取得

ダッシュボードの左メニューでJetpack -> Bakupと遷移し、Restore to this pointの右の矢印をクリックし、Download backupをクリックします。

Create downloadable fileをクリックし、バックアップファイルの作成が完了するまで待ちます。

完了したらDownload fileをクリックして、バックアップファイル（.tar.gz形式）をダウンロードします。

ダウンロードしたバックアップファイルを解凍します。

# バックアップファイル用のディレクトリを作成
mkdir jetpackbackup
# ダウンロードしたファイル名を指定して解凍
tar xvzf [ダウンロードしたファイル名.tar.gz] -C jetpackbackup

解凍すると、wp-content と sql という2つのフォルダが取得できます。

wp-contentをWordPressコンテナに反映

解凍した wp-content フォルダの中身を、先ほど作成したホストマシンの wordpress ディレクトリ（ローカル環境のルート）にコピーし、既存の wp-content の中身を上書きします。

# wp-contentの中身をコピーするため、末尾に / をつける
cp -r ~/jetpackbackup/wp-content/ ~/wordpress/wp-content/

docker-compose.yml の volumes 設定により、ホスト側の ~/wordpress/wp-content ディレクトリは、自動的にWordPressコンテナ内の /var/www/html/wp-content に反映されます。

SQLファイルをDBコンテナでインポート

次に、データベースのデータをインポートします。

ダウンロードしたSQLファイル（sqlフォルダ）をDBコンテナにコピーします。

# `docker ps` でDBコンテナ名を確認してください（例: wordpress-db-1）
docker cp ~/jetpackbackup/sql [DBコンテナ名]:/tmp

dbコンテナにログインします。

docker exec -it [DBコンテナ名] bash

データベースを一度削除し、文字コードを指定して再作成します。

# mysqlにrootでログイン
mysql -u root -p"$MYSQL_ROOT_PASSWORD"

# mysqlプロンプト内で以下を実行
mysql> DROP DATABASE wordpress;
mysql> CREATE DATABASE wordpress CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
mysql> exit;

sql フォルダ内の全ての .sql ファイルを一括でインポートします。

# コンテナのbashに戻り、以下のコマンドを実行
cat /tmp/sql/*.sql | mysql -u wordpress -p"wordpress_password" wordpress

ERROR 1067（Invalid default value for 'comment_date'など）が出る場合、sql ファイルに古い日付形式 0000-00-00 が含まれている可能性があります。その場合は、一時的にMySQLのSQLモードを変更します。

# mysqlにrootでログイン
mysql -u root -p"$MYSQL_ROOT_PASSWORD"

# SQLモードを設定（このセッションのみ有効）
mysql> SET GLOBAL sql_mode = 'NO_ENGINE_SUBSTITUTION';
mysql> exit;

# 再度インポートを実行
cat /tmp/sql/*.sql | mysql -u wordpress -p"wordpress_password" wordpress

インポートが完了したら、サイトのURLを本番環境からローカル環境に書き換えます。これをしないと、ローカルサイトにアクセスしても本番サイトにリダイレクトされます。

# DBコンテナ内でmysqlにログイン
mysql -u wordpress -p"wordpress_password" wordpress

# URLを書き換え
mysql> UPDATE wp_options SET option_value = 'https://engineerjutsu.com' WHERE option_name = 'siteurl';
mysql> UPDATE wp_options SET option_value = 'https://engineerjutsu.com' WHERE option_name = 'home';
mysql> exit;

ブラウザで以下のURLにアクセスして無事に表示されればインポート成功です。

WordPressトップページ (https://engineerjutsu.com)
管理ダッシュボード (https://engineerjutsu.com/wp-admin/)
- ログイン情報は、wordpress.comで使用していたものと同じです。

トラブルシューティング

移行時に発生しやすい問題と対処法です。

文字化けの修正方法

サイトが文字化けする場合、文字コードの設定ミスの可能性が高いです。

注）文字化けすると、管理者としてログインしても管理ダッシュボード(/wp-admin)にアクセスできなくなるなどの問題も発生します。

まず、~/wordpress/wp-config.php を開き、文字コード設定を確認します。

define('DB_CHARSET', 'utf8mb4'); // これが正しい設定

もしここが latin1 などになっていたら utf8mb4 に修正します。

それでも直らない場合、データベース自体の文字コード設定を確認します。

docker exec -it [DBコンテナ名] bash
mysql -u root -p"$MYSQL_ROOT_PASSWORD"

# データベースの文字コードを変更
mysql> ALTER DATABASE wordpress CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;

# 全テーブルの文字コードを変更（テーブル名を指定して実行）
mysql> ALTER TABLE wp_commentmeta CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
mysql> ALTER TABLE wp_comments CONVERT TO CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
# ... 他すべてのテーブルに対しても実行 ...
mysql> exit;

それでも直らない場合、データ自体が latin1 として保存されている可能性があります。この場合、データを latin1 としてエクスポートし、文字コード定義を utf8mb4 に書き換えて再インポートします。

# DBコンテナ内で作業

# latin1としてデータをダンプ
mysqldump --default-character-set=latin1 -u root -p"$MYSQL_ROOT_PASSWORD" wordpress > /tmp/mybackup_latin1.sql

# ダンプファイルをホストマシンにコピー（テキストエディタで編集するため）
docker cp [DBコンテナ名]:/tmp/mybackup_latin1.sql .

ホストマシンで mybackup_latin1.sql をテキストエディタで開き、CHARSET=latin1 や SET NAMES latin1 となっている箇所を検索し、すべて utf8mb4（照合順序は utf8mb4_unicode_ci）に置換します。

# 修正前: /*!40101 SET NAMES latin1 */;
# 修正後: /*!40101 SET NAMES utf8mb4 */;

# 修正したファイルをコンテナに戻す
docker cp mybackup_latin1.sql [DBコンテナ名]:/tmp/

# コンテナ内で、修正したSQLファイルをインポート
# (ダンプファイルには DROP TABLE が含まれるため、テーブルは自動で再構築されます)
docker exec -it [DBコンテナ名] bash
mysql -u root -p"$MYSQL_ROOT_PASSWORD" wordpress < /tmp/mybackup_latin1.sql

これで文字化けが解消されるはずです。

個別ページにアクセスできない

トップページは表示されるのに、個別の記事やページにアクセスすると404エラーになる場合、パーマリンク設定（.htaccess）が原因です。

ローカルの管理ダッシュボード (https://engineerjutsu.com/wp-admin/) にログインします。

Settings -> Permalinksの設定ページにアクセスし、何も設定を変更せずにSave Changesを押します。

これにより、docker-compose.yml でマウントしたホスト側の ~/wordpress ディレクトリ直下に .htaccess ファイルが自動生成（または更新）されます。

もしファイルが自動生成されない場合は、同ページに表示されるコードをコピーし、~/wordpress/.htaccess というファイル名で手動作成・ペーストしてください。

# ~/wordpress/.htaccess
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule . /index.php [L]
</IfModule>

これで個別ページにアクセスできるようになったはずです。

管理ダッシュボードでCSSが効かない

管理ダッシュボードの表示が崩れ、CSSが効いていない場合、キャッシュ系プラグインがローカル環境で不具合を起こしている可能性が高いです。

特に、wordpress.comでデフォルトでインストールされている page-optimize プラグインなどが原因の場合があります。

プラグインフォルダの名前を変更して強制的に無効化します。

cd wp-content/plugins
mv page-optimize page-optimize_disabled

ブラウザをリロードして確認してください。直らない場合は、他のプラグイン（特にキャッシュ系や最適化系）も同様に無効化して原因を特定してください。

画像が表示されない

記事内の画像が表示されない場合、いくつかの原因が考えられます。

原因1: 画像URLが本番環境のままになっている

記事本文（wp_postsテーブル）に保存されている画像URLが、https://engineerjutsu.com ではなく、古いドメイン（https://your-blog.wordpress.com）のままになっている可能性があります。

対処法: データベース内のURLを一括置換します。

# DBコンテナにログイン
docker exec -it [DBコンテナ名] bash
mysql -u wordpress -p"wordpress_password" wordpress

# 記事本文中のURLを置換
mysql> UPDATE wp_posts SET post_content = REPLACE(post_content, 'https://your-blog.wordpress.com', 'https://engineerjutsu.com');

# （任意）GUIDも置換（ローカル環境なら安全）
mysql> UPDATE wp_posts SET guid = REPLACE(guid, 'https://your-blog.wordpress.com', 'https://engineerjutsu.com');
mysql> exit;

（your-blog.wordpress.com の部分はご自身の元のURLに置き換えてください）

原因2: サムネイル画像のパスが一致しない

Jetpackのバックアップが、wp-content/uploads には元の画像（file.png）のみを含み、DBにはリサイズ後の画像パス（file-1024x597.png）を記録している場合があります。

対処法（確実だが手間がかかる）: 手動で画像を再アップロードする。記事の編集ページから画像ブロックを選択し、「置換」ボタンから ~/wordpress/wp-content/uploads/ ディレクトリにある元画像をアップロードし直します。

対処法（プラグイン）: 「Regenerate Thumbnails」などのプラグインをローカル環境でインストールし、サムネイル画像を強制的に再生成する。

ローカル環境の保存

ローカル環境でブログを無事に再現できたら、設定ファイル（docker-compose.ymlなど）をGitで管理し、リモートリポジトリ（GitHubなど）に保存しておきましょう。

# wordpressディレクトリで実行
git init

# .gitignoreを作成し、不要なファイルを除外
echo "
# WordPress core files (if downloaded)
wp-admin/
wp-includes/

# WordPress uploads (media)
wp-content/uploads/

# Docker data volume
db_data/

# Jetpack backup files
jetpackbackup/

# SQL backup files
*.sql
" > .gitignore

git add .
git commit -m "Initial commit for local WordPress environment"
git remote add origin [your_repository_url]
git push -u origin master

また、インポートに使用した sql フォルダや、wp-content フォルダのバックアップも、別途クラウドストレージ（Google Driveなど）に保存しておくと安心です。

まとめ

本記事では、wordpress.comでホスティングしているブログを、JetpackバックアップとDockerを使ってローカル環境で再現する方法を紹介しました。

次回は、このローカル環境をベースに、静的サイトジェネレーターを使ってAWS（S3/CloudFront）で静的ブログをホスティングする方法を紹介します。

エンジニア術