WPBakery自定义CSS不生效，如何程序化获取页面生成的CSS？

一、自定义CSS不生效的常见排查点 #

• 选择器优先级不足：WPBakery生成的CSS常带有更具体的选择器（如嵌套类、ID），检查你的选择器权重，可使用更具体的选择器（比如.vc_column-inner .your-target-class），必要时临时用!important测试，后续建议优化选择器避免依赖该属性。
• 缓存干扰：清空WordPress缓存插件、CDN缓存及浏览器缓存，样式不生效大概率是缓存未更新导致。
• CSS位置错误：确保自定义CSS添加到页面编辑界面的「WPBakery Page Builder」设置中的「自定义CSS」栏，若仅针对当前页面，不要误加至主题全局CSS。
• 语法错误：用浏览器开发者工具的控制台查看是否有CSS语法报错，检查括号闭合、属性拼写等基础问题。
• 选择器匹配错误：通过浏览器开发者工具（F12）查看目标元素的真实类名，WPBakery可能动态生成类名，避免使用错误的类名编写样式。

二、程序化获取WPBakery生成的CSS代码 #

WPBakery将页面级和全局级的自定义CSS分别存储在文章元数据和系统选项中，同时提供内置函数和钩子用于获取：

1. 通过文章元数据直接获取页面级CSS #

页面自定义CSS存储在_wpb_shortcodes_custom_css元字段中，使用get_post_meta()获取：

// 替换$post_id为目标页面ID，当前页面可使用get_the_ID()
$page_custom_css = get_post_meta( $post_id, '_wpb_shortcodes_custom_css', true );

// 输出或处理获取到的CSS
if ( ! empty( $page_custom_css ) ) {
    echo '<style>' . esc_html( $page_custom_css ) . '</style>';
}

2. 使用WPBakery内置函数获取页面CSS #

WPBakery提供vc_get_page_custom_css()函数直接获取页面自定义CSS，vc_page_custom_css()则直接输出：

// 获取当前页面的自定义CSS
$vc_page_css = vc_get_page_custom_css( get_the_ID() );

// 示例：将CSS添加到页面头部
if ( ! empty( $vc_page_css ) ) {
    add_action( 'wp_head', function() use ( $vc_page_css ) {
        echo '<style type="text/css">' . wp_kses_post( $vc_page_css ) . '</style>';
    }, 100 );
}

3. 通过钩子捕获输出的CSS #

WPBakery在wp_head钩子中输出页面CSS，可通过缓冲区捕获：

add_action( 'wp_head', 'capture_vc_generated_css', 9 );
function capture_vc_generated_css() {
    ob_start();
    // WPBakery默认在优先级10执行CSS输出逻辑
    do_action( 'vc_page_custom_css' );
    $generated_css = ob_get_clean();
    
    // 示例：将CSS写入错误日志查看
    if ( ! empty( $generated_css ) ) {
        error_log( 'WPBakery页面生成CSS: ' . $generated_css );
    }
}

4. 获取全局WPBakery设置的CSS #

全局设置中的自定义CSS存储在vc_settings选项中，可提取对应字段：

$vc_global_settings = get_option( 'vc_settings' );
$global_custom_css = isset( $vc_global_settings['custom_css'] ) ? $vc_global_settings['custom_css'] : '';

// 输出全局CSS
if ( ! empty( $global_custom_css ) ) {
    echo '<style>' . esc_html( $global_custom_css ) . '</style>';
}

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