GRAVITSAPA.INFO

Компьютеры, электроника, софт, авто, мото, вело, сайты, жизнь, советы :)

GRAVITSAPA.info - интересный блог

Делаем переключатель между CSS стилей или как сделать ночную тему для WordPress

59 просмотров Создание сайтов Нет комментов » 01 Сен 2019

Всё больше набирает популярность ночная тема (тёмная тема) оформления разных интерфейсов, на сайтах и в приложениях. В интернетах нашел один из хороших способов сделать это, но вариант был технически не идеален и не корректно работал для сайта на WordPress. Мой друг, хороший веб-разработчик @only_darkangel помог довести до ума работоспособность функции включения и выключения ночной темы в WP.

Как реализовать переключатель на ночную тему в WordPress?

  1. Определите стили в переменные, которые нужно подставлять непосредственно элементам сайта. Ниже пример для цвета фона:
    root {
    --body-tst-background: #fff;
    }
    [data-theme="dark"] {
    --body-tst-background: #000;
    }
    body-tst {
    background: var(--body-tst-background);
    }

    Получается, что в root базовые стили обычного оформления, в [data-theme=»dark»] стили для ночной темы. Кстати не обязательно это будет именно тёмная ночная тема, возможно захотите сделать просто переключатель между двумя своими CSS стилями.
  2. В папке с темой 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);
    });

  3. Переходим к файлу 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();
    }
  4. В файле header.php в верху заменяем тег html на такой:
    <html lang="ru" <?php if(isset($_SESSION['theme_type'])){echo 'data-theme="'.$_SESSION['theme_type'].'"';}?>>
  5. И добавляем теперь сам переключатель. У себя добавил его в 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>
  6. Стили 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 стилями работает плавно, сохраняется в сессии, не нагружает сайт. Делитесь статьёй в соц. сетях, пишите комменты 😉

Оставь свой коммент

NIGHT
Наверх