WordPress主题定制器：仅勾选选项时加载CSS的实现方法

首先先修正你现有定制器代码的小问题：你用了WP_Customize_Color_Control（颜色选择控件），但控件类型设为了checkbox，这不对，应该用基础的WP_Customize_Control。另外你还需要先添加对应的设置项，完整的定制器代码应该是这样：

// 添加设置
$wp_customize->add_setting( 'accent_theme_setting', array(
    'default'           => false,
    'sanitize_callback' => 'wp_validate_boolean',
) );

// 添加复选框控件
$wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'enable_boxed_layout', array(
    'label'    => esc_html__( 'Enable Boxed Layout', 'Divi' ),
    'type'     => 'checkbox',
    'section'  => 'accent_theme',
    'settings' => 'accent_theme_setting',
) ) );

接下来实现勾选时加载CSS的逻辑，有两种常用方式：

方式1：加载外部CSS文件 #

如果你的boxed布局样式写在单独的CSS文件里（比如css/boxed-layout.css），可以用wp_enqueue_scripts钩子来判断加载：

add_action( 'wp_enqueue_scripts', 'enqueue_boxed_layout_css' );
function enqueue_boxed_layout_css() {
    // 获取定制器设置的值
    $enable_boxed = get_theme_mod( 'accent_theme_setting', false );
    
    // 如果勾选了，就加载CSS文件
    if ( $enable_boxed ) {
        wp_enqueue_style( 'boxed-layout-style', get_template_directory_uri() . '/css/boxed-layout.css', array(), wp_get_theme()->get('Version') );
    }
}

方式2：输出内联CSS #

如果样式代码不多，直接输出内联CSS更高效：

add_action( 'wp_head', 'output_boxed_layout_css' );
function output_boxed_layout_css() {
    $enable_boxed = get_theme_mod( 'accent_theme_setting', false );
    
    if ( $enable_boxed ) {
        ?>
        <style type="text/css">
            /* 这里写你的boxed布局样式 */
            .site-container {
                max-width: 1200px;
                margin: 0 auto;
                padding: 0 20px;
                box-shadow: 0 0 10px rgba(0,0,0,0.1);
            }
        </style>
        <?php
    }
}

关键说明 #

• get_theme_mod( 'accent_theme_setting', false )：用来获取定制器中设置的值，第二个参数是默认值（没勾选时为false）
• 把代码放到主题的functions.php文件里，或者你的自定义功能插件中即可
• 测试时，在主题定制器勾选选项后点击「发布」，刷新前端页面就能看到效果

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