移除古腾堡编辑器添加的Duotone SVGs 和冗余的内联样式

网站插入 Duotone SVGs

WordPress 更新越来越让人摸不着头脑了,自 WordPress 5.9版本更新以来,我的网站前端和后端都有一些 Duotone 添加的SVG标签,这些标签是看不到的,会自动插入我们的网站。这些元素是一些无效的元素,根本看不见。

那么它们可以用来做什么呢?

Duotone 是双色选择器,如上图所示,当我们使用古腾堡编辑器创建内容,并且使用图像来来说明文字时,可以选择向图像添加颜色过滤器,这些SVG对应于编辑图像时可用的不同过滤器。

移除头部SVG

方法一

观察代码时发现头部的svg是通过wp_body_open钩子添加的,当移除wp_body_open时这些SVG就会被移除,因此我们可以在 WordPress 主题文件 functions.php 文件中添加如下代码来移除这些 SVG 标签。

/**
 * 移除 WordPress 古腾堡编辑器自动添加的 Duotone SVGs
 *
 * @author lerm 
 * @link   https://www.hanost.com
 */
remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );

方法二

可以通过theme.json配置文件才能禁止那些 svg 图像的输出,首先在主题根目录下新建theme.json 文件,然后加入如下内容。

{
	"version": 1,
	"settings": {
		"color": {
			"duotone": null
                }
        }
}

移除底部 style 标签

在底部代码中包含<style>.wp-container-x ...</style> 可以添加如下代码移除sytle标签。

/**
 * 移除 WordPress 古腾堡编辑器在页脚添加的sytle标签
 *
 * @author lerm 
 * @link   https://www.hanost.com
 */
remove_filter('render_block', 'wp_render_layout_support_flag');

以上代码仅移除页面底部的<style>.wp-container-x ...</style>标签,对于由于双色调试器添加的<style>标签和SVG标签是不起作用的,如果想要在前端彻底禁用图片的双色编辑器功能,可以在functions.php中添加如下代码;

/**
 * 移除 WordPress 古腾堡编辑器前端禁用duotone编辑器
 *
 * @author lerm 
 * @link   https://www.hanost.com
 */
remove_filter('render_block', 'wp_render_duotone_support');

remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' );
remove_filter('render_block', 'wp_render_layout_support_flag');
remove_filter('render_block', 'wp_render_duotone_support');
如果您觉得有用就请点赞和分享
0

发表评论

游客欢迎您