Home » WordPress » Cómo añadir colores personalizados a los temas de edición del sitio completo

Cómo añadir colores personalizados a los temas de edición del sitio completo

Usted probablemente ha notado que casi todos los bloques en el último editor de contenido de WordPress puede tener texto personalizado y colores de fondo. El editor de sitios de WordPress incluso le permite seleccionar colores para todo el sitio web.

Puede cambiar fácilmente esos colores en la configuración, pero no es conveniente buscar colores específicos en la paleta de colores una vez que desee añadirlos a otro bloque.

¿Estás creando un sitio web WordPress personalizado pero no sabes cómo añadirle tus propios colores? Por suerte, la mayoría de los nuevos temas de WordPress te permiten definir fácilmente tu propia paleta de colores. Así puedes reutilizar los mismos colores en todo el sitio sin tener que recordar códigos de color.

Hoy le mostraré cómo puede añadir sus propios colores a los temas de WordPress de edición de sitio completo en un par de minutos.

Cómo añadir colores personalizados a los temas de edición de sitios completos de WordPress

Best WordPress hosting 2024

Los temas de edición de sitios completos ya tienen al menos algunos colores definidos por defecto. Así que puede seleccionar fácilmente cualquier color que desee de la configuración de color sin recordar los códigos de color exactos. Como este ejemplo en WordPress Twenty Twenty tres tema:

how to set custom colors in wordpress

¿Pero cómo definir tus propios colores para que aparezcan en la misma caja de color? En realidad es más fácil de lo que piensas.

Primer paso – ir a Herramientas >> Editor de archivos de tema en el menú de administración de WordPress. Una vez allí abre el archivo theme.json en la parte derecha de la página.

Ahora busque la configuración de color en el código. Así es como se ve en el tema por defecto de WordPress:

		"color": {
			"palette": [
				{
					"color": "#ffffff",
					"name": "Base",
					"slug": "base"
				},
				{
					"color": "#000000",
					"name": "Contrast",
					"slug": "contrast"
				},
...

Como ves cada color tiene su código de color, nombre y slug. Vamos a añadir otro color – rojo (código #ff0000), y el nombre de color ImakeITwork:

{
   "color": "#FF0000",
   "name": "ImakeITwork",
   "slug": "imakeitwork"
}

Si no sabes dónde encontrar los códigos de color necesarios, puedes utilizar el selector de color incorporado en WordPress, o utilizar un sitio web como HTML Color Codes.

Así es como se ve el código en el archivo theme.json:

how to add custom color to wordpress full site editor theme

Puedes añadir tantos colores como quieras – simplemente dales un nombre único y un slug, y usa punto y coma entre { } paréntesis, como ves en el ejemplo de arriba.

Una vez que pulse Actualizar Archivo, los nuevos colores aparecerán en cualquier selector de color, en cualquier bloque de WordPress.

Eso es todo – ahora usted sabe cómo definir sus propios colores en cualquier tema de edición de sitio completo de WordPress.

¿Quieres aprender a añadir fuentes personalizadas a WordPress? Haga clic aquí

Tags:

Fathom analytics - privacy focused cookie-free website analytics

Most popular tutorials


Get our latest WordPress news and special offers from RockSolidWP!

Only useful WordPress and WooCommerce tips and tricks and exclusive offers for our readers once a month. No marketing nonsense.

Looking for reliable yet affordable WordPress hosting?
Hostinger is the way to go!

Get 10% OFF by using code IMAKEITWORK