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

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

移除 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

发表评论

表情 格式 贴图 链接 私密 签到
评论
正在努力加载中...
扫一扫二维码分享
×
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept”, you consent to the use of ALL the cookies. Learn more