前提条件

WordPress テーマ開発のほとんどは、ほぼプラグアンドプレイです。必要なのは、コードエディタと、ツールとセットアップに記載されている開発環境にインストールされた WordPress です。しかし、ビルドプロセスで作業するには、いくつかの他の要件があります：

これらは通常のテーマ構築に必要なツールよりも高度なものですが、標準の WordPress ビルドプロセスで作業したい場合は必要です。

ファイルとフォルダの設定

@wordpress/scripts パッケージは元々ブロック開発のために作成されましたが、時間とともにテーマでも機能するように進化しました。デフォルトでは、開発ファイルが /src フォルダに存在し、ビルドファイルが /build フォルダに出力されることを期待しています。ほとんどのテーマ作成者はアセットを扱うためにカスタムシステムを利用しているため、このガイドではその方法を示します。

以下の例では、テーマフォルダ内でこの構造を使用します：

  • public/ 
    1. - `````js/
      1. - `````scss/
    • editor.scss
    • screen.scss
  • package.json
  • webpack.config.js

WordPress スクリプトパッケージのインストール

ファイルとフォルダの設定が完了したら、ローカルマシンに正しいパッケージをインストールする必要があります。

まず、テーマの package.json ファイルを開き、次のコードを追加します： 

  1. {
  2.     "name": "your-project-name",
  3.     "scripts": {
  4.         "start": "wp-scripts start --webpack-src-dir=resources --output-path=public",
  5.         "build": "wp-scripts build --webpack-src-dir=resources --output-path=public"
  6.     }
  7. }

@wordpress/scripts パッケージには、追加できるいくつかの 利用可能なスクリプト がありますが、start と build は確実に必要です。

次に、コンピュータのコマンドラインツールを開き、テーマフォルダに移動して、次のコマンドを入力します： 

  1. npm install @wordpress/scripts path webpack-remove-empty-scripts --save-dev

そのコマンドは、3つのパッケージをインストールします：

  • @wordpress/scripts
  • path
  • webpack-remove-empty-scripts

後者の2つはサードパーティのパッケージですが、次のステップで webpack と統合するのに役立ちます。

webpack の設定

@wordpress/scripts パッケージは webpack の上に構築されています。ブロックを構築している場合、すべてがすでに整っています。しかし、テーマを構築しているため、@wordpress/scripts パッケージのデフォルト設定の一部を自分のものに上書きする必要があります。

それが、テーマのカスタム webpack.config.js ファイルの出番です。設定する必要がある主なことは2つあります：

  • カスタム CSS と JavaScript ファイルのエントリポイント（以下のコードにあるものは、この記事のファイル構造に対応しています）。
  • webpack-remove-empty-scripts プラグインを使用して、CSS にマッピングされた残りの .js ファイルがないようにします。

次のコードを webpack.config.js ファイルに追加します： 

  1. // WordPress webpack config.
  2. const defaultConfig = require( '@wordpress/scripts/config/webpack.config' );
  4. // Plugins.
  5. const RemoveEmptyScriptsPlugin = require( 'webpack-remove-empty-scripts' );
  7. // Utilities.
  8. const path = require( 'path' );
  10. // Add any new entry points by extending the webpack config.
  11. module.exports = {
  12.     ...defaultConfig,
  13.     ...{
  14.         entry: {
  15.             'js/editor':  path.resolve( process.cwd(), 'resources/js',   'editor.js'   ),
  16.             'css/screen': path.resolve( process.cwd(), 'resources/scss', 'screen.scss' ),
  17.             'css/editor': path.resolve( process.cwd(), 'resources/scss', 'editor.scss' ),
  18.         },
  19.         plugins: [
  20.             // Include WP's plugin config.
  21.             ...defaultConfig.plugins,
  23.             // Removes the empty `.js` files generated by webpack but
  24.             // sets it after WP has generated its `*.asset.php` file.
  25.             new RemoveEmptyScriptsPlugin( {
  26.             stage: RemoveEmptyScriptsPlugin.STAGE_AFTER_PROCESS_PLUGINS
  27.             } )
  28.         ]
  29.     }
  30. };

WordPress スクリプトパッケージの使用

