プラグインElementorのelementor/extended_allowed_html_tags/{$tag}フィルタの使用方法・解説

概要

elementor/extended_allowed_html_tags/{$tag}は、WordPressのElementorプラグインで使用されるフィルターフックです。このフィルターは、特定のHTMLタグに対して許可される属性を拡張するために利用されます。これにより、デフォルトで許可されていない属性を追加することができ、Elementorのカスタマイズ性が高まります。以下のような機能を実装する際によく使われます：

カスタムHTML要素の属性の制御
セキュリティ強化のための特定属性の削除
レイアウトに必要なCSSクラスの追加
特定のプラグインとの互換性を持たせるための属性追加
SEOに配慮した属性の設定
フロントエンドスタイリングのためのカスタム属性の導入

構文

add_filter('elementor/extended_allowed_html_tags/{$tag}', 'your_function_name');

function your_function_name($allowed_html) {
    // ここで変更を加える
    return $allowed_html;
}

パラメータ

$tag: 拡張を行うHTMLタグ
$allowed_html: 許可されているHTML属性を含む配列

戻り値

このフィルターは、変更を加えた$allowed_html配列を返します。

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

Elementorバージョン: 3.0以降
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: ボタン要素にクラスを追加する

add_filter('elementor/extended_allowed_html_tags/a', function($allowed_html) {
    $allowed_html['a']['class'] = true; // 'class'属性を許可
    return $allowed_html;
});

このコードは、<a>タグにCSSクラスを許可します。これにより、スタイリングの自由度が高まります。

サンプル2: imgタグに追加属性を許可する

add_filter('elementor/extended_allowed_html_tags/img', function($allowed_html) {
    $allowed_html['img']['data-custom'] = true; // 'data-custom'属性を許可
    return $allowed_html;
});

このコードは、<img>タグにカスタムデータ属性を追加できるようにします。

サンプル3: iframeタグの属性をカスタマイズする

add_filter('elementor/extended_allowed_html_tags/iframe', function($allowed_html) {
    $allowed_html['iframe']['allowfullscreen'] = true; // 'allowfullscreen'属性を許可
    return $allowed_html;
});

このコードは、<iframe>タグにフルスクリーンを許可する属性を追加します。

サンプル4: divタグに機能を追加する

add_filter('elementor/extended_allowed_html_tags/div', function($allowed_html) {
    $allowed_html['div']['data-role'] = true; // 'data-role'属性を許可
    return $allowed_html;
});

このコードは、<div>タグにdata-role属性を追加できるようにします。

サンプル5: spanタグにスタイル属性を許可する

add_filter('elementor/extended_allowed_html_tags/span', function($allowed_html) {
    $allowed_html['span']['style'] = true; // 'style'属性を許可
    return $allowed_html;
});

このコードは、<span>タグにインラインスタイルを許可します。

概要

構文