Modo escuro do WordPress: como habilitá-lo em seu site (Guia para iniciantes)

Atualmente, os usuários estão começando a ver o modo escuro do WordPress como uma necessidade. Afinal, mudar de uma interface brilhante tende a ser mais fácil para os olhos. No entanto, talvez você não saiba como adicionar esse recurso ao seu site.

Felizmente, o processo pode ser muito simples. Com a ajuda do plugin WP Dark Mode gratuito, você pode adicionar um modo escuro dedicado para seus usuários front-end e seus administradores back-end.

Neste artigo, mostraremos como ativar o modo escuro no front- end do seu site. Em seguida, mostraremos como fazer o mesmo no back- end . Veja um exemplo de como seu painel de back-end pode ficar no final deste tutorial:

Vamos começar!

Como ativar o modo escuro no frontend do seu site

Vamos começar alterando a exibição do seu frontend. Para fornecer uma opção de modo escuro do WordPress para seus usuários, siga este método.

Etapa 1: instale um plug-in de modo escuro

Infelizmente, o WordPress não oferece uma função integrada para ativar o modo escuro em seu site. No entanto, isso não significa que seja impossível! Graças à enorme biblioteca de plugins, você pode encontrar várias ferramentas para ajudá-lo.

Recomendamos o WP Dark Mode. Este plugin fácil de usar oferece várias opções: você pode alterar elementos como a paleta de cores, o design do botão e as animações. Também é compatível com a maioria dos principais temas do WordPress, o que significa que a maioria das pessoas poderá usá-lo.

No entanto, existem muitas outras opções por aí, então sinta-se à vontade para navegar por elas se estiver procurando um ajuste melhor. Depois de decidir sobre um plug-in, instale-o e ative-o antes de passar para a próxima etapa.

Etapa 2: ativar o modo escuro

Depois de instalar seu plugin, é hora de ativar os principais recursos. Se você estiver usando o WP Dark Mode, comece acessando WP Dark Mode → Settings . Você verá muitas configurações diferentes, mas, por enquanto, vamos nos concentrar no básico em Configurações gerais :

Em seguida, certifique-se de que a chave Enable Frontend Darkmode esteja na posição ligada. O plug-in agora mostrará a versão mais escura da sua interface por padrão.

Outra opção a considerar é o Modo Escuro com reconhecimento de SO . Se você ativar isso, os usuários com suas preferências de dispositivo definidas para o modo escuro receberão automaticamente o modo escuro do seu site, o que pode melhorar a experiência do usuário do seu site.

Quando estiver satisfeito com suas escolhas, vá em frente e clique em Salvar configurações . Em seguida, passe para a próxima etapa para obter alguns recursos mais avançados.

Etapa 3: ativar o interruptor flutuante

Em seguida, você tem a opção de dar aos usuários um pouco mais de controle sobre as opções do modo escuro do WordPress. Nem todos os seus usuários vão gostar de navegar no modo escuro. Além disso, alguns usuários podem querer alterar suas preferências dependendo da hora do dia ou de outras condições de navegação.

Felizmente, você pode fornecer a eles uma opção para fazer exatamente isso. Existem duas partes principais aqui: ativar o recurso e personalizá-lo. Vamos começar com o primeiro indo para WP Dark Mode → Settings → Switch Settings :

Certifique-se de que a alternância Show Floating Switch esteja na posição ligada. Em seguida, salve suas alterações. É simples assim: seus usuários agora terão a opção na tela para alternar entre o modo claro e escuro.

Você também pode entrar nos elementos de estilo aqui. Por exemplo, considere alterar o design do botão em Floating Switch Style .

Outras opções de personalização incluem adicionar animação ou colocá-la em uma determinada parte da tela. Você pode desbloquear ainda mais opções com a versão premium deste plugin. Salve suas alterações de switch e vá para a etapa final.

Etapa 4: personalize seu modo escuro

O potencial de personalização não termina com a troca. Existem algumas outras maneiras de personalizar o modo escuro do WordPress. Vejamos primeiro a alteração do esquema de cores.

