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

概要

elementor/frontend/after_enqueue_scripts は、Elementor プラグインがフロントエンドのスクリプトやスタイルシートをキューイングし終えた後に実行される PHP のフックです。このアクションは、カスタム JavaScript や CSS を追加したり、スクリプトの依存関係を変更したりする際に利用されます。具体的には、以下のような機能を実装する際によく使われます：

カスタムスクリプトやスタイルの追加
既存のスクリプトの上書き
特定のページにのみスクリプトを適用
スクリプトの負荷を軽減するための条件付きローディング
他のプラグインとの競合を避けるための調整
高度なアニメーションやインタラクションを追加するための JavaScript

構文

add_action('elementor/frontend/after_enqueue_scripts', 'your_custom_function');

function your_custom_function() {
    // カスタムスクリプトやスタイルをここに追加
}

パラメータ

このアクションに特有のパラメータはありません。カスタム関数内で処理を行う際、必要に応じて他のグローバル変数や WP の関数を使用します。

戻り値

この関数は特に値を返すものではなく、指定されたスクリプトやスタイルをフロントエンドに追加するためのものです。

使用可能なバージョン

Elementor バージョン: 2.0 以降
WordPress バージョン: 4.7 以降

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

アクション	使用可能性
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

サンプルコード

サンプル 1: カスタムスタイルの追加

add_action('elementor/frontend/after_enqueue_scripts', function() {
    wp_enqueue_style('custom_style', plugin_dir_url(__FILE__) . 'css/custom.css');
});

このサンプルは、Elementorがフロントエンドのスクリプトを読み込んだ後にカスタムCSSファイルを追加するものです。

サンプル 2: スクリプトの依存関係の設定

add_action('elementor/frontend/after_enqueue_scripts', function() {
    wp_enqueue_script('custom_script', plugin_dir_url(__FILE__) . 'js/custom.js', array('jquery'), null, true);
});

このサンプルは、jQueryに依存するカスタムJavaScriptファイルを読み込むためのものです。

サンプル 3: 条件付きでのスクリプト追加

add_action('elementor/frontend/after_enqueue_scripts', function() {
    if (is_page('contact')) {
        wp_enqueue_script('contact_form_script', plugin_dir_url(__FILE__) . 'js/contact.js', array('jquery'), null, true);
    }
});

このサンプルは、特定のページ（”contact”）でのみスクリプトを読み込むように設定しています。

サンプル 4: スクリプトの上書き

add_action('elementor/frontend/after_enqueue_scripts', function() {
    wp_deregister_script('elementor-frontend');
    wp_enqueue_script('elementor-frontend', plugin_dir_url(__FILE__) . 'js/my_elementor_frontend.js', array(), null, true);
});

このサンプルはElementorのデフォルトのフロントエンドスクリプトを解除し、代わりにカスタムスクリプトを読み込む例です。

サンプル 5: スタイルの条件付きロード

add_action('elementor/frontend/after_enqueue_scripts', function() {
    if (is_single() && in_category('news')) {
        wp_enqueue_style('news_style', plugin_dir_url(__FILE__) . 'css/news.css');
    }
});

このサンプルは、特定のカテゴリーの投稿が表示されている場合のみ、特定のCSSスタイルを読み込むようにしています。

これらのサンプルコードは、Elementorを使用してフロントエンドのカスタマイズやパフォーマンスの向上を図る際に便利です。

最終的なソースコードは、WordPress Codex や Elementor の公式ドキュメントなどに基づくものであり、著作権フリーのものを使用しました。

概要

構文