(Последнее обновление: 09.11.2019)

Друзья, "тёмные времена наступили". Хотите реализовать ночной режим для своего сайта?  Вернее, как сделать в теме/шаблоне WodPress - ночной режим. Тогда читаем - как добавить тёмный/ночной режим на сайт WordPress. Это простенькое решение, позволяющее вашим посетителям включать / отключать темный режим на вашем сайте.

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

Добавляем ночной режим на сайт WordPress

Темный режим для сайта WP

Что касается SEO, то с использованием тёмной темы (ночного режима) никаких проблем нет – как и каких-то специальных рекомендаций. Ночной режим настраивается через CSS, а способ реализации CSS на сайте не влияет на то, как Google или Яндекс сканирует контент для индексации.

Сотрудник Google Джон Мюллер: Что касается SEO, то с использованием тёмной темы никаких проблем нет – как и каких-то специальных рекомендаций. Ночной режим настраивается через CSS, а способ реализации CSS на сайте не влияет на то, как Google сканирует контент для индексации.

В последнее время у вебмастеров появился тренд, связанный с активным внедрением ночного режима на сайты. Даже некоторые премиум темы WordPress уже имеют тёмный режим. А со временем, ночной режим (Dark Mode) может стать частью ядра WordPress, но вряд ли в ближайшем будущем. Так что, давайте не будем терять время и сделаем ночной режим у себя на WP первыми. Естественно, реализовать данную функцию можно с помощью простеньких с плагинов. Как сделать темную тему на сайте WP?  Как включить темный/ночной режим на сайте? Очень легко и просто.

Включаем Ночной режим на сайте WP

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

На сегодняшний день, есть пара-тройка модулей которые добавляют кнопки Dark Mode на сайт ВордПресс. Представляю плагины которые добавляют в вашу тему ночной режим. Это самый простой способ добавить темный режим на ваш сайт WordPress. Встречайте.

Dark Mode for WordPress

Очень простой плагин. Он добавляет кнопку темный режим к вашей теме. Plagin не имеет настроек. Автор добавит страницу настроек в новых версиях. А сейчас, установили через админку, активировали и готово.

Функция Ночной режим на сайте

Активация плагина активирует кнопку

Активация плагина добавляет кнопку переключения в темный режим. Вот так:

Кнопка включает темный режим при нажатии

Кнопка Dark Mode в теме GeneratePress

Одно нажатие и наступили тёмные времена. Удобно читать:

Полный стиль сайта в темном режиме

Включен ночной режим в блоге

Следующий плагин со страницей настроек.

Blackout: Dark Mode Widget

Создать темный режим на любом из ваших сайтов

Плагин ночного режима для сайта

Затемнение: виджет темного режима. Устанавливаем ночной режим на сайт. Он использует CSS mix-blend-mode, чтобы создать темный режим на любом из ваших сайтов. Plugin создает кнопку, с помощью которой ваши пользователи могут использовать для переключения между обычным и темным режимами. Такая же кнопка, как у первого plagina, только с настройками. Кнопку вы можете разместить в любом месте на станице сайта. Можно показывать переключатель только на страницах сообщений. А также, настроить размер и цвет кнопочки.

После стандартной установки и активации плагина переходите Настройки - Blackout:

Настройки затемнения для вашего сайта

Страница настроек плагина

Делаете нужные настройки. А вот результат:

Виджет переключения на ваш сайт, который активирует темный режим при нажатии

Тёмный режим активирован при нажатие кнопки в левой части страницы

Идём далее.

WP Night Mode

Чтобы улучшить удобство чтения текста, изображений и видео

WP ночной режим

WP Темный режим, для того, чтобы улучшить удобство чтения текста, изображений и видео. Разрешить пользователям изменять стиль веб-сайта во время просмотра в ночное время, что позволяет им чувствовать себя более комфортно и проводить больше времени на вашем сайте. После установки и активации используйте используйте класс wp-night-mode для любого элемента (например, пункта меню) или шорткод [wp-night-mode-button] для отображения кнопки включения Ночного режима.

Включать на сайте Ночной режим в меню

Добавьте переключатель Ночного режима в меню

А так добавьте переключатель Ночного режима с помощью шорткода перед текстом:

Шорткод в редакторе сообщения

Вставка шорткода перед сообщением. Кнопка встраивается в текст

А так будут кнопки переключения выглядеть во включенном состояние:

Переключатель на сайте ВордПресс

Встроенные кнопки. Опция ночного режима включена

Всё, друзья, плагины закончились. Остались лишь для админов сайтов на WP которые работают по ночам.

Панель администратора в темном режиме

Функция Тёмный режим для админов.  Есть специальные плагины которые сделают панель инструментов администратора WordPress темной. Именно, только для админов, не для посетителей.

 Плагин Dark Mode

Это плагин, который может стать частью ядра WordPress

Плагин темный режим

Самый популярный плагин для админки. Это плагин, который может стать частью ядра WordPress в будущем. Темный режим будет затемнять цвета консоли администратора, что облегчит вам работу ночью. Для этого, установите его и активируете. Потом зайдите в свой профиль и включите темный режим панели управления:

Активация тёмной темы админки

В ваш профиль поставьте галочку

Обновите профиль и оп-ля. Темный режим - это совершенство. Панель администратора WordPress выглядит супер:

Полный стиль панели администратора в темном режиме

WP Admin в Dark Mode

Если, по каким то причинам, вам данный плагин не подойдёт, то попробуйте этот:

DarkPress плагин WordPress

стиль панели администратора в темном режиме

Плагин для WordPress - DarkPress

Это простой плагин для изменения интерфейса администратора WordPress в Dark Mode. Установите, активируйте и пользуйтесь:

Используйте WordPress в тёмном цвете

Редактирование / Создание новой статьи / Страницы

Ночь наступила в админпанели. Круто. Ибо ночь темна и полна ужасов.

В заключение

Поскольку все OS, сервисы Twitter, YouTube, Reddit,  браузеры делают темный режим доступным в качестве опции пользовательского интерфейса, WordPress сайт определенно не должен оставаться позади. Установите функцию Ночной режим на сайт для своих посетителей. Они останутся довольны.

Господа, вам нравится тёмный режим на сайтах и планируете ли включать его на своём веб-ресурсе WordPress? Пишите в комментариях. У меня на этом всё. Удачи и до новых встреч. Пока, пока!