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

概要

elementor/element/{$stack_name}/{$section_id}/before_section_end アクションは、特定のセクションがレンダリングされる前に実行され、セクションの終了直前にカスタムコードを挿入するために使用されます。このフックを利用することで、Elementorで作成されたページに追加のHTMLやPHPコードを動的に追加でき、さまざまなカスタマイズを行うことが可能です。

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

カスタムトラッキングコードの追加
特定のセクションにおけるスタイルの適用
動的データの挿入（例えば、投稿情報やユーザー情報など）
特定条件下での特別なコンテンツの表示
外部APIからのデータを反映したウィジェットの作成
通知メッセージやポップアップの表示制御

構文

アクションフックの構文は以下の通りです：

do_action("elementor/element/{$stack_name}/{$section_id}/before_section_end");

パラメータ

$stack_name: 使用されているウィジェットのスタック名（例：section、columnなど）。
$section_id: セクションの ID、ユニークな識別子。

戻り値

このアクション自体は何も返しませんが、フック内での処理によって表示内容が変更されます。

使用可能なプラグインとワードプレスのバージョン

Elementorのバージョン: 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

サンプルコード

以下に、elementor/element/{$stack_name}/{$section_id}/before_section_end アクションを使用したサンプルコードをいくつか示します。

サンプルコード1: トラッキングコードの追加

add_action('elementor/element/section/123/before_section_end', function($element) {
    echo '<script>console.log("Tracking code added!");</script>';
});

このコードは、特定のセクションの終了直前にJavaScriptのトラッキングコードを追加します。セクションIDが「123」の場合です。

サンプルコード2: カスタムCSSの適用

add_action('elementor/element/column/456/before_section_end', function($element) {
    echo '<style>.custom-class { background-color: red; }</style>';
});

このコードは、ID「456」のカラムセクションの終了直前にカスタムCSSを追加します。

サンプルコード3: 投稿情報の挿入

add_action('elementor/element/section/789/before_section_end', function($element) {
    $post_title = get_the_title();
    echo '<div>' . esc_html($post_title) . '</div>';
});

このコードは、789のセクションの終了直前に現在の投稿のタイトルを表示します。

サンプルコード4: 動的コンテンツの表示

add_action('elementor/element/section/321/before_section_end', function($element) {
    $user_id = get_current_user_id();
    if ($user_id) {
        echo '<p>Welcome back, User!</p>';
    }
});

このコードは、セクション321がレンダリングされる前に、ログインしているユーザーに対してウェルカムメッセージを表示します。

サンプルコード5: 外部APIデータの挿入

add_action('elementor/element/section/654/before_section_end', function($element) {
    $data = file_get_contents('https://api.example.com/data');
    echo '<div>' . esc_html($data) . '</div>';
});

このコードは、特定のセクションの終了直前に外部APIから取得したデータを表示します。セクションIDは「654」です。

概要

構文