ViteでWordPressの構築環境を作ってみた

公開日:2023.10.06

更新日:2024.01.29

yuki okamura

はじめに

こんにちは、BALANCeでエンジニアをしている岡村です。主にフロントエンドを担当していますが、バックエンドやビルド環境の構築も行なっています。

今回は、ViteとWordPressを使用した開発環境を設定する方法について解説します。この環境はホットリロード機能付きで、Dockerを利用します。Dockerが未インストールの場合、まずはDockerの公式サイトからインストールしてください。

実際の開発環境はこちらのGitHubリンクで確認いただけます。WordPressのファイルはテーマファイル以外は.gitignoreしていますので、ご利用の際は適宜WordPressをインストールしてから使用してください。

使い方

npm run install

//以下のコマンドで開発環境を立ち上げ
//自動でDockerが立ち上がります。動作はlocalhost:8080で確認してください。
npm run dev

//プロジェクトをビルドするには次のコマンドを使用します。
npm run build

wp-config.phpに下記を追加します。

//開発環境ではtrue,本番環境などはfalse もしくは設定しない
define( 'DEV_ENV', true );

SCSSを利用しています。cssのbackground-imageなど、cssからファイルを参照したい時は下記のようにしてください。

//themeファイル内の/assets/img/01.jpgにアクセスしたい時
//scssのビルドの設定で、$base-dirを自動で設定しています。

.hoge {
  background-image: url(#{$base-dir}img/01.jpg);
}

注意: publicフォルダは使いません。jsやcssで使いたいファイルはテーマファイル内のassetsフォルダに入れてください。

何をやってるのか

ほぼViteの公式ドキュメント通りですが、ViteとWordPressの統合の仕組みについて少し詳しく説明します。

viteでは、vite.cofing.jsで下記の設定をすると、manifest.jsonが出力されます。

import { defineConfig } from "vite";
export default defineConfig(() => {
  return {
    ...
    build: {
      manifest: true,
    },
  };
});

それぞれcssとjsのファイルパスが記載されたmanifest.jsonが出力されます。それをphpで読み込み、scriptやcssを読み込んでいます。

//scriptタグの作成
$json = file_get_contents("{$themaPath}/manifest.json");
$data = json_decode($json,true);
$src = get_template_directory_uri().'/'.$data['js/main.js']['file'];
wp_enqueue_script('main.js',$src, array(), '1.0.0');

ただしこれは、build時しか出力されないので、下記のプラグインを使って開発環境用のmanifestを吐き出すようにします。

https://github.com/owlsdepartment/vite-plugin-dev-manifest

開発用manifestはmanifest.dev.jsonが吐き出されます。

wp/wp-content/themes/BALANCe/functions/manifest-helper.phpでは、先述のwp-configのDEV_ENV変数を見て、どちらのファイルを使うかを判断します。

function get_script_src(){
    $themaPath = get_template_directory();
    if(defined( 'DEV_ENV' )){
        $json = file_get_contents("{$themaPath}/manifest.dev.json");
        $data = json_decode($json,true);
        $url = $data['url'];
        $src = $url.'@vite/client';
        $src2 = $url.$data['inputs']['main'];
        echo "
        <script src='{$src}' type='module'></script>
        <script src='{$src2}' type='module'></script>
        ";

    }else if(file_exists("{$themaPath}/manifest.json")){
        $json = file_get_contents("{$themaPath}/manifest.json");
        $data = json_decode($json,true);
        $src = get_template_directory_uri().'/'.$data['js/main.js']['file'];
        wp_enqueue_script('main.js',$src, array(), '1.0.0'); 
    }
    
}

cssも同様にして読み込みます。

function get_style_src(){
    $themaPath = get_template_directory();
    if(defined( 'DEV_ENV' )){
        $json = file_get_contents("{$themaPath}/manifest.dev.json");
        $data = json_decode($json,true);
        $url = $data['url'];
        echo "<link href='{$url}{$data['inputs']['css']}' rel='stylesheet'></link>";
    }else if(file_exists("{$themaPath}/manifest.json")){
        $json = file_get_contents("{$themaPath}/manifest.json");
        $data = json_decode($json,true);
        $src = get_template_directory_uri().'/'.$data['css/style.scss']['file'];
        wp_enqueue_style('style',$src, array(), '1.0.0'); 
    }    
}

dev環境では、@vite/clientのスクリプトを読み込むことでhot reloadができます。

PHPファイルが更新されたら、以下のプラグインでリロードを行います。

https://www.npmjs.com/package/vite-plugin-live-reload

import { defineConfig } from "vite";
import liveReload from "vite-plugin-live-reload";


export default defineConfig(() => {
  return {
    ...
    plugins: [
      liveReload(__dirname + "/**/*.php"),
    ],
  };
});

フィードバックや質問がある場合、GitHubのissueを通じて投げていただけると助かります。

DOWNLOAD

未公開実績も多数！
BALANCeの【デザイン・技術】サービス説明資料には、『CMS機能』の実績が多数掲載されています。
また、関連した会社資料も無料ダウンロードできますので、ぜひご覧ください！

お役立ち資料

CONTACT

お見積もりやご提案に関しては、費用は発生いたしません。お気軽に、お問い合わせください。

お問い合わせ