Settings y Controls para una Paleta de Colores en el Personalizador de Temas

El personalizador de temas es una gran herramienta para dar más libertad a tus usuarios para retocar un tema sin tener que editar el código. Pero si deseas permitir a los usuarios cambiar los colores de tu sitio, las cosas pueden complicarse. Añadir un control para cada uno de los elemento que puedan modificar haría que las cosas acabasen siendo engorrosas y los usuarios podrían terminar con un sitio que parezca un estridente desastre.

En lugar de añadir un montón de controles para todos los elementos que desees que los usuarios puedan cambiar, puedes crear simplemente un esquema de color, lo que permitirá a los usuarios seleccionar algunos colores y luego aplicarlos a una serie de elementos en el tema.

En este tutorial, te guiaré a través de la primera parte de este proceso, que consiste en configurar los controles del personalizador de temas. En la siguiente parte, te mostraré cómo vincular estos controles a tu tema para que cuando los usuarios seleccionen colores, estos cambios se trasladen al tema.

El punto de partida

Comienza instalando y activando el tema de inicio. El personalizador de temas tendrá el siguiente aspecto:

Después de completar el tutorial, el personalizador tendrá dos secciones adicionales.

Configuración del personalizador de temas

El primer paso es crear un archivo en el tema que contenga las funciones del personalizador. Voy a trabajar con un tema inicial básico, basado en el tema creado durante mi serie sobre la creación de un tema de WordPress a partir de HTML estático. He realizado algunas pequeñas modificaciones en él de manera que funcione con las funciones de esquema de color, por lo que si quieres practicar a lo largo de este tutorial, te sugiero que descargues el tema de inicio.

En la carpeta principal de tu tema, crea una carpeta llamada inc y en ella, crea un archivo llamado customizer.php.

Abre tu archivo functions.php y añade lo siguiente, esto incluirá el nuevo archivo que acabas de crear:

1

include_once( 'inc/customizer.php' );

Ahora en tu archivo customizer.php, añade esta función:

1

function wptutsplus_customize_register( $wp_customize ) {

2

3

}

4

add_action( 'customize_register', 'wptutsplus_customize_register' );

Esto crea una función que contendrá todos los ajustes y controles, y la engancha al gancho de acción customize_register. ¡Tu tema está listo!

Creación de ajustes y controles de esquema de color

El primer paso es añadir la configuración y los controles para tu esquema de color. Añadirás controles para cuatro selectores de color, el color principal, el color secundario y dos colores para los vínculos.

Añadir una nueva sección

Dentro de la función que acabas de crear, añade lo siguiente:

1

/*******************************************

2

Color scheme

3

********************************************/

4

5

// add the section to contain the settings

6

$wp_customize->add_section( 'textcolors' , array(

7

    'title' =>  'Color Scheme',

8

) );

Esto crea una sección vacía para los controles del esquema de color.

Definición de argumentos para tus colores

Inmediatamente debajo, añade:

1

// main color ( site title, h1, h2, h4. h6, widget headings, nav links, footer headings )

2

$txtcolors[] = array(

3

	'slug'=>'color_scheme_1', 

4

	'default' => '#000',

5

	'label' => 'Main Color'

6

);

7

8

// secondary color ( site description, sidebar headings, h3, h5, nav links on hover )

9

$txtcolors[] = array(

10

	'slug'=>'color_scheme_2', 

11

	'default' => '#666',

12

	'label' => 'Secondary Color'

13

);

14

15

// link color

16

$txtcolors[] = array(

17

	'slug'=>'link_color', 

18

	'default' => '#008AB7',

19

	'label' => 'Link Color'

20

);

21

22

// link color ( hover, active )

23

$txtcolors[] = array(

24

	'slug'=>'hover_link_color', 

25

	'default' => '#9e4059',

26

	'label' => 'Link Color (on hover)'

27

);

Esto añade una nueva sección al personalizador de temas llamado 'Color Scheme' (Esquema de color). A continuación, configura los argumentos para los cuatro colores con los que trabajarás: un slug, el valor predeterminado y la etiqueta. El valor predeterminado es el color utilizado en el tema, por lo que es posible que desees cambiar el tuyo por los colores que usa tu tema.

Creación de ajustes de color

A continuación, debes crear los ajustes para tus colores utilizando los argumentos que acabas de definir. Debajo del último bloque de código, escribe:

1

// add the settings and controls for each color

2

foreach( $txtcolors as $txtcolor ) {

3

4

    // SETTINGS

5

	$wp_customize->add_setting(

6

		$txtcolor['slug'], array(

7

			'default' => $txtcolor['default'],

8

			'type' => 'option', 

9

			'capability' =>	'edit_theme_options'

10

		)

11

	);

12

13

}

