Как включить темный режим на сайте WordPress? –

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

Тема темного режима и соображения

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

Помните, что независимо от того, используете ли вы плагин или тему для темного режима, в исходный код будет добавлено много CSS и JavaScript. Вы должны использовать плагины кэширования, такие как WP Rocket или Autoptimize, для агрегирования встроенных стилей/JS и задержки/отсрочки файлов, чтобы не повлиять на показатель скорости страницы.

Темный режим CSS и JS в исходном коде

Плагин WP Rocket

Получите 100/100 баллов PageSpeed ​​за счет оптимизации CSS, JS, предварительной загрузки страниц и полностраничного кэширования.

Плагины темного режима для WordPress

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

• DarkLooks — переключатель темного режима – для переключения режима интерфейса с полной настройкой.
• Темный режим для WP Dashboard – для панели администратора WordPress без настроек.
• WP Dark Mode — лучший плагин темного режима и социальных сетей для WordPress – для внешнего интерфейса, внутреннего интерфейса и редактора блоков с разочаровывающим повышением продаж профессиональных функций.

1. Включите темный режим во внешнем интерфейсе WordPress с помощью плагина DarkLooks.

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

Отображение сайта по умолчанию в браузере Chrome

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

Установите плагин DarkLooks Dark Mode для WordPress

Перейдите в раздел «DarkLooks > Настройки», где вы можете найти все параметры настройки.

• Общие настройки – здесь вы можете включить темный режим, кнопку-переключатель и использовать опцию ОС вместо опции плагина.

Общие настройки в плагине DarkLooks

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

Переключить настройки дизайна в плагине DarkLooks

• Цветовая предустановка – выберите параметры «Метод установки цвета» и «Предустановленный цвет», чтобы выбрать одну из доступных предустановок. Вы также можете установить собственные цвета для темного режима. Черный и светло-серый пресет работает из коробки в большинстве случаев.

Установить цветовую предустановку для темного режима

• Настройка изображения – загрузить логотип для светлых и темных режимов и установить непрозрачность для изображений в темных режимах.
• Основанный на времени – запланировать темный режим на основе установленного времени начала и окончания.
• Пользовательские CSS – добавьте свой собственный CSS, чтобы настроить любые элементы, которые не выглядят должным образом в темном режиме. Редактор поддерживает подсветку синтаксиса и показывает ошибки/предупреждения, что помогает проверить ваш CSS.

Все эти опции бесплатны без какой-либо разочаровывающей продажи профессиональной версии (хотя вы можете найти рекомендуемые плагины от автора отдельно в разделе «DarkLooks > Рекомендуемые плагины»). После включения темного режима наш тестовый сайт выглядит так, как показано ниже, без какого-либо пользовательского CSS. Как видите, переключатель темного режима добавлен как в меню, так и в правом нижнем углу. Вы можете использовать один из этих вариантов кнопок, оптимальный для настройки вашего сайта.

Темный режим применяется к сайту WordPress

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

Единственная функция, отсутствующая в плагине DarkLooks, заключается в том, что он не поддерживает темный режим для панели администратора WordPress. Если вам нужна эта функция для вашего бэкэнда, установите и активируйте плагин «Dark Mode for WP Dashboard». Как только вы активируете плагин, он мгновенно применит темный режим с предустановленным цветом, как показано ниже.

Панель инструментов WordPress в темном режиме

Для этого плагина нет доступных настроек. Вы можете переключать темный режим и режим по умолчанию с помощью кнопки «Переключение темного режима» на верхней панели администратора. Если вы хотите отключить темный режим для уровня пользователя, перейдите в раздел «Пользователи > Профиль», установите флажок «Отключить темный режим» и сохраните изменения.

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

3. Темный режим для редактора Gutenberg, интерфейса и бэкэнда с темным режимом WP.

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

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

Общие настройки тёмного режима WP

• Расширенные настройки – здесь вы можете сделать темный режим по умолчанию для читателей.
• Настройки цвета – выберите цветовую предустановку по умолчанию в качестве золотого или сапфирового режима.

Предустановленные параметры цвета темного режима WP

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

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

Параметры Гутенберга в тёмном режиме WP

Ниже показано, как выглядит тестовый сайт в цветовых пресетах Gold и Sapphire с использованием плагина WP Dark Mode.

Фронтенд золотого цвета темного режима WP

Интерфейс WP Dark Mode Sapphire Color

Заключительные слова

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