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

概要

elementor/preview/enqueue_stylesは、WordPressの人気プラグインElementorで利用されるアクションフックで、プロダクション環境ではなくプレビュー環境でのスタイルシートをenqueueするために使用されます。このアクションを活用することで、特定の条件下でのみスタイルシートを読み込むことが可能になるため、デザインの幅が広がります。よく使用されるケースには以下のようなものがあります。

カスタムスタイルをElementorプレビューに適用する。
プレビュー専用のCSSを追加する。
Elementorの特定のウィジェットにスタイルを適用する。
レスポンシブデザインに対応したスタイルを条件付きで追加する。
外部スタイルシートをプレビューに読み込む。
JavaScriptのスクリプトと連携して動的スタイルを作成する。

構文

add_action('elementor/preview/enqueue_styles', 'your_function_name');

パラメータ

your_function_name: 自作の関数名をここに指定します。

戻り値

特に戻り値はありませんが、enqueueされたスタイルシートがプレビューで表示されるかどうかに影響を与えます。

使用可能なプラグインおよびバージョン

Elementorバージョン: 3.0以上
WordPressバージョン: 5.0以上

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

アクション	使用可能性
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
elementor/preview/enqueue_styles	〇

サンプルコード

サンプルコード1

add_action('elementor/preview/enqueue_styles', function() {
    wp_enqueue_style('custom-preview-style', get_template_directory_uri() . '/css/custom-preview.css');
});

このコードは、Elementorのプレビュー時にカスタムスタイルシートを追加するものです。

サンプルコード2

add_action('elementor/preview/enqueue_styles', function() {
    if ( ElementorPlugin::$instance->editor->is_edit_mode() ) {
        wp_enqueue_style('custom-editor-style', get_stylesheet_directory_uri() . '/editor-style.css');
    }
});

このコードは、Elementorのエディターモード時に特定のスタイルシートを読み込むためのものです。

サンプルコード3

add_action('elementor/preview/enqueue_styles', function() {
    if (!is_admin()) {
        wp_enqueue_style('frontend-style', 'https://example.com/style.css');
    }
});

このコードは、管理画面以外のフロントエンドでのみ特定のスタイルシートを読み込むようにするものです。

サンプルコード4

add_action('elementor/preview/enqueue_styles', function() {
    wp_enqueue_style('responsive-style', get_template_directory_uri() . '/responsive.css', array(), null, 'all');
});

このコードは、特定のレスポンシブデザイン用のスタイルシートをElementorのプレビューに追加するものです。

サンプルコード5

add_action('elementor/preview/enqueue_styles', function() {
    $user_role = wp_get_current_user()->roles[0];
    if ($user_role === 'editor') {
        wp_enqueue_style('editor-role-style', get_stylesheet_directory_uri() . '/editor-role.css');
    }
});

このコードは、現在のユーザーがエディターの場合にのみ、特定のスタイルシートを読み込むようにするものです。

概要

構文