Como alterar a cor padrão da seleção de texto no WordPress

Deseja alterar a cor padrão de seleção de texto no WordPress?

Às vezes, você pode querer que a cor padrão da seção de texto contraste mais com a cor do plano de fundo. Dessa forma, os usuários podem ver exatamente o que está sendo destacado no conteúdo.

Neste artigo, mostraremos como alterar a cor padrão de seleção de texto em seu tema do WordPress.

Por que alterar a cor padrão da seleção de texto no WordPress?

A cor de seleção de texto refere-se à cor que aparece quando você destaca um trecho de texto em um conteúdo. Assim:

Em alguns casos, talvez você queira alterar essa cor porque ela não combina com o design do seu site WordPress. O esquema de cores desempenha um papel importante para que seu site tenha boa aparência e mantenha uma experiência de marca consistente.

Se você tiver um blog no WordPress, talvez também queira alterar a cor padrão da seleção de texto se achar que ela não se destaca o suficiente do restante do conteúdo, dificultando a leitura.

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

Método 1: Usando as configurações do tema do WordPress (fácil)

Alguns temas do WordPress permitem que você altere as configurações de tipografia e fontes, inclusive a cor padrão de seleção de texto. Para verificar se esse é o caso do seu tema, você precisa ir para Appearance ” Customize.

Observação: Se estiver usando um tema de bloco, você não terá essa opção e precisará ir para o Método 2 para alterar a cor de seleção de texto.

Aqui, procure as configurações rotuladas como “Colors” (Cores).

Se você vir uma guia “General” (Geral), “Global” (Global) ou semelhante, ela geralmente contém as configurações de cores do tema.

Por exemplo, se você estiver usando o popular tema Astra para WordPress, precisará selecionar a guia “Global”.

Depois disso, clique em “Colors” (Cores) para ver todas as cores diferentes que compõem esse tema do WordPress.

Em seguida, você deve clicar em “Accent”.

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

À medida que você fizer alterações, a visualização ao vivo será atualizada automaticamente. Assim, você pode experimentar configurações diferentes para ver qual é a melhor para o seu site WordPress.

Quando estiver satisfeito com suas alterações, basta clicar em “Publish” (Publicar) para torná-las efetivas.

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

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

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

Método 2: Usar o código para alterar a cor da seleção de texto (funciona com todos os temas)

Se você não conseguir ver uma maneira de alterar a cor de seleção de texto no personalizador de temas, outra opção é usar o código CSS.

Geralmente, 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 snippet de código pode quebrar completamente seu site do WordPress. Sem mencionar que você perderá todo o seu código personalizado ao atualizar o tema do WordPress.

É aí que entra o WPCode. Esse plug-in de trechos 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 plug-in gratuito WPCode. Para obter mais detalhes, consulte nosso guia passo a passo sobre como instalar um plug-in do WordPress.

Após a ativação, vá para Code Snippets ” Add Snippet no painel de administração do WordPress.

Aqui, basta passar o mouse sobre “Add Your Custom Code” (Adicionar seu código personalizado).

Quando ele for exibido, clique no botão “Usar snippet”.

Para começar, digite um título para o snippet de código personalizado. Pode ser qualquer coisa que o ajude a identificar o snippet no painel do WordPress posteriormente, como “Alterar a cor da seleção de texto”.

Depois disso, você precisa abrir a lista suspensa “Code Type” (Tipo de código) e selecionar “CSS Snippet”.

Em seguida, você pode adicionar o CSS a seguir na caixa Code Preview (Visualização de 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 # alterará a cor do link para verde, portanto, você precisará alterar a cor de fundo: #008000 para a cor que você 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 código, basta clicar no botão de alternância “Inativo” para exibir “Ativo”.

Em seguida, clique em “Save Snippet” para ativar o snippet de CSS.

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

Esta é a aparência em nosso site de demonstração.

Descubra mais dicas e truques de tipografia para WordPress

Deseja personalizar as fontes em seu site WordPress, mas não sabe como? Confira estes guias para começar:

• Melhores plug-ins de tipografia do WordPress para aprimorar seu design
• Como alterar facilmente o tamanho da fonte no WordPress
• O que é uma fonte segura para a Web + as melhores fontes seguras para a Web (guia para iniciantes)
• Como adicionar facilmente fontes de ícones em seu tema do WordPress
• Como adicionar letras maiúsculas e minúsculas em publicações do WordPress

Esperamos que este tutorial tenha ajudado você a aprender como alterar a cor padrão de seleção de texto no WordPress. Talvez você também queira ver nosso guia sobre os melhores construtores de páginas de arrastar e soltar para WordPress e como vender fontes on-line com o WordPress.

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