README

作者: Nick Ford
标签: acf, acf 插件, 颜色, 颜色色卡, 颜色色卡集
至少需要 4.0
测试到 5

许可证: GPLv2 或更高版本

描述

这是一个简单的ACF插件字段，允许创建类似单选按钮的行为的颜色色卡。如果您想限制最终用户可用的颜色选项，而不是使用颜色选择器字段，这将特别有用。

这是针对高级自定义字段 WordPress插件的插件，除非已安装并激活了高级自定义字段，否则不会向WordPress提供任何功能。

颜色色卡字段是一个单选按钮字段，略有修改。构建选项的语法与单选按钮字段相同，您可以包括键：值对，或者只包含单个值，每个选项由换行符分隔。

该字段期望每行都是一个颜色字符串，并且可以解释所有可能的颜色格式。

例如，以下所有内容都将生成一个明亮的红色色卡

red
#ff0000
rgb(255,0,0)
rgba(255,0,0, 1)
hsl(0,100%,50%)
hsla(0,100%,50%, 1)

此外，如果您正在使用rgb/rgba或hsl/hsla，则可以仅使用值。例如

255,0,0, 1 // 将被识别为rgba
0,100%,50% // 将被识别为hsl

这可能有助于定义CSS线性渐变或您可能想要更改视图中的某些值的其他情况。

请注意，虽然该字段可以识别这些简写语法以在WordPress后端显示颜色色卡，但它在使用 the_field() 或 get_field() 时仍仅输出您输入的内容。

屏幕截图

安装

Wordpress 插件商店

https://wordpresstheme.cn/plugins/acf-color-swatches

Composer

如果您使用Composer（例如，与Bedrock一起使用）

将存储库添加到 composer.json

"repositories": [
  {
    "type": "git",
    "url": "https://github.com/nickforddesign/acf-swatch"
  }
]

使用Composer安装 composer require nickford/acf-swatch

手动

将存储库克隆到您的WordPress安装的/wp-content/plugins/目录中
在插件管理器中激活。

建议使用

假设您选择具有值"rgba(255,0,0, 1)"的色卡

作为内联CSS

<section style="background-color: <?php the_field('swatches')?>">

在<style>标签内

<style>
section {
  background-color: <?php the_field('swatches')?>;
}
</style>

您可能想要利用简写语法的一种情况是控制一个CSS线性渐变，该渐变将颜色从100%不透明度渐变到0%。

假设您选择具有值"255,0,0"的色卡

<style>
section {
  background: linear-gradient(
                to bottom,
                rgba(<?php the_field('swatches')?>, 1) 0%,
                rgba(<?php the_field('swatches')?>, 0) 100%
              );
}
</style>

包含在主题中

利用 acf/swatch_settings/path 和 acf/swatch_settings/url 过滤器来修改acf-swatch的位置，以便在后台正确找到js和css。

/**
 * Include ACF Color Swatch Field
 */

add_filter('acf/swatch_settings/path', 'my_swatch_path', 10, 1);

function my_swatch_path( $path ) {
  
  $path = get_template_directory() . '/path/to/acf-swatch';
  
  return $path;
  
}

add_filter('acf/swatch_settings/url', 'my_swatch_url', 10, 1);

function my_swatch_url( $url ) {
  
  $url = get_template_directory_uri() . '/path/to/acf-swatch';
  
  return $url;
  
}

include( 'path/to/acf-swatch.php' );

变更日志

4/25/18 - v1.0.7

问题 - 修复了返回值而不是数组的问题

10/23/17 - v1.0.6

d57ec40 - 匹配背景颜色语法
4892d0e - 允许选择透明值

2017年10月23日 - v1.0.5

fa93a8b - 添加返回值选项

2017年2月13日 - v1.0.4

44912a6 - 允许在主题中包含

2016年10月21日 - v1.0.3-rc.1

7bdc1d2 - 改进了composer说明

2016年10月7日 - v1.0.3

9d733d9 - 添加composer.json
为Wordpress插件数据库添加了readme.txt

2016年5月19日 - v1.0.3-alpha

0b1b7f6 - 添加对ACF5的支持

2015年11月9日 - v1.0.2

添加了棋盘图案来表示透明度
添加了微妙的边框以显示与背景颜色匹配的色卡

2015年10月14日 - v1.0.1

通过用块元素替换输入元素来提高了浏览器/操作系统支持

2015年9月20日 - v1.0.0

初始发布

nickford / acf-swatch

维护者

详细信息