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

はじめに

こんにちは、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を通じて投げていただけると助かります。

スロットの作り方や【React + gsap】でモーダルを作る方法についてはこちらの記事で解説しています。ぜひこちらもご確認ください。

あわせて読みたい

2023.03.31

【JavaScript】スロットの作り方

デザイン・技術

Javascript

アニメーション

あわせて読みたい

2022.10.12

【React + gsap】でモーダルを作る！

デザイン・技術

Javascript

react

点線が描かれるようなアニメーションの方法やいろいろなパターンで画像をループさせる方法、CSS/JSで作る印象的なhoverのアイデアと実装方法についてはこちらの記事で解説しています。ぜひこちらもご確認ください。

あわせて読みたい

2023.04.24

点線が描かれるようなアニメーションの方法

デザイン・技術

Webサイト

Javascript

CSS

アニメーション

あわせて読みたい

2022.09.29

いろいろなパターンで画像をループさせてみた

デザイン・技術

Javascript

CSS

アニメーション

あわせて読みたい

2022.08.11

【コピペOK】CSS/JSで作る印象的なhoverのアイデアと実装方法

デザイン・技術

Javascript

CSS

デザイン

UI・UX

CMSを活用したWebサイト制作事例

株式会社甲羅

株式会社甲羅のサービスサイトをリニューアルし、情報発信の最適化とブランド価値の向上を実現した事例です。サイトのリニューアルからCMSの導入まで弊社で対応しております。

リニューアル前は各店舗ごとに情報が分散し、更新作業に多くの時間を要していたのです。さらに、多言語対応が不十分で、インバウンド需要に応えられない点も課題でした。

CMSを導入し、各店舗情報を一元管理できる仕組みを構築したことで、更新作業の効率化と負荷軽減を達成しました。

また、英語や中国語などの多言語対応を拡充し、国内外のユーザーに統一感あるブランド体験を提供。その結果、情報更新のスピードが向上し、店舗ページの閲覧数や訪問者数が増加しました。

海外からのアクセスにも対応でき、ユーザー利便性と店舗誘導力が強化され、ブランド価値向上にもつながりました。

事例の詳細についてはこちらからご確認ください。

神戸市

神戸市の採用活動強化を目的に、新たに採用サイトを構築した事例です。サイトの制作を弊社で対応しました。

従来は採用情報が各部署ごとに分散し、求職者が必要な情報を探しにくい状況が課題となっていました。その結果、興味を持った人材であっても必要な情報にたどり着けず、応募を断念する可能性があったのです。

解決策として、採用サイトにCMSを導入し、分散していた採用情報を一元化した統一サイトを構築しました。構築後は、各部署の担当者が容易に情報を更新できるため、運用負荷も大幅に軽減されました。

さらに、求職者目線で情報を整理し導線を最適化したことで、必要な情報にアクセスしやすいサイト構成を実現したのです。

その結果、求職者の利便性が大きく向上し、サイトアクセス数や応募数の増加につながりました。また、魅力的なコンテンツを発信できるようになり、採用活動全体の強化にも貢献しました。

事例の詳細についてはこちらからご確認ください。

有限会社OCEAN PICTURES

映像制作会社OCEAN PICTURESのコーポレートサイトを、7年ぶりにリニューアルした事例です。

大きなテーマは、デザイン刷新と更新業務の効率化でした。デザイン面では、ポップな印象のイラストで全体のトーンと配色を統一し、オープニングに遊び心あるアニメーションを導入してチーム感を表現しています。

さらに、制作フローを明確に示すことで、クライアントや見込み客が理解しやすい構成を実現しました。CMSの管理画面もカスタマイズし、更新・運用を容易にしました。その結果、サイトの印象とユーザー体験が向上し、運用の効率化も達成しました。

事例の詳細についてはこちらからご確認ください。

株式会社トンボ鉛筆

プロフェッショナル向け本格グラフィックマーカー「ABT」のブランドサイト制作事例です。

株式会社トンボ鉛筆様が展開する同製品の魅力を最大限に伝えるため、弊社では演出案や背景ビジュアルの提案からプロトタイプ開発、実装までを一貫して担当しました。

検討を重ねた結果、ABTの豊富なカラーバリエーションを活かす3D表現を中核に据え、色情報（色相・彩度・明度）を3D空間にマッピングすることで、色の関係性を視覚的に体験できる演出を実現しました。

試作から本番実装まで自社で行い、アイデアを忠実にサイトへ反映しています。

3Dインタラクティブ演出により、ユーザーは色彩の世界観を直感的に体感できるサイトとなりました。さらに、CMSを導入して情報更新を容易にし、デザイン性だけでなく運用面での実用性も確保しました。

事例の詳細についてはこちらからご確認ください。