7 days of unlimited WordPress themes, plugins & graphics - for free!* Unlimited asset downloads! Start 7-Day Free Trial
Advertisement
  1. Web Design
  2. WordPress Gutenberg

Cómo crear una paleta de colores personalizada en WordPress Gutenberg

Scroll to top
Read Time: 6 mins

Spanish (Español) translation by Alfredo Nicolas Tello (you can also view the original English article)

En este tutorial aprenderás a crear paletas de colores personalizadas para WordPress Gutenberg, haciendo que tu plantilla sea aún más flexible.

Las paletas de colores son un conjunto de muestras que se encuentran en la barra lateral del editor y que te permiten elegir entre colores predefinidos y aplicarlos a los elementos de tu página. Además, hay una herramienta de selección de colores para escoger el que más te guste (removeremos esta opción):

gutenberg palettesgutenberg palettesgutenberg palettes

Usando esta herramienta puedes cambiar la apariencia del texto, el fondo, los elementos de la interfaz de usuario, como los botones, y mucho más, todo desde el editor de páginas de Gutenberg. Pero, ¿cómo puedes agregar tus propios colores a estas paletas? ¿Y cómo se puede limitar lo que los usuarios pueden escoger por sí solos? ¡Vamos a averiguarlo!

Paletas de colores personalizadas en WordPress Gutenberg

1. Desactiva el selector de color personalizado

Cuando estés editando ciertos elementos en el editor de Gutenberg te encontrarás que, debajo de las muestras de color definidas, tienes la opción de Color personalizado. Al hacer click se abrirá un selector de colores que te permitirá elegir cualquier color que se te ocurra.

custom color picker in gutenbergcustom color picker in gutenbergcustom color picker in gutenberg

Como diseñador de plantillas, esta es una opción peligrosa de ofrecer a los usuarios. Permitir este tipo de libertad estética puede hacer que el contenido del sitio web vaya más allá de los esquemas de color que hayas definido en tu plantilla. Los usuarios pueden elegir colores que desentonen con tu plantilla, colores que dificulten la lectura (un problema de accesibilidad), o escoger una enorme gama de colores y arruinar cualquier continuidad en el sitio web.

Entonces, para este primer paso, vamos a eliminar el selector de color personalizado por completo.

Añade un Snippet al archivo Functions.php de tu plantilla

Encuentra el archivo functions.php de tu plantilla. Estará en wp-content > themes > your-theme o wp-content > themes > your-child-theme.

En este ejemplo estoy usando la plantilla twentytwentyone que viene con cada nueva instalación de WordPress actualmente. Al abrir el archivo functions.php hay una función llamada

Antes del cierre con corchetes de dicha función añadimos la siguiente línea de código:

Nota: puede ser que tu functions.php no tenga este tipo de función a configurar, pero es importante que coloques esta línea de código en algún lugar que sea marcado por WordPress. En nuestro caso, después de aplicar la función, hay un add_action para hacerlo.

¡Eso es todo! Si vuelves al editor de Gutenberg y le das a actualizar, verás que se ha eliminado la opción de color personalizado.

2. Define tu propia paleta de colores

Para añadir nuestros propios colores a las paletas disponibles volvemos a nuestro functions.php.

De vuelta en Functions.php

En la misma función que estábamos usando antes, encima del snippet donde desactivamos el selector de color personalizado, podemos crear un array de valores de color.

Nuevamente, en la plantilla twentytwentyone, ya podemos ver un montón de colores definidos dentro de la función twenty_twenty_one_setup(). Se definen en otra función que se verá así:

El array aquí es el array de colores, y cada color se define a su vez con un array de pares nombre:valor. Este es el aspecto del código existente en twentytwentyone:

Arrays de colores

Para cada color que quieras tener en tu paleta añadirás un array a esta estructura. Cada array tiene:

  • name: el nombre que quieres dar a tu color, una etiqueta legible para el ser humano (incluye el dominio del texto para su correcta traducción)
  • slug: cómo se hace referencia en el código CSS (más sobre esto a continuación)
  • color: el valor hex del color en cuestión.

En el ejemplo anterior notarás que los valores de color están usando una variable PHP (por ejemplo: $dark_gray). Esto no es obligatorio, pero puede tener sentido definir los colores en variables, en caso de que se usen en otra parte del código. La plantilla twentytwentyone utiliza una colección de variables como ésta:

Añadamos nuestro propio color

Vamos a añadir el nuestro definiendo primero una variable de color (este es un color rojo intenso):

Entonces añadiremos un array a la lista existente (en tu caso habrás tenido que escribir tú mismo la función editor-color-palette):

Ahora, si actualizas el editor de Gutenberg, verás que se ha añadido una muestra de color a la paleta (tanto los colores del texto como los del fondo) y podrás utilizarla en tu contenido.

our custom color in the gutenberg paletteour custom color in the gutenberg paletteour custom color in the gutenberg palette

¡Misión cumplida! Bueno, no del todo.

3. Escribe el CSS correspondiente

Puedes usar el color en tu contenido en el back end, en el editor Gutenberg, pero no lo verás en el front end. Esto es porque ahora tenemos que crear una regla CSS para reflejarlo.

Por ejemplo, si aplicas el color "Adi Custom" a algún texto, lo guardas y luego pulsas actualizar en la parte frontal, no verás ningún cambio. Pero si inspeccionas el código verás que se ha aplicado una nueva clase al texto que has cambiado:

Reconocerás el slug adicustom que hay entre ese nombre de clase, así que todo lo que tenemos que hacer es definir un par de reglas usando ese selector. Necesitamos definir uno para cuando se utiliza el color del texto, y otro para cuando se utiliza el color de fondo, así que lo hacemos en el archivo style.css de nuestra plantilla. Por ejemplo:

Para una capa extra de control puede querer usar variables CSS personalizadas para este paso. Consulte mi breve curso para aprender todo sobre ellos.

front end CSSfront end CSSfront end CSS

Puntos clave

¡Y ya está! Este sencillo truco te dará, como desarrollador de plantillas, un poco más de control sobre cómo se utiliza tu plantilla. Repasemos lo que hemos aprendido:

  1. Limitar los colores disponibles en Gutenberg te permite mantenerte dentro de las directrices de la marca y evita problemas de accesibilidad.
  2. Desactiva el selector de color personalizado y define tu nueva paleta en el archivo functions.php de tu plantilla.
  3. Recuerda escribir el CSS correspondiente para los nuevos colores dentro del archivo style.css de tu plantilla.

Más tutoriales de Gutenberg WordPress

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 Web Design tutorials. Never miss out on learning about the next big thing.
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.