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

概要

elementor/frontend/render_mode/register アクションは、Elementor プラグインにおいて、カスタムレンダリングモードを登録するためのフックです。このアクションを使用することで、特定の条件下でのコンテンツの表示方法をカスタマイズする機能を実装できます。よく使われる機能には次のようなものがあります。

独自の表示方式を作成する
特定のデバイス向けのカスタムスタイルを設定する
コンテンツの条件付き表示を実装する
テーマやプラグインに合わせた表示ロジックの追加
SEO対策のためのカスタムマークアップを挿入する
特殊なレイアウトやアニメーション効果を追加する

このアクションは、Elementor プラグインのバージョン 2.0 以降および WordPress のバージョン 5.0 以降で使用可能です。以下に、いくつかのサンプルコードを示します。

サンプルコード

サンプルコード 1: カスタムレンダリングモードの追加

add_action('elementor/frontend/render_mode/register', function($controls_manager) {
    $controls_manager->add_render_mode('custom_mode', 'Custom Render Mode');
});

このコードは、Elementor に新しいレンダリングモード「カスタムモード」を登録します。これにより、独自の表示方法を追加できます。

サンプルコード 2: デバイスごとのスタイル設定

add_action('elementor/frontend/render_mode/register', function($controls_manager) {
    $controls_manager->add_render_mode('mobile_mode', 'Mobile Specific Mode');
});

このコードは、モバイルデバイスに特化した表示モードを「モバイル特化モード」として追加します。これにより、モバイル向けのスタイルやレイアウトを調整しやすくなります。

サンプルコード 3: 条件付き表示の実装

add_action('elementor/frontend/render_mode/register', function($controls_manager) {
    $controls_manager->add_render_mode('conditional_mode', 'Conditional Render Mode');
});

このコードは、特定の条件に基づいてコンテンツを表示するためのカスタムレンダリングモードを作成します。これを利用することで、特定のページやユーザーに対して異なる内容を表示できます。

サンプルコード 4: SEO対策用のカスタムマークアップ

add_action('elementor/frontend/render_mode/register', function($controls_manager) {
    $controls_manager->add_render_mode('seo_mode', 'SEO Optimized Mode');
});

このコードは、SEOに特化したカスタムレンダリングモードを追加します。これにより、特定のマークアップや構造を持つコンテンツを表示することができます。

サンプルコード 5: アニメーション付きの表示モード

add_action('elementor/frontend/render_mode/register', function($controls_manager) {
    $controls_manager->add_render_mode('animated_mode', 'Animated Render Mode');
});

このコードは、アニメーション効果を伴うレンダリングモードを「アニメーション付き表示モード」として追加します。ユーザー体験を高めるための独自のアニメーションを適用できます。

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

アクション名	使用可能性
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

概要