沒有插件的 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 暗模式插件：完美的暗模式解決方案

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

結論