Sử dụng color picker trong WordPress

WordPress color picker là một tính năng rất hay, nó cho phép bạn lựa chọn hình ảnh để sử dụng trong option của giao diện hoặc plugin. Đặc biệt mọi thứ đã được tích hợp sẵn trong nhân của WordPress, bạn chỉ cần lấy ra và sử dụng mà thôi.

Để sử dụng được tính năng này thì bạn phải biết qua các hàm liên quan đến script của WordPress, ngoài ra thì có thêm các hàm liên quan đến style.

Xem thêm: Cách chèn CSS và JavaScript trong WordPress

Đầu tiên thì bạn sẽ enqueue style và script của color picker trước:

function hocwp_theme_load_scripts() {
	wp_enqueue_script('wp-color-picker');
	wp_enqueue_style('wp-color-picker');
}
add_action('wp_enqueue_scripts', 'hocwp_theme_load_scripts');

Tiếp đến, bạn sử dụng thẻ input để tạo ra một trường nhập giá trị như sau:

<input type="text" value="#bada55" class="my-color-field" data-default-color="#effeff" />

Và cuối cùng là bạn gọi hàm wpColorPicker() trong tập tin script của bạn:

jQuery(document).ready(function($){
    $('.my-color-field').wpColorPicker();
});

Nếu bạn muốn sử dụng nâng cao hơn, bạn có thể thêm options trong hàm wpColorPicker():

var myOptions = {
    // 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,
    // show a group of common colors beneath the square
    // or, supply an array of colors to customize further
    palettes: true
};
 
$('.my-color-field').wpColorPicker(myOptions);

Như vậy là bạn đã tạo được mục cho phép lựa chọn màu sắc, cái này áp dụng vào để làm option cho giao diện và plugin hoặc một tính năng đặc biệt nào đó cho thành viên trên blog của bạn. Chúc bạn thành công.

Lại Đình Cường