A beleza do editor de blocos do WordPress Gutenberg é que ele permite aos criadores de conteúdo mais liberdade de design. Mas para web designers, nem sempre é desejável dar aos clientes acesso a determinados recursos.
Paletas de cores são uma dessas áreas de preocupação. Um cliente com acesso a todo o arco-íris pode, inadvertidamente, fazer mais mal do que bem. Além de divergir das cores cuidadosamente escolhidas, também pode haver um impacto negativo no que diz respeito à acessibilidade.
Felizmente, o WordPress oferece uma maneira para os designers limitarem as cores disponíveis no editor de blocos. Isso garante que os bloqueios permaneçam dentro das diretrizes de marca e pode (com um pouco de orientação ) ajudar a evitar esses problemas de contraste indesejáveis.
Para tirar esse arco-íris e definir suas próprias cores, é necessário adicionar um pouco de código ao seu tema WordPress. Tudo acontecerá no functions.phparquivo do seu tema . Como sempre, certifique-se de fazer backup de seu trabalho e usar um tema filho , se necessário.
Este guia mostrará como controlar a paleta de cores do WordPress. Vamos começar!
Desativar cores personalizadas
Pode parecer contra-intuitivo, mas o primeiro passo é desativar a capacidade do editor de bloco de usar cores personalizadas. Isso basicamente desativa o seletor de cores do editor, evitando que os usuários selecionem qualquer matiz antigo.
Para fazer isso, adicione o seguinte trecho ao functions.phparquivo do seu tema . E já que estamos nisso, vamos desligar o recurso de gradientes personalizados de Gutenberg também.
| // Desativar cores personalizadas de Gutenberg | |
| add_theme_support (‘disable-custom-colors’); | |
| // Desativar gradientes personalizados de Gutenberg | |
| add_theme_support (‘disable-custom-gradients’); |
ver cruwp-disable-custom-colors.php hospedado com ❤ pelo GitHub
Para fins de organização, este fragmento seria idealmente envolvido em uma função existente, junto com outras configurações de suporte de tema. Se o seu tema não tiver uma função existente, você terá que criar a sua própria. Para obter mais detalhes, consulte o guia de suporte a temas do WordPress .
Definir uma paleta de cores em bloco
Agora que impedimos que os usuários fiquem muito aventureiros com as cores, é hora de definir a paleta que queremos que eles utilizem. Nesta etapa, é importante considerar não apenas as cores que seu site usa para a marca, mas também algumas cores genéricas que você pode querer implementar.
Por exemplo, talvez preto e branco não estejam necessariamente vinculados à sua marca – mas ainda podem precisar ser usados em todo o seu site. Como removemos o seletor de cores, queremos incluir todas e quaisquer cores que sejam necessárias no editor.
Observe também que esta configuração requer conhecimento do domínio de texto do seu tema ativo . No trecho de código abaixo, você desejará substituir todas as instâncias de textdomainpor uma específica para o seu tema.
Mais uma vez, este snippet entrará em functions.phpuma função existente, se disponível. Também pressupõe que seu tema ainda não tenha cores definidas.
No entanto, observe que em nossas imagens de exemplo nós o usamos no tema padrão Twenty Twenty, que já tem uma paleta de cores definida. Nesse caso, simplesmente substituímos as cores existentes pelas novas.
| // Editor Color Palette | |
| add_theme_support (‘editor-color-palette’, array ( | |
| array ( | |
| ‘nome’ = > __ (‘Branco’, ‘textdomain’), | |
| ‘slug’ = > ‘branco’, | |
| ‘color’ = > ‘#FFFFFF’, | |
| ), | |
| array ( | |
| ‘name’ = > __ (‘Black’, ‘textdomain’), | |
| ‘slug’ = > ‘preto’, | |
| ‘color’ = > ‘# 000000’, | |
| ), | |
| array ( | |
| ‘name’ = > __ (‘Yellow’, ‘textdomain’), | |
| ‘slug’ = > ‘amarelo’, | |
| ‘color’ = > ‘# ffd000’, | |
| ), | |
| array ( | |
| ‘name’ = > __ (‘Blue’, ‘textdomain’), | |
| ‘slug’ = > ‘blue’, | |
| ‘color’ = > ‘# 347ab7’, | |
| ), | |
| array ( | |
| ‘name’ = > __ (‘Green’, ‘textdomain’), | |
| ‘slug’ = > ‘verde’, | |
| ‘color’ = > ‘# 2e924d’, | |
| ), | |
| array ( | |
| ‘name’ = > __ (‘Gray’, ‘textdomain’), | |
| ‘slug’ = > ‘cinza’, | |
| ‘color’ = > ‘# 464646’, | |
| ), | |
| array ( | |
| ‘name’ = > __ (‘Light Gray’, ‘textdomain’), | |
| ‘slug’ = > ‘lightgray’, | |
| ‘color’ = > ‘#ebebeb’, | |
| ), | |
| )); |
ver cruwp-custom-color-pallete.php hospedado com ❤ pelo GitHub
Para cada cor, devemos definir três atributos:
name;slug;color;
O nameé o rótulo que será exibido para esta cor no editor de bloco. O slugserá usado para atribuir classes CSS a blocos que usam essa cor específica. Finalmente, coloré o código hexadecimal usado para definir a própria cor.
Agora, podemos aplicar cores de fundo e texto aos blocos em nosso site.
Observe que cada cor personalizada também deve ser definida no CSS do seu tema. O slug de sua cor personalizada será incluído nas classes de cor e cor de fundo .has-slug-colorhas-slug-background-color
Por exemplo, para uma cor definida em sua paleta como “azul”, criaríamos classes para:
.has-blue-color.has-blue-background-color
Na prática, isso seria parecido com:
. tem - azul - cor {
color : # 347ab7 ; } . tem - blue - background - color {
background - color : # 347ab7 ; }
Essas definições também podem ser adicionadas a uma folha de estilo do editor personalizado para ajustes adicionais, embora o WordPress as mostre no back-end sem esta etapa.
Outra maneira de tornar o WordPress seu
O WordPress oferece aos desenvolvedores de temas várias maneiras de personalizar seu trabalho. Criar uma paleta de cores personalizada pode parecer um recurso secundário, mas realiza algumas coisas.
Primeiro, é uma maneira simples de tornar seus projetos à prova de cliente . Ao oferecer apenas um número limitado de cores, você pode evitar que os clientes se desorganizem com a aparência do conteúdo.
Além disso, uma paleta de cores personalizada também é uma grande conveniência para os criadores de conteúdo. Sem um, eles podem ter que pesquisar (ou pior – pergunte) por códigos hexadecimais para várias cores de marca. Agora, eles terão tudo o que precisam diretamente no editor de bloco.
Em suma, é outro recurso que você pode usar para construir um site que atenda às necessidades específicas de seus clientes.