Темный режим WordPress без плагина — возможно ли это?

Опубликовано: 2022-10-18

Оглавление

О темном режиме WordPress без плагина

Вы, вероятно, перегружаете свои глаза, проводя много времени перед экраном. Поэтому важно, чтобы вы успокаивали их при использовании компьютеров. Один из самых эффективных способов дать глазам отдохнуть — изменить настройку экрана на темный режим.

Владельцы веб-сайтов должны и могут добавлять темный режим на свои веб-сайты, чтобы улучшить их визуальное восприятие. Если вы используете WordPress для своего сайта, добавить темный режим не составит труда. Вы можете сделать это как вручную, так и установив плагин.

Мы согласны с тем, что этот плагин — лучшее решение для создания темной версии вашего сайта WordPress. Но у нас также есть ответы для тех, кто думает, что невозможно включить темный режим WordPress без плагина! Да, это возможно.

Здесь мы поговорим о добавлении темного режима с использованием плагина и без него. А также обсудить, кто где превосходит. Позже в этой статье вы также познакомитесь с одним из наших любимых плагинов под названием QS Dark Mode.

Так что следите за обновлениями!

Преимущества использования темного режима в WordPress

Почему вы должны использовать темный режим в WordPress? На это есть несколько веских причин. Вы лично осознаете его необходимость, просматривая свой компьютер ночью с усталыми глазами.

Будучи владельцем веб-сайта, вы можете принести много пользы пользователям, добавив этот режим на свой веб-сайт. И это также должно повысить ценность вашего бизнеса.

Это еще не все преимущества; давайте узнаем некоторые из них ниже.

  • Значительно сводит к минимуму белый свет, исходящий от экрана компьютера.
  • Снижает нагрузку на глаза
  • Это экономит энергию и увеличивает срок службы батареи
  • Увеличивает время на странице за счет улучшения взаимодействия с пользователем
  • Создает эстетическую ауру

Так что да, это в значительной степени причины, по которым Dark Mode — отличный вариант для вашего сайта WordPress.

Темный режим WordPress без плагина — возможно ли это?

Теперь самое интересное. Здесь мы увидим, как вы можете выключить свет на своем сайте WordPress без установки какого-либо плагина.

Есть два способа сделать это —

  1. Добавление темного режима с помощью HTML, CSS и JQuery
  2. Использование готовых тем с включенным темным режимом

Давайте рассмотрим оба этих метода подробно ниже.

1) Добавьте темный режим с помощью HTML, CSS и JQuery.

Если вы являетесь разработчиком темы, вам следует предпочесть этот ручной метод, чтобы включить переключатель темного режима на ваш сайт WordPress. В этом методе вам нужно немного написать код, связанный с HTML, CSS и JQuery.

Не беспокойтесь, если кодирование покажется вам трудным, потому что здесь вы можете получить готовые фрагменты кода. Таким образом, вы можете просто скопировать и вставить их в нужное место, чтобы включить темный режим.

Не стесняйтесь использовать эти фрагменты, поскольку они имеют открытый исходный код и бесплатны для использования.

  • Добавьте фрагмент кода HTML

Сначала добавьте фрагмент HTML, чтобы создать кнопку переключения темного режима. Все, что вам нужно сделать, это скопировать и вставить следующий фрагмент в верхний или нижний колонтитул вашей темы.

<div class="кнопка wpnm">

<div class=”wpnm-button-inner-left”></div>

<div class="wpnm-button-inner"></div>

</div>

  • Стиль с помощью CSS

Теперь вам нужно стилизовать кнопку или переключатель темного режима с помощью следующего фрагмента CSS.

/* Переключатель темного режима */

.wpnm-кнопка {

размер шрифта: 16px

}

.wpnm-кнопка-внутренняя-левая: пусто {

поле слева: -0.625em

}

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

box-sizing: граница-коробка;

маржа: 0;

заполнение: 0;

/*переход*/

-webkit-transition: 0,4 сек.

-moz-переход: 0,4 с облегчение входа-выхода;

-o-переход: 0,4 с облегчение входа-выхода;

переход: 0,4 с облегчение входа-выхода;

контур: нет

}

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

отображение: встроенный блок;

размер шрифта: 0,875 em;

положение: родственник;

отступ: 0em;

высота строки: 1em;

курсор: указатель;

цвет: rgba(149, 149, 149, 0,51);

вес шрифта: нормальный

}

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

содержание: ";

дисплей: блок;

положение: абсолютное;

z-индекс: 1;

высота строки: 2,125 em;

отступ текста: 2.5em;

высота: 1см;

ширина: 1см;

поле: 0,25 em;

/*граница-радиус*/

-webkit-border-radius: 100%;

-moz-border-radius: 100%;

радиус границы: 100%;

справа: 1,625 см;

внизу: 0em;

фон: #FFB200;

преобразование: поворот (-45 градусов);

box-shadow: 0 0 0.625em белый

}

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

содержание: "";

отображение: встроенный блок;

