技术帝的平台展示,网站建设、网站推广、SEO技术、网站优化、电子商务推广、平面美工和软件测试等技术干货分享。

移除 WordPress 5.9 内联样式global-styles-inline-css和body中大量未用的svg

建站技术 abel-lan 6℃ 0评论

概述

WP升级到5.9版本后,在head头部多出一大段内联样子,在body开头或结尾又多出一大段svg代码。这是WP新增功能theme.json配置主题而加入的预设样式和svg,如若没用该功能,就可以通过该方法移除。

问题描述

WordPress升级到5.9版本后,在head头部多出一大段内联样式<style id="global-styles-inline-css">,在body开头或末尾部分多出一大段svg代码,这是在WordPress 8.5版本之后引入theme.json配置主题才新增的。

WordPress 5.9新加的theme.json设置内联样式
WordPress 5.9新加的theme.json设置内联样式
WordPress 5.9在body中新加的svg过滤器
WordPress 5.9在body中新加的svg过滤器

解决方法

如果你的主题没有使用 theme.json (在主题根目录下没有theme.json文件),就可以删除这些新增的全局预设样式和svg。
在 function.php 文件中添加以下代码:

// 移除 WordPress 5.9 版本后通过 theme.json 设置的全局预设样式和SVG过滤器
function custom_wp_remove_global_css() {
    // 移除通过主题theme.json预设的内联样式(<style id="global-styles-inline-css">body{--wp--preset--color--black:#000000;--wp--preset--color……)
    remove_action('wp_enqueue_scripts', 'wp_enqueue_global_styles');

    // 移除渲染由 theme.json 提供的 SVG 过滤器
    remove_action( 'wp_body_open', 'wp_global_styles_render_svg_filters' ); // WordPress 5.9.1之后版本
    //remove_action('wp_footer', 'wp_enqueue_global_styles', 1); // WordPress 5.9.0版本
}
add_action( 'after_setup_theme', 'custom_wp_remove_global_css' );

上述代码中移除的两个函数的用途分别是:
wp_enqueue_global_styles() Enqueues the global styles defined via theme.json. 将通过 theme.json 定义的全局样式排入队列。
wp_global_styles_render_svg_filters() Render the SVG filters supplied by theme.json. 渲染由 theme.json 提供的 SVG 过滤器。

WordPress 5.8 之后引入 theme.json 简介

通过在主题的顶级目录中创建一个theme.json文件,主题可以配置现有的编辑器设置(字体大小预设、是否启用自定义颜色等)以及引入新的编辑器设置(双色调预设、是否边距和填充控件已启用等)。
这种新机制旨在接管和整合add_theme_support以前控制编辑器所需的所有各种调用。拥有一个中心点的配置旨在提供更加一致和完整的体验。WP官网介绍Global Settings & Styles (theme.json)

转载请注明:半亩方塘 » 移除 WordPress 5.9 内联样式global-styles-inline-css和body中大量未用的svg

赞 (4)支付宝扫码打赏微信扫码打赏分享
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址