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

概要

elementor/page_templates/header-footer/after_contentは、Elementorのカスタムヘッダーやフッターがコンテンツの後に表示された後に実行されるフックです。このアクションは主に以下の目的で使用されることが多いです。

カスタムスクリプトの追加: ページの特定の位置にJavaScriptを追加する。
カスタムCSSの挿入: ヘッダーやフッターのデザインを調整するためのスタイルを追加する。
トラッキングコードの挿入: Google Analyticsなどのトラッキングコードをページ末尾に追加する。
他のプラグインとの統合: 特定の機能を提供するために他のプラグインと連携する際に便利。
カスタムウィジェットの表示: 特定の条件に基づいてウィジェットを動的に表示する。
コンテンツフィルターの実装: 出力されるコンテンツを動的に変更する際に使用する。

構文

add_action('elementor/page_templates/header-footer/after_content', 'your_function_name');

function your_function_name() {
    // your code here
}

パラメータ

このアクションフックにはパラメータが通されません。

戻り値

このアクションは何も値を返しません。

使用可能なバージョン

Elementor: 3.0以上
WordPress: 5.0以上

サンプルコード

サンプルコード1: カスタムスクリプトの挿入

このサンプルコードは、ページコンテンツの後にカスタムJavaScriptを挿入します。

add_action('elementor/page_templates/header-footer/after_content', function() {
    echo '<script>alert("This is a custom script!");</script>';
});

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

このサンプルコードは、フッターにカスタムCSSスタイルを挿入します。

add_action('elementor/page_templates/header-footer/after_content', function() {
    echo '<style>.custom-footer { background-color: #f0f0f0; }</style>';
});

サンプルコード3: Google Analyticsのトラッキングコード挿入

このサンプルコードは、Google Analyticsのスクリプトをページに追加します。

add_action('elementor/page_templates/header-footer/after_content', function() {
    echo "
    <script async src='https://www.googletagmanager.com/gtag/js?id=YOUR_TRACKING_ID'></script>
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'YOUR_TRACKING_ID');
    </script>
    ";
});

サンプルコード4: クラウドサービスのスクリプトの挿入

このコードは、特定のクラウドサービスのスクリプトを挿入します。

add_action('elementor/page_templates/header-footer/after_content', function() {
    echo '<script src="https://example.com/path/to/script.js"></script>';
});

サンプルコード5: カスタムウィジェットを条件付きで表示

このコードでは、特定の条件下でカスタムウィジェットを表示します。

add_action('elementor/page_templates/header-footer/after_content', function() {
    if (is_single()) {
        echo '<div class="custom-widget">This is a custom widget for single posts.</div>';
    }
});

この関数のアクションでの使用可能性

アクション名	使用可能性
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/page_templates/header-footer/after_contentアクションが他のWordPressのアクションフックで使用可能かどうかを示しています。

概要

構文