Виникла в мене потреба поставити на сайт кнопку для перемикання між світлим і темним режимами. Трохи покопавшись, я все зробив, і аж тоді знайшов підказку на власному блозі 😀
Але порівнявши обидва варіанти, бачу, що новий трішки цікавіший – підключення стилів відбувається правильним “вордпресівським” способом, а кольори в 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 буде описаний у наступній статті. Заходь 😉
Прокоментувати