没有插件的 WordPress 暗模式 – 有可能吗？

已发表: 2022-10-18

关于没有插件的 WordPress 暗模式
在 WordPress 中使用暗模式的好处
没有插件的 WordPress 暗模式 – 有可能吗？
- 1) 使用 HTML、CSS 和 JQuery 添加暗模式
  - 添加 HTML 代码片段
  - 使用 CSS 样式
  - 将深色模式 CSS 类添加到正文标记
  - 使用 Cookie 通过会话存储用户偏好
  - 通过 body 类过滤器添加暗模式类
- 2. 使用具有暗模式选项的现成 WordPress 主题
- 手动或插件哪个方法用于暗模式激活？
- QS 暗模式插件：完美的暗模式解决方案
- 我可以在暗模式激活时使用配色方案吗？
- 结论

关于没有插件的 WordPress 暗模式

您可能因为在屏幕前花费大量时间而使眼睛负担过重。因此，在使用计算机时安抚他们很重要。让您的眼睛休息的最有效方法之一是将屏幕显示设置更改为暗模式。

网站所有者应该并且可以为他们的网站添加暗模式以增强他们的视觉体验。如果您在网站上使用 WordPress，添加暗模式应该很容易。您可以手动或通过安装插件来完成。

我们同意该插件是为您的 WordPress 网站创建深色版本的最佳解决方案。 但是对于那些认为没有插件就无法启用 WordPress 暗模式的人，我们也有答案！是的，有可能。

在这里，我们将讨论在使用和不使用插件的情况下添加暗模式。并讨论哪一个在哪里擅长。在本文后面，您还将了解我们最喜欢的插件之一，称为 QS 暗模式。

所以敬请期待！

在 WordPress 中使用暗模式的好处

为什么要在 WordPress 中使用暗模式？这背后有一些很好的理由。当您在晚上用疲倦的眼睛在 PC 上浏览时，您会亲自意识到它的需要。

作为网站所有者，您可以通过将此模式添加到您的网站来为用户带来许多好处。它还应该为您的业务增加价值。

它还有更多好处；让我们在下面找出其中的一些。

显着减少来自计算机屏幕的白光
减轻眼睛疲劳
它可以节省能源并延长电池寿命
通过改善用户体验来增加页面停留时间
提供美学光环

所以，是的，这些几乎就是为什么暗模式是您的 WordPress 网站的绝佳选择的原因。

没有插件的 WordPress 暗模式 – 有可能吗？

有趣的来了。在这里，我们将了解如何在不安装任何插件的情况下关闭 WordPress 网站的灯。

有两种方法可以做到这一点——

使用 HTML、CSS 和 JQuery 添加暗模式
使用启用暗模式的现成主题

让我们在下面详细了解这两种方法。

1) 使用 HTML、CSS 和 JQuery 添加暗模式

如果您是主题开发人员，您应该更喜欢这种手动方法，以便在您的 WordPress 网站上添加暗模式切换。在这种方法中，您需要通过一些与 HTML、CSS 和 JQuery 相关的编码。

如果您发现编码困难，请不要担心，因为您可以在此处获得现成的代码片段。因此，您只需将它们复制并粘贴到适当的位置即可启用暗模式。

不要犹豫，使用这些片段，因为它们是开源的并且可以免费使用。

添加 HTML 代码片段

首先，添加 HTML 片段以创建暗模式切换按钮。您需要做的就是将以下代码段复制并粘贴到主题的页眉或页脚中。

</div>

使用 CSS 样式

现在，您必须使用以下 CSS 片段来设置暗模式按钮或切换器的样式。

/* 暗模式切换器 */

.wpnm 按钮 {

字体大小：16px

}

.wpnm-button-inner-left:empty {

左边距：-0.625em

}

.wpnm-button-inner-left:before, .wpnm-button-inner-left:after {

box-sizing：边框框；

边距：0；

填充：0；

/*过渡*/

-webkit-transition：0.4s 缓进出；

-moz-transition：0.4s 缓进出；

-o-transition：0.4s 缓入出局；

过渡：0.4s 缓进出；

大纲：无

}

.wpnm-button .wpnm-button-inner, .wpnm-button .wpnm-button-inner-left {

显示：内联块；

字体大小：0.875em；

位置：相对；

填充：0em；

行高：1em；

光标：指针；

颜色：rgba(149, 149, 149, 0.51);

字体粗细：正常

}

.wpnm-button .wpnm-button-inner-left:before {

内容： ”;

显示：块；

位置：绝对；

z-index：1；

行高：2.125em；

文本缩进：2.5em；

高度：1em；

宽度：1em；

保证金：0.25em；

/*边框半径*/

-webkit-border-radius：100%；

-moz-边界半径：100%；

边界半径：100%；

右：1.625em；

底部：0em；

背景：#FFB200；

变换：旋转（-45度）；

盒子阴影：0 0 0.625em 白色

}

