カスタマイズの準備 3 : Lightningの子テーマサンプル / プラグインサンプルの高度な使い方

Sassのコンパイル

子テーマサンプル及びプラグインサンプルは、受託案件などで大幅にCSSをカスタマイズするウェブデザイナー向けにsassのコンパイルの設定がしてあります。

Sassのコンパイルに必要なパッケージのインストール

子テーマ（あるいはカスタマイズプラグイン）のディレクトリで 初回だけ以下のコマンドをたたいて必要なライブラリをインストールしてください。

npm install

Sassの監視・コンパイル

以下のコマンドで /assets/_scss/ ディレクトリ内のファイルの監視・コンパイルが動きますので、scssファイルを必要に応じて書き足してください。

npm run watch

コンパイルされた css は /assets/css/ ディレクトリに出力されます。

監視を停止する時は Ctrl + C を押してください。

生成されたCSSファイルの読み込み

子テーマの functions.php（ プラグインの場合は lightning-customize-plugin.php　）などに「// 独自のCSSファイル（assets/css/）を読み込む場合は true に変更してください.」というようなコメントがある行の次の行で、 false と 記載してある部分を true に変更してください。

Dist 設定

作成した子テーマやプラグインをサーバーにアップする時に、node_module ディレクトリなどは必要ないので、以下のコマンドを叩くと、dist ディレクトリ以下に必要なファイルが複製されます。

npm run dist

開発ツール wp-env

local by flywheel などをご利用の場合は無理に使用しなくて良いのですが、wp-env と呼ばれる WordPress公式の開発環境構築ツールの設定ファイルも用意してあります。

wp-env を使うには Node.js に加えて Docker がパソコンにインストールされている必要があります。

npm -g i @wordpress/env

wp-env の起動

wp-env が ご利用のパソコンにインストールされていれば、子テーマサンプル/プラグインサンプルのプラグインのディレクトリで以下のコマンドを叩くと開発環境が起動します。

wp-env start

サイトの確認

wp-env が起動したら http://localhost:8888/ にアクセスすると、開発用のWordPressが起動している事が確認できます。

wp-env の URL を変更する

http://localhost:8888/ は既に他の開発で使っている場合は 子テーマサンプル/プラグインサンプル のディレクトリ直下に .wp-env.override.json というファイルを置いて以下のように設定すると、ポート番号を任意に指定できます。

{
	"core": null,
	"port": 1129,
	"env": {
		"tests": {
			"port" : 1130
		}
	}
}

PHPUnitテスト

PHPUnitテストをすると、独自に作った関数やクラスが、意図した結果を返すのか確認する事ができます。

子テーマサンプル / プラグインサンプルでは Docker 及び wp-env 、composer が使える環境の場合は PHPUnit テストも動く設定がしてあります。

PHPUnitテストの書き方自体は本レッスンでは解説しませんが、普段行っている人は、指定のコマンドを叩けば　PHPUnit が実行される設定になっていますのでご活用ください。

composer ライブラリをインストールした上で wp-env を起動すれば、npm run phpunit で PHPUnit テストが走るようになっています。

# composer ライブラリのインストール（初回のみ）
composer install
# wp-env の起動（初回のみ）
wp-env start
# PHPUnitテストの実行
npm run phpunit