如何有条件地将样式表或脚本放入主题定制器设置中？

时间：2013-09-22 作者：Nick Pfisterer

我正在开发一个新的WordPress主题，我正在添加主题定制器选项。其中大多数都非常容易实现，但我有几个重要的选择：

在浅色主题和深色主题之间切换在两种web字体选择之间切换我了解如何正确排列样式表和脚本，并且我非常熟悉如何向主题定制器添加设置、节和控件。我现在需要的是一种有条件地加载样式表（浅色/深色皮肤）和脚本（web字体）的方法。

我怎么能做这样的事？

// if the skin is set to \'light\'
     // enqueue light.css
// if the skin is set to \'dark\'
     // enqueue dark.css
或

// if the font style is set to \'sans-serif\'
     // enqueue source-sans-pro;
// if the font-style is set to \'serif\'
     // enqueue merriweather;

2 个回复
最合适的回答,由SO网友:Nick Pfisterer 整理而成

明白了！这是对我有用的代码。

--主题自定义设置和控件（我的在单独的customizer.php 文件）：

function themename_customize_register( $wp_customize ) {

    ...

    $wpcustomize->add_setting( \'themename_skin\', array(
        \'default\' => \'light\',
        ),
    );

    $wp_customize->add_control( \'themename_skin\', array(
        \'label\'    => \'Skin\',
        \'section\'  => \'colors\',
        \'settings\' => \'themename_skin\',
        \'type\'     => \'radio\',
        \'choices\'  => array(
            \'light\' => \'Light\',
            \'dark\'  => \'Dark\',
            ),
        )
    );

    ...

}

add_action( \'customize_register\', \'themename_customize_register\' );
--将亮/暗样式表排队functions.php 以及其他脚本/样式：

function themename_scripts() {

    ...

    /* Enqueue the appropriate CSS based on which skin is selected via Theme Customizer */
    $skin = get_theme_mod( \'themename_skin\' );

    if ( $skin == \'light\' ) {
        wp_enqueue_style( \'themename-light-skin\', get_template_directory_uri() . \'/skins/light.css\' );
    }
    if ( $skin  == \'dark\' ) {
        wp_enqueue_style( \'themename-dark-skin\', get_template_directory_uri() . \'/skins/dark.css\' );
    }

    ...

}

add_action( \'wp_enqueue_scripts\', \'themename_scripts\' );
感谢cale_b 为我指明了正确的方向。

SO网友:Ari

试试这个。。。

//add your stylesheet url to a variable
$light = \'path to light css\';
$dark = \'path to dark css\';

add_action(\'wp_enqueue_scripts\', \'theme_color_switcher\');

function theme_color_switcher() {

// switch the stylesheet registration
// if light is not blank
if ($light !=\'\') :
// then register the light color
wp_register_style(\'stylesheet_id\', $light);

else :
// else register the dark color
wp_register_style(\'stylesheet_id\', $dark);
endif;

wp_enqueue_style(\'stylesheet_id\');
}
请确保您添加了主题功能，以便在未选中变量$light时删除该变量，否则您的主题将只注册灯光主题。

您还可以创建两个函数和挂钩来包含样式表，并将操作挂钩放在“if else”语句中，如下所示：

if ($dark !=\'\' ) :
add_action(\'wp_enqueue_scripts\', \'darktheme_function_callback\');
else :
add_action(\'wp_enqueue_scripts\', \'lighttheme_function_callback\');
endif;

//register and enqueue you dark css
// register and enqueue your light css

结束
标签： theme-customizer   小码农  

相关推荐