この度Wordpress開発環境を見直してみました。
今回構築した環境は以下からダウンロード可能です。
https://github.com/Masahiro-web/simple-wp-dev

今回実現したかったこと

エンジニア・非エンジニアに関わらず説明通りに実行すれば作業環境を構築できることを目的にしています。特に昨今利用頻度の上がったtailwindcssをCDN経由でなく最適化された状態で読み込みたかったためViteを導入しています。

• Dockerでの環境構築
• wp-envによる構築時のWPバージョンや初期インストールするプラグインの設定
• フロントエンド開発環境をvite環境としてscssやtailwindcssを最適化されたcssファイルとしてビルド

フォルダ構造

.
├── theme/                  # WordPressテーマディレクトリ
│   ├── dist/              # ビルドされたアセット（JS, CSS）
│   ├── src/               # ソースファイル
|   |   ├── images/       # 画像ファイル（scss内でbackground-image等で指定されたファイルのみ格納する）
│   │   ├── js/           # JavaScriptファイル
│   │   │   └── main.js   # メインのJavaScriptファイル
│   │   └── scss/         # SCSSファイル
│   │       └── style.scss # メインのスタイルファイル
│   ├── functions.php     # WordPressテーマ機能
│   ├── index.php         # メインテンプレートファイル
│   └── ...               # その他のテーマファイル
├── sql/                    # データベースバックアップ
│   └── backup-*.sql       # バックアップファイル
├── package.json            # npm設定とスクリプト
├── vite.config.js          # Vite設定ファイル
├── tailwind.config.js      # Tailwind CSS設定
├── postcss.config.js       # PostCSS設定
└── .wp-env.json            # WordPress環境設定

WP-env

WP-envは、WordPress公式が提供する開発環境ツールです。Docker上でWordPressの開発環境を簡単に構築できるため、チーム内での環境差異を最小限に抑えることができます。
本環境では最新の日本語版WordPressがインストールされるように設定されており/themeディレクトリにメインとなるテーマファイルがマウントされる形になっています。

{
  "core": "https://ja.wordpress.org/latest-ja.zip",
  "phpVersion": "8.1",
  "plugins": [],
  "themes": [
    "./theme"
  ],
  "port": 8888,
  "config": {
    "WP_DEBUG": true,
    "SCRIPT_DEBUG": true
  },
  "mappings": {
    "wp-content/themes/theme/dist": "./dist",
    "sql": "./sql"
  }
}

Vite

Viteは最近主流になりつつあるフロントエンド開発環境です。
Viteの機能を使ってSassやtailwind cssが最適化されたcssファイルを生成します。
cssを生成する際にbackground-imageとしてしてされた画像ファイルをimagesディレクトリに配置して指定する必要があります。
また、srcディレクトリ内だけですがHMR(ホットリロード)に対応しています。
デフォルトでは実環境とは別でhttp://localhost:3000で実行されます。

import { defineConfig } from 'vite';
import { resolve } from 'path';
import tailwindcss from '@tailwindcss/vite'

export default defineConfig({
  root: 'theme/src',
  base: process.env.NODE_ENV === 'production' ? './' : '/',
  server: {
    host: '0.0.0.0',
    port: 3000,
    strictPort: true,
    cors: true,
    hmr: {
      host: 'localhost'
    },
    watch: {
      usePolling: false,
      interval: 1000
    }
  },
  build: {
    outDir: resolve(__dirname, 'theme/dist'),
    emptyOutDir: true,
    manifest: true,
    rollupOptions: {
      input: {
        main: resolve(__dirname, 'theme/src/js/main.js'),
        style: resolve(__dirname, 'theme/src/scss/style.scss')
      }
    }
  },
  css: {
    preprocessorOptions: {
      sass: {
        api: "modern-compiler",
      },
      scss: {
        api: "modern-compiler",
      },
    },
  },
  plugins: [
    tailwindcss(),
  ]
});

themeの設定

WordPressのテーマファイルは`/themes/`ディレクトリにマウントされコアファイルはdocker imageとしてDocker環境で保持され動作します。
テーマ内functions.phpに開発環境か本番環境かを切り分けて利用するアセットファイルを指定するように実装しています。

// Vite関連の関数
function vite_get_asset_url($asset) {
  if (wp_get_environment_type() === 'local') {
    // 開発環境では、Vite開発サーバーからアセットを取得
    return 'http://localhost:3000/' . $asset;
  } else {
    // 本番環境では、ビルドされたアセットを使用
    $manifest = get_theme_file_path('/dist/.vite/manifest.json');
    
    if (file_exists($manifest)) {
      $manifest_content = json_decode(file_get_contents($manifest), true);
      if (isset($manifest_content[$asset])) {
        return get_theme_file_uri('/dist/' . $manifest_content[$asset]['file']);
      }
    }
    
    return get_theme_file_uri('/dist/' . $asset);
  }
}

// スタイルとスクリプトを読み込む
function theme_enqueue_assets() {
  if (wp_get_environment_type() === 'local') {
    // 開発環境では、Vite開発サーバーからHMRスクリプトとして読み込む
    wp_enqueue_script('vite-client', 'http://localhost:3000/@vite/client', array(), null, false);
    wp_script_add_data('vite-client', 'type', 'module'); // モジュールタイプを指定
  }
  
  wp_enqueue_style('theme-style', vite_get_asset_url('scss/style.scss'), array(), null);
  
  // main.jsをモジュールとして読み込む
  wp_enqueue_script('theme-script', vite_get_asset_url('js/main.js'), array(), null, true);
  wp_script_add_data('theme-script', 'type', 'module'); // モジュールタイプを指定
}
add_action('wp_enqueue_scripts', 'theme_enqueue_assets');