为何WordPress主题Go与Twenty-Twenty-Three的style.css为空？

为什么根目录style.css为空？ #

Go和Twenty-Twenty-Three都属于WordPress块主题（Block Themes），这类主题的根目录style.css仅用于存储主题元数据（名称、作者、版本等），不包含实际渲染用的样式代码，所以文件为空或只有少量元信息是正常现象。

直接修改css/style-shared.css不生效的原因 #

主题css/文件夹下的文件是开发阶段的源码文件，主题实际运行时加载的是编译后的压缩样式（通常位于build/css/或assets/css/目录）。直接修改源码文件不会自动同步到生产环境，所以前端看不到变化。

正确的样式修改方法 #

1. 使用WordPress内置自定义CSS（快速简单） #

进入后台「外观」→「自定义」→「额外CSS」，在这里添加你的自定义样式即可。WordPress会自动将这些样式注入页面，优先级高于主题默认样式，且不会被主题更新覆盖。

2. 创建子主题（推荐用于大量修改） #

块主题的子主题无需复制父主题所有文件，只需以下两步：

• 在wp-content/themes/下创建子主题文件夹（比如go-child）
• 在子主题文件夹中创建两个文件：
  • style.css：填写主题元数据，示例：

    /*
    Theme Name: Go Child
    Template: go
    Version: 1.0.0
    */
    

  • functions.php：加载父主题样式并引入子主题自定义样式，示例：

    <?php
    add_action( 'wp_enqueue_scripts', 'go_child_enqueue_styles' );
    function go_child_enqueue_styles() {
        // 加载父主题编译后的主样式
        wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/build/css/style.css' );
        // 加载子主题样式（依赖父主题样式，保证优先级）
        wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ) );
    }
    

之后在子主题的style.css中添加自定义样式即可。

3. 修改主题源码（不推荐，更新会丢失） #

如果一定要修改主题本身的样式：

• 安装Node.js环境，克隆主题源码后运行npm install安装依赖
• 修改css/下的源码文件后，执行npm run build命令，主题会自动编译源码到build/css/目录，修改才会生效。

内容的提问来源于stack exchange，提问作者kingklick