1

我想用主题选项设置我的 wordpress 主题的样式颜色。我的问题是，如何将主题选项的颜色值放入我的 CSS 中？我知道主题选项值的存储位置，但是如何将它与我的 css 连接起来？

4

3 回答 3

6

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

  2. 将内联 CSS 代码放入主题标题中：

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

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

于 2013-01-21T16:31:40.487 回答
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;  
}
于 2013-01-21T16:28:20.803 回答
1

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

如果你在质疑这可能吗？

是的，这是一个很好的参考资料，它将向您展示使用它的方式和其他好处以及如何使用它。

于 2013-01-21T16:31:23.797 回答