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

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

css wordpress

使用WordPress后端UI元素更改CSS值,css,wordpress,wordpress-theming,Css,Wordpress,Wordpress Theming,我已经在大多数高级WordPress主题中看到，后端用户可以更改CSS属性，例如背景色、字体颜色、字体系列，，只需使用某些UI元素即可使用后端外观部分有一个颜色选择器，用户可以更改特定元素的颜色并保存它我正在构建一个小的wordpress主题，我希望我的用户也可以通过这种方式更改CSS值那么，怎么做呢是不是有点像写文件？还是动态的？（在数据库中存储CSS？） `谢谢一种方法是将CSS设置设置为内联样式。内联样式始终覆盖任何内部或外部样式表，同时，如果没有任何内联样式表，则允许这些样式表

我已经在大多数高级WordPress主题中看到，后端用户可以更改CSS属性，例如

背景色、字体颜色、字体系列，

，只需使用某些UI元素即可使用后端

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

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

那么，怎么做呢

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

`谢谢

一种方法是将CSS设置设置为内联样式。内联样式始终覆盖任何内部或外部样式表，同时，如果没有任何内联样式表，则允许这些样式表提供默认样式

假设您正在使用settingsapi（）创建自定义设置，它就是这样工作的

获取您的设置：

//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应用于例如body标记，如果设置为：

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

//如果已设置，则使用设置-如果未设置，则在不设置样式的情况下打印标记
（$custom\u css\u body\u bg）？“一种方法是将CSS设置设置为内联样式。内联样式始终覆盖任何内部或外部样式表，同时，如果没有任何内联样式表，则允许这些样式表提供默认样式
假设您正在使用settingsapi（）创建自定义设置，它就是这样工作的
获取您的设置：
//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应用于例如body标记，如果设置为：
//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>" ;

//如果已设置，则使用设置-如果未设置，则在不设置样式的情况下打印标记
（$custom\u css\u body\u bg）？“您有几种方法可以使用数据库值：
a） 将它们作为内联样式进行回显
<body style="background:<?php echo get_option('body_background'); ?>">

现在假设您有一个名为my style.css
的文件，其中包含以下代码：
body {
   background-color: $body_bg_color;
}

例如，如果调用get\u theme\u mod（'body\u bg\u color'）
返回值\fff
，则my style.css
将编译为：
body {
   background-color: #fff;
}

这将打印到文档
。这种方法的好处是，在自定义程序中所做的任何更改都会立即更新，以显示更改实时生效。
您有几种方法可以使用数据库值：
a） 将它们作为内联样式进行回显
<body style="background:<?php echo get_option('body_background'); ?>">

现在假设您有一个名为my style.css
的文件，其中包含以下代码：
body {
   background-color: $body_bg_color;
}

例如，如果调用get\u theme\u mod（'body\u bg\u color'）
返回值\fff
，则my style.css
将编译为：
body {
   background-color: #fff;
}

这将打印到文档
。这种方法的好处是，在自定义程序中所做的任何更改都会立即更新，以显示更改实时生效。
在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文件一样。”
来源：
在WordPress中创建动态CSS文件时，您可能需要对其进行一些调整。根据CSS技巧，最简单的方法是将其添加到您的样式中。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文件一样。”
来源：
您可以使用现有的选项框架之一（如redux）创建后端选项页。这些选项存储在数据库中。感谢您的回复，我构建了一个小选项页，可以将值保存到数据库中。例如，我可以将用户输入的十六进制值保存为字体颜色。但是，我不知道如何将其应用于CSS样式表。您可以在节中生成CSS样式。大多数WordPress主题都可以工作通过这种方式，您可以使用现有的选项框架之一（如redux）创建后端选项页。这些选项存储在数据库中。感谢您的回复，我构建了一个小选项页，可以将值保存到数据库中。例如，我可以将用户输入的十六进制值保存为字体颜色。但是，我不知道如何将其应用于CSS样式表。您可以在节中生成CSS样式。大多数WordPress主题都可以工作这种方法谢谢！！是的，我也认为内联css是一个更好的选择，因为我找不到一个合适或最实用的方法来生成动态样式表。发现很少，但不确定它们是否有任何副作用。谢谢！！是的，我也认为内联css是一个更好的选择，因为我找不到一个合适或最实用的方法来生成dyna麦克风样式表。发现的很少，但不确定它们是否有任何副作用。谢谢，如果我使用style.php，我是否必须配置服务器或.htaccess文件或任何其他内容？是的，您是正确的，您必须包含WP Core才能使用get_option（）
。我已经更新了我的答案。谢谢！它成功了！无论如何，我毫不怀疑，这会导致任何性能问题…我正在创建一个商业主题。因此，你会推荐这种方法吗？它不应该对性能有任何影响。事实上，它应该比其他选项更快，因为它将由浏览器缓存。另外另一方面，在文档头（或内联）中打印CSS规则是一个过程，每次加载页面时都会重复，因为页面没有缓存，这也会增加文档的大小。@Tharindulky请参阅我创建的库的更新，我认为您不需要