Node.jsを活用した開発環境の構築。
自動リロードでスタイルを適応させて
開発を向上させましょう。#1/2
WordPressの開発においても、VscodeのGoLiveのように、自動リロードする環境でスタイルを適用させてスムーズに開発を進めたいものです。VsCode の Live Server は、主に静的なファイル（HTML, CSS, JavaScriptなど）のためのもので、サーバーサイドの言語やデータベースにアクセスするための仕組みを持っていません。そこでNode.jsを使用します。Node.jsはサーバーサイドで実行されるJavaScriptで、開発環境に最適なパッケージが提供されています。ぜひ活用してください。なお、本構築はまずテスト環境で行い、子テーマを作成してカスタマイズすることをおすすめします。子テーマの構築はこちらを参照してください。
ローカル環境の構築
Local（旧Local by Flywheel）
まず、開発のためのローカル環境を構築しましょう。おすすめは「Local（旧Local by Flywheel）」です。煩雑な構築手順を省いて、簡単にローカル環境を構築できます。こちらの動画わかり易く説明してくれてます。Naomiさんありがとうございます。
Browser-Syncモジュール
まず、環境に合わせてNode.jsをインストールします。
公式サイトのリンクを添付します。※ドキュメントを熟読し、各環境に応じたバージョンでインストールしてください。Node.jsは繊細なコンポーネントを持つため、インストール時には慎重に進める必要があります。
手順①
まずは Node.jsプロジェクトを初期化しましょう。
ターミナル
npm init -y
package.jsonが生成されたらOKです。
手順②
続いてbrowsdr-syncモジュールを追加します。こちらのパッケージがVscodeのLiveServerのように、ローカル環境を立ち上げて自動リロードしてくれます。
ターミナル
npm add browser-sync --dev
手順③
npmコマンドを実行し、それぞれのプロジェクトに応じたパスを記述して、browser-syncが正常に機能するようにします。以下は私の環境のコマンド例です。
package.json
"scripts": {
"watch": "browser-sync start --proxy 'engress.local' --files './**/*'"
},「engress.local」の部分には、自分のURLを記述してください。–filesの指定は’./**/*’を使用することで、自動リロードが正常に機能しました。ただし、’/**/*’という指定は、私の環境では正常に起動しなかったため、ご注意ください。
子テーマのスタイルを変更し、ブラウザがリロードして変更が反映されれば成功です。
子テーマのステイルを適応
get_stylesheet_directory_uri()関数
get_template_directory_uri()は、themeまでのurlを取得する関数です。この関数を使用すると、親テーマのパスが取得されますが、子テーマのスタイルは適用されません。子テーマのスタイルを適応するget_stylesheet_directory_uri()を使用した値は次の通りです。
http://blog200.local/wp-content/themes/blog-childとなります。
※なお、こちらのbrowser-syncでサイトを正常に表示されるためには、画像やページ遷移のパスにWordpressが提供している関数を適切に使用していることが条件になります。この関数は、アドレスが変更(local:3000)されても自動的に更新されるため、デザインの崩れを防ぐことができます。クラッシックエディタやグーテンベルクでは直接PHPのコードが記述できないため、ショートコードを使う必要があります。ショートコードについてはこちらを参照してください。
- 自動リロードで効率的な開発をサポート
- パスの記述はWordpressの関数を使用
- サーバー言語のnode.jsを利用
- 子テーマのスタイル適用にはget_stylesheet_directory_uri()関数を使用