无插件将WordPress子主题style.css移至页脚及加载异常排查

WordPress核心存在默认加载逻辑，会自动引入当前启用主题（含子主题）根目录下的style.css文件——该文件头部存储主题元信息（主题名、版本、作者等），系统会自动识别加载，仅注释手动编写的入队代码无法阻止该文件被引入。

按以下逻辑调整即可实现子主题style.css移至页脚加载，消除渲染阻塞：

1. 移除系统自动加载的子主题样式
2. 重新将样式入队并指定加载位置为页脚，兼容低版本WordPress

将子主题functions.php中原有注释掉的入队代码替换为以下代码即可：

function softek_child_enqueue_footer_styles() {
    // 移除默认自动加载的子主题样式
    wp_dequeue_style( 'softek-child-style' );
    // 若上一行移除无效，可替换为下方注释行代码适配不同主题的默认句柄规则
    // wp_dequeue_style( get_stylesheet() );

    // 重新入队子主题样式，指定页脚加载
    wp_enqueue_style( 
        'softek-child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'softek-style' ),
        filemtime( get_stylesheet_directory() . '/style.css' ),
        'all',
        array( 'in_footer' => true ) // WordPress 5.8+ 原生支持页脚加载样式参数
    );
}
// 优先级设为999，确保在父主题、插件的所有样式入队逻辑执行完成后再运行
add_action( 'wp_enqueue_scripts', 'softek_child_enqueue_footer_styles', 999 );

/**
 * 兼容5.8以下低版本WordPress，强制样式异步加载不阻塞渲染
 */
add_filter( 'style_loader_tag', function( $tag, $handle ) {
    if ( $handle !== 'softek-child-style' ) {
        return $tag;
    }
    // 初始设置media为print非渲染阻塞类型，加载完成后切换为all生效
    return str_replace( "media='all'", "media='print' onload=\"this.media='all'\"", $tag );
}, 10, 2 );

/**
 * 低版本WordPress兼容：原生in_footer参数无效时，手动将样式输出到页脚
 */
if ( version_compare( $GLOBALS['wp_version'], '5.8', '<' ) ) {
    add_action( 'wp_footer', function() {
        if ( wp_style_is( 'softek-child-style', 'enqueued' ) ) {
            wp_print_styles( 'softek-child-style' );
        }
    }, 5 );
}

• 代码中array( 'softek-style' )为父主题样式依赖项，需和父主题实际注册的样式句柄保持一致，避免出现样式加载顺序错乱
• 用filemtime()动态获取样式文件修改时间作为版本号，替代写死的1.0，可避免后续修改样式后浏览器缓存不更新的问题
• 非关键样式移至页脚加载可能出现短暂的无样式内容闪烁（FOUC），可通过提取首屏关键CSS内联到页面头部的方式优化该问题
• 操作前务必备份子主题functions.php文件，避免代码语法错误导致站点无法访问

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