Zenn
🌟

WordPressをViteで開発できるようにし、Gitで管理する方法

2025/03/03に公開
Laravel
PHP
WordPress
tech

はじめに

普段はLaravelで開発しているが、WordPressのプロジェクトを受注することになりました。WordPressの開発経験は少ないため、Laravelの開発環境と同様のセットアップを目指して構築を進めたいと思います。Laravelでは sail を使うことで簡単に環境構築ができるが、WordPressでも同様の開発体験を実現したいと思い今回の方法をメモ代わりに残しておきます。

WordPressの環境をDockerで構築する

WordPressをスクリプトでインストールする

以下のようなスクリプトを作成し、Laravelの laravel new のように簡単にWordPressをインストールできるようにします。

wp-new スクリプト

#!/bin/bash

PROJECT_NAME=$1

if [ -z "$PROJECT_NAME" ]; then
  echo "プロジェクト名を指定してください。"
  exit 1
fi

mkdir "$PROJECT_NAME" && cd "$PROJECT_NAME"

cat <<EOF > docker-compose.yml
version: '3.8'

services:
  wordpress:
    image: wordpress:latest
    container_name: ${PROJECT_NAME}-wordpress
    ports:
      - "80:80"
    environment:
      WORDPRESS_DB_HOST: db
      WORDPRESS_DB_USER: wordpress
      WORDPRESS_DB_PASSWORD: wordpress
      WORDPRESS_DB_NAME: wordpress
    volumes:
      - ./wp-content:/var/www/html/wp-content

  db:
    image: mysql:5.7
    container_name: ${PROJECT_NAME}-db
    environment:
      MYSQL_DATABASE: wordpress
      MYSQL_USER: wordpress
      MYSQL_PASSWORD: wordpress
      MYSQL_ROOT_PASSWORD: root
    volumes:
      - db_data:/var/lib/mysql

  phpmyadmin:
    image: phpmyadmin/phpmyadmin
    container_name: ${PROJECT_NAME}-phpmyadmin
    restart: always
    ports:
      - "8888:80"
    environment:
      PMA_HOST: db
      MYSQL_ROOT_PASSWORD: root

volumes:
  db_data:
EOF

docker compose up -d
echo "WordPressのセットアップが完了しました。 http://localhost でアクセスしてください！"
echo "phpMyAdminは http://localhost:8888 で利用できます。"

使い方

  1. スクリプトを `wp-new` として保存
  2. /usr/local/bin/（グローバルに使う場合）
  3. 実行権限を付与
    chmod +x wp-new
  4. 新しいWordPressプロジェクトを作成
    wp-new my-wordpress

動作確認

  • MySQLのログイン情報
    • ユーザー名: root または wordpress
    • パスワード: root または wordpress

これで、Laravelの laravel new のように `wp-new` で新しいWordPress環境を素早く構築できます。

WordPressをViteで開発する

(1) WordPress テーマディレクトリの準備

まず、WordPress のテーマディレクトリを作成します（例: my-theme）。

cd my-wordpress/wp-content/themes
mkdir my-theme && cd my-theme

(2) package.json を作成

テーマディレクトリ（my-theme/）内で Vite をセットアップ：

npm init -y
npm install vite --save-dev

開発用の依存パッケージをインストール

npm install sass postcss autoprefixer --save-dev

(3) Vite の設定ファイル vite.config.js を作成

my-theme/vite.config.js を作成し、WordPress のエントリーポイントとして main.js を指定します。

import { defineConfig } from 'vite';

export default defineConfig({
  root: 'src', // 開発用のディレクトリを "src" に設定
  build: {
    outDir: '../dist', // ビルド後の出力ディレクトリ
    emptyOutDir: true,
  },
  server: {
    host: 'localhost',
    port: 5173, // Vite のデフォルトポート
    strictPort: true,
  },
});

(4) src/ ディレクトリを作成

Vite の開発用ファイルを src/ フォルダに配置。

mkdir src
touch src/main.js
mkdir src/css
touch src/css/style.scss

src/main.js（エントリーポイント）

import './css/style.scss';

console.log('Vite is running with WordPress!');

src/css/style.scss（SCSS スタイル）

body {
  background-color: #f8f8f8;
}

2. WordPress のテーマと連携

(1) functions.php に Vite の HMR を組み込む

my-theme/functions.php に以下のコードを追加し、Vite のバンドルされたファイルをロードします。

function enqueue_vite_assets() {
	// vite_serverと通信できない場合は、本番モードとして扱う
	$is_dev = @fsockopen(parse_url($vite_server, PHP_URL_HOST), parse_url($vite_server, PHP_URL_PORT));
    $vite_server = 'http://localhost:5173';

    if ($is_dev) {
        // 開発モード: Vite の HMR をロード
        wp_enqueue_script('vite', $vite_server . '/@vite/client', [], null, true);
        wp_enqueue_script('main-js', $vite_server . '/main.js', [], null, true);
    } else {
        // 本番モード: ビルド済みファイルをロード
        $manifest = json_decode(file_get_contents(__DIR__ . '/dist/manifest.json'), true);
        $main_js = $manifest['main.js']['file'];
        $css = $manifest['main.js']['css'][0];

        wp_enqueue_script('main-js', get_template_directory_uri() . '/dist/' . $main_js, [], null, true);
        wp_enqueue_style('main-css', get_template_directory_uri() . '/dist/' . $css, [], null);
    }
}
add_action('wp_enqueue_scripts', 'enqueue_vite_assets');

(2) テーマの style.css を作成

my-theme/style.css を作成し、WordPress に認識させる。

/*
Theme Name: My WordPress Theme with Vite
Author: Your Name
Version: 1.0
*/

3. Vite の開発・ビルド

(1) Vite の開発サーバーを起動

以下のコマンドを実行すると、WordPress と Vite の HMR（ホットリロード）が動作します。

npm run dev

Missing script: "dev"とエラーが出る場合

下記記述をpacage.jsonに追記してください。

{
  "name": "tonmana_2024",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "vite", #👈ここ
    "build": "vite build" #👈ここ
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "description": "",
  "devDependencies": {
    "autoprefixer": "^10.4.20",
    "postcss": "^8.5.3",
    "sass": "^1.85.1",
    "vite": "^6.2.1"
  }
}

(2) ビルド（本番用）

本番環境で WordPress に適用するには、以下を実行：

npm run build

これにより、dist/ フォルダにバンドルされたファイルが出力され、WordPress で利用可能になります。

WordPressをGitで管理する

WordPressのプロジェクトをGitで管理する際には、テーマディレクトリ（例: wp-content/themes/mytheme/）で git init を実行し、そのディレクトリ単位でバージョン管理を行う。これにより、WordPressのコアファイルや不要なアップロードデータを含めず、テーマの開発に集中できる。

まとめ

  • WordPressをDockerで環境構築し、簡単にセットアップできるスクリプトを作成
  • Viteを導入し、WordPressのテーマ開発を効率化
  • .gitignore を適切に設定し、Gitで管理しやすい構成に

この方法を活用すれば、Laravelの開発環境に近い形でWordPressを管理・開発できるようになります。特に、Viteの導入により、ホットリロードによる素早いフィードバックが可能になり、開発速度が向上する。また、モジュールバンドラーとしてのViteの特性を活かすことで、コードの保守性も向上し、長期的な運用がしやすくなるかと思います。

Discussion