¿Cómo implemento el selector de iris de WordPress en mi complemento en el front-end?

10

Esta pregunta aquí es la misma pregunta que yo, pero no hubo respuestas adecuadas ni una respuesta correcta seleccionada, por lo que estoy preguntando nuevamente esperando que si pregunto de una manera más coherente podría obtener una respuesta.

Estoy tratando de implementar la rueda de selección de color como se ve en el panel de API de personalización de temas de Wordpress para seleccionar colores. Cargar los scripts y los estilos funciona bien cuando se usa el gancho, "admin_enqueue_scripts" funciona, sin embargo, intentar cargar estos scripts en el front-end usando el gancho, "wp_enqueue_scripts" no funciona. El estilo se pone en cola, pero no el guión.

Quiero evitar copiar archivos en mi plugin duplicando lo que ya está incluido con Wordpress. Debe haber una manera de hacer que el selector de color Iris funcione en el front-end que no estoy viendo.

Y para aquellos que se preguntan por qué quiero hacer esto, estoy desarrollando un complemento que agrega un panel desplegable al costado de la pantalla que le permite realizar cambios temporales de estilo en el sitio sin tener que iniciar sesión a través de wp-admin panel.

— Dwayne Charrington
fuente

16

Esto me volvió loco por un tiempo, pero conseguí que funcionara al agregarlos con los argumentos completos que se usan en el cargador de scripts de administrador en lugar de simplemente hacer referencia al identificador. Cuando imprimo el $wp_scriptsglobal en el front-end, irisy wp-color-pickerno se encuentran en ninguna parte, aunque todas sus dependencias de jQuery UI funcionan. De todos modos, no estoy seguro de que esto sea correcto, pero hace el trabajo:

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
fuente

Wow perfecto. Nunca se me ocurrió usar la función admin_url y simplemente poner en cola los scripts sin registrarlos y luego ponerlos en cola. Esto es probablemente lo más cerca que podremos utilizar el selector de color Iris central y sus dependencias. Gracias.

— Dwayne Charrington el

1

Esto me llevó casi allí, pero aún tenía un error con respecto a wpColorPickerL10n, así que tuve que agregar un poco más dentro de la función. He actualizado la respuesta anterior con el requisito wp_localize_script.

— Temas industriales

3

Necesitamos wp_enqueue_script el script y wp_enqueue_style el estilo con add_action al archivo functions.php. Simplemente incluya un archivo jQuery y un archivo de hoja de estilo en este script.

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

Ahora cree un nuevo archivo javascript como cp-active.js y manténgalo evitando la ruta de archivo definida "/js/cp-active.js" utilizando el código de fuelle.

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

Agregue un cuadro de texto a su página de configuración con una clase CSS para el selector de color, donde desea mostrar el texto de entrada. He usado "color_code" para la entrada $ variable.

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

Obtenga detalles desde aquí

— csehasib
fuente