プラグインElementorのelementor/frontend/before_register_scriptsアクションの使用方法・解説

概要

elementor/frontend/before_register_scriptsアクションは、WordPressのElementorプラグインにおいて、スクリプトの登録前にユーザーがカスタムスクリプトを追加するためのフックです。このフックを利用することで、Elementorのデフォルトの動作を拡張し、開発者は自身のテーマやプラグインに合わせたスクリプトを簡単に追加できます。

このアクションは以下のような機能を実装する際によく使用されます：
– カスタムスクリプトの追加
– CSSファイルやJavaScriptの条件付きインクルード
– 特定の条件に基づいたスクリプトの読み込み
– 他のプラグインとの統合
– 開発者用のショートカット機能の実装
– パフォーマンス向上のためのスクリプト管理

構文

add_action('elementor/frontend/before_register_scripts', 'your_function_name');

パラメータ

このアクション自体はパラメータを持ちません。

戻り値

特に戻り値はありませんが、スクリプトが正常に登録されるかどうかは、関数内のロジックに依存します。

互換性

このアクションは、Elementorバージョン3.0以降、WordPressバージョン5.0以降で使用可能です。

サンプルコード

サンプルコード1

add_action('elementor/frontend/before_register_scripts', function() {
    wp_enqueue_script('custom-elementor-script', get_template_directory_uri() . '/js/custom-script.js', ['jquery'], false, true);
});

説明：このコードは、Elementorがスクリプトを登録する前にカスタムJavaScriptファイルを読み込みます。自テーマ内の/js/custom-script.jsを読み込む設定です。

サンプルコード2

add_action('elementor/frontend/before_register_scripts', function() {
    if (is_page('contact')) {
        wp_enqueue_style('contact-style', get_template_directory_uri() . '/css/contact.css');
    }
});

説明：このコードは、特定のページ（contactページ）を表示しているときのみ、CSSファイルを読み込む条件を追加しています。

サンプルコード3

add_action('elementor/frontend/before_register_scripts', function() {
    wp_register_script('third-party-lib', 'https://cdnjs.cloudflare.com/ajax/libs/some-lib/1.0.0/library.js', [], null, true);
    wp_enqueue_script('third-party-lib');
});

説明：このコードは、外部のJavaScriptライブラリをElementorに追加する方法を示しています。ライブラリを登録し、エンキューしています。

サンプルコード4

add_action('elementor/frontend/before_register_scripts', function() {
    if (is_user_logged_in()) {
        wp_enqueue_script('loggedin-script', get_theme_file_uri('/js/loggedin.js'), [], null, true);
    }
});

説明：このコードは、ユーザーがログインしている場合にのみ特定のスクリプトを読み込む条件を設けています。

サンプルコード5

add_action('elementor/frontend/before_register_scripts', function() {
    wp_enqueue_style('global-style', get_template_directory_uri() . '/css/global.css', [], null);
});

説明：このコードは、Elementorがスクリプトを登録する前に、グローバルスタイルシートを読み込む設定を示しています。

この関数のアクションでの使用可能性

アクション名	使用例
mu_plugin_loaded
registered_post_type
plugins_loaded
wp_roles_init
setup_theme
after_setup_theme
set_current_user
init
register_sidebar
wp_loaded
send_headers
parse_query
pre_get_posts
wp
template_redirect
get_header
wp_head

概要

構文