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

概要

elementor/page_templates/canvas/after_content は、Elementorプラグインにおけるフックの一つで、特にCanvasテンプレートを使用しているページのコンテンツが表示された後に、追加のコンテンツやスクリプトを挿入するために利用されます。このアクションは、主に以下のような機能の実装に使用されます。

ページの終了時にカスタムスクリプトを追加する。
特定の条件下でダイナミックコンテンツを表示する。
ページのフッターにカスタムHTMLを挿入する。
トラッキング用のスクリプトをページに追加する。
ピクセルやコードスニペットを追加する。
カスタムウィジェットをページの最後に表示する。

構文

add_action( 'elementor/page_templates/canvas/after_content', 'your_custom_function' );

パラメータ

your_custom_function: 追加したいカスタム関数の名前。

戻り値

このアクション自体は何も値を返しませんが、実行されたカスタム関数によって処理が変更される可能性があります。

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

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/page_templates/canvas/after_content', 'add_custom_script' );

function add_custom_script() {
    echo '<script>alert("This is a custom script added after the content.");</script>';
}

このコードは、Canvasテンプレートのコンテンツが表示された後にアラートダイアログを表示するカスタムスクリプトを追加します。

サンプルコード 2

add_action( 'elementor/page_templates/canvas/after_content', 'add_custom_html' );

function add_custom_html() {
    echo '<div class="custom-footer">This is a custom footer content.</div>';
}

このコードは、Canvasテンプレートにカスタムフッターコンテンツを追加します。

サンプルコード 3

add_action( 'elementor/page_templates/canvas/after_content', 'add_tracking_code' );

function add_tracking_code() {
    echo '<script>(function() { console.log("Tracking code here"); })();</script>';
}

このコードは、Canvasテンプレートの後にトラッキング用のスクリプトを追加します。

サンプルコード 4

add_action( 'elementor/page_templates/canvas/after_content', 'dynamic_content_display' );

function dynamic_content_display() {
    if ( is_user_logged_in() ) {
        echo '<p>Welcome back, user!</p>';
    }
}

このコードは、ユーザーがログインしている場合に特定のメッセージを表示します。

サンプルコード 5

add_action( 'elementor/page_templates/canvas/after_content', 'load_additional_styles' );

function load_additional_styles() {
    echo '<link rel="stylesheet" href="path/to/your/custom-styles.css">';
}

このコードは、Canvasテンプレートの後にカスタムスタイルシートを読み込むためのリンクを挿入します。

概要

構文