Question

我想用主题选项设置我的wordpress-theme的造型颜色。我的问题是，如何将主题选项的颜色值添加到我的CSS中？我知道主题选项值的存储位置，但我如何将其与我的CSS连接？

Answer 1

每次主题选项更改时使用PHP编写CSS文件（CSS缓存）。

您还可以利用CSS预处理器，如Less或Sass，为您编译CSS。

示例代码，假设您使用的是WP选项API：

$theme_options = get_option('my_theme_options');

// previous hash
$oldHash = get_transient('my_theme_options_hash');

// hash representation of your current theme options
$currentHash = md5(var_export($theme_options, true));

// compare hashes and regenerate if necessary
if($oldHash !== $currentHash){

  // compile/write your CSS to a file here

  // update hash and make it expire after 14 days
  set_transient('my_theme_options_hash', $currentHash, 60 * 60 * 24 * 14);
}

在主题标题中添加内联CSS代码：

<style>
  <![CDATA[]]>
   body{ 
     background-color: <?= get_option('my_theme_color'); ?>; 
   }
  ]]>
</style>

（最糟糕的选择）将样式表转换为输出text/css的PHP脚本。这很糟糕，因为你强迫你的服务器为每个用户页面请求运行两次WordPress。你可以调用一个只加载基本WP组件的脚本，但它仍然比使用静态CSS慢

Answer 2

这是一个很好的问题。

NetTuts有一个教程，解释了欺骗浏览器将CSS文件解释为PHP的方法，因此您可以在CSS中使用PHP并加载颜色变量。

http://net.tutsplus.com/tutorials/html-css-techniques/how-to-add-variables-to-your-css-files/

你可以使用这样的东西：

$font: arial, sans-serif;  
$main-color: #3D7169; $secondary-color: #000;  
h1 {  
    font: 200% $font;  
    color: $main-color;  
}  
p {  
    background: $secondary-color;  
    color: $main-color;  
    font-family: $font;  
    padding: 10px;  
}

Answer 3

您可以通过将Style.css更改为Style.php来获得动态css。

如果你质疑是否可能？

是，here是一个很好的参考资料，可以向您展示＆amp;使用它的其他好处是什么？如何使用它。

使用css中wordpress主题选项的值

3 个答案: