Как реализовать переключение тем на сайте, созданном на WordPress с конструктором Elementor?
Подскажите пожалуйста, как реализовать переключение тем на сайте, созданном на WordPress с конструктором Elementor
Сайт в темных тонах и нужно добавить возможность по клику на кнопку менять тему сайта, все нашедшее в интернете пробовал не работает, к примеру даже не работают свойства медиа запросов prefers-color-scheme и кроме того файлы стилей почему-то подключаются только через functions.php а в теге подключение дополнительных файлов не работает
marslab.space сайт
Дополнительно:
Ответы:
Создай отдельный css файл с названием темы, например, у тебя есть style-dark.css, ты создаёшь ещё один style-light.css где меняешь стили темы, и в JS при клике на кнопку переключения в head-link меняешь атрибут href с указанием своего пути в проекте "./style-light.css" Само собой, не забудь сохранить изменения в storage
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
В Elementor переключение темы лучше делать не заменой всего CSS-файла в
<head>, а через класс на<html>или<body>и набор CSS-переменных. Тогда не важно, как Elementor подключает свои стили: ваши правила просто переопределяют цвета, фоны и границы поверх текущей верстки.Добавьте CSS в дочернюю тему, в Custom CSS Elementor Pro или через
wp_enqueue_style()вfunctions.phpдочерней темы::root { --site-bg: #101014; --site-text: #f5f5f5; --site-card: #1b1b22; --site-accent: #c8a96a; } html.theme-light { --site-bg: #ffffff; --site-text: #171717; --site-card: #f3f3f3; --site-accent: #8a6428; } body { background: var(--site-bg); color: var(--site-text); } .elementor-section, .elementor-widget-container { color: var(--site-text); } .theme-card { background: var(--site-card); }
Кнопку можно добавить виджетом HTML в Elementor:
<button type="button" class="theme-toggle">Сменить тему</button>
JS подключите через отдельный файл или HTML-виджет, если это небольшой тест:
(function () { const root = document.documentElement; const button = document.querySelector('.theme-toggle'); const savedTheme = localStorage.getItem('siteTheme'); if (savedTheme === 'light') { root.classList.add('theme-light'); } if (!button) { return; } button.addEventListener('click', function () { root.classList.toggle('theme-light'); localStorage.setItem('siteTheme', root.classList.contains('theme-light') ? 'light' : 'dark'); }); })();(function () { const root = document.documentElement; const button = document.querySelector('.theme-toggle'); const savedTheme = localStorage.getItem('siteTheme'); if (savedTheme === 'light') { root.classList.add('theme-light'); } if (!button) { return; } button.addEventListener('click', function () { root.classList.toggle('theme-light'); localStorage.setItem('siteTheme', root.classList.contains('theme-light') ? 'light' : 'dark'); }); })();
prefers-color-schemeне переключает тему по клику, он только реагирует на системную настройку пользователя. А подключать стили в WordPress действительно нужно черезfunctions.phpиwp_enqueue_style(), потому что прямое добавление файлов в шаблон часто ломается из-за темы, кеша и порядка загрузки Elementor.Перед внедрением на рабочем сайте проверьте решение на копии или хотя бы сделайте резервную копию изменяемого файла. После правки включите отображение ошибок, откройте проблемную страницу в обычном и приватном окне, проверьте консоль браузера и логи PHP. Если задача связана с WordPress, WooCommerce или ACF, дополнительно проверьте поведение после очистки кэша и после выхода из админки: часть ошибок видна только для незалогиненного пользователя.
Если код работает только в одном шаблоне, лучше не оставлять его разрозненно в нескольких файлах. Вынесите повторяемую логику в функцию, небольшой плагин или template part, а в шаблоне оставьте только вызов. Так проще поддерживать решение после обновления темы, плагинов и PHP.