プラグインElementorのelementor/core/files/assets/assets_registeredフィルタの使用方法・解説

概要

elementor/core/files/assets/assets_registered フィルタは、Elementor におけるアセット（CSSやJavaScript）の管理と登録に関与します。このフィルタを使用することで、Elementor の機能を拡張したり、必要なアセットを追加したりすることができます。主な使用例には以下のものが含まれます。

新しい CSS スタイルシートを追加する
カスタム JavaScript ファイルを追加する
既存のアセットを上書きする
アセットのバージョンを制御する
条件に基づいて特定のアセットを登録する
モジュールの読み込み順序を変更する

構文

add_filter( 'elementor/core/files/assets/assets_registered', 'your_function' );

パラメータ

$assets : 登録されているアセットの配列

戻り値

修正されたアセットの配列

使用可能バージョン

Elementor: 2.0 以降
WordPress: 4.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

サンプルコード

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

add_filter( 'elementor/core/files/assets/assets_registered', function( $assets ) {
    $assets['my-custom-style'] = [
        'src'  => 'path/to/my-custom-style.css',
        'deps' => [],
        'ver'  => '1.0.0',
    ];
    return $assets;
});

このサンプルコードは、Elementor にカスタムCSSファイルを追加します。ファイルのパスやバージョン番号を指定することができます。

サンプル2: 既存のアセットの上書き

add_filter( 'elementor/core/files/assets/assets_registered', function( $assets ) {
    if ( isset( $assets['elementor-frontend'] ) ) {
        $assets['elementor-frontend']['src'] = 'new/path/to/frontend.js';
    }
    return $assets;
});

このサンプルでは、ElementorのフロントエンドJavaScriptアセットのパスを新しいものに上書きします。

サンプル3: 条件に基づいてアセットを登録

add_filter( 'elementor/core/files/assets/assets_registered', function( $assets ) {
    if ( is_page_template( 'my-template.php' ) ) {
        $assets['page-template-style'] = [
            'src' => 'path/to/template-style.css',
            'deps' => [],
            'ver' => '1.0.0',
        ];
    }
    return $assets;
});

このサンプルは、特定のページテンプレートが使用されているときにのみCSSアセットを登録します。

サンプル4: JavaScriptファイルの依存関係を指定

add_filter( 'elementor/core/files/assets/assets_registered', function( $assets ) {
    $assets['my-script'] = [
        'src'  => 'path/to/my-script.js',
        'deps' => ['jquery'], // jQueryに依存
        'ver'  => '1.0.0',
    ];
    return $assets;
});

このコードは、jQueryに依存するカスタムJavaScriptファイルを登録します。

サンプル5: アセットのバージョン管理

add_filter( 'elementor/core/files/assets/assets_registered', function( $assets ) {
    $assets['custom-versioned-style'] = [
        'src' => 'path/to/custom-style.css',
        'deps' => [],
        'ver' => time(), // キャッシュ破棄のため、現在の時間を使用
    ];
    return $assets;
});

このサンプルは、ファイルのバージョンを現在のタイムスタンプで設定し、キャッシュを無効にします。

引用元ページは著作権フリーのもので作成されているためリンクは提供できませんが、主にWordPressやElementorの公式ドキュメントなどを参考にしました。

概要

構文