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

概要

elementor/editor/before_enqueue_stylesは、WordPressのElementorプラグインで使用されるアクションフックです。このフックを使うことで、Elementorのエディターがスタイルシートを読み込む前に、自分のスタイルシートを追加したり、他のスクリプトやスタイルの依存関係を処理することができます。このアクションは、カスタムスタイルの追加、スタイルの上書き、ユーザーインターフェースの改善に役立つことが多いです。

よく使われる機能には以下が含まれます：
1. カスタムCSSの追加
2. 他のスタイルシートの依存関係の解決
3. 特定の条件に基づいたスタイルの制御
4. プラグインやテーマに特有のスタイルの上書き
5. ユーザーインターフェースの改善や洗練されたデザインのためのスタイル変更
6. エディター内での特異な挙動を持つ要素へのスタイルの適用

構文

add_action('elementor/editor/before_enqueue_styles', 'your_function_name');

function your_function_name() {
    // コードの内容
}

パラメータ

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

戻り値

このアクション自体は何も返しませんが、実行するコールバック関数により、スタイルを含むHTMLが生成されます。

Elementorのバージョン

Elementor 2.0以降で使用可能です。

WordPressのバージョン

WordPress 4.5以降で使用可能です。

サンプルコード

サンプルコード1

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

このコードは、Elementorエディターがスタイルシートを読み込む前に、カスタムスタイルシートを追加するものです。

サンプルコード2

add_action('elementor/editor/before_enqueue_styles', function() {
    if (isset($_GET['action']) && $_GET['action'] === 'elementor') {
        wp_enqueue_style('admin-editor-custom-style', get_stylesheet_directory_uri() . '/css/admin-editor-style.css', array(), null);
    }
});

このコードは、特定のアクションが行われているときにのみ、カスタムスタイルをエディターに追加します。

サンプルコード3

add_action('elementor/editor/before_enqueue_styles', function() {
    if (is_admin()) {
        wp_enqueue_style('my-admin-style', get_template_directory_uri() . '/css/admin-style.css');
    }
});

このコードは管理画面において、Elementorエディターが表示されるときにカスタムスタイルを読み込むものです。

サンプルコード4

add_action('elementor/editor/before_enqueue_styles', 'add_custom_style');
function add_custom_style() {
    wp_enqueue_style('custom-style', 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css');
}

このコードは、Font AwesomeのスタイルシートをElementorエディターに追加します。

サンプルコード5

add_action('elementor/editor/before_enqueue_styles', function() {
    if (is_admin() && !wp_is_mobile()) {
        wp_enqueue_style('desktop-only-style', get_template_directory_uri() . '/css/desktop-style.css');
    }
});

このコードは、管理画面でモバイルデバイスではないときにのみ、特定のスタイルを追加するものです。

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

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

概要

構文