在CSS中使用WordPress主题选项的值

关闭。这个问题是题外话。它当前不接受答案。

想改善这个问题吗？更新问题, 使其成为Stack Overflow的主题。

7年前关闭。

我想用主题选项设置我的wordpress主题的样式颜色。我的问题是, 如何将主题选项的颜色值输入到CSS中？我知道主题选项值存储在哪里, 但是如何将其与CSS连接起来呢？

#1

每当主题选项更改时(CSS缓存), 使用PHP编写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慢

#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;  
}  

#3

通过将Style.css更改为Style.php, 可以拥有动态CSS。

如果你有疑问吗？

是的, 这是一个很好的参考, 它将向你展示如何以及使用它的其他好处以及如何使用它。