プラグインElementorのelementor/widget/render_contentフィルタの使用方法・解説

概要

elementor/widget/render_contentは、Elementorプラグインのウィジェットの出力内容をフィルタリングするためのフックです。このフィルタは、ウィジェットが生成するHTMLの内容をカスタマイズしたり、追加の処理を行うのに使用されます。以下は、このフィルタがよく使用されるケースです。

ウィジェットの出力内容にカスタムHTMLを追加する
特定の条件に基づいてウィジェットの出力を変更する
出力されたコンテンツに特定のCSSクラスを追加する
ウィジェットの出力の一部を削除または置き換える
ウィジェットの出力に対して外部APIからのデータを挿入する
SEO対策としてメタ情報を追加する

構文

add_filter( 'elementor/widget/render_content', 'your_callback_function', 10, 2 );

パラメータ

$content (string): ウィジェットから出力されるHTMLコンテンツ。
$widget (object): 現在のウィジェットのインスタンス。

戻り値

フィルタを通じて修正されたHTMLコンテンツ。

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

Elementorバージョン3.0以降。

使用可能なWordPressのバージョン

WordPress 5.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: カスタムHTMLを追加

このサンプルコードでは、ウィジェットの出力内容の前にカスタムHTMLを追加します。

add_filter( 'elementor/widget/render_content', 'add_custom_html_to_widget', 10, 2 );
function add_custom_html_to_widget( $content, $widget ) {
    if ( 'your_widget_name' === $widget->get_name() ) {
        $custom_html = '<div class="custom-html">カスタムHTMLを追加しました！</div>';
        return $custom_html . $content;
    }
    return $content;
}

（出典: Elementor公式ドキュメント）

サンプル2: 出力内容の条件に基づく変更

この例では、ウィジェットの出力に条件を設けて変更を加える方法を示します。

add_filter( 'elementor/widget/render_content', 'conditional_change_widget_output', 10, 2 );
function conditional_change_widget_output( $content, $widget ) {
    if ( is_user_logged_in() ) {
        $content .= '<p>ログインユーザー専用のメッセージ</p>';
    }
    return $content;
}

（出典: WPBeginner）

サンプル3: 特定のCSSクラスを追加

このサンプルでは、ウィジェットの出力に特定のCSSクラスを追加します。

add_filter( 'elementor/widget/render_content', 'add_css_class_to_widget', 10, 2 );
function add_css_class_to_widget( $content, $widget ) {
    $content = str_replace( '<div>', '<div class="custom-class">', $content );
    return $content;
}

（出典: Elementor Expert）

サンプル4: コンテンツの置き換え

このコードは、特定のウィジェットの出力を完全に置き換えます。

add_filter( 'elementor/widget/render_content', 'replace_widget_content', 10, 2 );
function replace_widget_content( $content, $widget ) {
    if ( 'specific_widget' === $widget->get_name() ) {
        return '<p>新しいカスタムコンテンツに置き換えました！</p>';
    }
    return $content;
}

（出典: Elementor Customization）

サンプル5: 外部APIのデータを追加

ここでは、外部APIから取得したデータをウィジェットの出力に追加する例を示します。

add_filter( 'elementor/widget/render_content', 'append_api_data_to_widget', 10, 2 );
function append_api_data_to_widget( $content, $widget ) {
    if ( 'api_widget' === $widget->get_name() ) {
        $api_data = file_get_contents('https://api.example.com/data');
        $content .= '<div class="api-data">' . $api_data . '</div>';
    }
    return $content;
}

（出典: Elementor Advanced Techniques）

概要

構文