Vá para WP Dark Mode → Configurações → Configurações de cor :

Se você não quiser criar seu próprio esquema de cores, também poderá ativar Deseja usar predefinições de cores? para algumas opções padrão:

A maioria das opções aqui exigirá uma versão premium. Isso ajudará você a ajustar qualquer coisa, desde o brilho geral até os níveis de contraste. Como tal, você pode querer considerar a atualização se o seu esquema de cores for importante para você.

Como ativar o modo escuro no seu painel do WordPress

Seus usuários front-end não são os únicos que podem se beneficiar de uma tela mais escura. Você pode seguir estas etapas para ativar a opção para seu painel também.

Etapa 1: ativar o modo escuro de back-end

Usaremos o mesmo plugin WP Dark Mode para este método. Volte para WP Dark Mode → Configurações → Configurações gerais . No entanto, desta vez, certifique-se de que a opção Enable Backend Darkmode esteja ativada.

Semelhante à forma como funciona para seus usuários, seu painel mudará automaticamente para o modo escuro. Você também terá um botão na barra de ferramentas superior para alternar entre os dois modos.

Como você pode esperar, isso afetará apenas seus usuários de back-end. Se você não ativou o modo escuro para o frontend, seus visitantes verão seu site normal.

Se você não está procurando por nenhuma outra alfaiataria, pode parar por aqui. No entanto, se você quiser mais maneiras de personalizar a interface de administração do WordPress, continue para a próxima etapa.

Etapa 2: alterar o esquema de cores do administrador

Depois de ativar o modo escuro, recomendamos que você explore o back-end do seu site. Por exemplo, você pode descobrir que as cores padrão do WordPress não atendem às suas necessidades quando estão mais escuras.

A boa notícia é que você pode alterar facilmente o esquema de cores do administrador para corresponder às novas configurações do modo escuro. Você nem precisa de um plug-in extra para esta etapa – esse recurso está embutido no sistema WordPress.

Primeiro, vá para Usuários → Perfil :

A partir daqui, você pode escolher qualquer combinação de cores que desejar. Ao clicar em um, você poderá ver as alterações imediatamente. Sinta-se à vontade para alternar entre eles e ter uma ideia das suas opções. Quando estiver tudo pronto, lembre-se de clicar em Atualizar perfil na parte inferior da página.

Além disso, você também pode aplicar essas alterações ao perfil de back-end de outra pessoa. Para começar, vá para Usuários → Todos os usuários desta vez. Em seguida, encontre o usuário que você deseja alterar e clique em Editar na conta dele:

Depois disso, você será levado a uma tela de edição semelhante à anterior. Você pode alterar os esquemas de cores do administrador de outros usuários para corresponder melhor às novas opções do modo escuro.

Etapa 3: alternar entre o modo normal e escuro

Se você é como muitas pessoas, provavelmente não quer ficar apenas no modo normal ou escuro o tempo todo. Felizmente, o processo de comutação é simples e intuitivo.

Digamos que você esteja iniciando no modo de luz padrão. Vá para o topo da barra de ferramentas do administrador. Aqui, você verá um pequeno interruptor com duas opções: Claro e Escuro :

Tudo o que você precisa fazer agora é clicar no modo para o qual deseja alternar. Depois de fazer isso, sua tela deve ficar assim:

Lembre-se de que as configurações do modo escuro na tela de administração não afetarão seus usuários. Como tal, sinta-se à vontade para alternar entre seus esquemas de cores conforme necessário – se você também seguiu o primeiro método, seus visitantes poderão fazer o mesmo.

Conclusão

Neste artigo, mostramos como ativar e personalizar o modo escuro no front-end do seu site em quatro etapas. Também explicamos como fazer o mesmo para você e seus administradores no back-end do seu site.

Se você estiver interessado em outras maneiras de personalizar o painel de back-end do seu site, confira nossos guias sobre como personalizar o back-end do WordPress e como alterar a barra de ferramentas do WordPress.

Você tem alguma dúvida sobre como ativar o modo escuro em seu site? Deixe-nos saber na seção de comentários abaixo!