プラグインElementorのelementor/frontend/assets_url関数の使用方法・解説

概要

elementor/frontend/assets_url 関数は、WordPress の Elementor プラグインにおいてアセット（CSS、JavaScript、画像など）のURLを返すために使用されます。この関数は、Elementorで作成されたページやウィジェットにおいて、特定のアセットを読み込む際に便利です。以下のような機能を実装する際に特によく使われます：

スタイルシートやスクリプトの読み込み。
カスタムウィジェットの作成。
テーマやプラグインのカスタマイズ。
Elementorの拡張機能やアドオンの開発。
JavaScriptファイルやCSSファイルを動的に取得。
メディアや画像を安全に参照する。

構文

elementorfrontendassets_url( $path );

パラメータ

$path (string): 取得したいアセットの相対パス。

戻り値

(string): 指定されたアセットのフルURL。

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

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ファイルの読み込み

function load_custom_style() {
    wp_enqueue_style('custom-style', elementorfrontendassets_url('css/custom.css'));
}
add_action('wp_enqueue_scripts', 'load_custom_style');

このサンプルは、ElementorのアセットURLを使用してカスタムスタイルシートを読み込む方法を示しています。

サンプルコード2: JavaScriptファイルの読み込み

function load_custom_script() {
    wp_enqueue_script('custom-script', elementorfrontendassets_url('js/custom.js'), array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'load_custom_script');

このコードでは、ElementorのアセットURLを使ってカスタムJavaScriptファイルを読み込む例です。

サンプルコード3: 画像URLの取得

function get_custom_image_url() {
    $image_url = elementorfrontendassets_url('images/my_image.jpg');
    echo '<img src="' . esc_url($image_url) . '" alt="My Image">';
}

このサンプルは、ElementorのアセットURLを使って画像のURLを取得し、HTMLで表示する方法を示しています。

サンプルコード4: アイコンフォントの読み込み

function load_icon_font() {
    wp_enqueue_style('font-awesome', elementorfrontendassets_url('fonts/font-awesome.min.css'));
}
add_action('wp_enqueue_scripts', 'load_icon_font');

このコードは、ElementorのアセットURLを使ってアイコンフォントを読み込む方法を示しています。

サンプルコード5: 自カスタムウィジェットの作成

class My_Custom_Widget extends ElementorWidget_Base {
    public function get_style_depends() {
        return [ 'my-custom-style' ];
    }

    public function get_script_depends() {
        return [ 'my-custom-script' ];
    }
}

このサンプルでは、ElementorのアセットURLを利用して自作ウィジェットのスタイルやスクリプトを依存関係として追加する方法を示しています。

概要

構文