WordPressでテーマやプラグインを開発したいとき、こんな風に思いませんか？

• 今すぐWordPressテーマ開発を始めたい
• 環境構築に時間をかけたくない
• XAMPPとかよくわからない
• チームメンバーと同じ環境で開発したい
• ファイルを直接編集してリアルタイムで確認したい

そんなあなたのために、カップ麺と戦える3分でWordPress開発環境を構築できるリポジトリを用意しました！

⚠️ 重要な注意事項

この環境は開発専用でセキュリティがゆるいです。本番サーバーでは絶対にそのまま使用しないでください。

TL;DR

リポジトリをクローンして3コマンドで完了。

git clone https://github.com/hitotch/learn-wordpress-ja.git
cd learn-wordpress-ja
mkdir wordpress_data
docker compose up -d

ブラウザで http://localhost にアクセス → WordPress開発開始！

想定所要時間: 約3分（回線速度による）

必要なもの

• Docker Desktop（公式サイトからダウンロード）
• Git
• お好きなテキストエディタ（VS Code推奨）

PHP、MySQL、Apacheのインストールは不要！

3ステップで環境構築

Step 1: リポジトリをクローン

git clone https://github.com/hitotch/learn-wordpress-ja.git
cd learn-wordpress-ja

Step 2: データフォルダを作成

mkdir wordpress_data

Step 3: Docker環境を起動

docker compose up -d

ブラウザで http://localhost にアクセスしてWordPressセットアップを実行すれば、すぐに開発開始できます。

何が含まれているか

クローンしたリポジトリには、以下の内容が含まれています：

learn-wordpress-ja/
├── docker-compose.yml       # WordPress + MySQL環境定義
├── docker/
│   ├── wordpress/
│   │   ├── Dockerfile       # WordPressコンテナ設定
│   │   └── php.ini          # PHP設定（アップロード上限64MBなど）
│   └── db/                  # MySQLデータ（自動作成）
├── wordpress_data/          # WordPressファイル（自動作成）
├── .gitignore              # 適切な除外設定済み
└── README.md               # 詳細な使い方

テーマ・プラグイン開発開始！

環境が起動し、WordPressの設定ウィザードを終えたら、すぐに開発を始められます。

テーマ開発の場合

wordpress_data/wp-content/themes/ に新しいフォルダを作成
style.css と index.php を作成
WordPressの管理画面で有効化
ファイルを編集 → ブラウザで即座に確認！

例：シンプルなテーマを作成

# テーマフォルダを作成
mkdir wordpress_data/wp-content/themes/my-theme

# style.css を作成
cat > wordpress_data/wp-content/themes/my-theme/style.css << 'EOF'
/*
Theme Name: My Theme
Description: カスタムテーマのサンプル
Version: 1.0
*/

body {
    font-family: 'Arial', sans-serif;
    background-color: #f0f0f0;
}
EOF

# index.php を作成
cat > wordpress_data/wp-content/themes/my-theme/index.php << 'EOF'
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title><?php bloginfo('name'); ?></title>
    <?php wp_head(); ?>
</head>
<body>
    <h1>Hello, WordPress Theme!</h1>
    <p>これはカスタムテーマです。</p>
    <?php wp_footer(); ?>
</body>
</html>
EOF

管理画面の「外観 > テーマ」で「My Theme」を有効化すれば、即座に反映されます！

プラグイン開発の場合

wordpress_data/wp-content/plugins/ に新しいフォルダを作成
メインのPHPファイルを作成
WordPressの管理画面で有効化
機能を追加 → すぐにテスト！

例：シンプルなプラグインを作成

# プラグインフォルダを作成
mkdir wordpress_data/wp-content/plugins/my-plugin

# メインファイルを作成
cat > wordpress_data/wp-content/plugins/my-plugin/my-plugin.php << 'EOF'
<?php
/*
Plugin Name: My Plugin
Description: カスタムプラグインのサンプル
Version: 1.0
*/

// セキュリティ：直接アクセスを防ぐ
if (!defined('ABSPATH')) {
    exit;
}

// 管理画面にメニューを追加
add_action('admin_menu', 'my_plugin_menu');

function my_plugin_menu() {
    add_options_page(
        'My Plugin Settings',
        'My Plugin',
        'manage_options',
        'my-plugin',
        'my_plugin_settings_page'
    );
}

function my_plugin_settings_page() {
    echo '<div class="wrap">';
    echo '<h1>My Plugin Settings</h1>';
    echo '<p>プラグインが正常に動作しています！</p>';
    echo '</div>';
}
EOF

管理画面の「プラグイン」で「My Plugin」を有効化すれば、設定メニューが追加されます！

この環境の便利な機能

✅ ファイルがリアルタイムで反映

ローカルのファイルを編集すると、即座にWordPressに反映されます。保存してブラウザをリロードするだけ！

✅ PHP設定済み

アップロード上限64MB、メモリ512MBなど、開発に適した設定が最初から適用されています。

✅ Git管理がスマート

WordPressのコアファイルやデータベースはGit管理対象外。開発したテーマ・プラグインのみを別リポジトリ化してバージョン管理することも可能。

✅ チーム開発対応

同じリポジトリをクローンすれば、全員が同じ環境で開発できます。

よくある質問

Q: ポート80が使われていてアクセスできない

A: docker-compose.ymlのportsを変更してください：

ports:
  - "8080:80"  # localhost:8080でアクセス

Q: WordPressファイルを直接編集したい

A: wordpress_dataフォルダ内のファイルを直接編集できます。変更は即座に反映されます。

Q: データベースの中身を確認したい

A: 複数の方法でMySQLデータベースにアクセスできます：

方法1: コマンドラインでアクセス

docker compose exec lw-db mysql -u wordpress -p wordpress
# パスワード: wordpress

方法2: GUIツールを使用（推奨）
以下のようなMySQLクライアントツールが便利です：

• Sequel Pro (Mac用、無料)
• HeidiSQL (Windows用、無料)
• phpMyAdmin (Webベース)
• MySQL Workbench (無料、高機能)
• TablePlus (Mac/Windows、有料だが使いやすい)

接続情報:

ホスト: localhost
ポート: 3306
ユーザー名: wordpress
パスワード: wordpress
データベース名: wordpress

方法3: phpMyAdminをDocker環境に追加
docker-compose.ymlに以下を追加すれば、Webブラウザで簡単にDB管理できます：

phpmyadmin:
  image: phpmyadmin/phpmyadmin
  ports:
    - "8080:80"
  environment:
    PMA_HOST: lw-db
    PMA_USER: wordpress
    PMA_PASSWORD: wordpress
  depends_on:
    - lw-db

追加後、docker compose up -dで再起動して http://localhost:8080 でphpMyAdminにアクセス可能です。

Q: 環境をリセットしたい

A: 以下のコマンドでデータをリセットできます：

docker compose down
rm -rf wordpress_data docker/db
mkdir wordpress_data
docker compose up -d

まとめ

たった3分でWordPressテーマ・プラグイン開発環境が完成！

✅ 環境構築が爆速 - git cloneとdocker compose upだけ
✅ すぐに開発開始 - ファイル作成してリロードするだけ
✅ 設定済み - アップロード制限やデバッグ設定などが最適化済み
✅ チーム開発対応 - 全員が同じ環境で開発可能

今すぐ試す：

git clone https://github.com/hitotch/learn-wordpress-ja.git
cd learn-wordpress-ja
mkdir wordpress_data
docker compose up -d

これで快適なWordPress開発をお楽しみください！🚀

ところで

この記事は、かなりの部分でAIに助けてもらってます。私のお気に入りは、Github Copilot、Claude 4、VS Codeの組み合わせ。

さすがに「カップ麺」は人間のアイデアです。

参考リンク

• リポジトリ - より詳細な使い方はREADME参照
• Docker公式サイト - Docker Desktopのダウンロード