Como Personalizar a Cor de Fundo do Editor de Blocos do WordPress

Houve um tempo em que mudar as cores de fundo no WordPress significava mexer no código e torcer para que nada quebrasse. Lembramos bem desses dias. O WordPress evoluiu muito desde então, e o editor de blocos tornou a personalização mais fácil do que nunca.

Ainda assim, muitos proprietários de sites lutam para que as cores de fundo fiquem exatamente como desejam.

Após gerenciar vários sites WordPress e ajudar milhares de usuários, aprendemos as maneiras mais simples e confiáveis de lidar com essas alterações.

Neste guia, mostraremos exatamente como alterar as cores de fundo no editor de blocos do WordPress usando métodos que funcionam para qualquer tema e nível de habilidade.

Por Que Alterar a Cor de Fundo do Editor de Blocos no WordPress?

Você pode querer alterar a cor de fundo do editor de blocos do WordPress por vários motivos.

Por exemplo, a maioria dos temas modernos do WordPress usa a mesma cor de fundo para o editor de blocos que o site ativo, incluindo OceanWP, GeneratePress e outros.

No entanto, se o seu tema WordPress não usar as mesmas cores, a aparência da sua postagem dentro do editor será bem diferente do que seus usuários verão no site ativo.

Outra razão pode ser simplesmente o seu conforto pessoal.

Se você passa muitas horas escrevendo, encarar uma tela branca brilhante pode ser cansativo para os olhos. Mudar o fundo do editor para uma cor mais suave pode tornar seu tempo de trabalho muito mais agradável.

Dito isso, vamos ver como você pode facilmente alterar a cor de fundo do editor do WordPress.

Como Alterar a Cor de Fundo do Editor do WordPress

Você pode alterar a cor de fundo do editor do WordPress adicionando código personalizado ao arquivo functions.php do seu tema.

No entanto, mesmo o menor erro no código pode quebrar seu site e torná-lo inacessível.

É por isso que recomendamos o uso do plugin WPCode.

Após testes completos, concluímos que esta é a maneira mais fácil e segura de adicionar código personalizado ao seu site WordPress. Para saber mais, veja nossa análise do WPCode.

Primeiro, você precisa instalar e ativar o plugin WPCode. Para mais instruções, por favor, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, visite a página Snippets de Código » +Adicionar Snippet na barra lateral de administração do WordPress.

A partir daqui, clique no botão ‘Usar Snippet’ na opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’.

Isso o levará à página ‘Criar Snippet Personalizado’, onde você pode começar digitando um nome para seu snippet de código. Isso é apenas para você e pode ser qualquer coisa que o ajude a identificar o código.

Em seguida, selecione ‘PHP Snippet’ no prompt que aparece após clicar no menu ‘Code Type’ no canto superior direito da tela

Depois disso, copie e cole o seguinte código na caixa ‘Prévia do Código’:

add_action( 'admin_footer', function() {
	?>
	<style>
		.editor-styles-wrapper {
			background-color: #bee0ec;
		}
	</style>
	<?php
});

Este trecho de código faz duas coisas simples. A parte add_action diz ao WordPress para adicionar nossa estilização personalizada ao rodapé da área administrativa.

Dentro disso, o código CSS tem como alvo o contêiner principal do editor de blocos (.editor-styles-wrapper) e define seu background-color para um novo código hexadecimal.

Depois de fazer isso, procure o seguinte código no trecho PHP que você acabou de colar:

background-color: #bee0ec;

Em seguida, você precisa adicionar o código hexadecimal da sua cor preferida ao lado da opção de cor de fundo.

Se você não quiser usar um código hexadecimal, pode usar alguns nomes de cores básicos, como 'white' ou 'blue', em vez disso.

Depois disso, role para baixo até a seção ‘Insertion’ e escolha a opção ‘Auto Insert’.

Em seguida, você deve selecionar o ‘Location’ do snippet de código como ‘Admin Only’ no menu suspenso.

Depois disso, volte para o topo da página e alterne o switch ‘Inactive’ para ‘Active’.

Finalmente, não se esqueça de clicar no botão ‘Save Snippet’ para salvar suas alterações.

Agora, visite o editor de blocos na barra lateral de administração.

É assim que o editor de blocos apareceu em nosso site após adicionar o snippet de código PHP.

Tutorial em Vídeo

