概要
elementor/element/after_add_attributes フックは、Elementorにおいて特定の要素（ウィジェット）に属性を追加した後に実行されます。このフックを利用することで、開発者はウィジェットに対してカスタム属性を追加したり、スタイルやスクリプトを変更したりすることができます。以下のような機能を実装する際によく使用されます。
- ウィジェットのHTML要素にカスタムデータ属性を追加する。
- スクリプトやスタイルを条件に基づいて特定のウィジェットにのみ適用する。
- CSSクラスを動的に追加または変更する。
- アクセシビリティ向上のためにARIA属性を追加する。
- 特定の条件に基づいてウィジェットのスタイルを変更する。
- ウィジェットのデフォルト設定をオーバーライドするカスタマイズを行う。
構文
add_action('elementor/element/<widget_name>/after_add_attributes', 'your_callback_function');
パラメータ
$element: Elementorの要素オブジェクト$attributes: 要素に追加された属性の配列
戻り値
なし
使用可能なプラグインElementorのバージョン
Elementor 2.0以降
使用可能なワードプレスのバージョン
WordPress 4.5以降
サンプルコード
サンプル1: カスタムデータ属性を追加
このコードは、特定のウィジェットにカスタムデータ属性を追加します。
add_action('elementor/element/button/after_add_attributes', function($element, $attributes) {
$attributes['data-custom'] = 'my-custom-value';
});
サンプル2: スタイルを条件に基づいて適用
このコードは、特定の条件でのみウィジェットにスタイルを追加します。
add_action('elementor/element/slider/after_add_attributes', function($element, &$attributes) {
if (is_single()) {
$attributes['class'] .= ' my-slider-single';
}
});
サンプル3: ARIA属性を追加
このコードは、アクセシビリティ向上のためにARIA属性を追加します。
add_action('elementor/element/icon-box/after_add_attributes', function($element, &$attributes) {
$attributes['aria-label'] = 'Custom Icon Box';
});
サンプル4: カスタムクラスの追加
このコードは、特定のウィジェットにカスタムCSSクラスを追加します。
add_action('elementor/element/image/after_add_attributes', function($element, &$attributes) {
$attributes['class'] .= ' my-custom-image-class';
});
サンプル5: デフォルトの設定をオーバーライド
このコードは、ウィジェットのデフォルト設定を上書きします。
add_action('elementor/element/text-editor/after_add_attributes', function($element, &$attributes) {
$attributes['style'] = 'font-weight:bold;';
});
この関数のアクションでの使用可能性
| アクション | 使用例 |
|---|---|
| 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 |