Как добавить переключатель день/ночь в WordPress (Bootstrap 5)?
Чтобы добавить переключатель «день/ночь» (темный/светлый режим) на сайт WordPress с использованием Bootstrap 5, можно использовать JavaScript для переключения темы и сохранить выбор пользователя в localStorage
, чтобы настройка сохранялась между сессиями.
Вот шаги для реализации этого переключателя:
1. Добавление кнопки переключателя в шаблон
Добавьте HTML-кнопку переключения в нужное место вашего шаблона, например, в файл header.php
:
<button id="themeToggle" class="btn btn-secondary">🌙</button>
2. Добавление JavaScript для переключения тем
Вставьте следующий JavaScript код в файл footer.php
или подключите отдельный файл JavaScript, который будет отвечать за логику переключения:
<script>
document.addEventListener('DOMContentLoaded', (event) => {
const htmlElement = document.documentElement;
const themeToggle = document.getElementById('themeToggle');
// Получаем текущую тему из localStorage или устанавливаем тему по умолчанию (light)
const currentTheme = localStorage.getItem('theme') || 'light';
htmlElement.setAttribute('data-bs-theme', currentTheme);
// Меняем иконку на кнопке в зависимости от темы
themeToggle.textContent = currentTheme === 'dark' ? '🌞' : '🌙';
// Функция переключения темы
themeToggle.addEventListener('click', function () {
const newTheme = htmlElement.getAttribute('data-bs-theme') === 'dark' ? 'light' : 'dark';
htmlElement.setAttribute('data-bs-theme', newTheme);
localStorage.setItem('theme', newTheme);
// Меняем иконку в зависимости от текущей темы
themeToggle.textContent = newTheme === 'dark' ? '🌞' : '🌙';
});
});
</script>
3. Добавление стилей для темного и светлого режимов
Теперь необходимо определить стили для обоих режимов. В файле style.css
или другом файле стилей добавьте следующее:
/* Стили для светлого режима (по умолчанию) */
body[data-bs-theme='light'] {
background-color: #fff;
color: #000;
}
/* Стили для темного режима */
body[data-bs-theme='dark'] {
background-color: #121212;
color: #fff;
}
a[data-bs-theme='dark'] {
color: #ffcc00;
}
/* Дополнительные стили для других элементов */
.navbar[data-bs-theme='dark'] {
background-color: #333;
}
.navbar[data-bs-theme='light'] {
background-color: #f8f9fa;
}
4. Пример подключения стилей Bootstrap
Если Bootstrap 5 еще не подключен к вашему сайту, подключите его в header.php
:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
5. Сохранение темы между сессиями
Используемый выше код сохраняет выбранную тему в localStorage
, так что при обновлении страницы или возврате пользователя на сайт, будет применена последняя выбранная тема.
6. (Опционально) Добавление классов Bootstrap для кнопки
Вы можете добавить дополнительные стили для кнопки с помощью классов Bootstrap, например, сделать кнопку круговой или добавить отступы:
#themeToggle {
position: fixed;
top: 20px;
right: 20px;
z-index: 1000;
padding: 10px;
border-radius: 50%;
}
Итог
Теперь на вашем сайте WordPress будет кнопка переключения между светлой и темной темами. Выбор темы сохраняется в localStorage
, и пользователи увидят свою предпочитаемую тему при следующем визите.
Комментариев: 0