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

WordPress现在的版本更新越来越让龙笑天看不懂了,已经跟编辑刚上了,大力发展区块编辑,开始越来越插手前端…

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

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

.singlemiddle-banner{margin-left:auto;margin-right:auto;overflow: hidden;}

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

类别:WordPress函数讲解

本文收集自互联网,转载请注明来源。
如有侵权,请联系 wper_net@163.com 删除。

评论 (0)COMMENT

登录 账号发表你的看法,还没有账号?立即免费 注册