WordPress如何将CSS文件内容输出为内联样式而非link引入

核心实现代码 #

替换你原来的wp_enqueue_style加载逻辑，使用以下代码即可：

<?php
function add_custom_inline_css() {
    // 获取copy.css在服务器上的本地绝对路径（注意不是访问URL）
    $css_file = get_template_directory() . '/copy.css';
    if ( file_exists($css_file) ) {
        // 读取CSS文件实际内容
        $css_content = file_get_contents($css_file);
        // 将内容作为内联样式挂载到全局样式上，WordPress全版本自带global-styles句柄
        wp_add_inline_style( 'global-styles', $css_content );
    }
}
add_action( 'wp_enqueue_scripts', 'add_custom_inline_css', 20 );
?>

关键注意点 #

• 之前wp_add_inline_style使用无效的原因：该函数必须绑定一个已经完成注册的样式句柄，且你之前用get_template_directory_uri()拿到的是文件的公网访问URL，无法直接读取服务器本地文件内容，必须用get_template_directory()获取本地路径才能读取文件内容。
• 多页面差异化加载CSS的需求可以直接在代码中加判断逻辑实现，比如判断当前是首页就读取home.css、文章页读取single.css，依然保持独立CSS文件维护的形式，不需要把样式写死在PHP代码里。
• 最终输出效果完全符合预期，页面源码中只会生成<style>/* My inline styles */</style>结构，不会出现带href属性的外部CSS引用标签。

老版本主题备用方案 #

如果是5.9以下版本的老WordPress，没有自带global-styles句柄，可以直接通过页头钩子输出内联样式：

<?php
function echo_custom_inline_css() {
    $css_file = get_template_directory() . '/copy.css';
    if ( file_exists($css_file) ) {
        echo '<style>' . file_get_contents($css_file) . '</style>';
    }
}
add_action( 'wp_head', 'echo_custom_inline_css', 5 );
?>

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