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

概要

elementor/editor/after_enqueue_styles アクションは、WordPress の Elementor プラグインにおいて、スタイルがキューイングされた後に実行されるフックです。このフックを使うことで、Elementor のビジュアルエディタで自分のスタイルを追加または変更することができます。主に以下のような機能を実装する際に使用されます：

カスタム CSS スタイルをエディタに追加する
独自のテーマスタイルを統合する
Elementor 内でのプラグインのカスタマイズ
設定に応じたスタイリングを動的に追加する
特定のページやコンポーネントにのみスタイルを適用する
開発中のスタイルを表示するための条件付きロジックを搭載する

構文

add_action('elementor/editor/after_enqueue_styles', 'my_custom_styles_function');

function my_custom_styles_function() {
    // カスタムスタイルを追加するコード
}

パラメータ

このアクションには特定のパラメータはありませんが、内部で Elementor のエディタに関連したデータを使用することができます。

戻り値

このアクションは戻り値を持ちません。スタイルをエディタに適用するための手続きが実行されます。

使用可能なバージョン

Elementor: その時点での最新バージョン
WordPress: その時点での最新バージョン

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

アクション	使用例
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: カスタム CSS の追加

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

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

サンプル 2: 条件付きスタイルの追加

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

このコードは、特定のページ（この場合は「contact」ページ）のみでカスタムスタイルシートを読み込みます。

サンプル 3: デフォルトフォントの変更

add_action('elementor/editor/after_enqueue_styles', function() {
    wp_enqueue_style('custom-font-style', 'https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
});

このコードは、Elementor エディタ内で使用するフォントを Google Fonts から読み込みます。

サンプル 4: エディタのカラーパレットのカスタマイズ

add_action('elementor/editor/after_enqueue_styles', function() {
    echo '<style>
        .elementor-color-primary { color: #007cba; }
    </style>';
});

このコードは、Elementor エディタ内のプライマリカラーをカスタマイズします。

サンプル 5: レイアウトのスタイルを統合

add_action('elementor/editor/after_enqueue_styles', function() {
    wp_enqueue_style('layout-style', get_stylesheet_directory_uri() . '/css/layout-editor-style.css');
});

このコードは、テーマのレイアウトスタイルをエディタに適用します。

概要

構文