srcmini我在大多数高级WordPress主题中都看到过, 允许后端用户更改CSS属性, 例如背景色, 字体颜色, 字体家族, 而仅使用某些UI元素与后端一起使用。
外观部分上有一个颜色选择器, 用户可以更改特定元素的颜色并将其保存。
我正在构建一个小的wordpress主题, 我希望用户也可以通过这种方式更改CSS值。
那么, 这是怎么做的呢？
它类似于文件写入吗？还是动态的？ (将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="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/
评论前必须登录！
注册