Меню категорій

Кнопка перемикання стилю шаблона WordPress

Цікавий спосіб розмістити в шаблоні Wordpress кнопку для перемикання стилю шаблона. Додай функцію "Dark Mode" за допомогою JavaScript та Cookies.

Виникла в мене потреба поставити на сайт кнопку для перемикання між світлим і темним режимами. Трохи покопавшись, я все зробив, і аж тоді знайшов підказку на власному блозі 😀

Але порівнявши обидва варіанти, бачу, що новий трішки цікавіший – підключення стилів відбувається правильним “вордпресівським” способом, а кольори в CSS вказуються за допомогою змінних, що значно спрощує код.

JavaScript

Отож, що ми робимо? Створюємо файл cookies.js у каталозі assets/js та додаємо в нього три функції для роботи з cookies. Схоже до двох функцій у попередній статті, але розміщую те, що знайшов цього разу:

function set_cookie (name, value, exp_y, exp_m, exp_d, path, domain, secure) {
    var cookie_string = name + "=" + escape (value);

    if (exp_y) {
        var expires = new Date (exp_y, exp_m, exp_d);
        cookie_string += "; expires=" + expires.toGMTString();
    }

    if (path)
    cookie_string += "; path=" + escape (path);

    if (domain)
    cookie_string += "; domain=" + escape (domain);

    if (secure)
    cookie_string += "; secure";

    document.cookie = cookie_string;
}

function delete_cookie (cookie_name) {
    var cookie_date = new Date ();  // Текущая дата и время
    cookie_date.setTime (cookie_date.getTime() - 1);
    document.cookie = cookie_name += "=; expires=" + cookie_date.toGMTString();
}

function get_cookie (cookie_name)
{
    var results = document.cookie.match ('(^|;) ?' + cookie_name + '=([^;]*)(;|$)');

    if (results)
    return (unescape (results[2]));
    else
    return null;
}

Нижче дописуємо функцію для встановлення куки, яку будемо “вішати” на клац по кнопці:

function darkMode() {
	if (!get_cookie('dark-mode') || get_cookie('dark-mode') == 'no') {
        set_cookie('dark-mode', 'yes', 0x7FFFFFFF);
        document.location.reload(true);
	}
	else {
        set_cookie('dark-mode', 'no', 0x7FFFFFFF);
        document.location.reload(true);
	}
}

Що тут відбувається: коли ти клацаєш по заданій кнопці, вона викликає дану функцію. Функція перевіряє, чи встановлене значення куки “dark-mode”. Якщо не встановлене, або її значення – “no”, їй присвоюється значення “yes”. В іншому випадку (а іншим випадком у нас може бути тільки встановлене значення “yes”) кука “dark-mode” отримує значення “no”. Такий код дозволяє організувати власне ефект кнопки-перемикача.

Підключення стилів та скриптів

Тепер треба приєднати даний скрипт. У файлі шаблона functions.php додаємо такий код:

wp_enqueue_script( 'ivaniurablog-cookies', get_template_directory_uri() . '/assets/js/cookies.js', array(), _S_VERSION, true );

Також підключаємо необхідний файл стилів:

if (!$_COOKIE['dark-mode'] || $_COOKIE['dark-mode'] == 'no') {
		wp_enqueue_style( 'ivaniurablog-light-style', get_template_directory_uri() . '/assets/css/light.css', array(), _S_VERSION);
	}
	if ($_COOKIE['dark-mode'] == 'yes') {
		wp_enqueue_style( 'ivaniurablog-dark-style', get_template_directory_uri() . '/assets/css/dark.css', array(), _S_VERSION);
	}

Залежно від того, яке значення cookie встановлене, буде підключатися той чи інший файл стилів.

Кнопка

Далі переходимо у файл шаблона, де буде розміщена кнопка. Я роблю її у верхній частині сайту, тому відкриваю файл header.php і вставляю, де потрібно, наступний код:

<a class="darkmode-checker" onclick="darkMode()">
	<?php if (!$_COOKIE['dark-mode'] || $_COOKIE['dark-mode'] == 'no') : ?>
		<span class="dark"></span>
	<?php elseif ($_COOKIE['dark-mode'] == 'yes') : ?>
		<span class="light"></span>
	<?php endif; ?>
</a>

Тут усе зрозуміло: створюється посилання, клацання по якому викликає створену вище функцію darkMode(). А всередині нього в залежності від значення куки додається елемент span із класом dark або light. Ці два класи будемо зараз оформлювати.

Оформлення кнопки

Я на початку проговорився, що будуть використовуватися CSS-змінні. Так от, ними ми позначимо для початку основний колір шрифта та загальний фоновий колір сайту. З часом ти собі додаси більше стилів, для тесту поки що вистачить.

Отже, в основному файлі стилів задаємо дві змінні для основного кольору та фону:

body {
    color: var(--main-color);
    background: var(--main-bg-color);
}

Створюємо додатковий файл стилів /assets/css/light.css для світлого оформлення сайту та кнопки:

:root {
    --main-color: #282C34;
    --main-bg-color: #fff;
}
.dark {
    display: block;
    width: 5em;
    height: 2.5em;
    border: var(--main-color) 0.2em solid;
    border-radius: 5em;
}
.dark:before {
    content: "";
    display: block;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    background: var(--main-color);
    margin-top: -0.1em;
    margin-left: -0.1em;

}
.dark:after {
    content: "\f186";
    font-family: "Font Awesome 5 Free";
    font-weight: 700;
    position: absolute;
    font-size: 1.3em;
    margin-top: -1.6em;
    margin-left: 2.1em;
    color: var(--main-color);
}

І ще один файл /assets/css/dark.css для темного оформлення:

:root {
    --main-color: #bebebe;
    --main-bg-color: #282C34;
}
.light {
    display: block;
    width: 5em;
    height: 2.5em;
    border: var(--main-color) 0.2em solid;
    border-radius: 5em;
}
.light:before {
    content: "\f185";
    font-family: "Font Awesome 5 Free";
    font-size: 1.3em;
    font-weight: 700;
    color: var(--main-color);
    position: absolute;
    margin-top: 0.1em;
    margin-left: 0.5em;

}
.light:after {
    content: "";
    display: block;
    position: absolute;
    width: 2.3em;
    height: 2.3em;
    border-radius: 50%;
    background: var(--main-color);
    margin-top: -0.1em;
    margin-left: 2.4em;
}

Переконайся, що в тебе підключений значковий шрифт FontAwesome. Кнопки повинні виглядати ось так:

Готово. Тепер клац по кнопці перемикатиме в cookies значення, яке буде впливати на вибір одного з двох css-файлів.

Мінус такого підходу – після кліку по кнопці відбувається примусове перезавантаження сторінки. Варіант без перезавантаження на основі localStorage буде описаний у наступній статті. Заходь 😉

Прокоментувати