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

このレッスンについて

本レッスンは普段から node や composer 、wp-env など開発者向けのツールを使っている方向けの説明となります。

よくわからない場合はスキップして次のレッスンに進んでください。

Sassのコンパイル

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

前提条件 : Sassとは

本レッスンは Lightning用子テーマサンプル/カスタマイズプラグインサンプルの使い方の説明ですので、ここでは詳しくは説明しませんが、簡単に言うと効率良くCSSが書けるメタ言語です

詳しく知りたい方は「Sass 入門」などで検索してみてください。

前提条件 : Node.jsについて

Sassのファイル(拡張子.scss)からCSSを書き出すには Node.js を使用しますので、Node.js のインストールが必要です。Node.js のインストール方法は 「Node.js インストール」などで検索すると解説記事が沢山出てくると思いますが、インストールする際は Node.js のバージョン管理が出来る手法の方が良いので「Node.js バージョン管理」などで検索すると良いでしょう。

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

子テーマ名、プラグイン名などを変更した場合は package.json ファイルの書き換えが必要です。

開発ツール wp-env

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

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

前提条件 : Dockerについて

Docker のインストールはこちらから行えますが、よくわからない場合は「Docker インストール」などで検索してください。

前提条件 : wp-envについて

詳しい説明は 公式のドキュメントをご確認ください。

インストールは下記のコマンドで行えます。

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 について

Node.js が JavaScript のライブラリを管理するのに対して、composer はPHPのライブラリを管理してくれます。

詳細やインストール方法は「composer 入門」などで検索してください。

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

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

Lightningなら

ビジネスサイトも





ブログも簡単に作れます

有効インストール数6万件以上!Lightning は WordPress公式ディレクトリに登録されているテーマです。いかに最短でサイト制作が出来るかという事に重点を置いて開発しています。デモデータも配布されているので、ビジネスサイトの雛形が数分でセットアップできます。

PAGE TOP