askupa-software/wp-dynamic-css

此包的最新版本（1.0.5）没有可用的许可证信息。

使用WordPress动态数据渲染CSS

维护者

详细信息

github.com/askupasoftware/wp-dynamic-css

主页

源代码

问题

安装: 138

依赖: 0

建议者: 0

安全: 0

星标: 69

关注者: 8

分支: 18

开放问题: 3

类型：wordpress-plugin

1.0.5 2016-08-05 16:32 UTC

Requires

  • php: >=5.3.0

Unknown License 32f4b00622eabe80e4d45177332e43720d8e76e5

  • Askupa Software <contact.woop@askupasoftware.com>

pluginwordpressdynamic cssdynamic style

This package is not auto-updated.

Last update: 2024-09-24 20:04:38 UTC

README

一个用于从动态内容生成静态样式的库，用于WordPress主题和插件。

贡献者：ykadosh
标签：主题，mod，wordpress，动态，css，样式表
测试到 4.7
稳定标签 1.0.5
要求：PHP 5.3.0或更高版本
WordPress插件： wordpress.org/plugins/wp-dynamic-css/
许可证：GPLv3或更高版本
许可证URI： https://gnu.ac.cn/licenses/gpl-3.0.html

--

WordPress Dynamic CSS 允许您将此

body {
   background-color: $body_bg_color;
}

转换为这个

body {
   background-color: #fff;
}

使用动态用户数据。

内容

概述

WordPress Dynamic CSS 是一个用于从动态内容生成CSS样式表的轻量级库（即用户可以修改的内容）。此库的最明显用途是创建基于自定义选项的样式表。使用特殊的动态CSS语法，您可以使用变量编写CSS规则，这些变量将使用您提供的自定义回调函数替换为静态值。
从版本1.0.2开始，此库支持多个回调函数，因此可以安全地在同一时间由多个插件/主题使用。

基本示例

首先，将此代码添加到您的 functions.php 文件中

// 1. Load the library (skip this if you are loading the library as a plugin)
require_once 'wp-dynamic-css/bootstrap.php';

// 2. Enqueue the stylesheet (using an absolute path, not a 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' );

// 4. Nope, only three steps

然后，创建一个名为 my-style.css 的文件，并在其中编写您的（动态）CSS

body {
   background-color: $body_bg_color;
}

在上面的示例中，样式表将自动编译并打印到文档的 <head> 中。 $body_bg_color 的值将被 get_theme_mod('body_bg_color') 的值替换。

现在，假设 get_theme_mod('body_bg_color') 返回值 #fff，则 my-style.css 将编译为

body {
   background-color: #fff;
}

很简单，对吧？

安装

通过Composer

如果您正在使用命令行：$ composer require askupa-software/wp-dynamic-css:dev-master

或者简单地将以下内容添加到您的 composer.json 文件中

"require": {
     "askupa-software/wp-dynamic-css": "dev-master"
 }

然后运行命令 composer install

这将安装包到 wp-content/plugins 目录。对于自定义安装路径，请将以下内容添加到您的 composer.json 文件中

"extra": {
     "installer-paths": {
         "vendor/askupa-software/{$name}": ["askupa-software/wp-dynamic-css"]
     }
 }

通过WordPress.org

安装并激活WordPress.org上托管的插件： wordpress.org/plugins/wp-dynamic-css/

当插件被激活时，所有库文件都会自动包含，因此您不需要手动包含它们。

手动

从github下载包： 下载包 并将 bootstrap.php 包含到您的项目中

require_once 'path/to/wp-dynamic-css/bootstrap.php';

动态CSS语法

这个库允许您使用类似于常规CSS语法的特殊CSS语法，并增加了对具有语法$my_variable_name的变量的支持。由于这些变量在运行时（页面加载时）被替换为值，因此使用此语法的文件被称为动态CSS文件。动态CSS文件中的任何变量都将被一个值替换，这个值是通过自定义的'值回调'函数检索的。

动态CSS文件将看起来与常规CSS文件完全一样，只是包含变量。例如

body {
   background-color: $body_bg_color;
}

在运行时，此文件将通过调用'值回调'函数并将变量名（不带$符号）传递给该函数，将所有变量替换为其对应的值，从而被编译成常规CSS。

