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

概要

elementor/element/{$stack_name}/{$section_id}/after_section_end アクションは、Elementorプラグインにおいて、特定のセクションが終了した直後にカスタマイズを行うために使用されます。このフックを利用することで、特定のセクションに何らかの要素を追加したり、カスタムJavaScriptやCSSを適用することが可能です。

このアクションは、以下のような機能を実装する際によく使われます：

セクションのカスタム内容の追加
特定のスタイルの適用
JavaScriptイベントの設定
トラッキングコードの挿入
セクションのレイアウト変更
外部APIとの連携

構文

add_action( 'elementor/element/{$stack_name}/{$section_id}/after_section_end', 'your_function_name', 10, 3 );

パラメータ

{$stack_name}: このアクションが対象とするElementorウィジェットのスタック名。
{$section_id}: 特定のセクションのID。
your_function_name: コールバック関数名。任意のカスタム処理を実行します。

戻り値

このアクションは値を返さず、カスタム処理を実行するためのフックとして機能します。

使用可能なプラグインおよびバージョン

Elementtor: バージョン 2.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: カスタムHTMLを追加

add_action( 'elementor/element/section/section_id/after_section_end', function( $element, $args ) {
    echo '<div class="custom-html">カスタムHTMLコンテンツ</div>';
}, 10, 2 );

このサンプルコードは、特定のセクションの終了後にカスタムHTMLを追加し、その内容を表示します。

サンプルコード 2: 特定のスタイルを追加

add_action( 'elementor/element/section/section_id/after_section_end', function( $element, $args ) {
    echo '<style>
            .custom-style { color: red; }
          </style>';
}, 10, 2 );

このサンプルコードは、特定のセクションの終了後にカスタムCSSスタイルを追加するものです。

サンプルコード 3: JavaScriptを追加

add_action( 'elementor/element/section/section_id/after_section_end', function( $element, $args ) {
    echo '<script>
            document.querySelector(".elementor-section").addEventListener("click", function() {
                alert("セクションがクリックされました");
            });
          </script>';
}, 10, 2 );

このサンプルコードは、特定のセクションの終了後にJavaScriptのコードを追加し、セクションがクリックされた際にアラートを表示します。

サンプルコード 4: トラッキングコードを挿入

add_action( 'elementor/element/section/section_id/after_section_end', function( $element, $args ) {
    echo '<script>console.log("トラッキングコード");</script>';
}, 10, 2 );

このサンプルコードは、指定したセクションの終了後にトラッキングコードをコンソールに出力します。

サンプルコード 5: 外部APIとの連携

add_action( 'elementor/element/section/section_id/after_section_end', function( $element, $args ) {
    // 外部APIからデータを取得する処理
    $data = file_get_contents("https://api.example.com/data");
    echo '<div>' . $data . '</div>';
}, 10, 2 );

このサンプルコードは、特定のセクションの終了後に外部APIからデータを取得し、その結果を表示します。

これらのサンプルコードは著作権フリーであり、あなたのプロジェクトで自由に利用できます。

概要

構文