.wpnm-button .wpnm-button-inner-left:after {

内容： ””;

显示：内联块；

宽度：2.5em；

高度：1.5em；

-webkit-border-radius：1em；

-moz-边界半径：1em；

边界半径：1em；

背景：RGBA（255、255、255、0.15）；

垂直对齐：中间；

保证金：0 0.625em；

边框：0.125em 实心#FFB200

}

.wpnm-button.active .wpnm-button-inner-left:before {

右：1.0625em；

盒子阴影：0.3125em 0.3125em 0 0 #eee;

背景：透明

}

.wpnm-button.active .wpnm-button-inner-left:after {

背景：rgba(0, 0, 0, 0.15);

边框：0.125em 纯白

}

.wpnm-button .wpnm-button-inner-left {

颜色：rgba(250, 250, 250, 0.51);

字体粗细：粗体

}

.wpnm-button.active .wpnm-button-inner-left {

颜色：rgba(149, 149, 149, 0.51);

字体粗细：正常

}

.wpnm-button.active .wpnm-button-inner-left + .wpnm-button-inner {

颜色：rgba(250, 250, 250, 0.51);

字体粗细：粗体

}

该片段来自一个插件，归功于该插件的作者 Marko Arula。

将深色模式 CSS 类添加到正文标记

现在您需要将此特定类添加到 body 标记，因为这将允许您稍后自定义布局。

让我们这样做。

jQuery（函数（$）{

/*单击暗模式图标。添加暗模式类和包装器。

通过会话存储用户偏好*/

$('.wpnm-button').click(function() {

//显示月亮或太阳

$('.wpnm-button').toggleClass('active');

//如果选择暗模式

if ($('.wpnm-button').hasClass('active')) {

//将暗模式类添加到body

$('body').addClass('dark-mode');

//将用户偏好保存到存储

localStorage.setItem('darkMode', true);

} 别的 {

$('body').removeClass('dark-mode');

localStorage.removeItem('darkMode');

}

})

//检查存储。显示用户偏好

if (localStorage.getItem(“darkMode”)) {

$('body').addClass('dark-mode');

$('.wpnm-button').addClass('active');

}

})

您现在可以检查和测试是否将“暗模式”CSS 类添加为主体类。接下来，添加深色背景以查看它是否正常工作。

body.dark-mode * {

背景：#333；

}

由于我们在浏览器或客户端执行此操作，而服务器不知道任何内容，因此您会看到在加载光照模式后加载了黑暗模式。这里 body 是在没有暗模式的情况下渲染的，JS 在添加类之前等待 DOM 加载。

所以这对用户来说不是一个完美的解决方案；应该有更好的方法来改善体验。让我们看看是什么。

使用 Cookie 通过会话存储用户偏好

因此，让我们看看如何将主体类添加到服务器以使其在服务之前加载。最好的方法是使用 cookie 来存储用户偏好。这样，您必须为用户的暗模式偏好创建一个 cookie，并相应地添加暗模式主体类。

它将在 html 呈现时启用暗模式正文类。所以需要用下面的方式重写JS代码。