アセットを処理するために WordPress スクリプトパッケージを使用するには、コマンドラインツールで次の2つのコマンドのいずれかを実行できます：

  • start: ファイルの開発バージョンをビルドし、「ウォッチ」モードを有効にします。これにより、変更されたコードが処理されます。
  • build: ファイルのプロダクションバージョンをビルドします。

次に、コマンドラインツールを開き、start コマンドを実行します： 

  1. npm run start

これにより、/resources フォルダからファイルが自動的に処理され、/public フォルダに次の構造で配置されます： 

    1. - `````js/
    • editor.js 
      1. - `````scss/
    • editor.scss
    • editor.asset.php
    • screen.scss
    • screen.asset.php

これで、各 CSS および JavaScript ファイルに対して新しい *.asset.php ファイルが生成されるのが見えるでしょう。これらには、ファイルを読み込む際に使用できる各アセットファイルに関するメタデータが含まれています。これは、以下の「スクリプトとスタイルの読み込み」セクションで説明されています。

start コマンドを無効にするには、コマンドラインツールで Ctrl + C を入力します（Windows または Mac のいずれか）。

ファイルの最終的なプロダクションビルドを行う準備ができたら、コマンドラインツールで次のコマンドを実行します： 

  1. npm run build

スクリプトとスタイルの読み込み

スクリプトとスタイルの読み込み方法は、このハンドブックの アセットの含め方 ドキュメントで詳しく説明されています。次のステップに進む前に、これを行う方法にすでに慣れているべきです。

以下のドキュメントは、*.asset.php ファイルが各アセットのためにどのように生成されるかを教えることを主に目的としています。各ファイルには、次のスニペットに似た配列が表示されます： 

  1. <?php return array('dependencies' => array('wp-block-editor'), 'version' => '2eae4c519afeff2a8c77');

特に、配列には、任意の wp_enqueue_*() 関数で使用できる2つのメタデータが含まれています：

  • dependencies: スクリプト/スタイルが依存している依存関係の配列。
  • version: キャッシュバスティングに使用できるバージョン番号。

ファイルが配列を返すため、PHP の include を使用して、配列をコード内の変数に割り当てることができます。以下の例は、screen.asset.php ファイルの配列を取得する方法を示しています： 

  1. $asset = include get_theme_file_path( 'public/css/screen.asset.php' );
  2. // Returns: array( 'dependencies' => array(), 'version' => '0000' );

wp_enqueue_script() または wp_enqueue_style() を使用してスクリプトまたはスタイルを読み込む際には、$asset['dependencies'] と $asset['version'] を関数の対応するパラメータに渡すことができます。

次のコードをテーマの functions.php ファイルに追加して、以前に定義したアセットを読み込んでみてください： 

  1. // Load front-end assets.
  2. add_action( 'wp_enqueue_scripts', 'themeslug_assets' );
  4. function themeslug_assets() {
  5.     $asset = include get_theme_file_path( 'public/css/screen.asset.php' );
  7.     wp_enqueue_style(
  8.         'themeslug-style',
  9.         get_theme_file_uri( 'public/css/screen.css' ),
  10.         $asset['dependencies'],
  11.         $asset['version']
  12.     );
  13. }
  15. // Load editor stylesheets.
  16. add_action( 'after_setup_theme', 'themeslug_editor_styles' );
  18. function themeslug_editor_styles() {
  19.     add_editor_style( [
  20.         get_theme_file_uri( 'public/css/screen.css' )
  21.     ] );
  22. }
  24. // Load editor scripts.
  25. add_action( 'enqueue_block_editor_assets', 'themeslug_editor_assets' );
  27. function themeslug_editor_assets() {
  28.     $script_asset = include get_theme_file_path( 'public/js/editor.asset.php'  );
  29.     $style_asset  = include get_theme_file_path( 'public/css/editor.asset.php' );
  31.     wp_enqueue_script(
  32.         'themeslug-editor',
  33.         get_theme_file_uri( 'public/js/editor.js' ),
  34.         $script_asset['dependencies'],
  35.         $script_asset['version'],
  36.         true
  37.     );
  39.     wp_enqueue_style(
  40.         'themeslug-editor',
  41.         get_theme_file_uri( 'public/css/editor.css' ),
  42.         $style_asset['dependencies'],
  43.         $style_asset['version']
  44.     );
  45. }