¿Cómo implemento el selector WordPress Iris en mi complemento en la parte frontal?

Question

¿Cómo implemento el selector WordPress Iris en mi complemento en la parte frontal?

#1 de Milo (15 votos)
#2 de csehasib (3 votos)

10

Esta pregunta aquí está preguntando tengo la misma pregunta que yo, pero no hubo respuestas adecuadas ni una respuesta correcta seleccionada, así que vuelvo a preguntar, esperando que si formulo de manera más coherente, pueda obtener una respuesta.

Estoy intentando implementar la rueda selectora de color como se ve en el panel de la API de Personalización del Tema de Wordpress para seleccionar colores. La carga de los scripts y estilos funciona bien cuando se usa el gancho, "admin_enqueue_scripts" funciona, sin embargo, al 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 script.

Quiero evitar copiar sobre archivos en mi complemento duplicando lo que ya está incluido con Wordpress. Debe haber una manera de hacer que el selector de color Iris trabaje en la parte frontal que no veo.

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

wp-enqueue-script hooks theme-customizer color-picker

pregunta Dwayne Charrington 23.01.2013 - 03:40

2 respuestas

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 hojas de estilo en esta secuencia de comandos.

// 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 actualizado para definir la ruta del archivo "/js/cp-active.js" con 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 de 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í

respondido por el csehasib 16.03.2015 - 06:00

Lea otras preguntas en las etiquetas wp-enqueue-script hooks theme-customizer color-picker

Desactivar la actualización automática para un solo complemento Obtener un slug de tipo de publicación personalizado para una página de archivo

score 15 · Accepted Answer

Esto me volvió loco por un tiempo, pero lo hice funcionar agregándolos con los argumentos completos que se usan en el administrador de scripts de administración en lugar de solo hacer referencia al manejador. Cuando imprimo $wp_scripts global en el extremo frontal, iris y wp-color-picker no 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 );