Question

有没有办法自定义Wordpress 3.8颜色选择器（在自定义字段类型上）只使用我将定义的颜色？

我需要为客户端只有6种颜色，但除了6种渐变颜色外，他们不希望拥有所有这些颜色。

对任何帮助都会很有帮助......我已经尝试了好几天，但没有积极的解决方案:(

谢谢

Answer 1

是，

Wordpress使用Iris colorpicker，如果您将转到该页面，您将看到所有方法和选项..

基本上，你添加这个：

 palettes: ['#e5003d','#A6FF4C','#757584','#99CCFF','#00c1e8','#111111','#ECECFB']

初始化对象时

到您的选项..

    jQuery('#my-ID .my-color-picker-class').each(function(){
        jQuery(this).wpColorPicker({
            // you can declare a default color here,
            // or in the data-default-color attribute on the input
            //defaultColor: false,

            // a callback to fire whenever the color changes to a valid color
            change: function(event, ui){},
            // a callback to fire when the input is emptied or an invalid color
            clear: function() {},
            // hide the color picker controls on load
            hide: true,
            // set  total width
            width : 200,
            // show a group of common colors beneath the square
            // or, supply an array of colors to customize further
            palettes: ['#444444','#ff2255','#559999','#99CCFF','#00c1e8','#F9DE0E','#111111','#EEEEDD']
        });

当然，如果您编写自己的自定义字段，那么这一切......

如果您使用某些插件或其他 - 它将取决于该插件机制..

Answer 2

我发现了这些信息here (link)。

您应该使用现有的Wordpress功能来修改调色板，如下所示：

function my_mce4_options( $init ) {
$default_colours = '
    "000000", "Black",
    "993300", "Burnt orange",
    "333300", "Dark olive",
    "003300", "Dark green",
    "003366", "Dark azure",
    "000080", "Navy Blue",
    "333399", "Indigo",
    "333333", "Very dark gray",
    "800000", "Maroon",
    "FF6600", "Orange",
    "808000", "Olive",
    "008000", "Green",
    "008080", "Teal",
    "0000FF", "Blue",
    "666699", "Grayish blue",
    "808080", "Gray",
    "FF0000", "Red",
    "FF9900", "Amber",
    "99CC00", "Yellow green",
    "339966", "Sea green",
    "33CCCC", "Turquoise",
    "3366FF", "Royal blue",
    "800080", "Purple",
    "999999", "Medium gray",
    "FF00FF", "Magenta",
    "FFCC00", "Gold",
    "FFFF00", "Yellow",
    "00FF00", "Lime",
    "00FFFF", "Aqua",
    "00CCFF", "Sky blue",
    "993366", "Brown",
    "C0C0C0", "Silver",
    "FF99CC", "Pink",
    "FFCC99", "Peach",
    "FFFF99", "Light yellow",
    "CCFFCC", "Pale green",
    "CCFFFF", "Pale cyan",
    "99CCFF", "Light sky blue",
    "CC99FF", "Plum",
    "FFFFFF", "White"
    ';
$custom_colours = '
    "e14d43", "Color 1 Name",
    "d83131", "Color 2 Name",
    "ed1c24", "Color 3 Name",
    "f99b1c", "Color 4 Name",
    "50b848", "Color 5 Name",
    "00a859", "Color 6 Name",
    "00aae7", "Color 7 Name",
    "282828", "Color 8 Name"
    ';
$init['textcolor_map'] = '['.$default_colours.','.$custom_colours.']';
$init['textcolor_rows'] = 6; // expand colour grid to 6 rows
return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

您还可以更改行数和列数：

$init['textcolor_rows'] = 5;
$init['textcolor_cols'] = 10;

Answer 3

我们需要wp_enqueue_script脚本，并将带有add_action的样式wp_enqueue_style到functions.php文件中。只需在此脚本中包含一个jQuery文件和样式表文件。

// Register Scripts &amp; Styles in Admin panel
function custom_color_picker_scripts() {
wp_enqueue_style( 'wp-color-picker' );
wp_enqueue_script( 'iris', admin_url( 'js/iris.min.js' ), array( 'jquery-ui-draggable', 'jquery-ui-slider', 'jquery-touch-punch' ), false, 1 );
wp_enqueue_script( 'cp-active', plugins_url('/js/cp-active.js', __FILE__), array('jquery'), '', true );

}
add_action( 'admin_enqueue_scripts', custom_color_picker_scripts);

现在像cp-active.js一样创建一个新的javascript文件，并使用波纹管代码将其保存为avobe defined“/js/cp-active.js”文件路径。

jQuery('.color-picker').iris({
// or in the data-default-color attribute on the input
defaultColor: true,
// a callback to fire whenever the color changes to a valid color
change: function(event, ui){},
// a callback to fire when the input is emptied or an invalid color
clear: function() {},
// hide the color picker controls on load
hide: true,
// show a group of common colors beneath the square
palettes: true
});

在设置页面中添加一个文本框，其中包含颜色选择器的CSS类，您可以在其中显示输入文本。我使用“color_code”作为输入$ variable。

<input id="color_code" class="color-picker" name="color_code" type="text" value="" />

请参阅Add jQuery Color Picker WordPress Theme or Plugin

的更多详情

Answer 4

这是一个快速的＆amp;肮脏的解决方案：

转到wp-admin / js / iris.min.js
在那里搜索调色板颜色（距文件开头约1/3）。我发现了这个：
_palettes：[ “＃000”， “＃FFF”， “＃D33”， “＃D93”， “＃EE2”， “＃81d742”， “＃1e73be”， “＃8224e3”]
使用您自己的自定义颜色替换这些默认值。我留下了黑色和白色，然后添加了我们的品牌颜色而不是＃d33和其他。
上传到服务器。

现在可以使用。但是，如果在下一个Wordpress更新中幸存下来，还没有尝试过。

自定义Wordpress颜色选择器

4 个答案: