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

概要

elementor/loaded アクションは Elementor プラグインが完全に読み込まれた後にトリガーされるフックです。このフックは、Elementor の初期設定やカスタマイズ、動的なコンテンツの追加、レイアウトの変更を行う際に特に役立ちます。具体的には以下の機能を実装する際に通常使用されます。

カスタムウィジェットの登録
独自のスタイルやスクリプトの読み込み
特定のテンプレートや条件に基づく動的なコンテンツの生成
エラーメッセージや通知の表示
Elementor 提供の設定の変更
カスタムショートコードの追加

構文

add_action('elementor/loaded', 'your_function_name');

パラメータ

your_function_name: Elementor が読み込まれた時に実行される関数の名前。

戻り値

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

Elementor のバージョン

Elementorは、バージョン 1.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: カスタムウィジェットの登録

このサンプルでは、Elementor にカスタムウィジェットを追加する方法を示しています。

function register_custom_widget() {
    require_once(__DIR__ . '/widgets/custom-widget.php');
    ElementorPlugin::instance()->widgets_manager->register_widget_type(new Custom_Widget());
}
add_action('elementor/loaded', 'register_custom_widget');

このコードは、カスタムウィジェットを Elemento に登録するための基本的なフックを使用しています。

サンプルコード 2: スクリプトとスタイルの読み込み

このサンプルでは、特定のスタイルシートとスクリプトを読み込む方法を示しています。

function enqueue_custom_styles() {
    wp_enqueue_style('custom-style', get_template_directory_uri() . '/css/custom-style.css');
    wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/custom-script.js', array('jquery'), '1.0.0', true);
}
add_action('elementor/loaded', 'enqueue_custom_styles');

このコードは、Elementor が読み込まれた後にカスタムスタイルとスクリプトを追加します。

サンプルコード 3: カスタム設定の変更

以下のサンプルでは、Elementor の設定を変更する方法を示します。

function modify_elementor_settings() {
    ElementorPlugin::instance()->settings_manager->set_settings(
        array('some_setting' => 'new_value')
    );
}
add_action('elementor/loaded', 'modify_elementor_settings');

このコードは、Elementor の設定をカスタマイズする際に使用されます。

サンプルコード 4: 動的なコンテンツの生成

このサンプルでは、特定の条件に基づいて動的なコンテンツを生成します。

function dynamic_content() {
    if (is_page('contact')) {
        echo '<div class="dynamic-content">このページのためのカスタムコンテンツ</div>';
    }
}
add_action('elementor/loaded', 'dynamic_content');

このコードは、特定のページに基づいて動的なコンテンツを出力します。

サンプルコード 5: カスタムショートコードの追加

ここでは、Elementor 内でカスタムショートコードを追加する方法を示しています。

function add_custom_shortcode() {
    add_shortcode('my_custom_shortcode', 'my_custom_function');
}

function my_custom_function() {
    return 'これはカスタムショートコードの出力です';
}
add_action('elementor/loaded', 'add_custom_shortcode');

このコードは、Elementor で使用するためのカスタムショートコードを登録します。

概要

構文