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

概要

elementor/editor/footerは、Elementorの編集画面のフッター部分にフックを提供するWordPressのアクションです。このアクションは、Elementorのエディタ内でカスタムJavaScriptやCSSを追加したり、特定のUI要素を変更したりする際に活用されます。また、Elementorを拡張するさまざまな機能を実装するのに使われます。よく使われる機能としては以下のようなものがあります。

カスタム通知メッセージをフッターに表示
独自のスクリプトをフッターに追加
スタイルシートをエディタのフッターに組み込む
特定の条件に基づいた要素の非表示
エディタのカスタムUIコンポーネントを追加
他のプラグインとのインタラクションを強化

このアクションの構文は以下の通りです。

do_action('elementor/editor/footer');

パラメータ

なし

戻り値

なし

対象バージョン

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: カスタムスクリプトを追加

add_action('elementor/editor/footer', function() {
    echo '<script>console.log("Hello from Elementor Footer!");</script>';
});

このコードは、ElementorのフッターにカスタムJavaScriptコードを追加し、コンソールにメッセージを表示します。

サンプル2: カスタムCSSの追加

add_action('elementor/editor/footer', function() {
    echo '<style>.my-custom-class { background: #f00; }</style>';
});

ElementorのフッターにカスタムCSSを追加し、特定のクラスの背景色を赤に設定します。

サンプル3: UI通知メッセージの表示

add_action('elementor/editor/footer', function() {
    echo '<div class="notice notice-info"><p>カスタム通知: これを使ってエディタをカスタマイズしてください。</p></div>';
});

エディタ内にカスタム通知メッセージを表示し、ユーザーへの情報提供に役立てます。

サンプル4: 特定条件での要素非表示

add_action('elementor/editor/footer', function() {
    if ( ! current_user_can('administrator') ) {
        echo '<style>.admin-only { display: none; }</style>';
    }
});

管理者以外のユーザーがエディタにアクセスした際に、特定の要素を非表示にします。

サンプル5: 他のプラグインとのインタラクション

add_action('elementor/editor/footer', function() {
    if ( defined( 'MY_PLUGIN_VERSION' ) ) {
        echo '<script>initialize_my_plugin();</script>';
    }
});

特定のプラグインが有効な場合に、プラグイン初期化用のJavaScriptコードをエディタに追加します。

概要