- Node.js
- Docker
静的なHTMLを作成する場合はNPM Scriptsのdevコマンドを起動するとローカルサーバーlocalhost:5173が立ち上がります。このポート番号はWordPress時にも参照するので固定でお願いします。（変更する場合はWordPress側も変更する必要あり）
静的資材は基本srcフォルダ内で作ります。CSSやJavaScriptは直接.scssファイルや.tsを参照すれば、Viteがいい感じにしてくれます。
<link rel="stylesheet" href="/assets/style/style.scss" />
<script src="/assets/js/script.ts" type="module"></script>あとは通常の手順でHTML・CSS・JavaScriptを開発していけばOKです。
まずDockerを立ち上げてください。静的制作時と同様にNPM Scriptsのdevコマンドを起動し、さらにwp-startコマンドを実行します。初回のみ色々ダウンロードなどがあるので時間がかかります。wp-startが立ち上がるとlocalhost:8888にアクセスできるようになります。ここがWordPressのローカル環境になります。
開発時はCSSやJavaScriptはViteのローカルサーバーのものを参照しているので、静的作成時と同じようにsrcフォルダ内のファイルを操作してください。終了時はwp-stopでDockerのコンテナを停止します。
画像パスなどが開発・ビルド後できちんと通るように下記ルールでお願いします。
imgタグで読み込む画像はsrc/public/images内に、CSSやjsで読み込む画像はsrc/assets/images/に格納してください。
フォルダ構造
└src
└assets
└images
└background.png
└js.png
└pubilc
└images
└static.png
Viteではpublicフォルダはルートとして扱われるため、/images/static.pngというパスで画像を読み込むことができます。
▼HTML
<img src="/images/static.png" alt="" width="300" height="300" />CSSで画像を読み込む場合は相対パスではなく、/assetsから始めるパス名にしてください。こちらもビルド時にViteがパスを解決するためです。
▼CSS
background-image: url("/assets/images/background.png");jsで画像ファイルを読み込む場合はViteにビルド時にパス解決されるようimport文で読み込んでください。
▼JS
import imgsrc from "/assets/images/js.png";
// jsから画像を読み込むサンプル
const canvas = document.querySelector<HTMLCanvasElement>("#canvas");
const context = canvas!.getContext("2d");
const image = new Image(300, 300);
image.src = imgsrc;
image.addEventListener("load", () => {
context?.drawImage(image, 0, 0, 300, 300);
})WordPress開発時にPHPで画像を読み込む場合はテンプレートフォルダ内の画像を参照します。WordPress用ビルド時に静的制作時のpublicの画像はテンプレートフォルダに出力されますが、動的に変更はなされないので画像変更時は都度ビルド、もしくは手動でコピーが必要になります。
<img src="<?php echo get_template_directory_uri();?>/images/static.png" alt="" width="300" height="300" />上記のように静的資材HTMLのコードのsrcの頭に<?php echo get_template_directory_uri();?>を付与することでうまく読み込めるようになります。
静的資材をビルドする場合はNPM Scriptsのbuidコマンドを実行してください。distフォルダに一式出力されます。
WordPress用にCSSやJavaScriptをビルドする場合はNPM Scriptsのbuid for WPコマンドを実行してください。wordpress/themes/TEMPLATE_NAME/内にassetsフォルダとimagesフォルダが出力されます。assetsフォルダにはビルドした各種CSSやJavaScriptが、imagesにはHTMLから読み込んだ静的な画像が出力されています。
ヘッダー部分に下記のデバッグ用のコマンドがあります。
<?php
if(WP_DEBUG){
$root = "http://localhost:5173";
$css_ext = "scss";
$js_ext = "ts";
echo '<script type="module" src="http://localhost:5173/@vite/client"></script>';
}else{
$root = get_template_directory_uri();
$css_ext = "css";
$js_ext = "js";
}
?>このWP_DEBUGをfalseに変えることでWordPressがビルドファイルを読み込むようになります。（.wp-env.jsonの設定でWP_DEBUGは常にtrueになっています。こちらの値を変更するとDockerのコンテナが再構築され時間がかかるのでオススメしません）
納品時には上記デバッグ用の記述を削除するのが望ましいです。
http://localhost:8888/wp-admin/にアクセスし、IDはadminパスワードはpasswordでログインできます。初回は言語設定が英語なので日本語に変えておくと良いでしょう。
WordPress内で作成した記事やページ、その他設定などはNPM Scriptsのwp-contents exportコマンドでバックアップファイルを出力できます。このバックアップファイルをGitなどで管理し、wp-contents importでそのバックアップファイルをインポートして開発者間でのWordPressコンテンツを同期できます。あくまで単一のバックアップファイルなので差分管理などはできず、頻繁な更新には向きません。（コンフリクトしてもどちらかのファイルしか採用できません）