jQuery（函数（$）{

//创建cookie对象

var cookieStorage = {

setCookie: function setCookie(key, value, time, path) {

var expires = new Date();

expires.setTime(expires.getTime() + time);

变量路径值 = ”;

if (typeof path !== 'undefined') {

pathValue = '路径=' + 路径 + ';';

}

document.cookie = 键 + '=' + 值 + ';' + pathValue + 'expires=' + expires.toUTCString();

getCookie: 函数 getCookie(key) {

var keyValue = document.cookie.match('(^|;) ?' + key + '=([^;]*)(;|$)');

返回键值？键值[2]：空；

removeCookie: 函数 removeCookie(key) {

document.cookie = 键 + '=; 最大年龄=0；路径=/';

}

};

//单击暗模式图标。添加暗模式类和包装器。通过会话存储用户偏好

$('.wpnm-button').click(function() {

//显示月亮或太阳

$('.wpnm-button').toggleClass('active');

//如果选择暗模式

if ($('.wpnm-button').hasClass('active')) {

//将暗模式类添加到body

$('body').addClass('dark-mode');

cookieStorage.setCookie('yonkovNightMode', 'true', 2628000000, '/');

} 别的 {

$('body').removeClass('dark-mode');

设置超时（函数（）{

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//检查存储。显示用户偏好

if (cookieStorage.getCookie('yonkovNightMode')) {

$('body').addClass('dark-mode');

$('.wpnm-button').addClass('active');

}

})

通过 body 类过滤器添加暗模式类

所以我们设置了一个名为“yonkovNightMode”的cookie，它会在用户选择暗模式选项时被激活。但是你必须先用 PHP 获取这个 cookie，然后将它添加到 body 类中。

将以下代码段复制并粘贴到您的子主题的 functions.php 文件中。

<?php

/**

* 启用深色主题模式

* 来自 https://wordpress.org/plugins/wp-night-mode/

功能 yonkov_dark_mode($classes) {

$yonkov_night_mode = isset($_COOKIE['yonkovNightMode']) ？ $_COOKIE['yonkovNightMode'] : ”;

//如果cookie被存储..

如果 ($yonkov_night_mode !== ”) {

// 添加 'dark-mode' 主体类

return array_merge($classes, array('dark-mode'));

}

返回$类；

}

add_filter('body_class', 'yonkov_dark_mode');

你完成了

因此，您实际上已经创建了一个功能齐全的暗模式布局原型。这些片段取自开源 WordPress 插件。因此，您可以在任何 WordPress 网站上使用它来添加暗模式选项，以获得更好的用户体验。

2. 使用具有暗模式选项的现成 WordPress 主题

如何选择一个已经安装了暗模式切换按钮的现成 WordPress 主题。这样，您可以在 WordPress 网站中使用暗模式，而无需使用插件。它还可以帮助您避免自定义，因为大多数主题都需要使用夜间模式插件或自定义 CSS 代码进行自定义。

那么有哪些 WordPress 主题同时支持深色模式和浅色模式？在这里，我们为您带来了一些流行的带有深色模式布局的 WordPress 主题。让我们来了解一下。

二十一：这是带有暗模式布局的默认 WordPress 主题。默认情况下，它被禁用，您必须从主题选项中启用它。
Estera：这是 WooCommerce 网站的流行 WordPress 主题。它带有一个暗模式切换按钮，允许用户在亮模式和暗模式之间切换。
HIghStarter：这个轻量级的 WordPress 主题在投资组合网站中很受欢迎。它有一个黑暗模式开关，没有单独安装插件。这允许用户在明暗模式之间切换。
Mate：这是一个设计精美的 WordPress 主题，允许直接从站点标题中选择明暗模式。

手动或插件哪个方法用于暗模式激活？

我们已经讨论了如何在 WP 网站上手动激活暗模式。而且我们知道你们中的许多人会发现启用暗模式很麻烦，尤其是在编码部分。

因此，我们建议您将其作为第二种选择。因为在手动或插件方法之间进行选择时，我们更喜欢使用插件选项，因为它可以快速方便地向站点添加暗模式切换按钮。

谈到一个完美的插件，我们在这里推荐了我们最喜欢的一个：QS 暗模式插件。这是一个插件，可以为您的网站带来华丽的黑暗方案，让您应对“走向黑暗”的趋势。

让我们看看为什么你应该安装暗模式插件——尤其是 QS 暗模式插件，而不是使用手动方法。

QS 暗模式插件：完美的暗模式解决方案

QS 暗模式插件可以成为您网站的完美暗模式解决方案的原因有很多。其中一些包括：

免费
自定义 CSS 支持
不同的深色开关样式，包括不同的动画和 CTA 文本
提供基于时间的暗模式
优化按钮位置的选项
广泛的深色方案
基于暗模式的图像和字体大小支持
支持 WooCommerce

关于插件的安装，就像在您的 WordPress 网站上安装任何其他插件一样。但是，如果您仍在修复中，我们可以在此处为您提供一些说明。让我们检查一下。

下载QS Mode插件并将文件上传到相关目录，一般为/wp-content/plugins/plugin-name目录
直接从 WordPress 插件屏幕安装插件。单击 WP 仪表板中的插件 > 添加新插件，然后在搜索栏中搜索插件，然后单击安装。
从“插件”屏幕激活 QS 暗模式插件
激活后，您的暗模式应启用。
您可以通过单击屏幕上的切换来切换到暗模式
再次单击切换以激活灯光模式
要自定义，您可以检查插件的WP Admin Dark Mode Sidebar 中的所有设置

我可以在暗模式激活时使用配色方案吗？

暗模式看起来可以减少来自屏幕的白色或蓝光量。这并不意味着你必须一直变黑。即使激活了暗模式，您仍然可以在配色方案之间进行选择，就像您可以使用 QS 暗模式插件一样。

但是颜色的选择方式是内容与浅色前景和深色背景色的高对比度显示。

结论

那么是否可以在没有插件的情况下向 WordPress 网站添加暗模式。但除非您自己是主题开发人员或编码员，否则您不会喜欢使用这种手动方法。

相反，添加暗模式插件会更明智、更容易。我们已经提到了我们最喜欢的插件，QS 暗模式插件，您可以考虑使用它来使您的网站更美观、更令人心旷神怡。

请记住，变黑不仅关乎您的眼睛健康，还关乎您网站的美感。通过这样做，您可以为整体视觉体验增添光环，同时还可以提高用户参与度。

Astra Pro vs Elementor Pro – 头对头比较

没有插件的 WordPress 暗模式 – 有可能吗？

关于没有插件的 WordPress 暗模式

在 WordPress 中使用暗模式的好处

没有插件的 WordPress 暗模式 – 有可能吗？

1) 使用 HTML、CSS 和 JQuery 添加暗模式

添加 HTML 代码片段

使用 CSS 样式

将深色模式 CSS 类添加到正文标记

使用 Cookie 通过会话存储用户偏好

通过 body 类过滤器添加暗模式类

2. 使用具有暗模式选项的现成 WordPress 主题

手动或插件哪个方法用于暗模式激活？

QS 暗模式插件：完美的暗模式解决方案

我可以在暗模式激活时使用配色方案吗？

结论