WordPress Vite開発環境｜wp-envとViteで高速化
WordPressのテーマ開発にViteを組み込みたいと考えている方に向けて、wp-envとViteを使った開発環境を紹介する記事を取り上げます。クラシックテーマ開発を前提に、静的HTML制作からWordPress開発への移行も見据えた構成がどのようなものか分かります。
この記事は、wp-envでDocker上にWordPress環境を構築し、Viteでローカルサーバーを立てて開発する環境の作り方を紹介しています。SassとTypeScriptを使い、テーマファイル内はできるだけクリーンに保ちつつ、ViteのHMRを活かして変更がすぐに画面へ反映される開発体験を目指した構成です。
静的なHTMLを作ってからWordPress開発に移るという、著者自身の制作フローを前提にしている点が特徴です。Viteの設定ファイルとWordPress側のテーマヘッダーの両方で開発時と本番時の読み込み先を切り替える工夫が説明されており、開発中はViteのローカルサーバー上のソースを、ビルド後はテーマ内の生成物を参照する仕組みになっています。
複数人での開発を意識して、WordPress内で作成した記事やページなどのコンテンツをバックアップファイルとして書き出し、Gitなどで共有することで開発者間のズレを減らす方法も取り上げられています。画像の格納場所や読み込み方のルール、静的資材ビルドとWordPress用ビルドのそれぞれの使い方についても説明されています。
記事の手順の流れ
- Node.jsとDockerを用意する
- 静的HTML制作時はViteのローカルサーバーを起動してHTML・CSS・JavaScriptを作る
- Dockerを起動してwp-envでWordPress環境を立ち上げる
- Viteのローカルサーバーを起動し、WordPress側からもそのソースを参照しながら開発する
- 画像の格納ルールに沿ってpublicフォルダなどに配置する
- 静的資材用とWordPress用、それぞれの目的に応じてビルドを実行する
記事は著者の方がZennに公開されているものです。当社は内容を転載していません。上のリンクから元記事が開きます。
試す前に要る前提
この環境はNode.jsとDockerが入っていることが前提です。またクラシックテーマでのPHPベース開発を想定した構成なので、ブロックテーマを使う予定がある場合は記事内でも言及されている通り適用できるか分からない点として留意しておくとよいでしょう。
つまずきやすい点
開発時とビルド後でCSSやJavaScriptの参照先が切り替わる仕組みになっているため、変更が画面に反映されない場合はどちらの参照モードになっているかを確認する必要があります。画像の格納場所や読み込み方のルールも、HTML・CSS・JSで扱いが異なるため、パス指定を誤ると本番ビルド後に画像が表示されない原因になりえます。
公開から時間がたって変わっている可能性
この記事は2024年2月の公開です。wp-envやViteはいずれも更新が続いているツールなので、現在試す場合はWordPress公式のwp-env、Viteそれぞれの最新ドキュメントで設定方法やオプションが変わっていないか確かめることをおすすめします。
WordPress とは
世界中で利用されるオープンソースのWebサイト・ブログ管理システムです。
WordPress を実務で使うための情報
動画で見る
WordPress の他のテーマ
よくある質問
読んだうえで、自分でやるか任せるか
OSSは「入れる」より「日本語で運用に乗せる」ほうが手間です。記事のとおりに進めて詰まったら、そこから先は任せてください。
