Advertisement
  1. Code
  2. WordPress
  3. Theme Development

Cómo usar la API Color Picker de WordPress

Scroll to top
Read Time: 10 min

() translation by (you can also view the original English article)

Cuando el equipo de WordPress lanza una nueva versión, introducen algunas nuevas características no solo para los usuarios sino también para los desarrolladores. WordPress ofrece un montón de herramientas que hacen que sea fácil desarrollar nuevos fantásticos temas o plugins.

Una de las últimas APIs disponibles para los desarrolladores de WordPress es el nuevo Color Picker; esta característica permite sustituir el campo estándar de texto por un selector de color agradable y amigable para el usuario.

En este tutorial, voy a mostrarte como añadir el selector de color dentro de tu proyecto WordPress. Empecemos.


Por qué puede ser útil

Existen algunas razones interesantes del porque los desarrolladores deberían implementar opciones de color usando la nueva API de selección de color:

Para los usuarios

  • Proporciona una forma más rápida y sencilla de seleccionar un color.
  • Los usuarios no se tienen que preocupar sobre qué formato de color deben escribir, hexadecimal, RGB, etc.
  • Hablando en términos generales, proporciona en conjunto una mejor experiencia de usuario.

Para los desarrolladores

  • Las páginas de tu escritorio se integrarán con la interfaz de usuario de WordPress.
  • Proporciona una validación de entrada más sencilla para el campo de color.
  • Da como resultado un producto final más profesional porque está usando los controles nativos.

Tras cubrir algunos de los principales aspectos del Selector de color de WordPress, añadámoslo dentro de nuestro plugin o tema.


Incluir recursos del Selector de color

Antes de continuar, tengo que especificar que la API del Color Picker fue introducida en la versión 3.5 de WordPress de manera que para continuar con este tutorial, asegúrate de haber instalado la versión 3.5 o posterior.

Para añadir el selector de color, simplemente incluye un archivo jQuery y un archivo de hoja de estilos. Las siguientes líneas de código te muestran cómo hacer esto.

1
add_action( 'admin_enqueue_scripts', 'wptuts_add_color_picker' );
2
function wptuts_add_color_picker( $hook ) {
3
4
    if( is_admin() ) { 
5
	
6
		// Add the color picker css file       

7
		wp_enqueue_style( 'wp-color-picker' ); 
8
		
9
		// Include our custom jQuery file with WordPress Color Picker dependency

10
		wp_enqueue_script( 'custom-script-handle', plugins_url( 'custom-script.js', __FILE__ ), array( 'wp-color-picker' ), false, true ); 
11
	}
12
}

Observa que cuando hayamos incluido el archivo custom-script.js con la dependencia wp-color-picker. Ahora puedes aplicar el selector de color a tus campos de texto dentro de tu archivo jQuery.

1
(function( $ ) {
2
3
    // Add Color Picker to all inputs that have 'color-field' class

4
    $(function() {
5
        $('.color-field').wpColorPicker();
6
    });
7
    
8
})( jQuery );

Crear un plugin que use el selector de color de WordPress

En este punto, es el momento de mostrar cómo integrar el Selector de color en un plugin real.

Aquí tienes lo que vamos a cubrir:

  • Cómo añadir una página de opción al escritorio que simule la página de ajustes del tema.
  • Cómo añadir los campos de ajustes preparados para el Selector de color.
  • Cómo validar y guardar los datos de entrada.

Paso 1

Una vez hayas colocado tu plugin dentro de tu carpeta wp-content/plugins de WordPress estaremos preparados para empezar. La siguiente imagen muestra como hemos estructurado el plugin para este tutorial.

Estructura del plugin

Paso 2

Dentro del archivo color-picker-plugin.php, escribe los comentarios con la información del plugin y crea una nueva clase denominada CPA_Theme_Options. El siguiente código muestra todos los métodos de clase que vamos a implementar paso a paso.

1
/*

2
Plugin Name: Color Picker API

3
Plugin URI: https://code.tutsplus.com

4
Description: Demo about the new Color Picker API

5
Version: 1.0

6
Author: code.tutsplus.com

7
Author URI: http://code.tutsplus.com

8
*/
9
10
/**

11
 * Main Class - CPA stands for Color Picker API

12
 */
