Jak zaimplementować selektor WordPress Iris do mojej wtyczki na interfejsie?

To pytanie tutaj zadaje to samo pytanie jak ja, ale nie było wystarczających odpowiedzi ani wybiera poprawną odpowiedź więc pytam ponownie nadzieję, jeśli pytam w bardziej spójny sposób mogę uzyskać odpowiedź.

Próbuję zaimplementować koło wyboru kolorów, jak widać w okienku API dostosowywania motywu Wordpress do wybierania kolorów. Ładowanie skryptów i stylów działa poprawnie podczas używania haka, „admin_enqueue_scripts” działa, jednak próba załadowania tych skryptów w interfejsie za pomocą haka „wp_enqueue_scripts” nie działa. Styl jest kolejkowany, ale nie skrypt.

Chcę uniknąć kopiowania plików do mojej wtyczki, kopiując to, co jest już dołączone do Wordpress. Musi istnieć sposób, aby próbnik kolorów Iris działał na interfejsie, którego nie widzę.

A dla tych, którzy zastanawiają się, dlaczego chcę to zrobić, opracowuję wtyczkę, która dodaje wysuwany panel z boku ekranu, który umożliwia wprowadzanie tymczasowych zmian stylizacji w czasie rzeczywistym bez konieczności logowania się przez wp-admin płyta.

Doprowadziło mnie to do szału, ale udało mi się to, dodając je z pełnymi argumentami, które są używane w module ładującym skrypt administratora, a nie tylko odwołując się do uchwytu. Kiedy drukuję $wp_scriptsglobalny interfejs irisi wp-color-pickernie ma go nigdzie, chociaż wszystkie ich zależności interfejsu jQuery działają. W każdym razie nie jestem pewien, czy to prawda, ale wykonuje zadanie:

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

Musimy wp_enqueue_script skryptu i wp_enqueue_style styl z dodatkiem działań do pliku functions.php. Po prostu dołącz do tego skryptu plik jQuery i plik arkusza stylów.

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

Teraz utwórz nowy plik javascript, taki jak cp-active.js i zachowaj ścieżkę pliku „/js/cp-active.js” zdefiniowaną przez avobe, używając kodu mieszkowego.

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

Dodaj pole tekstowe do strony ustawień za pomocą klasy CSS dla próbnika kolorów, w którym chcesz usunąć tekst wejściowy. Używam „color_code” do wprowadzania zmiennej $.

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

Uzyskaj szczegóły stąd