Se você preferir assistir a um vídeo, confira nosso tutorial no YouTube sobre como personalizar a cor de fundo do editor de blocos do WordPress:

Método Bônus: Altere a Cor de Fundo no Seu Site Ao Vivo

Se você quiser alterar a cor de fundo que seus visitantes veem em seu site ao vivo, o método dependerá do seu tema WordPress.

O WordPress tem dois tipos de temas: temas clássicos e temas de blocos mais recentes. Mostraremos as duas maneiras.

Método 1: Usando o Personalizador de Tema (Para Temas Clássicos)

A maioria dos temas clássicos usa o Personalizador de Tema para alterações de cor. Você pode acessá-lo navegando para Aparência » Personalizar no seu painel do WordPress.

Assim que o Personalizador carregar, procure por uma seção chamada 'Cores', 'Cores e Modo Escuro' ou algo semelhante. O nome exato e a localização dessas configurações podem variar de tema para tema.

Dentro dela, você deve encontrar uma opção para 'Cor de Fundo' que permitirá usar um seletor de cores para fazer suas alterações. Quando estiver satisfeito com o resultado, basta clicar no botão 'Publicar' para salvar.

Método 2: Usando o Editor de Site Completo (Para Temas de Blocos)

Se você estiver usando um tema de bloco moderno, você fará essas alterações no Editor de Site Completo. Para acessá-lo, vá para Aparência » Editor na barra lateral do seu administrador.

No editor, clique no ícone de ‘Estilos’ no lado direito (parece um círculo meio preenchido). Isso abrirá o painel de estilos globais.

A partir daqui, clique em ‘Cores’ e depois selecione a opção ‘Fundo’.

Agora você pode escolher uma nova cor de fundo para todo o seu site. O editor mostrará uma prévia ao vivo, e você pode clicar em ‘Salvar’ quando terminar.

Para um guia mais detalhado sobre ambos os métodos, você pode ver nosso guia para iniciantes sobre como personalizar cores no seu site WordPress.

Perguntas Frequentes Sobre a Mudança do Fundo do Editor

Aqui estão algumas perguntas que nossos leitores frequentemente fazem sobre como alterar a cor de fundo do editor do WordPress:

Este trecho de código deixará meu site mais lento?

Não, este código específico não deixará seu site mais lento. Como definimos o trecho do WPCode para carregar apenas na área 'Somente Administrador', ele não adiciona nenhum código extra ao front-end do seu site. Ele carrega apenas para usuários logados que estão usando ativamente o editor de blocos.

Posso usar um gradiente ou uma imagem para o fundo do editor em vez de uma cor sólida?

Sim, você pode. Isso requer uma pequena alteração no código CSS. Em vez de background-color, você usaria a propriedade background.

Por exemplo, para adicionar um gradiente linear simples, seu CSS dentro do trecho pode parecer com isto:

.editor-styles-wrapper { background: linear-gradient(to right, #e6dada, #274046); }

Você pode usar geradores de gradiente CSS online para criar estilos mais complexos.

O código não funcionou. O que devo verificar primeiro?

Se a cor não estiver mudando, primeiro verifique as configurações do seu trecho do WPCode. Certifique-se de que o alternador no topo esteja definido como 'Ativo' e que a localização de Inserção esteja definida como 'Somente Administrador'.

Além disso, verifique o próprio código em busca de erros de digitação, especialmente no seletor CSS (.editor-styles-wrapper) e no código de cor hexadecimal.

Como encontro o código hexadecimal para uma cor específica que quero usar?

A maneira mais fácil é usar uma ferramenta online de seleção de cores. Sites como o Seletor de Cores do Google, Códigos de Cores HTML ou Adobe Color permitem que você selecione visualmente qualquer cor. Eles fornecerão instantaneamente o código hexadecimal correto (por exemplo, #1a457c) para copiar e colar no trecho de código.

Se eu atualizar meu tema, perderei a alteração da cor de fundo do editor de blocos?

Não, você não perderá a alteração. Essa é a maior vantagem de usar um plugin como o WPCode em vez de editar diretamente o arquivo functions.php do seu tema. O trecho de código é salvo independentemente do seu tema, portanto, continuará funcionando mesmo após as atualizações do tema.

We hope this article helped you learn how to easily change the WordPress editor background color. You may also want to see our ultimate guide on how to disable the fullscreen editor in WordPress, or take a look at our top picks for the best Gutenberg blocks plugins for WordPress.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.