Como Alterar a Cor Padrão de Seleção de Texto no WordPress

Você já notou como o texto fica quando os visitantes o destacam em seu site? Às vezes, precisamos atualizar a cor de seleção de texto nos sites em que trabalhamos para corresponder às cores da marca, e muitos usuários perguntaram como fazer isso.

A boa notícia é que é mais fácil do que você imagina personalizar este elemento de design frequentemente negligenciado. Se você deseja combinar com as cores da sua marca ou melhorar a legibilidade, alterar a cor de seleção de texto pode aprimorar a experiência do usuário do seu site.

Neste guia, mostraremos exatamente como alterar a cor padrão de seleção de texto no WordPress.

Por que Alterar a Cor Padrão de Seleção de Texto no WordPress?

Cor de seleção de texto refere-se à cor da fonte no WordPress que aparece quando você destaca um trecho de texto dentro de um conteúdo. Assim como isto:

Em alguns casos, você pode querer alterar essa cor porque ela não combina bem com o design do seu site WordPress. A paleta de cores desempenha um papel importante em fazer seu site parecer bom e manter uma experiência de marca consistente.

Se você administra um blog WordPress, então você também pode querer alterar a cor padrão de seleção de texto se achar que ela não se destaca o suficiente do resto do conteúdo, tornando difícil a leitura.

Dito isso, vamos ver como você pode alterar a cor de seleção de texto no WordPress. Basta usar os links abaixo para pular para o método que você deseja usar:

• Método 1: Usando Código para Alterar a Cor de Seleção de Texto (Funciona Com Todos os Temas)
• Method 2: Using the WordPress Theme Settings (Varies by the Classic Theme)

Método 1: Usando Código para Alterar a Cor de Seleção de Texto (Funciona Com Todos os Temas)

Alguns temas do WordPress oferecem um recurso integrado para alterar a cor de seleção de texto, mas nem todos o fazem. É por isso que recomendamos o uso de código CSS personalizado, pois o método é muito mais universal.

Frequentemente, você encontrará trechos de código CSS em tutoriais do WordPress com instruções para adicioná-los ao arquivo functions.php do seu tema.

O maior problema é que até mesmo um pequeno erro no trecho de código pode quebrar completamente o seu site WordPress. Sem mencionar que você perderá todo o seu código personalizado ao atualizar o tema do WordPress.

É aí que entra o WPCode. Este plugin de snippets de código facilita a adição de código personalizado ao WordPress sem causar erros ou tornar seu site inacessível.

A primeira coisa que você precisa fazer é instalar e ativar o plugin gratuito WPCode. Para mais detalhes, veja nosso guia passo a passo sobre como instalar um plugin do WordPress.

Após a ativação, vá para Snippets de Código » Adicionar Snippet no seu painel de administração do WordPress.

Aqui, basta passar o mouse sobre ‘Adicionar seu Código Personalizado (Novo Snippet)’.

Quando ele aparecer, clique no botão ‘+ Adicionar Snippet Personalizado’.

Em seguida, você precisa escolher um tipo de código na lista de opções que aparecem na tela.

Para este tutorial, selecione ‘Snippet de CSS’.

Na próxima página, digite um título para o snippet de código personalizado.

Pode ser qualquer coisa que ajude você a identificar o snippet no painel do WordPress mais tarde, como ‘Alterar cor de seleção de texto’.

Você pode então adicionar o seguinte CSS na caixa de Pré-visualização do Código:

/* Customizing text selection for Firefox */
::-moz-selection {
    /* Background color when text is selected in Firefox */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in Firefox */
    color: #fff;
}

/* Customizing text selection for other browsers */
::selection {
    /* Background color when text is selected in other browsers */
    background-color: #008000; /* Green color */
    /* Text color when text is selected in other browsers */
    color: #fff;
}

Observe que adicionamos dois estilos. O seletor CSS ::moz-selection funciona com o navegador Firefox, e o seletor CSS ::selection funciona com outros navegadores populares como Google Chrome, Safari, IE9+ e Opera.

No exemplo acima, o código hexadecimal # mudará a cor do link para verde, então você precisará mudar background-color: #008000 para a cor que deseja usar para o texto destacado.

Se você não tiver certeza de qual código hexadecimal usar, poderá explorar diferentes cores e obter seus códigos no site HTML Color Codes.

Quando estiver satisfeito com a aparência do seu código, basta clicar no alternador ‘Inativo’ para mostrar ‘Ativo’ em vez disso.

Em seguida, clique em ‘Salvar Snippet’ para tornar o snippet CSS ativo.

Agora você pode visitar seu site para ver as alterações em ação.

Foi assim que ficou em nosso site de demonstração.

Método 2: Usando as Configurações do Tema do WordPress (Varia de acordo com o Tema Clássico)

Alguns temas do WordPress permitem que você altere as configurações de sua tipografia e fontes, incluindo a cor do texto selecionado. Para verificar se este é o caso do seu tema, você precisa ir em Aparência » Personalizar.

Observação: Este método não é aplicável para temas de blocos.

Aqui, procure por quaisquer configurações rotuladas como ‘Cores’.

Se você vir uma guia ‘Geral’, ‘Global’ ou similar, ela geralmente contém as configurações de cores do tema.

Por exemplo, se você estiver usando o tema Astra do WordPress, precisará selecionar a guia ‘Global’.

Depois disso, clique em ‘Cores’ para ver todas as diferentes cores que compõem este tema do WordPress.

Em seguida, você deve clicar em ‘Acento’.

Isso abre um seletor de cores onde você pode escolher uma nova cor de seleção de texto.

Agora você pode observar a cor da fonte mudar, pois a pré-visualização ao vivo será atualizada automaticamente. Assim, você pode experimentar diferentes configurações para ver o que fica melhor para o seu site WordPress.

Quando estiver satisfeito com suas alterações, basta clicar em ‘Publicar’ para torná-las ativas.

Depois disso, você verá a nova cor de seleção de texto ao vivo em seu blog ou site WordPress.

Mesmo que você não veja nenhuma configuração de cor no personalizador de temas do WordPress, ainda vale a pena verificar a documentação do seu tema para ver se há uma maneira de alterar a cor padrão de seleção de texto.

Você pode até entrar em contato com o desenvolvedor do tema para obter ajuda. Para mais informações, consulte nosso guia sobre como solicitar suporte do WordPress corretamente e obtê-lo.

Descubra Mais Dicas e Truques de Tipografia para WordPress

Você quer personalizar as fontes do seu site WordPress, mas não sabe como? Confira estes guias para começar:

• Melhores Plugins de Tipografia para WordPress para Melhorar Seu Design
• Como Alterar Facilmente o Tamanho da Fonte no WordPress
• O Que é uma Fonte Web Segura + Melhores Fontes Web Seguras (Guia para Iniciantes)
• Como Adicionar Facilmente Fontes de Ícones no Seu Tema WordPress
• How to Add Drop Caps in WordPress Posts

Esperamos que este tutorial tenha ajudado você a aprender como alterar a cor de seleção de texto padrão no WordPress. Você também pode querer ver nosso guia sobre os melhores construtores de página drag-and-drop para WordPress e como vender fontes online com 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.