WordPress 5.9 Josephine からページのbody要素の直後もしくはフッターでSVGが読み込まれるようになりました。
下記のような記述が大量に挿入されます。
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 0 0" width="0" height="0" focusable="false" role="none" style="visibility: hidden; position: absolute; left: -9999px; overflow: hidden;">
<defs>
<filter id="wp-duotone-dark-grayscale">
<feColorMatrix color-interpolation-filters="sRGB" type="matrix" values=" .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 .299 .587 .114 0 0 " />
<feComponentTransfer color-interpolation-filters="sRGB">
<feFuncR type="table" tableValues="0 0.49803921568627" />
<feFuncG type="table" tableValues="0 0.49803921568627" />
<feFuncB type="table" tableValues="0 0.49803921568627" />
<feFuncA type="table" tableValues="1 1" />
</feComponentTransfer>
<feComposite in2="SourceGraphic" operator="in" />
</filter>
</defs>
</svg>このsvg要素はWordPress 5.9から追加されたデュオトーン（Duotone）機能に追加による影響です。
機能追加のためにsvg要素が追加されたわけですが、記述量が多くHTMLとしての容量も増えてしまいます。
デュオトーン（Duotone）機能は画像にフィルターをかける為の機能で使う人にとっては非常に便利です。
一方でこの機能を使わない方も多いと思いますので無効化して削除する方法をご紹介します。
theme.jsonで無効化する方法
theme.jsonでデュオトーン（Duotone）機能を無効にすることで、svg要素が消えます。
{
"version": 2,
"settings": {
"color": {
"duotone": null
},
}
}functions.phpで無効化する方法
「WordPress 5.9.0」か「WordPress 5.9.1以上」でsvg要素の挿入位置に変更が入ったので、使っているバージョンによって記述が異なります。
WordPress 5.9.1 以上の場合
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );WordPress 5.9.0 の場合
remove_action( 'wp_enqueue_scripts', 'wp_enqueue_global_styles' );
remove_action( 'wp_footer', 'wp_enqueue_global_styles', 1 );
コメントを残す