自定義 Wordpress 顏色選擇器

Question

有什么方法可以自定義 Wordpress 3.8 顏色選擇器（在自定義字段類型上）以僅使用我將定義的顏色？

我只需要為客戶提供 6 種顏色，但除了 6 種漸變顏色外，他們不想擁有所有這些顏色。

對任何幫助都會很有幫助......我已經嘗試了幾天，但沒有積極的解決方案:(

謝謝

Answer 1

Wordpress 3.5+ 使用 Iris 顏色選擇器，它有幾個可供使用的選項。

初始化對象時，只需為palettes選項分配一組顏色。

var colorOptions = {
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: ['#4444,44','#ff2255','#559999','#99CCFF','#00c1e8','#F9DE0E','#111111','#EEEEDD']
};

jQuery('.my-color-picker-class').wpColorPicker(colorOptions);

Answer 2

如果您使用 TinyMCE 編輯器，您可以像這樣修改調色板。

function my_mce4_options( $init ) {
    $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"
    ';

    $init['textcolor_map'] = '['.$custom_colours.']';

    // Set number of color rows
    $init['textcolor_rows'] = 3;
    // Set number of color columns
    $init['textcolor_cols'] = 2

    return $init;
}
add_filter('tiny_mce_before_init', 'my_mce4_options');

Answer 3

我們需要 wp_enqueue_script 腳本和 wp_enqueue_style 帶有 add_action 的樣式到 functions.php 文件。 只需通過此腳本包含一個 jQuery 文件和樣式表文件。

// Register Scripts & 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);

現在創建一個新的 javascript 文件，如 cp-active.js 並使用波紋管代碼保持它被定義為“/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="" />

請查看有關 添加 jQuery 顏色選擇器 WordPress 主題或插件的更多詳細信息

Answer 4

這是一個快速而骯臟的解決方案：

1. 轉到 wp-admin/js/iris.min.js
2. 在那里搜索調色板顏色（從文件開頭大約 1/3）。 我找到了這個：
   _palettes:["#000","#fff","#d33","#d93","#ee2","#81d742","#1e73be","#8224e3"]
3. 用您自己的自定義顏色替換這些默認值。 我留下了黑色和白色，然后添加了我們的品牌顏色，而不是 #d33 和其他顏色。
4. 上傳到服務器。

暫時有效。 但是還沒有嘗試過是否可以在下一次 Wordpress 更新中幸存下來。