LoginSignup
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@hitotch(藤崎 仁美)

【3分で完了】WordPressテーマ・プラグイン開発環境をDockerでカップ麺並に構築！

Last updated at Posted at 2025-09-08

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の設定ウィザードを終えたら、すぐに開発を始められます。

テーマ開発の場合

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

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

# テーマフォルダを作成
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」を有効化すれば、即座に反映されます！

プラグイン開発の場合

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

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

# プラグインフォルダを作成
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のダウンロード

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?