数组变量（自1.0.3起）

版本1.0.3增加了对数组下标的支持，使用与PHP类似的语法。例如

body {
   font-family: $font['font-family'];
}

回调函数应接受一个第二个变量，该变量将包含下标名称的数组。更详细的解释可以在设置值回调部分找到。

未来的版本可能支持更复杂的语法，所以任何建议都受欢迎。您可以通过创建问题或提交拉取请求来提出建议。

管道过滤器（自1.0.5起）

版本1.0.5增加了对管道过滤器的支持。可以使用函数wp_dynamic_css_register_filter( $handle, $filter_name, $callback )注册过滤器，其中$filter_name对应于在样式表中使用的过滤器的名称。例如，如果注册了一个名为myFilter的过滤器，可以使用以下语法应用它

body {
   font-family: $myVar|myFilter;
}

过滤器也可以堆叠在一起

body {
   font-family: $myVar|myFilter1|myFilter2;
}

甚至可以接受额外的参数

body {
   font-family: $myVar|myFilter1('1',2,3.4);
}

要了解如何注册过滤器回调函数，请参阅注册过滤器。

队列动态样式表

要排队一个动态CSS文件，请调用函数wp_dynamic_css_enqueue并传递一个句柄和CSS文件的绝对路径

wp_dynamic_css_enqueue( 'my_dynamic_style', 'path/to/dynamic-style.css' );

这将使用通过wp_dynamic_css_set_callback()设置的给定回调函数将所有变量替换为其值，并将dynamic-style.css的内容打印到文档的<head>部分。

第一个参数 - 样式表句柄 - 用作将回调函数与之关联的id。

如果有多个对wp_dynamic_css_enqueue()的调用使用不同的CSS文件，那么它们的将附加到同一文档<head>中的<style>部分。

将编译的CSS作为外部样式表加载

您可以选择不将编译后的CSS打印到文档的头部，而是将其作为外部样式表加载，通过将第二个参数设置为false

wp_dynamic_css_enqueue( 'my_dynamic_style', 'path/to/dynamic-style.css', false );

这将减少您文档的加载时间，因为对编译器的调用将作为http请求异步执行。此外，浏览器可以缓存加载的外部样式表，而不是打印到头部的样式表。

这种方法的缺点是自定义调整器的实时预览将不会显示更改生效，除非手动重新加载页面。

设置值回调

概述部分中给出的示例使用get_theme_mod()函数检索变量的值

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

但是，get_theme_mod()函数还接受第二个参数，该参数是在修改名称不存在时（例如，在主题激活后未在自定义调整器中进行更改）使用的默认值。

在这种情况下，我们可以调整我们的回调函数以返回默认值

$theme_mod_defaults = array(
   'body_bg_color' => '#fff',
   'body_text_color' => 'black'
);

function my_dynamic_css_callback( $var_name )
{
   return get_theme_mod($var_name, @$theme_mod_defaults[$var_name]);
}
wp_dynamic_css_set_callback( 'my_dynamic_style', 'my_dynamic_css_callback' );

您的CSS文件可能看起来像这样

body {
   background-color: $body_bg_color;
   color: $body_text_color;
}

这将编译成这样（假设用户在自定义调整器中没有进行更改）

body {
   background-color: #fff;
   color: black;
}

数组变量

也可以使用下标访问数组值。一个动态CSS文件的示例可能如下所示

body {
   background-color: $body_bg_color;
   color: $body_text_color;
   font: $font['font-size']px '$font['font-family']';
}

然而，在这种情况下，回调函数传递了2个参数：一个包含变量名，另一个包含索引名数组。第二个变量始终是数组，因为可能有多个索引（多维数组）。要检索数组值，需要遍历索引数组以获取每个索引。例如

$theme_mod_defaults = array(
   'body_bg_color' => '#fff',
   'body_text_color' => 'black'
   'font' => array(
      'font-familiy' => 'Arial',
      'font-size' => 14
   )
);

