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

Опубликовано: 2021-06-14

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

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

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

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

Что такое темный режим?

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

Зачем добавлять темный режим на свой сайт WordPress?

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

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

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

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

Droit Dark Mode на WordPress.org

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

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

Есть 3 способа установить плагин WordPress.

Метод 1: Сначала необходимо скачать и разархивировать плагин. После этого разархивируйте файл droit-dark-mode.zip и поместите его в каталог / wp-content / plugins / . На последнем шаге вам нужно перейти в Plugins »Admin и активировать плагин.

Метод 2: Еще один шаг, который вы можете выполнить, - это установить этот плагин темного режима . Панель управления » Плагин » Добавить новый » Искать 'Droit Dark Mode' » Установить » Активный .

Droit Dark Mode на странице поиска плагинов

Метод 3: Есть еще один шаг. Сначала необходимо загрузить droit-dark-mode.zip, затем выполнить следующие действия: Панель инструментов> Плагин> Добавить новый> Загрузить zip-файл » Активный.

Шаг 2: проверка темного режима

После активации перейдите на страницу « Настройки» администратора WordPress »Темный режим Droit и выберите вкладку« Общие настройки ». Вас немедленно направят туда. Когда на устройстве посетителей установлен темный режим, они мгновенно просматривают версию вашего сайта в темном режиме.

Общие настройки в Droit Dark Mode

Вы также найдете опцию «Switch Style», которую вы можете включить или выключить по своему усмотрению; по умолчанию он будет включен. Этот переключатель может быть показан в любом месте вашего веб-сайта, и пользователь может выбирать между темным режимом и обычным режимом с помощью этого переключателя.

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

Шаг 3. Расширенные настройки

Что ж, The Droit Dark Mode поставляется как в виде бесплатного плагина, так и в платной версии. Бесплатная версия не позволяет вам слишком много вариантов настройки, тогда как платная версия позволяет вам настраивать этот плагин темного режима так, как вы хотите.

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

Изменение стиля переключателя

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

Блок Гутенберга можно использовать для добавления кнопки переключения к содержимому любого сообщения или страницы.

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

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

Настройки дисплея в Droit Dark Mode

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

Изменение цветов темного режима

У вас будет несколько цветовых предустановок на выбор из более чем 10 уникальных цветовых предустановок для быстрого изменения цвета темного режима из цветовой палитры. Просто перейдите к настройке Droit Dark Mode, затем прокрутите до настроек стиля, и вы найдете настройку параметров цвета, которую вы можете настроить по своему выбору.

Более того, все основные темы на рынке совместимы с плагином Droit Dark Mode, так что все готово.

В бесплатной версии у вас будет возможность выбрать один из двух цветов.

Предустановленный цвет в Droit Dark Mode

Как добавить темный режим в админку WordPress

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

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

Шаг 1: Как добавить

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

Включить Backend Dark Mode в Droit Dark Mode

Шаг 2: дополнительные параметры и функции настройки

Давайте рассмотрим некоторые функции, которые вы можете найти в этом плагине темного режима в области администратора.

Выбор цвета

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

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

Пользовательские настройки

Настройка ночного режима для разных страниц и сообщений

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

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

Выделение различных продуктов по содержанию

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

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

Пользовательский цвет и текст переключателя

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

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

Настройка изображения

Изображение - это первое, что привлекает внимание зрителя на любом сайте. С версией Droit Dark Mode pro вы можете с легкостью редактировать яркость, непрозрачность и контрастность вашего изображения.

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

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

Вывод

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

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