Bagaimana cara menerapkan pemilih WordPress Iris ke plugin saya di front-end?

Pertanyaan ini di sini menanyakan pertanyaan yang sama dengan saya, tetapi tidak ada jawaban yang memadai atau jawaban yang benar dipilih sehingga saya bertanya lagi berharap jika saya bertanya dengan cara yang lebih koheren saya mungkin akan mendapat jawaban.

Saya mencoba menerapkan roda pemilih warna seperti yang terlihat di panel API Kustomisasi Tema Wordpress untuk memilih warna. Memuat skrip dan gaya berfungsi dengan baik saat menggunakan hook, "admin_enqueue_scripts" berfungsi namun mencoba memuat skrip ini di front-end menggunakan hook, "wp_enqueue_scripts" tidak berfungsi. Gaya menjadi enqueued, tetapi tidak skrip.

Saya ingin menghindari menyalin file ke dalam duplikat plugin saya apa yang sudah dibundel dengan Wordpress. Pasti ada cara agar pemilih warna Iris bekerja di ujung depan yang tidak saya lihat.

Dan bagi mereka yang bertanya-tanya mengapa saya ingin melakukan ini, saya sedang mengembangkan sebuah plugin yang menambahkan panel fly-out ke sisi layar yang memungkinkan Anda untuk membuat perubahan styling sementara waktu nyata ke situs tanpa harus login melalui wp-admin panel.

Ini membuat saya gila untuk sementara waktu, tetapi saya membuatnya bekerja dengan menambahkannya dengan argumen lengkap yang digunakan dalam skrip admin loader daripada hanya merujuk pegangan. Ketika saya mencetak $wp_scriptsglobal di ujung depan, irisdan wp-color-pickertidak dapat ditemukan, meskipun semua dependensi jQuery UI mereka berfungsi. Lagi pula, tidak yakin ini benar, tapi itu menyelesaikan pekerjaan:

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

Kita perlu wp_enqueue_script skrip dan wp_enqueue_style style dengan add_action ke file functions.php. Cukup sertakan file jQuery dan file stylesheet dengan skrip ini.

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

Sekarang buat file javascript baru seperti cp-active.js dan pertahankan avobe yang didefinisikan sebagai jalur file "/js/cp-active.js" menggunakan kode bellow.

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

Tambahkan kotak teks ke halaman pengaturan Anda dengan kelas CSS untuk pemilih warna, tempat Anda ingin menghilangkan teks input. Saya telah menggunakan "color_code" untuk input $ variabel.

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

Dapatkan detail dari sini