主页/WordPress笔记/WordPress开发笔记/块主题/WordPress网站单独页面的自定义css样式添加到<head>标签中的方法及详细代码

WordPress开发笔记

WordPress网站单独页面的自定义css样式添加到<head>标签中的方法及详细代码

1,248字
5–8 分钟

WordPress网站单独页面的自定义css样式添加到<head>标签中的方法及详细代码：

代码背景：在head标签中输出post文章类型的自定义字段qian_c_gj_style中的css样式并压缩为一行

详细代码：

/**
 * 在head标签中输出post文章类型的自定义字段qian_c_gj_style中的css样式并压缩为一行
 */
function add_post_compressed_css_to_head() {
    // 检查是否在post文章类型页面
    if (is_singular('post')) {
        global $post;
        
        // 获取自定义字段值
        $custom_css = get_post_meta($post->ID, 'qian_c_gj_style', true);
        
        // 如果字段不为空，则输出
        if (!empty($custom_css)) {
            // 移除可能存在的多余<style>标签
            $custom_css = str_replace(array('<style>', '</style>'), '', $custom_css);

            // 压缩CSS为一行
            $compressed_css = compress_css($custom_css);
                
            
            // 输出压缩后的样式
            
            echo '<style id="post-custom-style">' . $compressed_css . '</style>' . "n";
        }
    }
}
add_action('wp_head', 'add_post_compressed_css_to_head', 10);

/**
 * CSS压缩函数 - 基本压缩
 * 
 * @param string $css CSS代码
 * @return string 压缩后的CSS代码
 */
function compress_css($css) {
    // 1. 移除注释（/* ... */）
    $css = preg_replace('!/*[^*]**+([^/][^*]**+)*/!', '', $css);
    
    // 2. 移除空白字符：换行符、制表符、多余空格
    $css = str_replace(array("rn", "r", "n", "t", '  '), ' ', $css);
    
    // 3. 移除CSS规则块周围的多余空格
    $css = preg_replace('/s*{s*/', '{', $css);
    $css = preg_replace('/s*}s*/', '}', $css);
    $css = preg_replace('/s*;s*/', ';', $css);
    $css = preg_replace('/s*:s*/', ':', $css);
    $css = preg_replace('/s*,s*/', ',', $css);
    
    // 4. 移除最后一个分号后的空格
    $css = preg_replace('/;}/', '}', $css);
    
    // 5. 移除所有多余的空格（连续多个空格替换为一个）
    $css = preg_replace('/s+/', ' ', $css);
    
    // 6. 移除开始和结束的空格
    $css = trim($css);
    
    return $css;
}

最新发布