Embora o esquema de cores padrão do administrador do WordPress seja funcional, ele pode parecer um pouco sem inspiração. Portanto, você pode querer alterar o esquema de cores do administrador no WordPress.
Alterar o esquema de cores do administrador do WordPress permite que você crie um painel personalizado para você e sua equipe. O esquema de cores pode combinar com o design da sua marca ou simplesmente apresentar suas cores favoritas.
Experimentamos a alteração do esquema de cores do administrador em nossos próprios sites e nos sites de clientes, e descobrimos que isso pode ter um impacto significativo no fluxo de trabalho e na experiência do usuário.
Neste artigo, mostraremos como alterar facilmente o esquema de cores do administrador no WordPress.
Por que alterar o esquema de cores do administrador no WordPress?
Se você não é fã do esquema de cores padrão do administrador no WordPress, pode facilmente alterá-lo para algo que goste.
Você também pode alterar o esquema de cores para combinar com o design do seu tema WordPress, ou até mesmo adicionar um recurso de modo escuro.
Isso pode ser útil se você tiver um site de assinatura ou loja online onde os usuários podem fazer login no seu site, e quiser que seu site e painel de administração ofereçam uma experiência semelhante.
Você também pode usar um esquema de cores de administrador diferente para o seu site de staging para distingui-lo mais facilmente do seu site ativo.
Dito isso, vamos mostrar algumas maneiras diferentes de alterar o esquema de cores do administrador no WordPress. Você pode usar os links rápidos abaixo para pular diretamente para o método que deseja usar.
- Como Alterar o Esquema de Cores do Administrador com as Configurações Padrão do WordPress
- Como Criar Esquemas de Cores Personalizados para o Administrador no WordPress
- Como Controlar o Esquema de Cores Padrão do Administrador para Novos Usuários
Como Alterar o Esquema de Cores do Administrador com as Configurações Padrão do WordPress
O WordPress possui um recurso integrado que permite escolher entre algumas paletas de cores pré-determinadas para o seu painel de administração do WordPress.
Para alterar o esquema de cores do administrador, basta fazer login no seu painel de administração do WordPress e, em seguida, navegar para Usuários » Perfil.
Depois disso, selecione o novo esquema de cores na seção ‘Esquema de Cores do Administrador’ clicando no botão de rádio.
Existem 9 esquemas de cores diferentes para escolher, incluindo Padrão, Claro, Moderno e mais.
Ao clicar em diferentes opções, o esquema de cores mudará automaticamente.
Depois de selecionar um esquema de cores que você goste, você precisa rolar até o final da página e clicar no botão ‘Atualizar Perfil’.
Você também pode controlar o esquema de cores do administrador para outros usuários registrados no seu site WordPress.
Para fazer isso, vá para Usuários » Todos os Usuários e, em seguida, passe o mouse sobre o usuário e clique no botão ‘Editar’.
Em seguida, basta seguir o mesmo processo acima para alterar o esquema de cores do administrador para esse usuário.
Quando terminar, certifique-se de clicar no botão ‘Atualizar Perfil’ na parte inferior da página.
Como Criar Esquemas de Cores Personalizados para o Administrador no WordPress
Se você quiser ainda mais opções de cores para o seu painel de administração, você pode criar esquemas de cores personalizados e carregá-los em seu blog WordPress.
Para fazer isso, acesse o site gratuito WordPress Admin Colors e clique no botão 'Start Creating'.
Em seguida, insira um nome na caixa 'Color Scheme Name'.
Este nome aparecerá no seu painel de administração do WordPress como uma nova opção de cor.
Depois disso, você pode personalizar totalmente o seu esquema de cores clicando nas opções de cores na seção 'Choose your colors'.
Para alterar uma das cores existentes, clique na cor e escolha sua nova cor no pop-up. Você pode clicar em qualquer lugar no seletor de cores ou inserir um código Hex para uma cor específica.
Assim que terminar de personalizar seu esquema de cores, clique no botão ‘Gerar Esquema de Cores’ na parte inferior da página.
Isso criará o código do esquema de cores que você precisa adicionar ao WordPress.
Na próxima página, haverá dois arquivos de código diferentes.
Você precisa baixar o arquivo CSS e copiar o trecho de código e colá-lo em seu editor de texto favorito. Adicionaremos isso aos seus arquivos do WordPress.
Se você nunca fez isso antes, confira nosso guia sobre como copiar e colar código no WordPress.
Você pode adicionar o trecho de código ao seu arquivo functions.php ou usando um plugin de trecho de código.
Para este tutorial, usaremos o plugin de trecho de código WPCode. É o método mais fácil e amigável para iniciantes de adicionar trechos de código ao seu site WordPress.
Primeiro, você precisa instalar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia para iniciantes sobre como instalar um plugin do WordPress.
Após a ativação, você terá um novo item de menu chamado ‘Snippets de Código’ na barra de administração do seu WordPress. Clicar nele mostrará uma lista dos snippets de código que você salvou em seu site. Como você acabou de instalar o plugin, sua lista estará vazia.
Clique no botão ‘Adicionar Novo’ para adicionar seu snippet de código no WordPress.
Em seguida, você verá a página ‘Adicionar Snippet’. Navegue até a opção ‘Adicionar Seu Código Personalizado (Novo Snippet)’ e clique no botão ‘+ Adicionar Snippet Personalizado’.
Depois disso, selecione ‘Snippet PHP’ como o tipo de código na lista de opções.
Agora, você pode dar um nome ao seu snippet de código. Pode ser qualquer coisa para ajudá-lo a lembrar o propósito do seu código.
Em seguida, cole o snippet que você copiou acima na caixa ‘Pré-visualização do Código’.
Em seguida, você precisa selecionar o método de inserção para o seu snippet de código.
Você pode deixar no método ‘Inserção Automática’, para que ele insira e execute automaticamente o trecho de código no lugar certo.
Depois disso, alterne o interruptor de ‘Inativo’ para ‘Ativo’ e, em seguida, clique no botão ‘Salvar Snippet’ no canto superior direito da tela.
Isso salvará o código e ativará o novo esquema de cores do administrador.
Agora, você precisa fazer o upload da folha de estilo CSS que baixou anteriormente para o diretório do seu tema em sua conta de hospedagem WordPress.
Para fazer isso, você pode usar um cliente FTP, ou a opção de gerenciador de arquivos no painel de controle da sua hospedagem WordPress.
Se você nunca usou FTP antes, talvez queira conferir nosso guia sobre como usar FTP para carregar arquivos para o WordPress.
Primeiro, você precisa se conectar ao seu site usando um cliente FTP ou o gerenciador de arquivos no cPanel. Assim que estiver conectado, você precisa navegar até a pasta /wp-content.
Dentro da pasta wp-content, você verá uma pasta chamada themes. É aqui que o WordPress armazena todos os temas que seu site usa ou usou no passado.
Você precisa clicar na pasta themes e, em seguida, abrir a pasta do tema que você está usando.
Em seguida, faça o upload do arquivo display.css que você baixou.
Seu arquivo CSS terá o nome que você escolheu anteriormente.
Observação: Se você mudar os temas do WordPress, precisará fazer o upload do arquivo CSS para a pasta do seu novo tema.
Depois disso, navegue até Usuários » Seu Perfil.
Em seguida, você pode selecionar o novo esquema de cores que acabou de criar.
Se você quiser usar este esquema de cores, certifique-se de clicar no botão 'Atualizar Perfil' na parte inferior da página.
Como Controlar o Esquema de Cores Padrão do Administrador para Novos Usuários
Quando um novo usuário cria uma conta, ele terá a opção de personalizar seu esquema de cores. No entanto, você pode querer controlar o esquema de cores padrão do administrador ou impedir que os usuários alterem o esquema de cores completamente.
A maneira mais fácil de fazer isso é usando o plugin gratuito Force Admin Color Scheme.
Primeiro, você precisa instalar e ativar o plugin. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.
Após a ativação, navegue até Usuários » Perfil e selecione sua cor de administrador e marque a caixa 'Forçar este esquema de cores de administrador em todos os usuários'.
Depois disso, clique no botão ‘Atualizar Perfil’ na parte inferior da página.
Agora, o esquema de cores padrão do administrador será o mesmo para todos os usuários novos e existentes em seu site.
O plugin também desabilita o seletor de esquema de cores do administrador para todos os seus usuários. Os únicos usuários que podem alterar essa cor são aqueles com acesso de administrador.
Esperamos que este artigo tenha ajudado você a aprender como alterar o esquema de cores do administrador no WordPress. Você também pode querer ver nossas escolhas de especialistas sobre os melhores plugins de painel de administração do WordPress e nosso guia sobre como ocultar itens desnecessários do menu no administrador do 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.
Tanja
Isso é ótimo! Exatamente o que eu estava procurando. Mas de alguma forma não funciona para mim…
Eu criei meu próprio esquema de cores. Baixei o arquivo css e o implementei na minha pasta css do meu ChildTheme. Em seguida, adicionei o código php no meu arquivo php no meu Child Theme. Até agora, tudo deveria estar certo. O esquema de cores criado é até mostrado com as cores corretas para escolhê-lo, mas quando eu o escolho, apenas as cores padrão são mostradas. Estou fazendo algo errado?
WPBeginner Support
A razão mais comum para isso acontecer, descobrimos, é como o código é adicionado ao seu functions.php. Recomendamos tentar o método WPCode para ver se funciona dessa forma para garantir que não seja um problema do functions.php. A outra opção que você poderia tentar seria colocar o arquivo na pasta do tema pai.
Admin
Dennis Muthomi
Obrigado por cobrir o processo de criação de esquemas de cores personalizados – usarei isso para criar mais opções de marca para clientes. Eu não sabia que poderia adicionar cores personalizadas
Dayo Olobayo
Eu sempre esqueço os passos exatos para mudar o esquema de cores, mas ter este guia marcado como favorito me economiza muito tempo sempre que quero renovar o visual do meu painel de administração. Obrigado.
WPBeginner Support
De nada!
Admin
llarron
Funciona brilhantemente! Os esquemas de cores padrão são tão chatos e nunca combinam com as cores da marca, esta é uma ótima adição para o back-end de um site e fácil de fazer. Obrigado.
WPBeginner Support
Glad you found our recommendation helpful
Admin
Puck
Hi,
I’m trying to make this work but it won’t show up on the users panel. I followed the exact steps as shown above. Do you have any tips?
Thanks!
WPBeginner Support
Se você não estiver usando, para mudar o esquema de cores de todos os administradores, você precisará usar o método do plugin deste guia e garantir que salve as alterações.
Além disso, se você tiver um plugin de cache, pode querer limpar seu cache para garantir que ele seja atualizado.
Admin
Angelo
I tried to change but not convinced of others and I kept default color scheme
WPBeginner Support
That’s perfectly fine, its a personal preference if you change the colors or not
Admin
David Swanson
Passo muito tempo no wp-admin. Não encontrei uma maneira de criar meu próprio esquema de cores. Talvez precise dedicar um fim de semana para criar um plugin que faça isso com algumas rodas de cores.
WPBeginner Support
Para criar um esquema de cores de administrador personalizado, você pode dar uma olhada em nosso artigo aqui: https://www.wpbeginner.com/plugins/how-to-create-custom-admin-color-schemes-in-wordpress/
Admin
Barry
@maxpen:disqus você encontrou uma solução? eu quero a mesma coisa
Aria
você encontrará os arquivos css em “wp-admin > css > colors”
Max Pen
Quero saber onde eles armazenam os arquivos de cada tema e como criar um.
GP Diller
Acho que foi um movimento muito juvenil por parte da equipe do Wordpress forçar uma tendência de design tão não profissional e excessivamente moderna em todos os seus usuários, sem incluir um esquema de cores que se assemelhasse um pouco à interface administrativa normal.
O design plano não combina com interfaces pesadas como painéis administrativos. Estes exigem mais separação do que o design plano pode oferecer. Em cerca de 5 anos, todos os designers olharão para trás e perceberão tudo isso, e nesse ponto, o designer de ponta estará postando capturas de tela no Dribbble de seus designs profundos (que de alguma forma conseguirão tornar excessivamente complicados).
Eleanor
Configurações pessoais? Procurei em todo o painel e não consegui encontrar. Coisa estranha é que, quando clico no meu perfil, consigo ver a página de mudança de cor piscar antes da página que tem Revisão e o resto das configurações. Então está lá, só não consigo acessá-la. ~Eleanor
WPBeginner Support
Estranho, você tentou desativar temporariamente todos os plugins?
Admin
Eleanor
Sim, ainda faz a mesma coisa. Não me importo com o design preto, mas seria bom se funcionasse como deveria. ~Eleanor
Justin
Como desenvolvedor de plugins/temas, há alguma maneira de obter as cores para aplicá-las aos painéis administrativos de nossos plugins/temas para que possamos combinar o esquema de cores escolhido?
Peter
Este plugin adiciona mais um esquema de cores de administrador, que é semelhante às cores cinza claro e azul do painel de administração antigo (Wordpress 3.7), buscando um equilíbrio entre a visualização clássica anterior e a nova visualização plana. Torna visíveis os separadores de menu entre os blocos de menu e os itens de menu:
http://wordpress.org/plugins/wp-admin-classic-colors/
Rima
Movimento terrível. Não conserte algo que não está quebrado. O esquema de cores claro é muito claro e o escuro é muito escuro. Quero meu esquema de cores antigo de volta!!
Rudy
Concordo plenamente. O antigo esquema de cores era perfeito, eu detesto totalmente a cor preta no menu de administração, e as opções que você tem para mudá-la também não são boas – o cinza (esquema claro) é muito claro. Movimento absurdo.
Doug
Acho que você perdeu o ponto… você pode mudá-los você mesmo. Você pode voltar ao que tinha, mas deixe para nós que queríamos mais a opção de ter mais.
rose reynolds
eu gosto do nascer do sol
WPBeginner Support
sim, é muito colorido
Admin
Giovanni M
Seria ótimo se vocês incluíssem uma solução "faça você mesmo" para adicionar esquemas de cores, em vez de apenas delegar para um plugin.
Sheryl
Concordo — era o que eu esperava, dada a introdução do artigo.
Eventually I may poke around and find out for myself where I can alter the colors, and hard code in new combinations.
For now, I just need to get some work done –now that the Default dark theme is no longer an impediment
O plugin é uma boa opção intermediária, embora eu achasse que o plugin iria um passo além, permitindo que os usuários criassem seu próprio tema colorido personalizado. (bom uso para o Kuler)
Aos autores: Obrigado pelo artigo!
Eu não aguentava mais um momento no WP com essas cores Padrão!!
Eu odiei o novo tema e não era óbvio como mudá-lo.
O WP deveria ter vindo com cores Padrão às quais estamos acostumados,
e em um local proeminente, anunciar onde poderíamos mudá-lo.
O escuro era tão desagradável, distrativo e difícil de ler.
Rob
Obrigado pelo artigo. Não acredito que no WP 3.8 nenhuma das opções de cor incluísse o antigo esquema de cores com o qual as pessoas estão acostumadas e que é muito mais agradável aos olhos, na minha opinião. O WP precisa aprender: se não está quebrado, não conserte!
Sheryl
Exatamente!
Jenny Lens
Quem quer que tenha projetado esses esquemas de cores precisa de sérias lições sobre fadiga ocular, usabilidade, teoria das cores e mais. Não consigo acreditar que eles eliminaram completamente o painel simples, fácil de ler e agradável. Eles estão loucos ao pensar que isso é um bom movimento. A última coisa que quero ver são esquemas de cores horríveis projetados por tolos que não entendem o quão perturbadoras essas cores podem ser para muitas pessoas. Eu era uma grande fã e defensora do WP. Eu nunca parava de compartilhar seus benefícios. Mas isso é um erro grande e ruim. Estou chocada....
Alison Foxall
O esquema "claro" parece ser muito semelhante ao antigo esquema de cores.
Sheryl
Com certeza!
Preto é muito difícil de ler..talvez se eu aumentasse muito o brilho da minha tela, o texto seria mais legível? Mas então o contraste perturbador e o cansaço visual também seriam mais pronunciados.
Não há motivo para não terem nos dado uma opção mais próxima do que todos estão acostumados a usar.
Eu também escolhi a opção Apenas claro que eles apresentaram. A outra opção não escura é uma possibilidade, mas um pouco decepcionante.
Benjamin Beck
Exatamente o que eu estava procurando fazer. Obrigado por postar isso tão rápido!
Ian Allan
Sim. Eu AMO o novo visual, mas também acho MUITO frustrante. Há tão pouco contraste na área de comentários que acho difícil identificar rapidamente quais comentários eu respondi e quais não. Mudar o esquema de cores não afeta a cor dos comentários.
Charles Kosman
Ian, eu não aguentava a cor dos comentários também. Eles definitivamente deveriam ter feito com que se destacasse mais. Uma correção bem simples é apenas editar o arquivo default color.min.css.
Procure por #fefaf7 em wp-admin/css/colors.min.css e altere para #FFFF88 em ambos os locais. #FFFF88 é um amarelo fácil de ver, mas você pode colocar qualquer cor que quiser lá.
Espero que isso ajude quem procura uma solução rápida. Se você estiver usando um tema de cores diferente (por exemplo, Midnight), o arquivo CSS estará em wp-admin/css/colors/midnight/colors.min.css.
Sheryl
Obrigado!!
Note que a barra de administração que aparece no topo do nosso site quando estamos logados não muda para refletir o tema escolhido. Ela permanece preta, não importa o quê :( Espero que seja a cor de fundo do nosso tema de administração escolhido.
Brook Acklom
Desculpe, eu não gosto de nenhum dos novos esquemas. Tenho um monitor HiRes de 24″ de ponta alimentado por uma boa placa gráfica e sofro com franjas de cores severas na maioria dos textos do painel.
POR FAVOR, vamos ter uma opção simples, antiga, em preto, branco + tons de cinza.
O esquema de cores antigo era muito melhor, na minha humilde opinião.
Aksam Zarook
Para aqueles que não gostam do novo visual plano do 3.8 e querem reverter para o visual padrão do WordPress anterior ao 3.8, confira estes plugins
Este plugin te trará de volta o visual do WordPress 3.7
http://wordpress.org/plugins/wp-admin-classic/
Este plugin adicionará bordas e estilo 3D ao novo design plano 3.8.
http://wordpress.org/plugins/admin-classic-borders/
Curt
MUITO OBRIGADO !!!
O WP tem recursos que eu amo, mas um "novo visual" forçado não é um deles.
Estava começando a pensar em como poderia reverter para o visual 3.7, ou abandonar o WordPress completamente.
Esta não é a única "atualização" indesejada e não opcional que aconteceu recentemente.
Eden Chen
Bom post,
Sean Davis
Eu meio que amo esta parte da nova atualização. Midnight é a minha favorita no momento.
Aksam Zarook
É ótimo que o WordPress esteja melhorando e acompanhando as tendências atuais, como design plano e navegação móvel. Mas acho que eles deveriam ter deixado uma opção para continuarmos usando o esquema de cores e o visual antigos. Usei o WordPress como CMS para vários clientes, treinei-os e fiz um manual do usuário com capturas de tela do painel de administração para eles. Agora, esta atualização está nos forçando a mudar o visual do painel de administração desses clientes sem nenhuma opção. Mesmo os esquemas de cores e o visual mais próximos disponíveis são muito diferentes do visual da versão 3.7.1. Não acho que meus clientes gostarão de uma mudança assim imposta a eles.
adolf witzeling
Legal! O meu favorito é o "Flat Theme". Que tal um tutorial sobre como criar seu próprio esquema de cores? WP Beginner é demais! Continuem assim.
Alan
Não para iniciantes, mas se você quiser definir o esquema padrão para todos os novos usuários (escolhemos meia-noite por coincidência) em todo o seu site ou multisite, é bem simples, na verdade, apenas algumas linhas de código.
Documentei isso aqui no meu blog http://llocally.com/blog/2013/12/15/wordpress-3-8-admin-colour-selection/
Mark Bailey
Alan, obrigado! É exatamente isso que eu esperava encontrar neste artigo… como definir o padrão!
jennifer hyndman
Eu fui para o painel, e depois para 'usuários', mas as cores não estavam em 'meu perfil' para mim, estavam em 'configurações pessoais'.