Как добавить темный режим на ваш сайт WordPress с помощью этих 4 простых шагов

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

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

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

Хорошо, последнее может быть немного субъективным, но мы его придерживаемся.

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

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

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

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

Что такое темный режим и почему он полезен?

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

На типичном веб-сайте с черными буквами на белом фоне это обычно выглядит так, будто цвета просто инвертированы, но, как мы объясним ниже, это еще не все.

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

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

Наиболее заметные преимущества темного режима

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

Итак, преимущества темного режима включают в себя следующее:

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

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

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

Темный режим против ночного режима

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

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

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

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

Как добавить темный режим на ваш сайт WordPress с помощью плагина WP Dark Mode

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

Наши друзья из компании веб-дизайна в Майами помогли нам создать это пошаговое руководство, основанное на специализированном плагине под названием WP Dark Mode.

1. Установите плагин

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

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

Как и следовало ожидать, этот инструмент можно найти в каталоге плагинов WordPress.

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

Оттуда вы можете найти WP Dark Mode и нажать «Установить сейчас и активировать ».

2. Включите желаемые настройки

Вы можете включать и выключать темный режим на вкладке « Общие настройки ». Открыв эту вкладку, вы увидите, что две опции уже включены по умолчанию.

Это Enable Frontend Dark Mode и Enable OS Aware Dark Mode .

Первый включает темный режим на вашем веб-сайте, а второй означает, что функция будет активирована автоматически, если в ОС или браузере пользователя установлен темный режим.

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

3. Включите и настройте плавающий переключатель.

Если вы хотите дать пользователям возможность переключаться между темным и светлым режимами в любое время, вы также можете включить параметр « Показать плавающий переключатель» .

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

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

4. Экспериментируйте с различными цветовыми схемами темного режима

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

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

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

Как вы можете себе представить, бесплатная версия плагина WP Dark Mode предлагает здесь несколько ограниченные возможности, но вы сможете найти подходящее решение.

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

Бонус — включение темного режима на панели администратора WordPress.

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

Если цветовая схема WordPress по умолчанию слишком яркая на ваш вкус, у плагина WP Dark Mode есть решение. Вот как это сделать:

1. Установите плагин WP Dark Mode — здесь особо объяснять нечего. Инструкции по выполнению этого шага см. в разделе выше.
2. Включить Backend Dark Mode — эта опция находится на той же вкладке, что и другие важные настройки, о которых мы говорили ранее ( Общие настройки ). Вам нужно будет перейти в этот раздел и щелкнуть переключатель под названием « Включить Backend Darkmode». Не забудьте прокрутить вниз и нажать « Сохранить настройки », чтобы применить изменения.
3. Включите темный режим на панели администратора. Теперь на панели администратора появится переключатель вверху, позволяющий включить темный режим. Это особенно полезно для веб-сайтов с несколькими администраторами, поскольку каждый человек может независимо включать или выключать темный режим.
4. (Необязательно) Настройте цветовую схему панели администратора — при включенном темном режиме вы можете переключить некоторые цвета, чтобы все выглядело более красиво. Для этого перейдите в « Пользователи» > «Профиль» и выберите нужную палитру. После того, как вы установили цвета, нажмите « Обновить профиль », чтобы применить новые настройки.

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

Это обновление слишком просто, чтобы его игнорировать с помощью плагина WP Dark Mode, поэтому мы рекомендуем вам добавить эту прекрасную функциональность на свой сайт.

Биография автора: Кристофер — специалист по цифровому маркетингу в Digital Strategy One и блогер-фрилансер. Он сосредоточен на новых тенденциях в области веб-технологий и распространении цифрового голоса по различным каналам. В свободное время Кристофер играет на барабанах и в Magic: the Gathering.