- 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.webp
│ │ └── js.webp
└── public
└── images
└── static.webp
<img src="/images/static.webp" alt="" width="1000" height="667" />Viteではpublicフォルダはルートとして扱われるため、/images/static.webpというパスで画像を読み込むことができます。
background-image: url('/assets/images/background.webp');CSSで画像を読み込む場合は相対パスではなく、/assetsから始めるパス名にしてください。
こちらもビルド時にViteがパスを解決するためです。
import imgsrc from '/assets/images/js.webp'
// JSから画像を読み込むサンプル
const canvas = document.querySelector<HTMLCanvasElement>('#canvas')
const context = canvas!.getContext('2d')
const image = new Image(1000, 667)
image.src = imgsrc
image.addEventListener('load', () => {
context?.drawImage(image, 0, 0, 1000, 667)
})JSで画像ファイルを読み込む場合はViteにビルド時にパス解決されるようimport文で読み込んでください。
<img src="<?php echo get_template_directory_uri(); ?>/images/static.webp" alt="" width="1000" height="667" />テンプレートフォルダ内の画像を参照します。
WordPress用ビルド時に静的制作時のpublicの画像はテンプレートフォルダに出力されますが、動的に変更はなされないので画像変更時は都度ビルド、もしくは手動でコピーが必要になります。
上記のように静的資材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コンテンツを同期できます。
あくまで単一のバックアップファイルなので差分管理などはできず、頻繁な更新には向きません。（コンフリクトしてもどちらかのファイルしか採用できません）
All in One Migration でインポートファイル容量が２MBなので大きくしたいとき。
$ wp-env run cli vi .htaccess.htaccess を開く。
php_value upload_max_filesize 128M
php_value post_max_size 128M
php_value memory_limit 256M
php_value max_execution_time 300
php_value max_input_time 300
こちらを追記する。
/scripts/imagemin/imgSrc/に入れた画像がNPM Scriptsのimageminコマンドで、/scripts/imagemin/imgDist/内にWebP化されて出力されます。
ライブラリはsharpを使用しています。
| ショートハンド | オプション | 処理内容 |
|---|---|---|
| -i | --input <string> |
ソースディレクトリ（必須） |
| -o | --out <string> |
出力先ディレクトリ（必須） |
| -m | --minify | 画像の最適化を行う（同一抵張子での変換）(default：false） |
| -w | --webp | webp化を行う(default：false） |
| -a | --webp-suffix-add | webp化の際、拡張子を書き換え（false）するか追加（true）するか(default:false) |
| -v | --svg | svgの最適化を行う (default：false) |
| -z | --svgz | svgzを出力する（default:false） |
| -n | --nosvg | svgzを出力した場合、svgは出力しない（default:false） |
| -t | --truncate | 出力先のディレクトリを空にする（default:false） |
| -h | --help | オプションコマンドの一覧を表示する |
node ./scripts/imagemin.js -h