使用 WordPress 后端 UI 元素更改 CSS 值答案

【问题标题】：Change CSS values with WordPress backend UI elements使用 WordPress 后端 UI 元素更改 CSS 值
【发布时间】：2016-03-20 13:34:48
【问题描述】：

我在大多数高级 WordPress 主题中看到，允许后端用户更改 CSS 属性，例如 background-color, font-color, font-family,，只需使用某些 UI 元素在后端进行。

外观部分有一个颜色选择器，用户可以更改特定元素的颜色并保存它。

我正在构建一个小型 wordpress 主题，我希望我的用户也可以通过这种方式更改 CSS 值。

那么，有什么办法呢？

它类似于文件写入吗？还是动态的？（将 CSS 存储在数据库中？）

`谢谢！

【问题讨论】：

您可以使用现有的选项框架之一（如 redux）来创建后端选项页面。选项存储在数据库中。
感谢您的回复，我已经建立了一个小选项页面，我可以将值保存到数据库中。例如，我可以将用户输入的十六进制值保存为字体颜色。但是，我不知道如何将它应用到 CSS 样式表。
您可以在部分生成 css 样式。大多数 WordPress 主题都是这样工作的

标签： css wordpress wordpress-theming

【解决方案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 生成动态样式表（这是最好的，因为文件可以被缓存，可能还有compressed）：

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>。这种方法的好处是，在定制器中所做的任何更改都会立即更新，以显示更改实时生效。

【讨论】：

谢谢，如果我使用 style.php，我是否必须配置服务器或 .htaccess 文件或其他任何东西？
是的，你是对的，你必须包含 WP Core 才能使用get_option()。我已经更新了我的答案。
谢谢！有效！无论如何，我毫不怀疑，这会导致任何性能问题......而且我正在创建一个商业主题。那么，你会推荐这种方法吗？
它不应该对性能产生任何影响。事实上，它应该比其他选项更快，因为它会被浏览器缓存。另一方面，在文档的头部（或内联）中打印 CSS 规则是一个在每次页面加载时都会重复的过程，因为它没有被缓存并且还会增加文档的大小。
@TharinduLucky 查看我创建的库的更新，我认为您可能会觉得有用。

【解决方案2】：

解决此问题的一种方法是将 CSS 设置设置为内联样式。内联样式始终覆盖任何内部或外部样式表，同时让这些样式表在不存在任何内联样式时提供默认样式。

假设您使用 Settings 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>" ;

【讨论】：

谢谢！！是的，我还认为内联 css 会是一个更好的选择，因为我找不到合适或最佳实用的方法来生成动态样式表。发现很少，但不确定它们没有任何副作用。

【解决方案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/

【讨论】：