Spanish (Español) translation by Eva Collados Pascual (you can also view the original English article)
En la primera parte de esta serie formada por dos artículos, te mostré cómo crear los ajustes y controles para crear un esquema de color en el personalizador de temas de WordPress. En esta parte, los usarás para definir CSS en el tema en función de lo que los usuarios seleccionen con el personalizador.
Consta de cuatro pasos:
- Definición de una variable en función de cada una de las opciones que los usuarios seleccionen en el personalizador
- Usar el valor de estas variables para definir CSS
- Añadir clases al elemento body según las selecciones de los botones de radio en la sección 'Solid Backgrounds' (Fondos sólidos)
- Usar estas clases para definir el CSS para la cabecera y el pie de página.
Empezaremos definiendo variables para los colores.
Definir variables para los colores en el esquema de color
En el archivo customizer.php que creaste en la anterior parte de este tutorial, añade una nueva función:
1 |
function wptutsplus_customize_colors() { |
2 |
|
3 |
}
|
4 |
add_action( 'wp_head', 'wptutsplus_customize_colors' ); |
Esta función contendrá todo lo que necesitas para generar CSS basado en las selecciones realizadas en el personalizador de temas, y se conecta al gancho de acción wp_head para que los estilos se añadan a la sección <head> de la página que se esté mostrando.
Añadir CSS en línea como este normalmente no es la mejor práctica, pero por ahora es la única manera de añadir colores a través del personalizador de temas, por tanto, lo haremos así.
Ahora dentro de la función, añade las variables para los cuatro colores:
1 |
/**********************
|
2 |
text colors
|
3 |
**********************/
|
4 |
// main color
|
5 |
$color_scheme_1 = get_option( 'color_scheme_1' ); |
6 |
|
7 |
// secondary color
|
8 |
$color_scheme_2 = get_option( 'color_scheme_2' ); |
9 |
|
10 |
// link color
|
11 |
$link_color = get_option( 'link_color' ); |
12 |
|
13 |
// hover or active link color
|
14 |
$hover_link_color = get_option( 'hover_link_color' ); |
Esto define cuatro variables basadas en las opciones de cada uno de los ajustes de color en el personalizador de temas. El valor de cada variable será un valor hexadecimal que luego podrás utilizar en tu CSS.
Añadir estilo basado en tu esquema de color
Ahora necesitas añadir el CSS para los cuatro colores, cada uno de los cuales se aplicará a varios elementos en el tema.
Nota: El siguiente estilo funciona en mi tema porque utiliza todos estos elementos o clases. Si tu tema utiliza diferentes elementos y/o clases, tendrás que modificar el estilo en conformidad.
Todavía dentro de la función wptutsplus_customize_colors() y después del código de las variables que acabas de definir, añade lo siguiente:
1 |
/**************************************** |
2 |
styling |
3 |
****************************************/ |
4 |
?> |
5 |
<style>
|
6 |
|
7 |
|
8 |
/* color scheme */
|
9 |
|
10 |
/* main color */
|
11 |
#site-title a, h1, h2, h2.page-title, h2.post-title, h2 a:link, h2 a:visited, .menu.main a:link, .menu.main a:visited, footer h3 { |
12 |
color: <?php echo $color_scheme_1; ?>; |
13 |
}
|
14 |
|
15 |
/* secondary color */
|
16 |
#site-description, .sidebar h3, h3, h5, .menu.main a:active, .menu.main a:hover { |
17 |
color: <?php echo $color_scheme_2; ?>; |
18 |
}
|
19 |
.menu.main, |
20 |
.fatfooter { |
21 |
border-top: 1px solid <?php echo $color_scheme_2; ?>; |
22 |
}
|
23 |
.menu.main { |
24 |
border-bottom: 1px solid <?php echo $color_scheme_2; ?>; |
25 |
}
|
26 |
.fatfooter { |
27 |
border-bottom: 1px solid <?php echo $color_scheme_2; ?>; |
28 |
}
|
29 |
|
30 |
/* links color */
|
31 |
a:link, a:visited { |
32 |
color: <?php echo $link_color; ?>; |
33 |
}
|
34 |
|
35 |
/* hover links color */
|
36 |
a:hover, a:active { |
37 |
color: <?php echo $hover_link_color; ?>; |
38 |
}
|
39 |
|
40 |
</style>
|
41 |
|
42 |
<?php
|
Esto añade estilo para cada uno de los cuatro colores haciendo eco del valor de cada variable como el valor de la declaración de color. También utiliza los colores para definir el color de los bordes. Podrías modificar esto para añadir fondos, degradados y mucho más.
Ahora, si abres el personalizador de temas y utiliza los selectores de color, los colores cambiarán:
No puedo afirmar que el anterior esquema de color sea el más hermoso, ¡pero sí demuestra que los selectores de color están funcionando!
Añadir CSS para los fondos sólidos
Por tanto ese es el esquema de color principal en funcionamiento. Ahora tenemos que añadir CSS para los fondos sólidos.
Esto funciona de forma ligeramente distinta: debes añadir una clase al elemento body en función de si el usuario ha seleccionado 'sí' o 'no', y esto se usará para el estilo.
Añadir una clase al elemento body
Para añadir una clase al elemento body, utiliza el filtro body_class.
Crea una nueva función en tu archivo customizer.php de la siguiente manera:
1 |
/*******************************************************************************
|
2 |
add class to body if backgrounds turned on using the body_class filter
|
3 |
********************************************************************************/
|
4 |
function wptutsplus_add_background_color_style( $classes ) { |
5 |
|
6 |
// set the header background
|
7 |
$header_background = get_theme_mod( 'header-background' ); |
8 |
$classes[] = $header_background; |
9 |
|
10 |
// set the footer background
|
11 |
$footer_background = get_theme_mod( 'footer-background' ); |
12 |
$classes[] = $footer_background; |
13 |
|
14 |
return $classes; |
15 |
|
16 |
}
|
17 |
add_filter('body_class', 'wptutsplus_add_background_color_style'); |
Esto utiliza get_theme_mod() para capturar la opción establecida por los botones de opción, las devuelve como una variable de $classes y, a continuación, añade el valor de esa variable al elemento body mediante el filtro body_class. El valor de esta opción se basará en los argumentos que definiste para la matriz 'choices' cuando creaste los ajustes de los botones de opción. Esto significa que será:
- Para la cabecera:
header-background-offoheader-background-on - Para el pie de página:
footer-background-offofooter-background-on.
El elemento body ahora tendrá dos de estas clases en función de las opciones seleccionadas. El siguiente paso es utilizar estas clases para definir los estilos relevantes.
Adición de estilo para fondos sólidos
Los estilos para el fondo sólido van dentro del elemento <style> que ya has añadido a la función wptutsplus_customize_colors():
1 |
/* background colors */
|
2 |
|
3 |
/* header */
|
4 |
.header-background-on .header-wrapper { |
5 |
background-color: <?php echo $color_scheme_1; ?>; |
6 |
}
|
7 |
.header-background-on #site-title a, .header-background-on h1, .header-background-on #site-description, .header-background-on address, .header-background-on header a:link, .header-background-on header a:visited, .header-background-on header a:active, .header-background-on header a:hover { |
8 |
color: #fff; |
9 |
}
|
10 |
.header-background-on header a:link, .header-background-on header a:visited { |
11 |
text-decoration: underline; |
12 |
}
|
13 |
.header-background-on header a:active, .header-background-on header a:hover { |
14 |
text-decoration: none; |
15 |
}
|
16 |
.header-background-on .menu.main { |
17 |
border: none; |
18 |
}
|
19 |
|
20 |
/* footer */
|
21 |
.footer-background-on footer { |
22 |
background-color: <?php echo $color_scheme_1; ?>; |
23 |
}
|
24 |
.footer-background-on footer, .footer-background-on footer h3, .footer-background-on footer a:link, .footer-background-on footer a:visited, .footer-background-on footer a:active, .footer-background-on footer a:hover { |
25 |
color: #fff; |
26 |
}
|
27 |
.footer-background-on footer a:link, .footer-background-on footer a:visited { |
28 |
text-decoration: underline; |
29 |
}
|
30 |
.footer-background-on footer a:active, .footer-background-on footer a:hover { |
31 |
text-decoration: none; |
32 |
}
|
33 |
.footer-background-on .fatfooter { |
34 |
border: none; |
35 |
}
|
Esto define los colores de fondo y los colores del texto en función de si cada cabecera y pie de página tienen un fondo sólido.
Como puedes ver, he utilizado la variable $color_scheme_1 para los fondos, de modo que cada uno tendrá el color principal del esquema de color como fondo, podrías cambiar esto al color secundario o crear ajustes de color adicionales para los fondos si lo deseas. Alternativamente, podrías dar a los usuarios la opción de elegir entre el colore principal y secundario añadiendo botones de opción adicionales.
La función wptutsplus_customize_colors() al completo ahora tendrá este aspecto:
1 |
function wptutsplus_customize_colors() { |
2 |
|
3 |
/**********************
|
4 |
text colors
|
5 |
**********************/
|
6 |
// main color
|
7 |
$color_scheme_1 = get_option( 'color_scheme_1' ); |
8 |
|
9 |
// secondary color
|
10 |
$color_scheme_2 = get_option( 'color_scheme_2' ); |
11 |
|
12 |
// link color
|
13 |
$link_color = get_option( 'link_color' ); |
14 |
|
15 |
// hover or active link color
|
16 |
$hover_link_color = get_option( 'hover_link_color' ); |
17 |
|
18 |
|
19 |
|
20 |
|
21 |
/****************************************
|
22 |
styling
|
23 |
****************************************/
|
24 |
?>
|
25 |
<style>
|
26 |
|
27 |
|
28 |
/* color scheme */
|
29 |
|
30 |
/* main color */
|
31 |
#site-title a, h1, h2, h2.page-title, h2.post-title, h2 a:link, h2 a:visited, .menu.main a:link, .menu.main a:visited, footer h3 { |
32 |
color: <?php echo $color_scheme_1; ?>; |
33 |
}
|
34 |
|
35 |
/* secondary color */
|
36 |
#site-description, .sidebar h3, h3, h5, .menu.main a:active, .menu.main a:hover { |
37 |
color: <?php echo $color_scheme_2; ?>; |
38 |
}
|
39 |
.menu.main, |
40 |
.fatfooter { |
41 |
border-top: 1px solid <?php echo $color_scheme_2; ?>; |
42 |
}
|
43 |
.menu.main { |
44 |
border-bottom: 1px solid <?php echo $color_scheme_2; ?>; |
45 |
}
|
46 |
.fatfooter { |
47 |
border-bottom: 1px solid <?php echo $color_scheme_2; ?>; |
48 |
}
|
49 |
|
50 |
/* links color */
|
51 |
a:link, a:visited { |
52 |
color: <?php echo $link_color; ?>; |
53 |
}
|
54 |
|
55 |
/* hover links color */
|
56 |
a:hover, a:active { |
57 |
color: <?php echo $hover_link_color; ?>; |
58 |
}
|
59 |
|
60 |
|
61 |
/* background colors */
|
62 |
|
63 |
/* header */
|
64 |
.header-background-on .header-wrapper { |
65 |
background-color: <?php echo $color_scheme_1; ?>; |
66 |
}
|
67 |
.header-background-on #site-title a, .header-background-on h1, .header-background-on #site-description, .header-background-on address, .header-background-on header a:link, .header-background-on header a:visited, .header-background-on header a:active, .header-background-on header a:hover { |
68 |
color: #fff; |
69 |
}
|
70 |
.header-background-on header a:link, .header-background-on header a:visited { |
71 |
text-decoration: underline; |
72 |
}
|
73 |
.header-background-on header a:active, .header-background-on header a:hover { |
74 |
text-decoration: none; |
75 |
}
|
76 |
.header-background-on .menu.main { |
77 |
border: none; |
78 |
}
|
79 |
|
80 |
/* footer */
|
81 |
.footer-background-on footer { |
82 |
background-color: <?php echo $color_scheme_1; ?>; |
83 |
}
|
84 |
.footer-background-on footer, .footer-background-on footer h3, .footer-background-on footer a:link, .footer-background-on footer a:visited, .footer-background-on footer a:active, .footer-background-on footer a:hover { |
85 |
color: #fff; |
86 |
}
|
87 |
.footer-background-on footer a:link, .footer-background-on footer a:visited { |
88 |
text-decoration: underline; |
89 |
}
|
90 |
.footer-background-on footer a:active, .footer-background-on footer a:hover { |
91 |
text-decoration: none; |
92 |
}
|
93 |
.footer-background-on .fatfooter { |
94 |
border: none; |
95 |
}
|
96 |
|
97 |
</style>
|
98 |
|
99 |
<?php } |
Y cuando utilices el personalizador de temas para añadir colores de fondo, este cambiará los colores.
Aquí hay un conjunto de colores de fondo para la cabecera y el pie de página:
Y aquí está el color de fondo sólo en el pie de página (que creo que se ve mejor!):
Resumen
En esta segunda parte has aprendido a añadir CSS para tu esquema de color al tema de manera que cuando los usuarios seleccionen colores y opciones en el personalizador, estas se trasladen en consecuencia al tema.
Podrías llevar esto más allá fácilmente - tal vez mediante el uso de botones de radio para proporcionar opciones de diseño o dando a los usuarios una opción en cuanto a qué colores de su esquema se utilizan en cada lugar. Sin embargo, te recomiendo no complicar las cosas demasiado, en mi opinión, el beneficio de este enfoque es que mantiene las cosas simples.
By
