Làm cách nào để triển khai trình chọn Iris Iris vào plugin của tôi ở mặt trước?

Câu hỏi này ở đây là hỏi cùng một câu hỏi với tôi, nhưng không có câu trả lời đầy đủ cũng như câu trả lời đúng được chọn vì vậy tôi hỏi lại với hy vọng nếu tôi hỏi theo cách mạch lạc hơn tôi có thể nhận được câu trả lời.

Tôi đang cố gắng triển khai bánh xe chọn màu như đã thấy trong ngăn API tùy chỉnh chủ đề Wordpress để chọn màu. Tải tập lệnh và kiểu hoạt động tốt khi sử dụng hook, "admin_enqueue_scripts" hoạt động tuy nhiên cố gắng tải các tập lệnh này ở mặt trước bằng cách sử dụng hook, "wp_enqueue_scripts" không hoạt động. Phong cách được mê hoặc, nhưng không phải là kịch bản.

Tôi muốn tránh sao chép các tập tin vào plugin của mình sao chép những gì đã được gói cùng với Wordpress. Phải có một cách để công cụ chọn màu Iris hoạt động ở mặt trước mà tôi không thấy.

Và đối với những người thắc mắc tại sao tôi muốn làm điều này, tôi đang phát triển một plugin có thêm bảng điều khiển bay ra bên cạnh màn hình cho phép bạn thay đổi kiểu dáng tạm thời trong thời gian thực mà không cần phải đăng nhập qua wp-admin bảng điều khiển.

Điều này khiến tôi phát điên trong một thời gian, nhưng tôi đã làm cho nó hoạt động bằng cách thêm chúng với các đối số đầy đủ được sử dụng trong trình tải tập lệnh quản trị viên thay vì chỉ tham chiếu xử lý. Khi tôi in $wp_scriptstoàn cầu ở mặt trước irisvà wp-color-pickerkhông tìm thấy ở đâu, mặc dù tất cả các phụ thuộc giao diện người dùng jQuery của họ đều hoạt động. Dù sao, không chắc chắn điều này là đúng, nhưng nó hoàn thành công việc:

function wpa82718_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(
        'wp-color-picker',
        admin_url( 'js/color-picker.min.js' ),
        array( 'iris' ),
        false,
        1
    );
    $colorpicker_l10n = array(
        'clear' => __( 'Clear' ),
        'defaultString' => __( 'Default' ),
        'pick' => __( 'Select Color' ),
        'current' => __( 'Current Color' ),
    );
    wp_localize_script( 'wp-color-picker', 'wpColorPickerL10n', $colorpicker_l10n ); 

}
add_action( 'wp_enqueue_scripts', 'wpa82718_scripts', 100 );

Chúng ta cần wp_enqueue_script script và wp_enqueue_style kiểu với add_action vào tệp tin.php. Chỉ cần bao gồm tệp jQuery và tệp biểu định kiểu theo tập lệnh này.

// 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( 'wp_enqueue_scripts', custom_color_picker_scripts);

Bây giờ hãy tạo một tệp javascript mới giống như cp-active.js và giữ cho nó không bị định nghĩa đường dẫn tệp /js/cp-active.js bằng cách sử dụng mã ống thổi.

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

Thêm một hộp văn bản vào trang cài đặt của bạn bằng một lớp CSS cho bộ chọn màu, nơi bạn muốn phân tán văn bản đầu vào. Tôi đã sử dụng màu color_code gỗ cho biến đầu vào $.

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

Nhận thông tin chi tiết từ đây