プラグインElementorのelementor/css-file/{$name}/enqueueアクションの使用方法・解説

概要

elementor/css-file/{$name}/enqueueは、WordPressのElementorプラグインにおいて、特定のCSSファイルをキューに追加するためのアクションフックです。このフックを利用することで、Elementorのビジュアルエディタやフロントエンドにおいて、特定のスタイルシートを読み込む際の制御が可能になります。以下のような機能を実装する際によく使われます：

テーマやプラグインの特有のスタイルを追加する。
レイアウトの微調整を行う。
特定の条件でのみスタイルを適用する。
プラグイン間でスタイルの衝突を避ける。
カスタムウィジェットに特化したスタイルを追加。
Elementorで作成したページに特化したデザインを提供する。

構文

do_action('elementor/css-file/{$name}/enqueue');

パラメータ

$name: CSSファイルの名称を指定する文字列。

戻り値

このアクションには戻り値はありません。

使用可能なプラグインElementorのバージョン

Elementorバージョン3.0以降。

使用可能なWordPressのバージョン

WordPress 5.0以降。

サンプルコード

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

このサンプルコードは、カスタムCSSファイルを特定のElementorウィジェットに追加します。

add_action('elementor/css-file/my-custom-widget/enqueue', function() {
    wp_enqueue_style('my-custom-widget-style', plugin_dir_url(__FILE__) . 'css/my-custom-widget.css');
});

このコードは、my-custom-widgetという名前のElementorウィジェット用にカスタムCSSファイルを読み込みます。

サンプル 2: 条件付きスタイルの適用

このサンプルコードは、特定のページでのみスタイルを読み込みます。

add_action('elementor/css-file/my-custom-page/enqueue', function() {
    if (is_page('my-page-slug')) {
        wp_enqueue_style('my-custom-page-style', plugin_dir_url(__FILE__) . 'css/my-custom-page.css');
    }
});

このコードは、my-page-slugというページスラッグのときのみ特定のスタイルを読み込む設定です。

サンプル 3: プラグインのスタイルを上書き

このサンプルコードは、他のプラグインのスタイルを上書きします。

add_action('elementor/css-file/another-plugin/enqueue', function() {
    wp_enqueue_style('overwrite-another-plugin-style', plugin_dir_url(__FILE__) . 'css/overwrite-another-plugin.css');
});

このコードは、another-pluginのスタイルを上書きするためのカスタムスタイルを読み込みます。

サンプル 4: 特定のカスタムウィジェットのスタイルを追加

このサンプルコードは、特定のカスタムウィジェットに関連付けられたスタイルシートを読み込みます。

add_action('elementor/css-file/my-special-widget/enqueue', function() {
    wp_enqueue_style('my-special-widget-style', plugin_dir_url(__FILE__) . 'css/my-special-widget.css');
});

このコードは、カスタムウィジェット用のスタイルを指定して読み込みます。

サンプル 5: スタイルのバージョン管理

このサンプルコードは、バージョン管理されたCSSファイルを読み込む際に使用します。

add_action('elementor/css-file/v2-my-style/enqueue', function() {
    wp_enqueue_style('my-style-v2', plugin_dir_url(__FILE__) . 'css/my-style-v2.css', array(), '2.0.0');
});

このコードは、my-style-v2というバージョン管理されたスタイルを追加します。

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

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

概要

構文