function my_dynamic_css_callback( $var_name, $subscripts = null )
{
   $val = get_theme_mod($var_name, @$theme_mod_defaults[$var_name]);
   if( null !== $subscripts )
   {
      foreach( $subscripts as $subscript )
      {
          $val = $val[$subscript];
      }
   }
   return $val;
}
wp_dynamic_css_set_callback( 'my_dynamic_style', 'my_dynamic_css_callback' );

这编译为

body {
   background-color: #fff;
   color: black;
   font: 14px 'Arial';
}

注册过滤器

过滤器是改变变量值的函数。可以使用函数 wp_dynamic_css_register_filter( $handle, $filter_name, $callback ) 注册过滤器。已注册的过滤器只能用于给定句柄的样式表中。过滤器回调函数接受变量的值作为参数，并应返回过滤后的值。例如

function my_filter_callback( $value ) 
{
   return trim( $value );
}
wp_dynamic_css_register_filter( 'my_dynamic_style', 'myFilter', 'my_filter_callback' );

然后可以使用 | 运算符应用过滤器。例如

body {
   font-family: $myVar|myFilter;
}

过滤器还可以接受额外的参数。例如

function my_filter_callback( $value, $arg1, $arg2 ) 
{
   return $value.$arg1.$arg2;
}
wp_dynamic_css_register_filter( 'my_dynamic_style', 'myFilter', 'my_filter_callback' );

要传递额外的参数，请使用括号 () 并用逗号（不允许空格）分隔每个参数。例如

body {
   font-family: $myVar|myFilter(',arial',',sans-serif');
}

接受的参数类型包括字符串、整数、浮点数和布尔值。字符串必须用单引号括起来。例如

body {
   font-family: $myVar|myFilter(1,2,3,'4',5.6,true,false);
}

API参考

wp_dynamic_css_enqueue

排入动态样式表

function wp_dynamic_css_enqueue( $handle, $path, $print = true, $minify = false, $cache = false )

此函数将打印样式表的编译版本到文档部分，或者如果 $print 设置为 false，则将其作为外部样式表加载。如果 $cache 设置为 true，则样式表的编译版本将在首次编译后存储在数据库中。编译后的版本将在此之后提供，直到调用 wp_dynamic_css_clear_cache() 清除它。

参数

  • $handle (字符串) 样式表的名称/ID
  • $path (字符串) 动态CSS文件的绝对路径
  • $print (布尔值) 是否将编译后的CSS打印到文档头，或通过HTTP请求将其作为外部CSS文件加载
  • $minify (布尔值) 是否最小化CSS输出
  • $cache (布尔值) 是否将此样式表的编译版本存储在缓存中，以避免在每次页面加载时进行编译。

wp_dynamic_css_set_callback

设置值检索回调函数

function wp_dynamic_css_set_callback( $handle, $callback )

设置一个用于将变量转换为实际值的回调函数。当与 $handle 中的名称关联的动态CSS文件编译时，将使用注册的函数。回调函数接受变量的名称作为其第一个参数（不带 $），如果适用，则接受变量索引作为其第二个参数。回调函数应返回变量的实际值。

参数

  • $handle (字符串) 与此回调函数关联的样式表的名称。
  • $callback (可调用) 值检索回调函数。

wp_dynamic_css_clear_cache

清除给定句柄的缓存编译CSS

function wp_dynamic_css_clear_cache( $handle )

已注册的动态样式表具有 $cache 标志设置为 true，只编译一次并存储在缓存中。后续请求将静态地从缓存提供服务，直到调用 wp_dynamic_css_clear_cache() 清除它，强制编译器重新编译CSS。

参数

  • $handle (字符串) 要从缓存中清除的样式表的名称。

wp_dynamic_css_register_filter

为给定的样式表句柄注册过滤器函数。

function wp_dynamic_css_register_filter( $handle, $filter_name, $callback )

注册的过滤器可以通过在样式表中使用 | 运算符来改变变量的值。回调函数接受变量的值作为其第一个参数，并接受任何额外的参数。

参数

  • $handle (字符串) 此过滤器要使用的样式表的句柄。
  • $filter_name (字符串) 在动态CSS文件中使用的过滤器名称。
  • $callback (可调用) 实际的过滤器函数。接受变量的值作为第一个参数。应返回过滤后的值。