Как внедрить средство выбора Iris WordPress в мой плагин на внешнем интерфейсе?

10

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

Я пытаюсь реализовать колесо выбора цвета, как показано на панели API настройки Wordpress Theme для выбора цветов. Загрузка сценариев и стилей работает нормально при использовании ловушки, «admin_enqueue_scripts» работает, однако при попытке загрузить эти сценарии во внешний интерфейс с помощью ловушки «wp_enqueue_scripts» не работает. Стиль ставится в очередь, но не сценарий.

Я хочу избежать копирования файлов в мой плагин, дублирующий то, что уже связано с Wordpress. Должен быть способ заставить палитру цветов Iris работать на внешнем интерфейсе, которого я не вижу.

И для тех, кто интересуется, почему я хочу это сделать, я разрабатываю плагин, который добавляет всплывающую панель в боковую часть экрана, которая позволяет вносить временные изменения стиля сайта в реальном времени без необходимости входа через wp-admin. панель.

— Дуэйн Чаррингтон
источник

16

Это на некоторое время привело меня в бешенство, но я заставил его работать, добавив их с полными аргументами, которые используются в загрузчике сценариев администратора, а не просто ссылаясь на дескриптор. Когда я напечатать $wp_scriptsглобальный на переднем конце, irisи wp-color-pickerнигде не найти, хотя все их JQuery UI зависимостей работы. В любом случае, не уверен, что это правильно, но он выполняет свою работу:

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
источник

Вау, отлично. Мне никогда не приходило в голову использовать функцию admin_url и просто ставить сценарии в очередь без регистрации, а затем ставить их в очередь. Вероятно, это примерно так же близко, как мы сможем использовать базовую палитру цветов Iris и ее зависимости. Спасибо.

— Дуэйн Чаррингтон

1

Это привело меня почти к этому, но у меня все еще была ошибка, связанная с wpColorPickerL10n, поэтому мне пришлось добавить немного больше в функцию. Я обновил ответ выше с требованием wp_localize_script.

— Промышленные темы

3

Нам нужно wp_enqueue_script сценария и wp_enqueue_style стиль с add_action для файла functions.php. Просто включите этот скрипт в файл jQuery и файл таблицы стилей.

// Register Scripts &amp; 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, и сохраните его, заданный в пути «/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="" />

Получить подробности здесь

— csehasib
источник