Wordpress Customizer内联css到css文件

Question

我正在忙着使用WordPress的定制器，而且工作正常我只能在样式标签（内联）中获取css的输出，我希望它在customizer.css文件中。

有人知道如何将CSS添加到customizer.css中吗？

<?php
    function customizerCSS() {
        wp_enqueue_style('custom-style', get_template_directory_uri() . '/customizer.css');

        $color = fw_get_db_customizer_option('body_background');

        $custom_css = '
                html, body {
                        background-color : ' . $color . ';
                }';
        wp_add_inline_style('custom-style', $custom_css );
    }
    add_action( 'wp_enqueue_scripts', 'customizerCSS' );
 ?>

Answer 1

您可以使用file_get_contents获取css文件中的所有customizer.css和file_put_contents，以便将新css rules添加到customizer.css文件中。

您的代码将是：

function customizerCSS() {
    $color = fw_get_db_customizer_option('body_background');

    $custom_css = '
                html, body {
                        background-color : ' . $color . ';
                }';

    $file = file_get_contents(TEMPLATEPATH.'/customizer.css');

    if (strpos($file, $custom_css) === false) { // for not rewriting file every time, when there is no changes
        $file .= $custom_css;
        file_put_contents(TEMPLATEPATH.'/customizer.css', $file);
    }

    wp_enqueue_style('custom-style', get_template_directory_uri() . '/customizer.css');
}
add_action( 'wp_enqueue_scripts', 'customizerCSS' );

我们从css rules获取所有新$custom_css，从customizer.css获取所有内容并进行比较。如果css rules中存在$custom_css样式表中不存在的新customizer.css，那么我们只需将它们写入文件。

修改

以下功能每次都会使用customizer.css变量的值覆盖$custom_css文件：

function customizerCSS() {
    $color = fw_get_db_customizer_option('body_background');

    $custom_css = '
                html, body {
                        background-color : ' . $color . ';
                }';

    file_put_contents(TEMPLATEPATH.'/customizer.css', $custom_css);

    wp_enqueue_style('custom-style', get_template_directory_uri() . '/customizer.css');
}
add_action( 'wp_enqueue_scripts', 'customizerCSS' );