使用 wp_add_inline_style 函数为 WordPress 主题添加自定义样式切换

7年前

8.40K

萨龙网络开发了很多 WordPress 主题，一直在寻求一种更好的自定义样式管理的方法，在 PHP 中写 CSS 样式，预设样式的切换，就需要使用 wp_enqueue_script 函数来输出 PHP文件，总感觉有问题，且耗费资源。wp_add_inline_style 函数的功能是向 WordPress增加了额外的CSS，这样通过控制函数就可以更改输出的内容，进而达到自定义样式的管理。函数只有在样式表已经添加时才会工作，接受包含CSS的字符串$data。如果将两个或多个CSS代码块添加到同一个样式表$handle中，它们将按照添加的顺序打印，也就是说，添加的样式可以重新声明前一个样式。下面我们就简码下如何使用此函数以及如何达到自定义样式切换。

一、使用

wp_add_inline_style( $handle, $data );

二、参数

1、$handle (string) (必填)添加额外样式的脚本的名称，小写的字符串。默认值:无 2、$data (string) (必填)包含要添加的CSS的字符串。默认值:无

三、实例

wp_add_inline_style允许在加载某个样式表时打印额外的样式。例如，假设一个插件或主题使用样式表中的.mycolor类来设置背景颜色。这可以由用户选择的颜色覆盖，通过使用wp_add_inline_style打印额外的样式存储在数据库中。

function my_styles_method() {
    wp_enqueue_style(
        'custom-style',
        get_template_directory_uri() . '/css/custom_script.css'
    );
    $color = get_theme_mod( 'my-custom-color' ); //E.g. #FF0000
    $custom_css = "
        .mycolor{
            background: {$color};
        }";
    wp_add_inline_style( 'custom-style', $custom_css );
}
add_action( 'wp_enqueue_scripts', 'my_styles_method' );

注意函数的 $handle 值是『custom-style』，与 wp_enqueue_style 函数的 $handle 值要一致。

四、样式切换

样式切换首页需要主题或者插件主题选项支持样式的选择，比如颜色的选择，以下代码为修改主题的主体颜色。

/**
 * [salong_custom_style 描述]
 * 使用 wp_add_inline_style 函数为 WordPress 主题添加自定义样式切换
 * @Author:萨龙龙
 * @Home:https://api.salongweb.com
 * @Url:https://api.salongweb.com/wp-add-inline-style.html 
 * @Version:1.0
 * @DateTime: 2018-10-04
 * @return [type] [description]
 */
function salong_custom_style() {
    ob_start();
    global $salong;
    /*萨龙网络主题自定义主体颜色选项*/
    $color = $salong('style_main_color');
    /*Main Color*/
    ?>
    .color {color:;}
    <?php
    $css = ob_get_clean();
    return $css;
}

通过对以上代码进行操作，可做到对 WordPress 主题的样式进行切换。