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

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

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

Но раньше, если вы никогда не устанавливали WordPress, откройте для себя Как установить WordPress блог шаги 7 et Как найти, установить и активировать WordPress тему на своем блоге 

Тогда вернемся к тому, почему мы здесь.

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

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

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

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

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

Blogpascher темный режим

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

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

Youtube темный режим

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

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

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

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

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

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

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

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

Плагин Wordpress wp dark mode

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

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

На странице доступны другие параметры настройки. Настройки »WP Dark Mode. Однако в бесплатной версии они весьма ограничены.

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

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

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

Настроить внешний вид, переключить темный режим 1

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

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

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

Добавление темного режима в панель управления WordPress

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

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

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

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

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

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

Настройка внешнего вида панели мониторинга темного режима 1

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

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

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

Настройка внешнего вида панели мониторинга темного режима 2

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

Редактор блоков темного режима

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

Другие рекомендуемые ресурсы

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

Заключение

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

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

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

...