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

概要

elementor/frontend/after_renderアクションは、Elementorのビジュアルエディタで構築されたページが出力された後に実行されるフックです。このフックは、カスタムのスクリプトやスタイルを追加したり、ページのデバッグ情報を表示したり、SEOメタデータを挿入するためによく使われます。

よく実装される機能としては以下が挙げられます：

カスタムJavaScriptやCSSの挿入
ページスピード向上のための最適化
トラッキングコード（例：Google Analytics）の追加
アクセシビリティ向上のためのARIA属性の追加
SEO対策のためのメタタグやリダイレクトの実装
ページのデバッグ情報表示

構文

add_action( 'elementor/frontend/after_render', 'your_function_name' );

パラメータ

このアクションには特別なパラメータはありませんが、Elementorのレンダリングコンテキストにアクセスするために、必要に応じてグローバル変数やElementorのクラスメソッドを利用できます。

戻り値

戻り値は特にありません。主に副作用を持つ操作（例：HTMLの出力、スクリプトの追加など）を行います。

使用可能なバージョン

Elementor: v2.0以上
WordPress: v5.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/frontend/after_render', function( $element ) {
    ?>
    <script>
        alert('Elementor rendering is complete!');
    </script>
    <?php
});

このコードは、Elementorで構築されたページのレンダリングが完了した後にアラートボックスを表示します。

サンプルコード2

add_action( 'elementor/frontend/after_render', function() {
    echo '<link rel="stylesheet" href="/path/to/your/custom.css">';
});

このコードは、Elementorによって生成されたページにカスタムのCSSファイルを挿入します。

サンプルコード3

add_action( 'elementor/frontend/after_render', function() {
    if ( is_single() ) {
        echo '<meta name="robots" content="noindex">';
    }
});

このサンプルは、単一の投稿が表示されたときに、SEOのためのメタタグを追加します。

サンプルコード4

add_action( 'elementor/frontend/after_render', function() {
    ?>
    <script>
        // Google Analytics tracking code
        (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
        m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
        })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

        ga('create', 'UA-XXXXX-Y', 'auto');
        ga('send', 'pageview');
    </script>
    <?php
});

このコードは、Elementorページのレンダリング後にGoogle Analyticsのトラッキングコードを挿入します。

サンプルコード5

add_action( 'elementor/frontend/after_render', function() {
    echo '<div class="custom-end-message">Thank you for visiting!</div>';
});

このサンプルは、Elementorのページがレンダリングされた後にカスタムメッセージを表示します。

これらのサンプルコードはすべて著作権フリーで使用できます。

概要

構文