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

10

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.

hooks wp-enqueue-script theme-customizer color-picker Dwayne Charrington
sumber

Jawaban:

16

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 );
Milo
sumber
Wow, sempurna. Tidak pernah sadar saya untuk menggunakan fungsi admin_url dan hanya enqueue skrip tanpa mendaftar dan kemudian enqueuing mereka. Ini mungkin sedekat kita akan bisa menggunakan pemilih warna inti Iris dan dependensinya. Terima kasih.
Dwayne Charrington
1
Ini membuat saya hampir sampai tetapi saya masih memiliki kesalahan mengenai wpColorPickerL10n, jadi saya harus menambahkan sedikit lebih banyak di dalam fungsi. Saya telah memperbarui jawaban di atas dengan persyaratan wp_localize_script.
Tema Industri
3

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

csehasib
sumber