Modo escuro do WordPress sem plug-in – é possível?
Publicados: 2022-10-18Índice
Sobre o modo escuro do WordPress sem plug-in
Você provavelmente está sobrecarregando seus olhos por passar muito tempo na frente da tela. Por isso, é importante que você os pacifique enquanto estiver usando computadores. Uma das maneiras mais eficazes de dar um descanso aos seus olhos é alterar a configuração de exibição da tela para o modo escuro.
Os proprietários de sites devem e podem adicionar um modo escuro aos sites para aprimorar sua experiência visual. Se você estiver usando o WordPress para o seu site, adicionar o modo escuro deve ser fácil. Você pode fazer isso manualmente ou instalando um plugin.
Concordamos que o plugin é a melhor solução para criar uma versão escura para o seu site WordPress. Mas também temos respostas para quem acha impossível habilitar o modo escuro do WordPress sem um plugin! Sim, é possível.
Aqui, falaremos sobre como adicionar um modo escuro com e sem usar um plug-in. E também discutir qual deles se destaca onde. Mais adiante no artigo, você também conhecerá um de nossos plugins favoritos chamado QS Dark Mode.
Então fique ligado!
Benefícios de usar o Modo Escuro no WordPress
Por que você deveria usar o Modo Escuro no WordPress? Existem algumas boas razões por trás disso. Você percebe pessoalmente sua necessidade enquanto navega em seu PC à noite com os olhos cansados.
Sendo proprietário de um site, você pode trazer muitos benefícios aos usuários adicionando esse modo ao seu site. E também deve agregar valor ao seu negócio.
Há mais em seus benefícios; vamos descobrir alguns deles abaixo.
- Minimiza significativamente a luz branca proveniente da tela do computador
- Reduz a fadiga ocular
- Economiza energia e aumenta a vida útil da bateria
- Aumenta o tempo na página melhorando a experiência do usuário
- Fornece uma aura estética
Então, sim, essas são praticamente as razões pelas quais o Modo Escuro é uma ótima opção para o seu site WordPress.
Modo escuro do WordPress sem plug-in – é possível?
Agora vem a parte divertida. Aqui veremos como você pode desligar as luzes do seu site WordPress sem instalar nenhum plugin.
Há duas maneiras de você fazer isto -
- Adicionando o modo escuro usando HTML, CSS e JQuery
- Usando temas prontos com o modo escuro ativado
Vamos dar uma olhada em ambos os métodos em detalhes abaixo.
1) Adicione o modo escuro usando HTML, CSS e JQuery
Se você é um desenvolvedor de temas, deve preferir este método manual para incluir uma alternância de modo escuro no seu site WordPress. Nesse método, você precisa passar por um pouco de codificação relacionada a HTML, CSS e JQuery.
Não se preocupe se achar difícil codificar, pois você pode obter trechos de código prontamente disponíveis aqui. Então você pode simplesmente copiá-los e colá-los no local apropriado para ativar o modo escuro.
Não hesite em usar esses trechos, pois eles são de código aberto e de uso gratuito.
Adicionar o trecho de código HTML
Primeiro, adicione o snippet HTML para criar um botão de alternância do modo escuro. Tudo o que você precisa fazer é copiar e colar o seguinte trecho no cabeçalho ou rodapé do seu tema.
<div class=”wpnm-button”>
<div class="wpnm-button-inner-left"></div>
<div class="wpnm-button-inner"></div>
</div>
Estilo com CSS
Agora você precisa estilizar seu botão ou alternador de modo escuro com o seguinte trecho de CSS.
/* Alternador de modo escuro */
.wpnm-botão {
tamanho da fonte: 16px
}
.wpnm-button-inner-left:empty {
margem esquerda: -0,625em
}
.wpnm-button-inner-left:before, .wpnm-button-inner-left:after {
dimensionamento de caixa: caixa de borda;
margem: 0;
preenchimento: 0;
/*transição*/
-transição do webkit: facilidade de entrada e saída de 0,4s;
-moz-transição: 0,4s facilidade de entrada e saída;
-o-transição: facilidade de entrada e saída de 0,4s;
transição: facilidade de entrada e saída de 0,4s;
contorno: nenhum
}
.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {
exibição: bloco em linha;
tamanho da fonte: 0,875em;
posição: relativa;
preenchimento: 0em;
altura da linha: 1em;
cursor: ponteiro;
cor: rgba(149, 149, 149, 0,51);
peso da fonte: normal
}
.wpnm-button .wpnm-button-inner-left:before {
contente: ";
exibição: bloco;
posição: absoluta;
índice z: 1;
altura da linha: 2.125em;
recuo do texto: 2,5em;
altura: 1em;
largura: 1em;
margem: 0,25em;
/*border-radius*/
-webkit-border-radius: 100%;
-moz-border-radius: 100%;
raio da borda: 100%;
direita: 1.625em;
inferior: 0em;
fundo: #FFB200;
transform: girar(-45deg);
box-shadow: 0 0 0.625em branco
}
.wpnm-button .wpnm-button-inner-left:after {
contente: "";
exibição: bloco em linha;
largura: 2,5em;
altura: 1,5em;
-webkit-border-radius: 1em;
-moz-border-radius: 1em;
raio da borda: 1em;
fundo: rgba(255, 255, 255, 0,15);
alinhamento vertical: meio;
margem: 0 0,625em;
borda: 0,125em sólido #FFB200
}
.wpnm-button.active .wpnm-button-inner-left:antes {
direita: 1,0625em;
box-shadow: 0,3125em 0,3125em 0 0 #eee;
fundo: transparente
}
.wpnm-button.active .wpnm-button-inner-left:after {
fundo: rgba(0, 0, 0, 0,15);
borda: 0,125em branco sólido
}
.wpnm-button .wpnm-button-inner-left {
cor: rgba(250, 250, 250, 0,51);
intensidade da fonte: Negrito
}
.wpnm-button.active .wpnm-button-inner-left {
cor: rgba(149, 149, 149, 0,51);
peso da fonte: normal
}
.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {
cor: rgba(250, 250, 250, 0,51);
intensidade da fonte: Negrito
}
Este trecho é de um plugin, e o crédito vai para o autor do plugin, Marko Arula.
Adicionar classe CSS do modo escuro à tag do corpo
Agora você precisa adicionar essa classe específica à tag body, pois isso permitirá que você personalize o layout posteriormente.
Vamos fazer isso.
jQuery(função($){
/*Clique no ícone do modo escuro. Adicione classes e wrappers de modo escuro.
Armazenar a preferência do usuário por meio de sessões*/
$('.wpnm-button').click(function() {
//Mostra lua ou sol
$('.wpnm-button').toggleClass('active');
//Se o modo escuro estiver selecionado
if ($('.wpnm-button').hasClass('active')) {
//Adiciona a classe de modo escuro ao corpo
$('body').addClass('modo escuro');
//Salva a preferência do usuário no armazenamento
localStorage.setItem('darkMode', true);
} senão {
$('body').removeClass('dark-mode');
localStorage.removeItem('darkMode');
}
})
//Verifica o armazenamento. Exibir preferência do usuário
if (localStorage.getItem(“darkMode”)) {
$('body').addClass('modo escuro');
$('.wpnm-button').addClass('ativo');
}
})
Agora você pode inspecionar e testar se a classe CSS “modo escuro” foi adicionada como uma classe de corpo. Em seguida, adicione um fundo escuro para ver se está funcionando bem.
body.modo escuro * {
fundo: #333;
}
Como estamos fazendo isso no navegador ou no lado do cliente e o servidor não sabe de nada, você verá que o modo escuro é carregado depois que o modo claro é carregado. Aqui o corpo é renderizado sem o modo escuro em ação, e JS espera o DOM carregar antes de adicionar a classe.
Portanto, não é uma solução perfeita para os usuários; deve haver uma maneira melhor de melhorar a experiência. Vamos descobrir o quê.
Use cookies para armazenar as preferências do usuário por meio de sessões
Então, vamos ver como você pode adicionar a classe do corpo ao servidor para fazê-lo carregar antes de servir. A melhor maneira de fazer isso é usar cookies para armazenar as preferências do usuário. Dessa forma, você deve criar um cookie para a preferência do modo escuro do usuário e adicionar a classe de corpo do modo escuro de acordo.
Ele habilitará a classe do corpo do modo escuro à medida que o html for renderizado. Então você precisa reescrever o código JS da seguinte maneira.
jQuery(função($){
//Cria o objeto cookie
var cookieArmazenamento = {
setCookie: function setCookie(chave, valor, hora, caminho) {
var expira = new Date();
expires.setTime(expires.getTime() + hora);
var pathValue = ”;
if (typeof path !== 'undefined') {
pathValue = 'caminho=' + caminho + ';';
}
document.cookie = chave + '=' + valor + ';' + pathValue + 'expires=' + expires.toUTCString();
},
getCookie: function getCookie(chave) {
var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');
retornar keyValue ? keyValue[2] : null;
},
removeCookie: function removeCookie(chave) {
document.cookie = chave + '=; Max-Idade=0; caminho=/';
}
};
//Clique no ícone do modo escuro. Adicione classes e wrappers de modo escuro. Armazenar a preferência do usuário por meio de sessões
$('.wpnm-button').click(function() {
//Mostra lua ou sol
$('.wpnm-button').toggleClass('active');
//Se o modo escuro estiver selecionado
if ($('.wpnm-button').hasClass('active')) {
//Adiciona a classe de modo escuro ao corpo
$('body').addClass('modo escuro');
cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');
} senão {
$('body').removeClass('dark-mode');
setTimeout(function(){
cookieStorage.removeCookie('yonkovNightMode');
}, 100);
}
})
//Verifica o armazenamento. Exibir preferência do usuário
if (cookieStorage.getCookie('yonkovNightMode')) {
$('body').addClass('modo escuro');
$('.wpnm-button').addClass('ativo');
}
})
Adicionar classe de modo escuro por meio do filtro de classe do corpo
Então, configuramos um cookie chamado “yonkovNightMode”, que será ativado quando o usuário escolher a opção de modo escuro. Mas você tem que pegar este cookie com PHP primeiro e então adicionar isso à classe do corpo.
Copie e cole o seguinte trecho no arquivo functions.php em seu tema filho.
<?php
/**
* Ative o modo de tema escuro
* Bifurcado de https://wordpress.org/plugins/wp-night-mode/
*/
function yonkov_dark_mode($classes) {
$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ? $_COOKIE['yonkovNightMode'] : ”;
//se o cookie estiver armazenado..
if ($yonkov_night_mode !== ”) {
// Adiciona a classe de corpo 'modo escuro'
return array_merge($classes, array('dark-mode'));
}
retorna $classes;
}
add_filter('body_class', 'yonkov_dark_mode');
Você Terminou
Então você realmente criou um protótipo totalmente funcional de um layout de modo escuro. Os trechos foram retirados dos plugins WordPress de código aberto. Assim, você pode usá-lo em qualquer um dos seus sites WordPress para adicionar a opção de modo escuro para uma melhor experiência do usuário.
2. Use temas WordPress prontos com opção de modo escuro
Que tal escolher um tema WordPress pronto que já tenha um botão de alternância do modo escuro instalado. Dessa forma, você pode usar o modo escuro em seu site WordPress sem usar um plugin. Também ajudará você a evitar a personalização, pois a maioria dos temas precisa ser personalizada com o plug-in do modo noturno ou códigos CSS personalizados.
Então, quais são alguns temas do WordPress que suportam o modo escuro junto com o modo claro? Aqui, trouxemos alguns temas populares do WordPress com um layout de modo escuro. Vamos descobrir.
- Twenty Twenty One: Este é o tema padrão do WordPress que vem com um layout de modo escuro. Por padrão, ele está desabilitado e você deve habilitá-lo nas Opções de Tema.
- Estera: É um tema WordPress popular para sites WooCommerce. Ele vem com um botão de alternância de modo escuro, permitindo que os usuários alternem entre o modo claro e escuro.
- HIghStarter: Este tema WordPress leve é popular para sites de portfólio. Tem um interruptor de modo escuro sem um plugin instalado separadamente. E isso permite que o usuário alterne entre o modo claro e escuro.
- Mate: É um tema WordPress lindamente projetado que permite selecionar entre o modo claro ou escuro diretamente do cabeçalho do site.
Manual ou plug-in Qual método usar para ativação do modo escuro?
Já discutimos como você pode ativar manualmente o modo escuro em seu site WP. E sabemos que muitos de vocês acharão que habilitar o modo escuro é incômodo, especialmente com a parte de codificação.
Portanto, recomendamos que você tome isso como a segunda opção. Porque quando se trata de escolher entre métodos manuais ou de plug-in, preferimos optar pela opção de plug-in, pois ela pode adicionar de maneira rápida e conveniente um botão de alternância de modo escuro ao site.
Falando sobre um plugin perfeito, temos o nosso favorito para recomendar aqui: o QS Dark Mode Plugin. É um plugin que traz um lindo esquema escuro para o seu site e permite que você lide com a tendência de 'ficar escuro'.
Vamos verificar por que você deve instalar um plug-in de modo escuro - particularmente o plug-in QS Dark Mode e não usar o método manual.
Plugin QS Dark Mode: A solução perfeita para o modo escuro
Existem algumas razões pelas quais o QS Dark Mode Plugin pode ser uma solução perfeita para o modo escuro para o seu site. Alguns deles incluem:
- É grátis
- Suporte a CSS personalizado
- Diferentes estilos de interruptor escuro, incluindo diferentes animações e textos de CTA
- Oferece modo escuro baseado em tempo
- Opção para otimizar a localização do botão
- Ampla gama de esquemas de cores escuras
- Suporte a imagem e tamanho de fonte baseado em modo escuro
- Compatível com WooCommerce
Em relação à instalação do plugin, é como instalar qualquer outro plugin no seu site WordPress. Mas se você ainda estiver em uma correção, podemos ajudá-lo com algumas instruções aqui. Vamos verificar.
- Faça o download do plug-in QS Mode e carregue os arquivos para o diretório em questão, que geralmente é o diretório /wp-content/plugins/plugin-name
- Para instalar o plugin diretamente da tela de plugins do WordPress. Clique em Plugins > Adicionar novo no painel do WP, em seguida, procure o plug-in na barra de pesquisa e clique em instalar.
- Ative o plug-in QS Dark Mode na tela 'Plugins'
- Uma vez ativado, seu modo escuro deve ser ativado.
- Você pode alternar para o modo escuro clicando no botão de alternância na tela
- Clique no botão de alternância novamente para ativar o modo de luz
- Para personalizar, você pode verificar todas as configurações na barra lateral do WP Admin Dark Mode do plugin
Posso usar o esquema de cores quando o modo escuro está ativo?
O modo escuro parece reduzir a quantidade de cor branca ou luz azul proveniente da tela. Isso não significa que você tem que ficar preto o tempo todo. Você ainda pode escolher entre esquemas de cores mesmo quando o modo escuro está ativado, como o que você pode fazer com o QS Dark Mode Plugin.
Mas as cores são escolhidas de forma que o conteúdo seja exibido em alto contraste com as cores claras de primeiro plano e escuras.
Conclusão
Então, é possível adicionar o modo escuro ao site WordPress sem um plugin. Mas a menos que você seja um desenvolvedor de temas ou um codificador, você não vai preferir usar este método manual de fazer isso.
Em vez disso, seria mais sábio e fácil adicionar um plug-in de modo escuro. Mencionamos nosso plugin favorito, o QS Dark Mode Plugin, que você pode considerar para tornar seu site mais apresentável e agradável.
Lembre-se, escurecer não é apenas sobre a saúde dos seus olhos, mas também sobre o apelo estético do seu site. Ao fazer isso, você pode adicionar uma aura à experiência visual geral e, ao mesmo tempo, melhorar o envolvimento do usuário.
Astra Pro vs Elementor Pro - Comparação frente a frente