13
class CPA_Theme_Options {
14
 
15
    /*--------------------------------------------*

16
     * Attributes

17
     *--------------------------------------------*/
18
 
19
    /** Refers to a single instance of this class. */
20
    private static $instance = null;
21
    
22
    /* Saved options */
23
    public $options;
24
 
25
    /*--------------------------------------------*

26
     * Constructor

27
     *--------------------------------------------*/
28
 
29
    /**

30
     * Creates or returns an instance of this class.

31
     *

32
     * @return  CPA_Theme_Options A single instance of this class.

33
     */
34
    public static function get_instance() {
35
 
36
        if ( null == self::$instance ) {
37
            self::$instance = new self;
38
        }
39
 
40
        return self::$instance;
41
 
42
    } // end get_instance;

43
 
44
    /**

45
     * Initializes the plugin by setting localization, filters, and administration functions.

46
     */
47
    private function __construct() { }
48
 
49
    /*--------------------------------------------*

50
     * Functions

51
     *--------------------------------------------*/
52
     
53
    /**

54
     * Function that will add the options page under Setting Menu.

55
     */
56
    public function add_page() { }
57
     
58
    /**

59
     * Function that will display the options page.

60
     */
61
	public function display_page() { }
62
      
63
    /**

64
     * Function that will register admin page options.

65
     */
66
    public function register_page_options() { }
67
    
68
    /**

69
     * Function that will add javascript file for Color Piker.

70
     */
71
    public function enqueue_admin_js() { }
72
    
73
    /**

74
     * Function that will validate all fields.

75
     */
76
    public function validate_options( $fields ) { }
77
    
78
    /**

79
     * Function that will check if value is a valid HEX color.

80
     */
81
    public function check_color( $value ) { }
82
    
83
    /**

84
     * Callback function for settings section

85
     */
86
    public function display_section() { /* Leave blank */ } 
87
    
88
    /**

89
     * Functions that display the fields.

90
     */
91
    public function title_settings_field() { }   
92
    
93
    public function bg_settings_field( ) { }
94
        
95
} // end class

96
 
97
CPA_Theme_Options::get_instance();

Paso 3

Primero, implementemos la clase del constructor. El código siguiente muestra qué hará el plugin cuando una nueva instancia sea creada.

Hará lo siguiente:

  • Añadirá una nueva página de opciones dentro de la sección de Ajustes de tu menú de administración
  • Registrará campos de ajuste dentro de la página de opciones
  • Añadirá una hoja de estilos CSS para el Selector de color de WordPress
  • Añadirá un archivo JavaScript personalizado que invoque el Selector de color
  • Establecerá el atributo options con los ajustes guardados
1
private function __construct() { 
2
3
    // Add the page to the admin menu

4
	add_action( 'admin_menu', array( &$this, 'add_page' ) );
5
	
6
	// Register page options

7
	add_action( 'admin_init', array( &$this, 'register_page_options') );
8
	
9
	// Css rules for Color Picker

10
	wp_enqueue_style( 'wp-color-picker' );
11
	
12
	// Register javascript

13
	add_action('admin_enqueue_scripts', array( $this, 'enqueue_admin_js' ) );
14
	
15
	// Get registered option

16
	$this->options = get_option( 'cpa_settings_options' );
17
}

Paso 4

El siguiente paso cubre cómo añadir la página de opciones y cómo mostrarla.

1
/**

2
 * Function that will add the options page under Setting Menu.

3
 */
4
public function add_page() { 
5
    
6
	// $page_title, $menu_title, $capability, $menu_slug, $callback_function

7
	add_options_page( 'Theme Options', 'Theme Options', 'manage_options', __FILE__, array( $this, 'display_page' ) );
8
}
9
10
/**

11
 * Function that will display the options page.

12
 */
13
public function display_page() { 
14
    ?>
15
	<div class="wrap">
16
	
17
		<h2>Theme Options</h2>
18
		<form method="post" action="options.php">		
19
		<?php 
20
			settings_fields(__FILE__);		
21
			do_settings_sections(__FILE__);
22
			submit_button();
23
		?>
24
		</form>
25
	</div> <!-- /wrap -->
26
	<?php	
27
}

Observa que ya hemos escrito, dentro del método display_page(), el código que añadirá el formulario, los campos y el botón de envío para registrar las opciones de la página.

Paso 5

En este paso vamos a implementar los métodos que registrarán y mostrarán dos campos de ajuste: el campo Título del blog y el campo Color de fondo. Ambos campos pertenecen a la sección Opciones del tema.

1
/**

2
 * Function that will register admin page options.

3
 */
