Home » WordPress » Como adicionar cores personalizadas aos temas de edição do site completo

Como adicionar cores personalizadas aos temas de edição do site completo

Você provavelmente notou que quase todos os blocos do último editor de conteúdo WordPress podem ter texto e cores de fundo personalizados. O editor de site WordPress até permite que você selecione cores para todo o site.

Best WordPress hosting 2024

Você pode facilmente mudar essas cores em configurações, mas não é conveniente procurar por cores específicas na paleta de cores uma vez que você queira adicioná-las a mais um bloco.

Construindo um site WordPress personalizado mas não tem certeza de como adicionar suas próprias cores a ele? Felizmente, a maioria dos novos temas WordPress permite que você defina facilmente sua própria paleta de cores. Então você pode reutilizar as mesmas cores em todo o site sem se lembrar dos códigos de cores.

Hoje vou lhe mostrar como você pode adicionar suas próprias cores aos temas de edição completa do site do WordPress apenas em alguns minutos.

Como adicionar cores personalizadas ao tema de edição completa do site do WordPress

Os temas de edição completa do site já têm pelo menos poucas cores definidas por padrão. Assim, você pode selecionar facilmente qualquer cor que quiser a partir de configurações de cores sem se lembrar de códigos de cores exatos. Como este exemplo no WordPress Vinte e Três Temas:

how to set custom colors in wordpress

Mas como definir suas próprias cores para que elas apareçam na mesma caixa de cores? Na verdade, é mais fácil do que você imagina.

Primeiro passo – vá para Ferramentas >> Editor de Arquivos Temáticos no menu de administração do WordPress. Quando você estiver lá, abra o arquivo theme.json no lado direito da página.

Agora procure por configurações de cores no código. Aqui, como se parece com o tema padrão do WordPress:

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

Como você vê, cada cor tem seu código de cor, nome e lesma. Vamos adicionar outra cor – vermelho (código #ff0000), e vamos nomear a cor ImakeITwork:

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

Se você não souber onde encontrar os códigos de cor necessários, você pode usar o seletor de cores embutido no WordPress, ou usar um site como HTML Color Codes.

Aqui, como o código fica no arquivo real theme.json:

how to add custom color to wordpress full site editor theme

Você pode adicionar quantas cores quiser lá – basta dar-lhes um nome único e slug, e usar ponto-e-vírgula entre colchetes { }, como você vê no exemplo acima.

Uma vez que você acertar Update File, novas cores aparecerão em qualquer seletor de cores, em qualquer bloco do WordPress.

É isso – agora você sabe como definir suas próprias cores em qualquer tema de edição completa do site do WordPress.

Deseja aprender como adicionar fontes personalizadas ao WordPress? Clique aqui

Fathom analytics