¿Sabías que el nuevo editor de WordPress permite añadir una paleta de colores personalizada a tu tema? Aquí tienes el código para hacerlo en Genesis.
Gutenberg llega cargado de novedades. Pero para sacarle el máximo provecho a algunas de ellas, necesitas implementarlas en tu child theme.
Por ejemplo, el nuevo editor de WordPress ofrece por defecto una paleta de colores donde elegir el tono para bloques de texto, encabezados o botones.
Pero, si quieres, puedes limitar la paleta de colores, lo cual te ayuda a mantener una coherencia estética y le facilita el uso a tu cliente.
Y, en mi opinión, cualquier child theme moderno que se precie debería de implementarlo.
Además, es muy sencillo. Ya verás. 😉
Instrucciones para agregar una paleta de colores para Gutenberg en Genesis
1. Modifica el fichero funtions.php
Añade el siguiente fragmento en functions.php:
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
Usando este snippet, introduces los 3 colores elegidos (en este caso, blue, gray y black) en la paleta que se muestra en el editor. Por supuesto, te invito a seleccionar los que tú desees.
Pero aún puedes ir un paso más allá e incorporar a la paleta los colores destacados que hayas elegido desde el personalizador de WordPress.
En el caso de Genesis Sample, son dos: «link color» y «accent color».
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
Ahora, además de los colores que has insertado mediante código, también visualizas los colores destacados que sean escogidos desde el personalizador.
Y, ¿sabes qué?
Estos son campos dinámicos; es decir, cuando se cambia el color destacado desde el personalizador, ese cambio queda reflejado también en la paleta de colores del editor.
Ya tienes todos los ajustes necesarios para personalizar la paleta de colores.
Ahora solo te falta vincular esas opciones con cómo se mostrarán en la parte frontal de la web; o lo que es lo mismo, dar estilos.
2. Edita el fichero style.css
Para ello, introduce el siguiente snippet en style.css:
Para ver este código y los otros 2017 snippets de esta web,
identifícate o suscríbete aquí.
En este ejemplo he añadido 3 colores (blue, gray y black). Pero si has insertado más en el código de functions.php, recuerda agregarlos también en este bloque de CSS.
Si te fijas en las capturas de pantalla, este fragmento no elimina el selector de colores, por lo que el usuario seguirá teniendo la opción de escoger cualquier otro.
Sin embargo, si te interesa, también puedes eliminar el selector de colores de la paleta con un simple snippet.
Ten en cuenta que he utilizado Genesis Sample como ejemplo.
Para conseguir el efecto que deseas con cualquier otro child theme de Genesis, usa este código como punto de partida y ajústalo a tu tema con pequeñas modificaciones
Conclusiones
Tener una paleta de colores definida accesible desde el editor de WordPress te ayuda a mantener la coherencia visual de la web y le facilita su uso a tu cliente.
Además, como acabas de ver, puedes introducirla a cualquier plantilla de Genesis siguiendo unos pasos muy sencillos.
Si quieres más información sobre como adaptar los temas de Genesis a Gutenberg, échale un ojo a cómo añadir los nuevos formatos de imagen soportados por el editor.
También tienes la opción de consultar el tutorial que incluye todos los cambios que debes realizar para asegurarte de que tu child theme es compatible con el nuevo editor de WordPress.
¿Tienes alguna pregunta o quieres darme una sugerencia para próximos snippets? Cuéntamela en los comentarios.
Ventajas de ser suscriptor.😉