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

概要

elementor/frontend/after_enqueue_stylesは、WordPressプラグインであるElementorが提供するアクションフックです。このフックは、Elementorのスタイルシートがキューに追加された後に実行されます。一般的に、独自のスタイルやスクリプトを追加するために使用され、次のような機能の実装に役立ちます。

Elementorのカスタムスタイルを追加する
特定のページでのみカスタムCSSを適用する
サイト全体に適用するグローバルなスタイルを追加する
ビジュアルエディタ内のスタイルの調整
最適化されたレスポンシブデザインの適用
JavaScriptやCSSの依存関係の解決

構文

add_action( 'elementor/frontend/after_enqueue_styles', 'your_function_name' );

パラメータ

このアクションには特定のパラメータはありませんが、Elementorのスタイルシートがキューに追加された後に実行されます。

戻り値

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

ElementorおよびWordPressのバージョン

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

サンプルコード

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

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

このコードは、テーマ内のカスタムCSSファイルをElementorのスタイルシートの後に追加します。

サンプルコード 2: ページ毎に異なるCSSを適用

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

このコードは、「about」というページが表示されているときのみ、特定のCSSファイルをロードします。

サンプルコード 3: スクリプトとスタイルの依存関係

add_action( 'elementor/frontend/after_enqueue_styles', function() {
    wp_enqueue_style( 'dependent-style', get_template_directory_uri() . '/css/dependent.css', array('elementor-global'), '1.0', 'all' );
} );

このコードは、Elementorのグローバルスタイルに依存したスタイルを追加します。

サンプルコード 4: Google Fontsの追加

add_action( 'elementor/frontend/after_enqueue_styles', function() {
    wp_enqueue_style( 'google-fonts', 'https://fonts.googleapis.com/css?family=Roboto:400,700' );
} );

このコードは、Google FontsのRobotoフォントをElementorのスタイルシートに追加します。

サンプルコード 5: 条件付きで複数のスタイルを追加

add_action( 'elementor/frontend/after_enqueue_styles', function() {
    if ( is_single() ) {
        wp_enqueue_style( 'single-post-style', get_template_directory_uri() . '/css/single.css' );
    }
    wp_enqueue_style( 'common-style', get_template_directory_uri() . '/css/common.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

概要

構文