Делаем переключатель между CSS стилей или как сделать ночную тему для WordPress
Всё больше набирает популярность ночная тема (тёмная тема) оформления разных интерфейсов, на сайтах и в приложениях. В интернетах нашел один из хороших способов сделать это, но вариант был технически не идеален и не корректно работал для сайта на WordPress. Мой друг, хороший веб-разработчик @only_darkangel помог довести до ума работоспособность функции включения и выключения ночной темы в WP.
Как реализовать переключатель на ночную тему в WordPress?
- Определите стили в переменные, которые нужно подставлять непосредственно элементам сайта. Ниже пример для цвета фона:
root {
--body-tst-background: #fff;
}
[data-theme="dark"] {
--body-tst-background: #000;
}
body-tst {
background: var(--body-tst-background);
}
Получается, что в root базовые стили обычного оформления, в [data-theme=”dark”] стили для ночной темы. Кстати не обязательно это будет именно тёмная ночная тема, возможно захотите сделать просто переключатель между двумя своими CSS стилями. - В папке с темой WordPress создайте папку js и в ней создайте файл night.js (файл можно назвать как угодно). Этот файл не забудьте подключить в <head>. В файл поместите код, в котором на строке где “url:” укажите url Вашего сайта:
function ready(callback){
if (document.readyState!='loading') callback();
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', callback);
else document.attachEvent('onreadystatechange', function(){
if (document.readyState=='complete') callback();
});
}
ready(function(){
const toggleSwitch = document.querySelector('.theme-switch input[type="checkbox"]');
function switchTheme(e) {
var theme = false;
if (e.target.checked) {
document.documentElement.setAttribute('data-theme', 'dark');
theme = 'dark';
} else {
document.documentElement.setAttribute('data-theme', 'light');
theme = 'light';
}
if (theme) {
$('html').attr('data-theme',theme);
$.ajax({
type: "POST",
url: 'https://ВАШ-САЙТ.КОМ/wp-admin/admin-ajax.php',
data: {
action : 'set_site_theme',
theme : theme,
},
success: function (response) {
console.log(response);
}
});
}
}
toggleSwitch.addEventListener('change', switchTheme, false);
}); - Переходим к файлу functions.php, в самом начале размещаем такой код:
function register_my_session()
{
if( !session_id() )
{
session_start();
}
}
add_action('init', 'register_my_session');
add_action('wp_ajax_set_site_theme', 'set_site_theme_fn');
add_action('wp_ajax_nopriv_set_site_theme', 'set_site_theme_fn');
function set_site_theme_fn() {
if (isset($_POST['theme'])) {
$theme = $_POST['theme'];
if ($theme == 'dark' || $theme == 'light') {
$_SESSION['theme_type'] = $_POST['theme'];
echo "success";
}
} else {
echo "Error. POST doesnt exist, or data doesnt valid.";
}
wp_die();
} - В файле header.php в верху заменяем тег html на такой:
<html lang="ru" <?php if(isset($_SESSION['theme_type'])){echo 'data-theme="'.$_SESSION['theme_type'].'"';}?>> - И добавляем теперь сам переключатель. У себя добавил его в footer.php, но можете вставить в любое месте, где удобно.
<div class="theme-switch-wrapper">
<em>NIGHT</em>
<label class="theme-switch" for="checkbox">
<input type="checkbox" id="checkbox" <?php if(isset($_SESSION['theme_type'])){if($_SESSION['theme_type'] == 'dark'){echo 'checked';}}?>/>
<div class="slider round"></div>
</label> - Стили CSS для переключателя. В данном варианте стилей переключатель будет иметь фиксацию внизу экрана слева, как тут на Гравицапе, но можете переделать как угодно 🙂
/*переключалка на ночную тему */
.theme-switch-wrapper {
align-items: center;
position: fixed;
clear: both;
left: 15px;
bottom: 20px;
opacity: 0.5;
}
.theme-switch-wrapper:hover {
opacity: 1;
}
.theme-switch-wrapper em {
font-size: 1rem;
display: block;
}
.theme-switch {
display: inline-block;
height: 34px;
position: relative;
width: 60px;
}
.theme-switch input {
display:none;
}
.slider {
background-color: #000;
bottom: 0;
cursor: pointer;
left: 0;
position: absolute;
right: 0;
top: 0;
transition: .4s;
}
.slider:before {
background-color: #29628c;
bottom: 4px;
content: "";
height: 26px;
left: 4px;
position: absolute;
transition: .4s;
width: 26px;
}
input:checked + .slider {
background-color: #ccc;
}
input:checked + .slider:before {
transform: translateX(26px);
}
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
/*конец переключалки*/
Такой вот вариант переключения между CSS стилями работает плавно, сохраняется в сессии, не нагружает сайт. Делитесь статьёй в соц. сетях, пишите комменты 😉
Макс
16.04.2020
Привет, штуковину сделал – все работает, при переходе на другую страницу – сбрасывает обратно фон на белый. такое решается?
Кирилл
09.05.2022
Понимаю что вам ответ уже не очень нужен, но вдруг кому-то будет полезно. У меня была такая же ситуация, проверил сайт локально, все прекрасно работает. При переносе не сохраняется сессия и хоть ты тресни… Оказалось, что при переносе правок на сайт, забыл поменять ссылки в файле js, как только исправил, сессия начала сохранятся.)