Cada editoria do portal tem cara própria. Política puxa pro azul institucional, esportes pro verde da torcida, cultura pro magenta vibrante, e o leitor reconhece em qual seção está sem precisar ler o título da página. O addon seox-publishers-addon-terms-colors materializa essa identidade: você define três cores por editoria (Primária, Dark, Light) e o tema aplica automaticamente no archive, no header da página de seção e nos elementos de marca dentro de cada matéria. Sem CSS, sem variáveis globais, sem desenvolvedor.
A configuração mora dentro do workspace de cada categoria, na aba Personalização visual. As cores ficam guardadas em três meta keys (term_color, term_color_dark, term_color_light) e viram CSS variables na hora de renderizar. Se você nunca preencher, o tema usa o default global do styleguide; assim que preencher, a editoria ganha personalidade própria sem afetar as outras. Por padrão o addon se aplica só à taxonomia category, mas pode ser estendido a outras taxonomias (tags, marcas, colunas) via filtro seox_publishers_addon_terms_colors_taxonomies.
Esse documento mostra como acessar a editoria, como definir a paleta de três cores usando o seletor visual do WordPress, e como ativar o Darkmode do header para editorias que pedem leitura em fundo escuro. O fluxo todo dura menos de um minuto por editoria depois que você sabe quais cores quer usar; o trabalho real é a decisão de design da paleta, não a configuração.
Como configurar
1 Abra a editoria que vai colorir
No menu lateral do wp-admin, vá em Posts depois Categorias. A tabela mostra todas as editorias do portal com nome, slug e contagem de matérias. Clique no nome da editoria que você quer personalizar (ex: Ads, Agronegócio, Automóveis) para abrir a tela de edição. Se ainda não criou a editoria, clique em + Adicionar categoria no topo, preencha Nome e Slug, salve, e depois entre na edição.
2 Configure as três cores da paleta
Na tela de edição da editoria, localize o workspace ACF e abra a aba Personalização visual. Role até a seção Paleta de cores da categoria. Você verá três campos lado a lado:
- Cor Primária: a cor de marca da editoria. Aparece em chips, links de seção, badges e bordas.
- Cor Dark: variação escura da Primária, usada em fundos escuros, headers darkmode e hover de botões.
- Cor Light: variação clara, usada em backgrounds sutis, separadores e estados desabilitados.
Para cada uma, clique em Selecionar cor ao lado do círculo. Se já souber o código hexadecimal, pode digitar direto no campo de texto que aparece. Trinta segundos por cor é tempo suficiente.
3 Use o color picker para escolher cada tom
Quando você clica em Selecionar cor, o picker visual do WordPress abre. Ele tem três áreas: o espectro (quadrado grande à esquerda) onde você arrasta o ponto branco para definir saturação e brilho; a régua de matiz (faixa colorida à direita) onde você escolhe o tom base; e a paleta de cores rápidas (oito amostras embaixo) com presets do tema, mais um campo de texto exibindo o código #hexadecimal que atualiza em tempo real. Cole um hex pronto (ex: #1e73be para azul institucional) ou clique nas amostras para acelerar.
Repita para Cor Dark (a versão escura, geralmente 20-30% mais escura que a Primária) e Cor Light (versão clara, mais lavada, alta luminosidade). Se errar, clique em Limpar para zerar o campo.
4 Ative Darkmode para header escuro (opcional)
Logo abaixo dos três color pickers, o toggle Darkmode controla se o header da página de arquivo dessa editoria vai ser renderizado em fundo escuro. Útil para editorias que se beneficiam visualmente do contraste em dark (cobertura noturna, esportes em estádio iluminado, finais de copa, especiais investigativos). O instrutivo do campo deixa claro: “Deixará o header do archive em darkmode.”
Quando ativado, o header usa a Cor Dark como background e adapta tipografia/ícones para boa legibilidade. Quando desligado (padrão), usa o background claro do tema com a Cor Primária aplicada nos elementos de marca. Salve clicando em Atualizar no rodapé da página.
Onde as cores aparecem
As três cores não são decoração isolada do admin. O tema as injeta como CSS variables na renderização e usa em vários pontos do frontend.
| Local | Cor usada | Exemplo |
|---|---|---|
Página de arquivo da editoria (/categoria/slug/) | Primária no header e nos chips, Dark no darkmode header (se ativo), Light em fundos sutis | Header de “Política” com badge azul institucional |
| Card da matéria em listagens | Primária no nome da editoria sobre o título, Light no background do chip | Cartão na home mostrando “ESPORTES” em verde sobre fundo verde claro |
| Single da matéria | Primária no chip da editoria no topo, em links internos da matéria, e na barra de progresso | Chip “POLÍTICA” no topo do post |
| Blocos custom (Cards, Containers, Feeds) com editoria atrelada | Primária aplicada nos contornos e títulos, Dark no hover | Carrossel de matérias da editoria de Esportes em verde |
Cores não preenchidas caem no default global do styleguide. Você pode personalizar progressivamente: começa pelas três editorias mais visíveis e estende quando tiver paleta definida pra todas.
Boas práticas de paleta
Acessibilidade primeiro. Cor Primária deve ter contraste mínimo de 4.5:1 contra texto branco e contra texto preto, dependendo de onde aparece. Use ferramenta como WebAIM Contrast Checker antes de salvar.
Dark e Light não são inversões. Cor Dark deve ser uma versão mais saturada e escura da Primária, não preto puro. Cor Light deve ser lavada e clara, não branco puro. Pense em “20% mais escuro” e “85% mais claro” como pontos de partida e ajuste pelo teste visual.
Consistência de família. Editorias do mesmo grupo temático (Esportes, Futebol, Basquete) podem compartilhar a mesma família cromática com variações sutis (verde-bandeira, verde-floresta, verde-claro) para sinalizar parentesco editorial.
Evite seis editorias em vermelho. Se mais de uma editoria precisa do vermelho como Primária, diferencie pela saturação ou hue (vermelho-fogo vs. vermelho-vinho vs. coral). Cores idênticas em editorias distintas confundem o leitor.
Documente a paleta. Mantenha um Notion, Figma ou doc interno com hex de cada editoria, motivo da escolha (ex: “azul institucional ABNT pra Política”) e a data da última revisão. Quando o time mudar, a próxima geração entende as decisões.
Perguntas frequentes