ширина: 2,5 см;

высота: 1,5 см;

-webkit-border-radius: 1em;

-moz-border-radius: 1em;

радиус границы: 1em;

фон: rgba(255, 255, 255, 0,15);

вертикальное выравнивание: посередине;

поле: 0 0,625em;

граница: 0,125em сплошная #FFB200

}

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

справа: 1,0625 эм;

box-shadow: 0.3125em 0.3125em 0 0 #eee;

фон: прозрачный

}

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

фон: rgba(0, 0, 0, 0,15);

граница: сплошной белый 0,125 em

}

.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);

вес шрифта: полужирный

}

Этот фрагмент из плагина, и автор этого плагина, Марко Арула.

  • Добавьте класс CSS Dark Mode в тег Body

Теперь вам нужно добавить этот конкретный класс в тег body, так как это позволит вам позже настроить макет.

Давайте сделаем это.

jQuery (функция ($) {

/*Нажмите на значок темного режима. Добавьте классы темного режима и оболочки.

Сохранение пользовательских настроек через сеансы*/

$('.wpnm-кнопка').click(функция() {

//Показать либо луну, либо солнце

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

//Если выбран темный режим

если ($('.wpnm-button').hasClass('active')) {

// Добавляем класс темного режима в тело

$('тело').addClass('темный режим');

// Сохраняем настройки пользователя в хранилище

localStorage.setItem('темный режим', правда);

} еще {

$('тело').removeClass('темный режим');

localStorage.removeItem('темный режим');

}

})

//Проверить хранилище. Показать предпочтения пользователя

если (localStorage.getItem («темный режим»)) {

$('тело').addClass('темный режим');

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

}

})

Теперь вы можете проверить и проверить, добавлен ли класс CSS «темного режима» в качестве основного класса. Затем добавьте темный фон, чтобы убедиться, что он работает нормально.

body.dark-mode * {

фон: #333;

}

Поскольку мы делаем это в браузере или на стороне клиента, а сервер ничего не знает, вы увидите, что темный режим загружается после загрузки светлого режима. Здесь тело рендерится без темного режима, и JS ждет загрузки DOM перед добавлением класса.

Так что это не идеальное решение для пользователей; должен быть лучший способ улучшить опыт. Давайте узнаем, что.

  • Используйте файлы cookie для сохранения пользовательских настроек во время сеансов

Итак, давайте посмотрим, как вы можете добавить класс body на сервер, чтобы он загружался перед обслуживанием. Лучший способ сделать это — использовать файлы cookie для сохранения пользовательских настроек. Таким образом, вы должны создать файл cookie для предпочтений пользователя в темном режиме и соответствующим образом добавить класс тела темного режима.

Это включит класс тела в темном режиме при отображении html. Поэтому вам нужно переписать код JS следующим образом.

jQuery (функция ($) {

//Создаем объект cookie

вар cookieStorage = {

setCookie: функция setCookie (ключ, значение, время, путь) {

var expires = новая дата();

expires.setTime (expires.getTime () + время);

вар значение_пути = ”;

если (тип пути !== 'undefined') {

pathValue = 'путь=' + путь + ';';

}

document.cookie = ключ + '=' + значение + ';' + pathValue + 'expires=' + expires.toUTCString();

},

getCookie: функция getCookie (ключ) {

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

вернуть ключевое значение? ключевое значение[2] : ноль;

},

removeCookie: функция removeCookie (ключ) {

document.cookie = ключ + '=; Максимальный возраст=0; путь=/';

}

};

//Нажмите на значок темного режима. Добавьте классы темного режима и оболочки. Сохранение пользовательских настроек через сеансы

$('.wpnm-кнопка').click(функция() {

//Показать либо луну, либо солнце

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

//Если выбран темный режим

если ($('.wpnm-button').hasClass('active')) {

// Добавляем класс темного режима в тело

$('тело').addClass('темный режим');

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

} еще {

$('тело').removeClass('темный режим');

setTimeout (функция () {

cookieStorage.removeCookie('yonkovNightMode');

}, 100);

}

})

//Проверить хранилище. Показать предпочтения пользователя

если (cookieStorage.getCookie('yonkovNightMode')) {

$('тело').addClass('темный режим');

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

}

})

  • Добавьте класс темного режима через фильтр класса тела

Итак, мы создали файл cookie с именем «yonkovNightMode». Он будет активирован, когда пользователь выберет опцию темного режима. Но вы должны сначала получить этот файл cookie с помощью PHP, а затем добавить его в класс 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 !== ”) {

// Добавляем класс тела "темный режим"

return array_merge($classes, array('темный режим'));

}

вернуть $классы;

}

add_filter('body_class', 'yonkov_dark_mode');

Вы закончили

Итак, вы фактически создали полнофункциональный прототип макета в темном режиме. Фрагменты были взяты из плагинов WordPress с открытым исходным кодом. Таким образом, вы можете использовать его на любом из своих веб-сайтов WordPress, чтобы добавить опцию темного режима для лучшего взаимодействия с пользователем.

