移除 WordPress 5.9 向前台页面添加的内联样式 css 和 svg 图像等多余代码

2022-01-28 17:55 813 25 条评论龙笑天下 35

龙笑天 互助分享，互联网本该如此！

Wordpress现在的版本更新越来越让龙笑天看不懂了，已经跟编辑刚上了，大力发展区块编辑，开始越来越插手前端页面，影响主题的前端样式展示了...

从 Wordpress 5.9 开始，WP 会向前端页面的头部插入了global-styles内联样式，并向底部插入了很多的 svg 图像（主要是 duotone block，查看页面源代搜索duotone就能看到了）。对于国内主题来说（如：Dragon 主题），主题本身有自己的特定 CSS 样式，根本用不到 Wordpress 这个新加的样式和图像，让页面平白多出了 N 多冗余代码...

下面就来教大家怎么屏蔽禁止 WordPress 5.9 向前台页面里私自插入 CSS 样式和图像。

1.移除 WordPress 5.9 头部里的 global-styles 内联样式

/**
 * WordPress 5.9 移除头部里的 global-styles 内联 css 样式 - 龙笑天下
 * https://www.ilxtx.com/disable-gutenberg-style-and-duotone-svg-images.html
 */
function lxtx_remove_global_styles(){
    wp_dequeue_style( 'global-styles' );
}
add_action( 'wp_enqueue_scripts', 'lxtx_remove_global_styles' );

2.移除 WordPress 5.9 底部里的 duotone svg 图像

就目前而言，通过 WP 源代码来看，WP 并没有预留直接禁止 duotone svg 图像的钩子方法，参考文章里的这个remove_filter( 'render_block', 'wp_render_duotone_support', 10);方法，实测并没卵用... 通过一番查找，发现只有通过这个新增的theme.json配置文件才能禁止那些 svg 图像的输出...

新建一个theme.json文件，将下面的代码复制到文件里面，然后再将文件放入你使用的主题的根目录里，OVER 了。

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

按照这个趋势，龙笑天认为以后的 Wordpress 开发中，theme.json配置文件的优先级要远高于钩子，某些操作可能只能通过配置文件去开启，而不能用钩子方法了... 这对于我这个钩子死忠粉来说太难受了~

3.一键移除上面的内联样式和 SVG 图像（推荐）

20220131 更新：今天收到了 @jumbo 的回复，里面给出了钩子解决方案，非常完美，不用再按上面的分 2 步来解决了，直接可以通过钩子方法一键解决，太舒服了，十分感谢！

/**
 * 移除 WordPress 5.9 向前台页面添加的内联样式 css 和 svg 图像等多余代码 - 龙笑天下
 * https://www.ilxtx.com/disable-gutenberg-style-and-duotone-svg-images.html
 */
function lxtx_remove_all_global_styles(){
    remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');
    remove_action('wp_footer', 'wp_enqueue_global_styles', 1);
    remove_action('wp_body_open', 'wp_global_styles_render_svg_filters');
}
add_action('after_setup_theme', 'lxtx_remove_all_global_styles', 10, 0);