Как активировать ночной режим в WordPress

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

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

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

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

Как активировать ночной режим на панели управления WordPress

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

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

После установки плагина Dark Mode каждый пользователь вашего WordPress будет иметь в своем профиле возможность активировать его на своей панели инструментов:

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

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

К сожалению, есть нерешенная проблема с плагином WordPress Dark Mode: обеспечить совместимость с редактором блоков Gutenberg. На следующем снимке экрана вы можете видеть, что он еще не может применить темный фон к Гутенбергу:

Я предполагаю, что если плагин будет достаточно успешным, и пользователи просят его, его разработчики в конечном итоге адаптируют его, чтобы редактор блоков также появлялся в ночном режиме. В любом случае бешеный темп развития Гутенберга и его «частые» обновления стилей делают адаптацию несколько сложной.

Как активировать ночной режим для ваших посетителей WordPress

Плагин Dark Mode добавляет ночной режим только на панель инструментов WordPress. Остальная часть вашего веб-сайта, то есть интерфейс, который видят посетители, будет продолжать выглядеть так же, без каких-либо изменений.

Если вы хотите, чтобы ваши посетители имели возможность активировать ночной режим на вашем веб-сайте, используя темный фон вместо светлого, вам необходимо установить плагин WP Night Mode.

Этот плагин, как и Dark Mode, совершенно бесплатный, и он также доступен в каталоге плагинов WordPress.

После установки вы ничего не увидите ни в настройках , ни в каком-либо дополнительном меню. Что вам нужно сделать, так это перейти в меню « Внешний вид » и там отредактировать меню. В вашем главном меню вы должны добавить пользовательскую ссылку без какого-либо конкретного URL-адреса. Этот новый пункт меню поможет нам добавить переключатель для включения и выключения ночного режима.

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

После того, как вы это сделаете, когда вы собираетесь редактировать пункт меню, который мы добавили перед вами, вы увидите дополнительное поле, в которое вы можете добавить классы CSS. Здесь вы должны включить класс CSS wp-night-mode . Этот класс нужен WP Night Mode для определения того, какой элемент следует использовать в качестве переключателя ночного режима.

По умолчанию WP Night Mode — это плагин, который не добавляет темных тонов в ваш интерфейс. Вы должны быть тем, кто выбирает темные цвета, которые вы хотите показать как для фона, текста, так и для ссылок. Чтобы определить эти цвета, вам нужно перейти в меню « Внешний вид » и там открыть меню « Настроить ».

Откроется настройщик WordPress, и там вы найдете опцию « Ночной режим ». Если вы выберете его, вы увидите, что у вас есть возможность активировать ночной режим по умолчанию и создать несколько стилей. В каждом стиле вы определяете цвет фона, цвет текста и цвет ссылок.

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

К сожалению, результат не идеален: некоторые элементы по-прежнему имеют светлый фон, что в ночном режиме выглядит странно. Но не волнуйтесь, мы можем это исправить. Из самого настройщика вы можете добавить дополнительные правила CSS, чтобы исправить эти небольшие проблемы.

Вернитесь в настройщик, и вы увидите опцию « Дополнительный CSS ». Если вы выберете его, у вас будет возможность написать правила CSS прямо здесь. Эти правила могут быть следующего типа:

 body.wp-night-mode-on .class-of-the-element-to-fix { color: # 000; }

Имейте в виду, что на самом деле плагин применяет класс CSS wp-night-mode-on в теге body вашего веб-сайта. Поэтому, если вы хотите исправить фон HTML-элемента и сделать его темным, все, что вам нужно сделать, это найти селектор для этого элемента и применить исправление, когда тег body имеет класс wp-night-mode-on .

В следующем сравнении вы можете увидеть базовое сравнение между обычным режимом и ночным режимом с цветами, которые мы применили:

Добавить ночной режим в ваш WordPress очень просто благодаря паре плагинов. Сегодня мы рассмотрели плагины, которые помогают нам активировать ночной режим на панели управления WordPress и во внешнем интерфейсе.

Вы постоянный пользователь ночных режимов в своих приложениях? Не забудьте прокомментировать ниже свое мнение!

Избранное изображение Присциллы Дю През на Unsplash.