概要
elementor/widget/before_render_content
は、Elementor のウィジェットがコンテンツをレンダリングする前に実行されるフックです。このアクションを使用することで、ウィジェットの表示内容や動作をカスタマイズすることができます。
一般的な使用例
- ウィジェットのスタイルを動的に変更する
- 特定の条件に基づいてコンテンツを表示または非表示にする
- ソーシャルメディアリンクを追加する
- カスタムデータをウィジェットに統合する
- 追加のスクリプトやスタイルを enqueued する
- ウィジェットの設定を変更する
構文
add_action('elementor/widget/before_render_content', 'your_function_name', 10, 2);
パラメータ
$widget
: 使用しているウィジェットのインスタンス$args
: ウィジェットに渡される引数
戻り値
このアクションは戻り値を持ちません。
使用可能なバージョン
- 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: ウィジェットにカスタムクラスを追加
このコードは、特定のウィジェットにカスタムクラスを追加し、CSSスタイルを適用するために使用されます。
add_action('elementor/widget/before_render_content', function($widget) {
if ($widget->get_name() === 'my_custom_widget') {
$widget->add_render_attribute('_wrapper', 'class', 'my-custom-class');
}
});
引用元: Elementor Developer Documentation
サンプル2: 特定の条件でコンテンツを非表示
このコードは、特定の条件を満たさない場合にウィジェットのコンテンツを非表示にします。
add_action('elementor/widget/before_render_content', function($widget) {
if (!is_user_logged_in()) {
$widget->set_settings('content', '');
}
});
引用元: Elementor Developer Documentation
サンプル3: ウィジェットのタイトルを変更
ウィジェットのタイトルを動的に変更するサンプルです。
add_action('elementor/widget/before_render_content', function($widget) {
$widget->set_settings('title', '新しいタイトル');
});
引用元: Elementor Developer Documentation
サンプル4: ソーシャルメディアリンクの追加
ウィジェットのコンテンツにソーシャルメディアリンクを追加するコードです。
add_action('elementor/widget/before_render_content', function($widget) {
$widget->add_render_attribute('social_links', 'data-social', 'facebook,twitter,instagram');
});
引用元: Elementor Developer Documentation
サンプル5: ウィジェットのスタイルを動的に変更
ウィジェットのスタイルを動的に変更するためのコードです。
add_action('elementor/widget/before_render_content', function($widget) {
$widget->add_render_attribute('_wrapper', 'style', 'color: red;');
});
引用元: Elementor Developer Documentation