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 回答