2. Используйте готовые темы WordPress с темным режимом

Как насчет выбора готовой темы WordPress, в которой уже установлена ​​кнопка переключения темного режима. Таким образом, вы можете использовать темный режим на своем сайте WordPress без использования плагина. Это также поможет вам избежать настройки, поскольку большинство тем необходимо настраивать с помощью плагина ночного режима или пользовательских кодов CSS.

Итак, какие темы WordPress поддерживают темный режим наряду со светлым? Здесь мы представили вам несколько популярных тем WordPress с макетом в темном режиме. Давай выясним.

  • Twenty Twenty One: это стандартная тема WordPress с макетом в темном режиме. По умолчанию он отключен, и вы должны включить его в параметрах темы.
  • Estera: это популярная тема WordPress для сайтов WooCommerce. Он поставляется с кнопкой переключения темного режима, позволяющей пользователям переключаться между светлым и темным режимом.
  • HIghStarter: эта легкая тема WordPress популярна для сайтов-портфолио. Он имеет переключатель темного режима без плагина, установленного отдельно. И это позволяет пользователю переключаться между светлым и темным режимом.
  • Mate: это красиво оформленная тема WordPress, которая позволяет выбирать между светлым или темным режимом прямо из заголовка сайта.

Руководство или плагин Какой метод использовать для активации темного режима?

Мы уже обсуждали, как вы можете вручную активировать темный режим на своем веб-сайте WP. И мы знаем, что многим из вас будет сложно включить темный режим, особенно в части кодирования.

Поэтому мы рекомендуем вам выбрать его как второй вариант. Потому что, когда дело доходит до выбора между ручным методом или методом плагина, мы предпочитаем вариант с плагином, поскольку он может быстро и удобно добавить кнопку переключения темного режима на сайт.

Говоря об идеальном плагине, у нас есть наш любимый, который можно порекомендовать здесь: плагин QS Dark Mode. Это плагин, который добавляет великолепную темную схему на ваш сайт и позволяет вам справиться с тенденцией «ухода в темноту».

Давайте посмотрим, почему вам следует установить плагин темного режима, особенно плагин QS Dark Mode, а не использовать ручной метод.

Плагин QS Dark Mode: идеальное решение для темного режима

Есть немало причин, по которым плагин QS Dark Mode может стать идеальным решением для темного режима для вашего сайта. Некоторые из них включают:

  • Это бесплатно
  • Пользовательская поддержка CSS
  • Различные стили темного переключателя, включая различные анимации и тексты CTA.
  • Предлагает темный режим на основе времени
  • Возможность оптимизировать расположение кнопки
  • Широкий выбор темных цветовых схем
  • Поддержка изображения и размера шрифта на основе темного режима
  • WooCommerce поддерживается

Что касается установки плагина, это точно так же, как установка любого другого плагина на ваш сайт WordPress. Но если вы все еще находитесь в исправлении, мы можем помочь вам с некоторыми инструкциями здесь. Давайте проверим.

  • Загрузите плагин QS Mode и загрузите файлы в соответствующий каталог, который обычно представляет собой каталог /wp-content/plugins/plugin-name.
  • Чтобы установить плагин прямо с экрана плагинов WordPress. Нажмите «Плагины» > «Добавить новый» на панели инструментов WP, затем найдите плагин в строке поиска и нажмите «Установить».
  • Активируйте плагин QS Dark Mode на экране «Плагины».
  • После активации ваш темный режим должен быть включен.
  • Вы можете переключиться в темный режим, нажав на переключатель на экране.
  • Щелкните переключатель еще раз, чтобы активировать светлый режим.
  • Чтобы настроить, вы можете проверить все настройки на боковой панели WP Admin Dark Mode плагина.

Могу ли я использовать цветовую схему, когда активен темный режим?

Темный режим призван уменьшить количество белого или синего света, исходящего от экрана. Это не значит, что вы должны все время становиться черным. Вы по-прежнему можете выбирать между цветовыми схемами, даже когда активирован темный режим, например, то, что вы можете сделать с плагином QS Dark Mode.

Но цвета подобраны таким образом, чтобы содержимое отображалось с высоким контрастом со светлым передним планом и темными цветами фона.

Вывод

Так можно ли добавить темный режим на сайт WordPress без плагина. Но если вы сами не являетесь разработчиком темы или кодером, вы не предпочтете использовать этот ручной метод.

Вместо этого было бы разумнее и проще добавить плагин темного режима. Мы упомянули наш любимый плагин, плагин QS Dark Mode, который вы можете использовать, чтобы сделать свой сайт более презентабельным и приятным для глаз.

Помните, что затемнение — это не только здоровье ваших глаз, но и эстетическая привлекательность вашего сайта. Делая это, вы можете добавить ауру к общему визуальному опыту, а также улучшить взаимодействие с пользователем.

Astra Pro против Elementor Pro — сравнение лицом к лицу