Як я можу реалізувати інструмент вибору WordPress Iris у свій плагін на передній панелі?

Це питання тут задає те ж питання , як і я, але не було ніяких адекватних відповідей , ні обраний правильну відповідь , тому я прошу ще раз сподіваючись , що , якщо я поставлю більш послідовним чином я міг би отримати відповідь.

Я намагаюся реалізувати колесо вибору кольорів, як видно на панелі API налаштування теми Wordpress для вибору кольорів. Завантаження сценаріїв та стилів працює чудово при використанні гака, "admin_enqueue_scripts" працює, проте намагається завантажити ці сценарії на передній частині за допомогою гака, "wp_enqueue_scripts" не працює. Стиль зачаровується, але не сценарій.

Я хочу уникати копіювання файлів у свій плагін, що дублює те, що вже входить у Wordpress. Має бути спосіб, щоб колектор кольорової оболонки райдужки працював на передній частині, яку я не бачу.

А для тих, хто цікавиться, чому я хочу це зробити, я розробляю плагін, який додає панель вильоту на сторону екрана, що дозволяє вносити на сайт тимчасові зміни стилів в режимі реального часу без входу через wp-admin панель.

Це на деякий час мене зводило з розуму, але я змусив його працювати, додавши їх до повних аргументів, які використовуються в завантажувачі скриптів адміністратора, а не просто посилаючись на ручку. Коли я друкую $wp_scriptsглобальний на передній частині, irisі wp-color-pickerніде його не можна знайти, хоча всі їх залежності від jQuery інтерфейсу працюють. У будь-якому разі, не впевнений, що це правильно, але це виконує роботу:

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

Нам потрібно wp_enqueue_script сценарій та wp_enqueue_style стиль із додаванням до файлу function.php. Просто додайте до цього сценарію файл jQuery та файл таблиці стилів.

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

Тепер створіть новий файл javascript на зразок cp-active.js і збережіть його у визначеному Avobe шляху “/js/cp-active.js”, використовуючи наступний код.

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

Додайте текстове поле на сторінку налаштувань із класом CSS для вибору кольору, де потрібно розіслати текст введення. Я використовую "color_code" для введення змінної $.

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

Дізнайтеся тут