4
public function register_page_options() { 
5
    
6
	// Add Section for option fields

7
	add_settings_section( 'cpa_section', 'Theme Options', array( $this, 'display_section' ), __FILE__ ); // id, title, display cb, page

8
	
9
	// Add Title Field

10
	add_settings_field( 'cpa_title_field', 'Blog Title', array( $this, 'title_settings_field' ), __FILE__, 'cpa_section' ); // id, title, display cb, page, section

11
	
12
	// Add Background Color Field

13
	add_settings_field( 'cpa_bg_field', 'Background Color', array( $this, 'bg_settings_field' ), __FILE__, 'cpa_section' ); // id, title, display cb, page, section

14
	
15
	// Register Settings

16
	register_setting( __FILE__, 'cpa_settings_options', array( $this, 'validate_options' ) ); // option group, option name, sanitize cb	

17
}
18
19
/**

20
 * Functions that display the fields.

21
 */
22
public function title_settings_field() { 
23
	
24
	$val = ( isset( $this->options['title'] ) ) ? $this->options['title'] : '';
25
	echo '<input type="text" name="cpa_settings_options[title]" value="' . $val . '" />';
26
}   
27
28
public function bg_settings_field() { 
29
	
30
	$val = ( isset( $this->options['title'] ) ) ? $this->options['background'] : '';
31
	echo '<input type="text" name="cpa_settings_options[background]" value="' . $val . '" class="cpa-color-picker" >';
32
    
33
}

Paso 6

Estos pasos se centran en la validación. El siguiente código muestra cómo validar los dos campos antes de guardarlos.

1
/**

2
 * Function that will validate all fields.

3
 */
4
public function validate_options( $fields ) { 
5
    
6
	$valid_fields = array();
7
	
8
	// Validate Title Field

9
	$title = trim( $fields['title'] );
10
	$valid_fields['title'] = strip_tags( stripslashes( $title ) );
11
	
12
	// Validate Background Color

13
	$background = trim( $fields['background'] );
14
	$background = strip_tags( stripslashes( $background ) );
15
	
16
	// Check if is a valid hex color

17
	if( FALSE === $this->check_color( $background ) ) {
18
	
19
		// Set the error message

20
		add_settings_error( 'cpa_settings_options', 'cpa_bg_error', 'Insert a valid color for Background', 'error' ); // $setting, $code, $message, $type

21
		
22
		// Get the previous valid value

23
		$valid_fields['background'] = $this->options['background'];
24
	
25
	} else {
26
	
27
		$valid_fields['background'] = $background;	
28
	
29
	}
30
	
31
	return apply_filters( 'validate_options', $valid_fields, $fields);
32
}
33
34
/**

35
 * Function that will check if value is a valid HEX color.

36
 */
37
public function check_color( $value ) { 
38
	
39
	if ( preg_match( '/^#[a-f0-9]{6}$/i', $value ) ) { // if user insert a HEX color with #    	

40
		return true;
41
	}
42
	
43
	return false;
44
}

Si el usuario intenta insertar el código de color manualmente, el Selector de color le notificará que ha tecleado un valor incorrecto en el formulario de envío; sin embargo, el color, aunque sea erróneo, se guardará. La función check_color se ocupa de validar la entrada de color.

Paso 7

Este es el paso final en donde vamos a incluir nuestro archivo JavaScript que convertirá un simple campo de texto en un útil selector de color.

1
/**

2
 * Function that will add javascript file for Color Piker.

3
 */
4
public function enqueue_admin_js() { 
5
    
6
	// Make sure to add the wp-color-picker dependecy to js file

7
	wp_enqueue_script( 'cpa_custom_js', plugins_url( 'jquery.custom.js', __FILE__ ), array( 'jquery', 'wp-color-picker' ), '', true  );
8
}

Creemos el archivo jquery.custom.js.

1
(function( $ ) {
2
    $(function() {
3
        
4
        // Add Color Picker to all inputs that have 'color-field' class

5
        $( '.cpa-color-picker' ).wpColorPicker();
6
        
7
    });
8
})( jQuery );

Si intentas activar el plugin, deberías obtener una página en el escritorio con todos los campos como se muestra en la imagen inferior:

Página de administración final

¡Eso es todo!

En este tutorial, has aprendido cómo incluir el Selector de color proporcionado por WordPress. En la demostración del plugin he mostrado cómo puedes integrar el selector de color en un plugin real pero puedes usar la API en donde necesites como un metabox, un widget, etc.

El Selector de color funciona en la versión 3.5 y superiores de WordPress, pero si un usuario tiene una versión anterior tu código funcionará. Asegúrate de validar cada entrada de color usando el método check_color() que se muestra en el Paso 6.

Ahora tus plugins o temas serán más potentes y amigables para el usuario.

Advertisement
Did you find this post useful?
Want a weekly email summary?
Subscribe below and we’ll send you a weekly email summary of all new Code tutorials. Never miss out on learning about the next big thing.
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.