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

概要

elementor/page_templates/canvas/before_content は、WordPress の Elementor プラグイン内で使用されるフックの一つです。このアクションは、Elementor のキャンバステンプレートがコンテンツを表示する前に特定のコードを実行するためのものです。これにより、開発者はページの特定の場所に独自のコンテンツや機能を追加することができます。このアクションは、特にランディングページや特定のデザイン要件を満たすために頻繁に使用されます。

よく使われる機能の例

カスタムスタイルやスクリプトの追加
特定の条件に基づくコンテンツの表示
ページナビゲーションやボタンの動的な挿入
SEO目的でのメタ情報の追加
トラッキング用のスクリプトの挿入
カスタム通知やメッセージの表示

このアクションは、Elementor バージョン 2.0.0 以降で使用可能で、WordPress バージョン 4.0 以降で動作します。

構文

do_action('elementor/page_templates/canvas/before_content');

パラメータ

このアクションにはパラメータはありません。

戻り値

特に戻り値はありませんが、他のフックによって実行される処理が影響する場合があります。

サンプルコード1

add_action('elementor/page_templates/canvas/before_content', 'custom_before_content_message');

function custom_before_content_message() {
    echo '<div class="custom-message">Welcome to my custom landing page!</div>';
}

このサンプルコードは、キャンバステンプレートのコンテンツが表示される前にカスタムメッセージを表示します。

サンプルコード2

add_action('elementor/page_templates/canvas/before_content', 'add_custom_styles');

function add_custom_styles() {
    echo '<style>
            .custom-style { color: red; }
          </style>';
}

このコードは、コンテンツの前にカスタムスタイルを追加し、ページ内の特定の要素に適用するスタイルを定義します。

サンプルコード3

add_action('elementor/page_templates/canvas/before_content', 'insert_dynamic_button');

function insert_dynamic_button() {
    echo '<button class="dynamic-button">Click Me</button>';
}

このサンプルでは、キャンバステンプレートの前に動的なボタンを挿入します。このボタンにイベントを追加すると、さらに機能的なページを作成できます。

サンプルコード4

add_action('elementor/page_templates/canvas/before_content', 'insert_tracking_script');

function insert_tracking_script() {
    echo '<script src="https://example.com/tracking.js"></script>';
}

このコードは、キャンバスページにトラッキング用のJavaScriptファイルを追加し、ユーザーの行動を追跡します。

サンプルコード5

add_action('elementor/page_templates/canvas/before_content', 'add_custom_meta_tags');

function add_custom_meta_tags() {
    echo '<meta name="description" content="This is a custom landing page for my site." />';
}

このサンプルは、SEOのためにカスタムメタタグを追加し、ページの説明を適切に設定します。

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

アクション	使用例
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

概要