Question

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

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

我正在构建一个小的wordpress主题，我希望我的用户也可以这样改变CSS值。

那么，这样做的方式是什么？

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

`谢谢！

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

Answer 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>" ;

Answer 3

在WordPress中创建动态CSS文件时，可能需要稍微调整一下。根据CSS技巧，最简单的是将其添加到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/

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

3 个答案: