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

2022-01-28 17:55 451 17 条评论 龙笑天下

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

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);

相关参考

移除 WordPress 5.9 内联样式 | 知更鸟
Disabling Gutenberg Duotone Filter? | WordPress.org
Global Settings & Styles (theme.json) | Block Editor Handbook | WordPress Developer Resources
#54941 (Gutenberg is disabled but Duotone add severals SVG in front and back.) – WordPress Trac
WP 5.9 adds default Duotones before closing the body · Issue #38299 · WordPress/gutenberg
How to disable inline styling (style id='global-styles-inline-css')? | WordPress.org
移除 WordPress 5.9 内联样式 global-styles-inline-css 和 body 中大量未用的 svg - 半亩方塘

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

本文为原创文章,版权归所有,欢迎分享本文,转载请保留出处!

2021-12-12

2022-05-23

发表评论

表情 格式 贴图 链接 私密 签到
评论
正在努力加载中...
扫一扫二维码分享
×