你如何处理WordPress中的动态CSS？

Question

我需要一些用于WordPress插件的CSS，它们是动态的，并且想知道什么是最好或最常用的方法。我目前正在使用方法二，但IE9有问题。所以我认为可以有一个更好的动态CSS解决方案，并提出了这些：

1。）包含带wp_head挂钩

的样式块

临

• 没有额外的服务器请求

魂斗罗：

• 取决于每页上的大量数据的大小
• 不那么漂亮
• 不可缓存

2.。）在链接标记

中使用admin_url('admin-ajax.php?action=my_css')

临

• 即时创建CSS（并使用Transient API缓存）
• 使用wp_enqueue_style
• 可使用过期标头缓存

魂斗罗

• 需要加载wp-load.php
• 不适用于IE9（why?）

3.。）在更改

上创建一个CSS文件

临

• 快
• 无需加载整个WordPress（wp-load.php）

魂斗罗

• 不是很有活力
• 需要针对某些文件夹的写入规则
• 可能过期或缺少脚本问题或缺少权限的原因

我不喜欢方法一，因为每个页面都不需要样式，而方法二在IE9上不起作用。

我应该选择第三个还是其中的任何缺点？

提前致谢！

Answer 1

你有点受限，PHP没有内置的持久缓存。如果您可以保证拥有memcached，APC甚至文件写入权限，那么您可以使用这些方法中的任何一种来缓存CSS，并使用密钥检索它。您不需要使用wp-load.php这样做，因此您的性能会比必须加载所有插件等都有所改善。

也就是说，根据Microsoft文章MIME-Handling Change: text/css，假设您在输出CSS之前设置header('Content-type: text/css');，那么您的动态CSS 应在IE9中工作。

所有这一切，你可以尝试＃1和＃2的混合方法 - 如果你能保证你有文件写权限，那么＃3听起来就好了。要实现，只需检测请求浏览器的user-agent，并设置一个函数来输出您的CSS。如果不是 IE9，则可以使用admin_url('admin-ajax.php?action=my_css')包含样式表并从钩子函数调用输出，如果 IE9，则可以包含样式表通过从钩子到wp_head调用函数来在头文件中。通过这种方式，您可以为大多数客户端缓存CSS，并为IE工作 - 您对页面大小等方面的缺点是有效的......但它是IE9。

只要您能够为每个客户端缓存CSS，那么您通常只会查看wp-load.php的一个额外请求，这个请求不应该太高。

您可以使用if (false!==strpos('MSIE 9;', $_SERVER['HTTP_USER_AGENT']))

检查IE9

Answer 2

我创建了一个名为wp-dynamic-css的库，允许您从动态内容生成CSS。

该库允许您使用特殊语法来表示CSS文件中的变量。

这是如何使用的：

// 1. Load the library
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Enqueue the stylesheet (using an absolute path, not URL)
wp_dynamic_css_enqueue( 'my-dynamic-style', 'path/to/my-style.css' );

// 3. Set the callback function (used to convert variables to actual values)
function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name);
}
wp_dynamic_css_set_callback( 'my-dynamic-style', 'my_dynamic_css_callback' );

现在假设您有一个名为my-style.css的文件，其代码如下：

body {
   background-color: $body_bg_color;
}

例如，如果调用get_theme_mod('body_bg_color')返回值#fff，那么my-style.css将被编译为：

body {
   background-color: #fff;
}