WordPress Iris seçiciyi ön uçtaki eklentime nasıl uygularım?

Burada bu soru benimle aynı soruyu soruyor, ancak yeterli cevaplar veya seçilmiş doğru bir cevap yoktu, bu yüzden daha tutarlı bir şekilde cevap alabileceğimi umuyorum.

Renk seçmek için Wordpress Tema Özelleştirme API bölmesinde görüldüğü gibi renk seçici tekerleği uygulamaya çalışıyorum. Kanca kullanılırken komut dosyalarının ve stillerin yüklenmesi iyi çalışır, "admin_enqueue_scripts" çalışır, ancak bu komut dosyalarını kanca kullanarak ön uca yüklemeye çalışırken, "wp_enqueue_scripts" çalışmaz. Stil sıralanır, fakat senaryo değildir.

Wordpress ile birlikte gelenleri çoğaltarak dosyaları eklentime kopyalamaktan kaçınmak istiyorum. Görmediğim ön uçta Iris renk seçiciyi çalıştırmanın bir yolu olmalı.

Ve bunu neden yapmak istediğimi merak edenler için, ekranın yanına bir açılır panel ekleyen ve wp-admin üzerinden giriş yapmak zorunda kalmadan siteye gerçek zamanlı geçici stil değişiklikleri yapmanıza izin veren bir eklenti geliştiriyorum panel.

Bu beni bir süre delirtti, ama sadece tanıtıcı referans değil, yönetici komut dosyası yükleyicide kullanılan tam argümanları ekleyerek işe aldım. Ben tüm jQuery UI bağımlılıkları çalışıyor olsa da, ben $wp_scriptsön ucunda global yazdırmak irisve wp-color-pickerhiçbir yerde bulunamıyorum. Her neyse, bunun doğru olduğundan emin değilim, ama işi hallediyor:

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

Betiği wp_enqueue_script olarak yazmamız ve wp_enqueue_style ile styles.php dosyasına add_action eklememiz gerekir. Bu komut dosyasına bir jQuery dosyası ve stil sayfası dosyası eklemeniz yeterlidir.

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

Şimdi cp-active.js gibi yeni bir javascript dosyası oluşturun ve körük kodu kullanarak tanımlanmış “/js/cp-active.js” dosya yolundan kaçının.

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

Girdi metnini dağıtmak istediğinizde, renk seçici için CSS sınıfıyla ayarlar sayfanıza bir metin kutusu ekleyin. Giriş $ değişkeni için "color_code" kullanıyorum.

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

Ayrıntıları buradan alın