Как легко добавить темный режим на ваш сайт WordPress

Вы хотите добавить темный режим на свой сайт WordPress? Многие устройства теперь имеют встроенную поддержку темного режима. Добавление темного режима на...

Вы хотите добавить темный режим на свой сайт WordPress?

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

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

Что такое темный режим и зачем его добавлять на свой сайт?

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

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

Если у вас есть iPhone или устройство Android, вы можете переключиться в темный режим просто с помощью тумблера.

Кроме того, на компьютере вы можете просматривать веб-сайты в темном режиме с помощью расширения Chrome, например, Night Eye. Вот как выглядит сайт WPBeginner с использованием этого расширения:

Веб-сайт WordPress, просмотренный с помощью расширения Chrome 'Night Eye'

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

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

Просмотр YouTube с включенной опцией темной темы

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

Сначала мы рассмотрим добавление темного режима на ваш сайт WordPress. Затем мы рассмотрим добавление темного режима в панель администратора WordPress.

Совет: Хотите ли вы получить сайт с темной цветовой схемой, даже если устройство пользователя находится в обычном или дневном режиме? Затем ознакомьтесь с нашим списком лучших темных тем для WordPress.

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

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

После активации перейдите в раздел Настройки » WP Dark Mode страницу в админке WordPress и перейдите на вкладку «Общие настройки». Вы должны быть перенаправлены туда автоматически.

Здесь для вас включена настройка ‘Enable OS aware Dark Mode’. Это означает, что посетители будут автоматически видеть версию вашего сайта в темном режиме, когда их устройство настроено на темный режим.

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

Страница общих настроек для плагина WP Dark Mode

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

Переключатель темного режима теперь отображается на сайте для посетителей

Есть больше вариантов настройки, доступных на Настройки » WP Dark Mode страница. Однако эти возможности довольно ограничены с помощью бесплатного плагина.

Например, чтобы изменить стиль плавающего переключателя, достаточно перейти на вкладку Display Settings:

Выбор типа кнопки переключения ночного режима в Настройках отображения

Вы также можете настроить цвета темного режима с помощью вкладки Настройки стиля:

Выбор цветовой схемы темного режима в Настройках стиля

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

Примечание: В бесплатной версии WP Dark Mode вы получаете только первые 2 стиля плавающего переключателя и первые 2 цветовых пресета на выбор.

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

Добавление темного режима в админку WordPress

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

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

Просто перейдите на Настройки » WP Dark Mode страницу и перейдите на вкладку Общие настройки. Затем переключите переключатель ‘Enable Backend Darkmode’ в положение «on». Не забудьте нажать кнопку Сохранить настройки в нижней части страницы:

Включите тумблер Enable Backend Dark Mode, чтобы вы могли использовать темный режим в админке WordPress

Теперь вы увидите новый переключатель в верхней панели вашей области администратора:

Тумблер в админке WordPress для переключения между светлым (нормальным) и темным цветом для вашего интерфейса администратора

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

Совет: Если на вашем сайте несколько пользователей WordPress, каждый может включать и выключать темный режим по своему усмотрению.

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

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

Выбор цветовой схемы администратора в WordPress, на странице профиля пользователя

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

Включение темного режима в редакторе блоков WordPress

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

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

Источник: www.wpbeginner.com

Оцените статью
Добавить комментарий