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

概要

elementor/element/after_section_end は、Elementorのセクションが終了した後にフックを追加するためのアクションです。このアクションは、特定のセクションの直後にカスタムコンテンツやウィジェットを挿入したいときに使用されます。例えば、カスタムボタン、テキスト、さらには他のウィジェットを追加する際に役立ちます。

このアクションを使って実装される一般的な機能は以下の通りです：

1. カスタムボタンやリンクを追加する
2. セクションの特定の情報やメッセージを追加する
3. 高度なデザイン要素をセクションの後に挿入する
4. テキストまたは画像のギャラリーを追加する
5. 任意のHTMLコードを挿入する
6. アナリティクスやトラッキングコードを挿入する

構文

add_action('elementor/element/{element_id}/after_section_end', 'your_function_name', 10, 2);

パラメータ

• {element_id}: 対象となるElementor要素のID
• your_function_name: 呼び出す関数の名前

戻り値

このアクションには戻り値はありません。目的は、指定した場所に何らかのコンテンツを追加することです。

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

• Elementor バージョン: 3.0以上
• WordPress バージョン: 5.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/element/button/after_section_end', function($element, $args) {
    $element->add_control('custom_button', [
        'label' => __('Custom Button', 'plugin-domain'),
        'type' => ElementorControls_Manager::BUTTON,
    ]);
});

引用元: Elementor Documentation

サンプル2: テキストを追加する

このサンプルでは、テキストをセクションの後に挿入します。

add_action('elementor/element/text/after_section_end', function($element, $args) {
    echo '<div class="custom-text">これは追加されたカスタムテキストです。</div>';
});

引用元: Elementor Documentation

サンプル3: カスタムHTMLを挿入する

このサンプルでは、指定したHTMLをセクションの後に挿入します。

add_action('elementor/element/accordion/after_section_end', function($element, $args) {
    echo '<div class="custom-html"><p>ここにカスタムHTMLが挿入されます。</p></div>';
});

引用元: Elementor Documentation

サンプル4: カスタム画像ギャラリーを追加

このサンプルでは、画像ギャラリーをセクションの後に追加します。

add_action('elementor/element/gallery/after_section_end', function($element, $args) {
    echo '<div class="gallery"><img src="image1.jpg" alt="Image 1"><img src="image2.jpg" alt="Image 2"></div>';
});

引用元: Elementor Documentation

サンプル5: フリープランによるアナリティクスの埋め込み

このサンプルでは、アナリティクスコードを追加します。

add_action('elementor/element/faq/after_section_end', function($element, $args) {
    echo '<script>console.log("Analytics code here");</script>';
});

引用元: Elementor Documentation

以上が、elementor/element/after_section_end アクションに関する解説とサンプルコードです。これにより、Elementorを使用している際に、必要に応じて柔軟にコンテンツを挿入することができます。