Esto utiliza una instrucción foreach que trabajará a través de cada uno de los colores que acabas de definir, creando una configuración para cada uno utilizando los argumentos definidos. Pero todavía tienes que añadir controles para que los usuarios puedan interactuar con estos ajustes mediante el personalizador de temas.

Adición de controles

Dentro de los símbolos de paréntesis de foreach y bajo la función add_setting() que acabas de añadir, inserta lo siguiente:

1

// CONTROLS

2

$wp_customize->add_control(

3

    new WP_Customize_Color_Control(

4

		$wp_customize,

5

		$txtcolor['slug'], 

6

		array('label' => $txtcolor['label'], 

7

		'section' => 'textcolors',

8

		'settings' => $txtcolor['slug'])

9

	)

10

);

Esto añade un selector de color para cada uno de tus colores, utilizando la función WP_Customize_Color_Control(), que crea selectores de color para el personalizador de temas.

Toda tu declaración foreach tendrá ahora este aspecto:

1

// add the settings and controls for each color

2

foreach( $txtcolors as $txtcolor ) {

3

4

    // SETTINGS

5

	$wp_customize->add_setting(

6

		$txtcolor['slug'], array(

7

			'default' => $txtcolor['default'],

8

			'type' => 'option', 

9

			'capability' => 

10

			'edit_theme_options'

11

		)

12

	);

13

	// CONTROLS

14

	$wp_customize->add_control(

15

		new WP_Customize_Color_Control(

16

			$wp_customize,

17

			$txtcolor['slug'], 

18

			array('label' => $txtcolor['label'], 

19

			'section' => 'textcolors',

20

			'settings' => $txtcolor['slug'])

21

		)

22

	);

23

}

Ahora podrás ver tu nueva sección cuando abras el personalizador de temas con tu tema activado:

Y cuando expandas uno de los controles, podrás ver el selector de color:

Por el momento nada de lo que hagas con el selector de color se reflejará en tu tema, ya que no has añadido ningún CSS para que funcione, llegaremos a eso en la segunda parte de esta serie. Por ahora vamos a añadir otra sección para dar a los usuarios un poco más de control sobre tu esquema de color.

Creación de ajustes y controles de fondo sólido

La siguiente sección no permitirá a los usuarios elegir colores, sino que les dará la opción de añadir un fondo sólido a la cabecera y/o al pie de página de su sitio. Si seleccionan esta opción, los colores del fondo y del texto de esos elementos cambiarán.

Debajo del código que acabas de añadir, pero todavía dentro de tu función wptutsplus_customize_register(), añade lo siguiente:

1

/**************************************

2

Solid background colors

3

***************************************/

4

// add the section to contain the settings

5

$wp_customize->add_section( 'background' , array(

6

    'title' =>  'Solid Backgrounds',

7

) );

8

9

10

// add the setting for the header background

11

$wp_customize->add_setting( 'header-background' );

12

13

// add the control for the header background

14

$wp_customize->add_control( 'header-background', array(

15

	'label'      => 'Add a solid background to the header?',

16

	'section'    => 'background',

17

	'settings'   => 'header-background',

18

	'type'       => 'radio',

19

	'choices'    => array(

20

		'header-background-off'   => 'no',

21

		'header-background-on'  => 'yes',

22

) ) );

23

24

25

// add the setting for the footer background

26

$wp_customize->add_setting( 'footer-background' );

27

28

// add the control for the footer background

29

$wp_customize->add_control( 'footer-background', array(

30

	'label'      => 'Add a solid background to the footer?',

31

	'section'    => 'background',

32

	'settings'   => 'footer-background',

33

	'type'       => 'radio',

34

	'choices'    => array(

35

		'footer-background-off'   => 'no',

36

		'footer-background-on'  => 'yes',

37

		) 

38

	) 

39

);

Esto añade una segunda nueva sección llamada 'Solid Backgrounds' (Fondos sólidos) y luego le añade dos controles, que son botones de radio. En cada caso hay dos opciones: sí y no. En la segunda parte de esta serie te mostraré cómo definir variables basadas en esas opciones y usarlas para alterar el CSS en el tema.

Ahora puedes ver la nueva sección en el personalizador de temas:

Una vez más, nada sucederá si seleccionas uno de los botones de radio ya que aún no has vinculado esto al CSS del tema, pero llegaremos a eso.

Resumen

En esta primera parte, has añadido los ajustes y los controles necesarios para crear la interfaz del personalizador del tema para tu esquema de color.

En la siguiente parte te mostraré cómo definir variables en función de las opciones que hagan los usuarios en el personalizador de temas y, a continuación, usaré esas variables para establecer el CSS.