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

Question

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

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

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

那么，怎么做呢？

是不是写文件之类的？还是动态的？（在数据库中存储 CSS？）

`谢谢！

Answer 1

解决此问题的一种方法是将 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 应用到例如正文标签作为内联 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 2

您可以通过几种方式使用数据库值：

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') returns 值 #fff，则 my-style.css 将编译为：

body {
   background-color: #fff;
}

这将打印到文档 <head>。该方法的好处是在定制器中所做的任何更改都会立即更新以显示更改实时生效。

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 值

Change CSS values with WordPress backend UI elements

css

wordpress

wordpress-theming