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

概要

elementor/editor/after_enqueue_scripts は、Elementor のエディターでスクリプトやスタイルをキューに追加するためのフックです。このアクションは、Elementorの編集画面に特定のスタイルやスクリプトを読み込ませる際に使用され、カスタム機能の実装に役立ちます。以下のような機能を実装する際によく使われます。

カスタムのCSSスタイルを追加する
JavaScriptのライブラリを読み込む
開発者ツールやリソースを追加する
特定の条件下でスクリプトを動的に変更する
特定のウィジェット向けにカスタマイズを行う
パフォーマンスの最適化を行う

構文

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

パラメータ

このアクションは特にパラメータを取ることはありません。

戻り値

このアクションは戻り値を持ちません。

使用可能なバージョン

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

サンプルコード

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

add_action( 'elementor/editor/after_enqueue_scripts', function() {
    wp_enqueue_style( 'my-custom-editor-style', get_template_directory_uri() . '/css/editor-style.css' );
} );

このコードは、ElementorのエディターにカスタムのCSSスタイルシートを追加します。お好みのスタイルを適用させたい場合に便利です。引用元: https://developer.wordpress.org/reference/functions/wp_enqueue_style/

サンプル 2: 特定のJavaScriptライブラリの読み込み

add_action( 'elementor/editor/after_enqueue_scripts', function() {
    wp_enqueue_script( 'my-custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), null, true );
} );

このコードは、特定のJavaScriptライブラリをElementorのエディターに読み込む例です。jQueryに依存しているカスタムスクリプトを追加する際に使います。引用元: https://developer.wordpress.org/reference/functions/wp_enqueue_script/

サンプル 3: Inline スクリプトの追加

add_action( 'elementor/editor/after_enqueue_scripts', function() {
    $custom_js = 'console.log("Hello from Elementor editor!");';
    wp_add_inline_script( 'my-custom-script', $custom_js );
} );

このコードは、Elementorのエディターで実行するカスタムのインラインJavaScriptを追加する例です。デバッグやカスタム機能を実装する際に便利です。引用元: https://developer.wordpress.org/reference/functions/wp_add_inline_script/

サンプル 4: 特定の条件下でのスタイル読み込み

add_action( 'elementor/editor/after_enqueue_scripts', function() {
    if ( is_admin() && isset($_GET['elementor']) ) {
        wp_enqueue_style( 'admin-editor-style', get_template_directory_uri() . '/css/admin-editor.css' );
    }
} );

このコードは、特定の条件（Elementorのエディターが開いている時）のみスタイルを追加する例です。条件に基づいてスタイルを適用する際に使用します。引用元: https://codex.wordpress.org/Function_Reference/is_admin

サンプル 5: クラスやIDに基づいた条件付きスクリプトの追加

add_action( 'elementor/editor/after_enqueue_scripts', function() {
    $current_post_id = get_post()->ID;
    if ( has_post_thumbnail( $current_post_id ) ) {
        wp_enqueue_script( 'custom-thumbnail-script', get_template_directory_uri() . '/js/thumbnail-script.js', [], null, true );
    }
} );

このコードは、現在の投稿にサムネイルがある場合のみ特定のスクリプトを読み込む例です。投稿の状態に基づいた機能を実装する際に便利です。引用元: https://developer.wordpress.org/reference/functions/has_post_thumbnail/

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

アクション	使用例
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

概要

構文