使用WordPress后端UI元素更改CSS值 _WordPress主题

我在大多数高级WordPress主题中都看到过, 允许后端用户更改CSS属性, 例如背景色, 字体颜色, 字体家族, 而仅使用某些UI元素与后端一起使用。
外观部分上有一个颜色选择器, 用户可以更改特定元素的颜色并将其保存。
我正在构建一个小的wordpress主题, 我希望用户也可以通过这种方式更改CSS值。
那么, 这是怎么做的呢？
它类似于文件写入吗？还是动态的？ (将CSS存储在数据库中吗？)
【使用WordPress后端UI元素更改CSS值】谢谢！
#1你有几种使用数据库值的方法：
a)将它们作为内联样式回显

< body style="background:< ?php echo get_option('body_background'); ?> ">

b)在< head> 标签内将它们作为样式规则回显：

< head> < style> body {background:< ?php echo get_option('body_background'); ?> } < /style> < /head>

C)使用PHP生成动态样式表(这是可取的, 因为该文件可以缓存, 也可以压缩)：
style.php：

< ?php header("Content-type: text/css; charset: UTF-8"); define('WP_USE_THEMES', false); require('path/to/wp-load.php'); // Located in the root of WordPress ?> body {background:< ?php echo get_option('body_background'); ?> }

header.php：

< head> < link href="http://www.srcmini.com/style.php" rel="stylesheet" type="text/css" /> < /head>

编辑(2016年3月)
我最终创建了wp-dynamic-css：一个允许你从动态内容生成CSS的库, 我相信这对你非常有用。这是可以使用的方式：

// 1. Load the library require_once 'wp-dynamic-css/bootstrap.php'; // 2. Set the callback function (used to convert variables to actual values) function my_dynamic_css_callback( $var_name ) { return get_theme_mod($var_name); } wp_dynamic_css_set_callback( 'my_dynamic_css_callback' ); // 3. Enqueue the stylesheet (using an absolute path, not URL) wp_dynamic_css_enqueue( 'path/to/my-style.css' );

现在, 假设你有一个名为my-style.css的文件, 其代码如下：

body { background-color: $body_bg_color; }

例如, 如果调用get_theme_mod(‘ body_bg_color’ )返回值#fff, 则my-style.css将被编译为：

body { background-color: #fff; }

这将被打印到文档< head> 。这种方法的好处是, 在定制程序中所做的任何更改都会立即更新, 以显示更改实时生效。
#2一种解决方法是将CSS设置设置为嵌入式样式。内联样式始终会覆盖任何内部或外部样式表, 同时, 如果不存在任何内联样式, 则可以让这些样式表提供默认样式。
假设你正在使用设置API(https://codex.wordpress.org/Settings_API)创建自定义设置, 那么它就是这样工作的。
获取设置：

//Get the group of options named custom_css_settings, registered using register_setting() //These are of course example names and could be anything $custom_css = get_option('custom_css_settings'); //Get the CSS-option for the element named body $custom_css_body_bg = $custom_css['body_bg'];

将CSS应用于例如body-tag作为内联CSS(如果已设置)：

//If its set, use the setting - if not print the < body> tag without styling ($custom_css_body_bg) ? "< body style='background:" . $custom_css_body_bg . "; '" : "< body> " ;

#3当在WordPress中创建动态CSS文件时, 你可能需要对其进行一些调整。根据CSS Tricks, 最简单的方法是将其添加到你的style.php中：

< ?php $absolute_path = explode('wp-content', $_SERVER['SCRIPT_FILENAME']); $wp_load = $absolute_path[0] . 'wp-load.php'; require_once($wp_load); /** Do stuff like connect to WP database and grab user set values, like: ?> body {background:< ?php echo get_option('body_background'); */header('Content-type: text/css'); header('Cache-control: must-revalidate'); ?>

下一个替代方法是” ..保留名为style.css的文件, 并使用.htaccess将其解析为PHP。只需确保此代码位于.htaccess文件(仅适用于Apache服务器)中, 并且与CSS文件位于同一目录级别然后在其中使用PHP, 就像在其他任何PHP文件中一样。”
资料来源：https://css-tricks.com/css-variables-with-php/