wp_script_modules()


WordPressのwp_script_modules()関数は、JavaScriptモジュールを登録およびエンキューするために使用されます。この関数は、モジュールベースのスクリプトを効率的に管理するためのものです。

構文

wp_script_modules( string $module_name, array $args = array() );

引数の説明:

  • $module_name(string) — 登録するモジュールの名前。
  • $args(array) — モジュールの設定オプション。以下のキーを含むことができます:
    • src(string) — モジュールのURL。
    • deps(array) — 依存する他のモジュールのリスト。
    • version(string) — モジュールのバージョン。
    • in_footer(bool) — モジュールをフッターに配置するかどうか。

例1: 基本的なモジュールの登録

以下のコードは、基本的なJavaScriptモジュールを登録します。

wp_script_modules( 'my-module', array( 'src' => get_template_directory_uri() . '/js/my-module.js', 'version' => '1.0.0' ) );

例2: 依存関係を持つモジュールの登録

この例では、他のモジュールに依存するモジュールを登録します。

wp_script_modules( 'my-dependent-module', array( 'src' => get_template_directory_uri() . '/js/dependent-module.js', 'deps' => array( 'jquery' ), 'version' => '1.0.0' ) );

例3: フッターに配置するモジュール

以下のコードは、モジュールをフッターに配置します。

wp_script_modules( 'footer-module', array( 'src' => get_template_directory_uri() . '/js/footer-module.js', 'in_footer' => true, 'version' => '1.0.0' ) );

例4: バージョン指定なしのモジュール

バージョン指定なしでモジュールを登録します。

wp_script_modules( 'no-version-module', array( 'src' => get_template_directory_uri() . '/js/no-version-module.js' ) );

例5: 複数の依存関係を持つモジュール

複数の依存関係を持つモジュールを登録します。

wp_script_modules( 'multi-deps-module', array( 'src' => get_template_directory_uri() . '/js/multi-deps-module.js', 'deps' => array( 'jquery', 'lodash' ), 'version' => '1.0.0' ) );

例6: 外部URLを使用したモジュール

外部URLを使用してモジュールを登録します。

wp_script_modules( 'external-module', array( 'src' => 'https://example.com/js/external-module.js', 'version' => '1.0.0' ) );

例7: 条件付きモジュールの登録

特定の条件下でのみモジュールを登録します。

if ( is_page( 'contact' ) ) { wp_script_modules( 'contact-module', array( 'src' => get_template_directory_uri() . '/js/contact-module.js', 'version' => '1.0.0' ) ); }

例8: モジュールのエンキュー

登録したモジュールをエンキューします。

wp_enqueue_script_module( 'my-module' );

注意点

  • モジュールの依存関係は正しく設定する必要があります。
  • 外部URLを使用する場合は、セキュリティに注意してください。

関連機能：