WordPress Cookie предупреждение без плагина

WordPress Cookie предупреждение без плагина – это то, что вам нужно, чтобы соблюдать закон и не замедлять работу вашего сайта. Лично я пришёл к этому не сразу и использовал плагин, но потом работал над ускорением сайта по PageSpeed Insights и отказался от плагина.

Почему стоит минимизировать использование плагинов WordPress

Я всегда был убежден в том, что плагины для WordPress нужно использовать как можно меньше. Причин несколько – это и проблемы с безопасностью и, конечно, замедление работы всего сайта в целом. Поэтому если у меня есть возможность не использовать очередной плагин, я ей сразу пользуюсь.

Исключения из правил

Также стоит упомянуть, что в плагинах в целом нет ничего криминального и иногда они действительно спасают. Если вам нужно сделать интернет-магазин, конечно, на помощь приходит всем известный WooCommerce. Ну или куда мы без ACF, когда нужно добавить множество произвольных полей. Я думаю суть вы уловили.

WordPress Cookie предупреждение без плагина

Но сегодня моя история как раз о том случае, когда без плагина можно легко обойтись и я поделюсь своим простым решением. Вы сможете применить мои наработки на своем сайте WordPress, а также в целом на любом сайте.

В качестве демонстрации итогового результата, пожалуйста используйте мой сайт (вы скорее всего уже на нём, если это читаете). Просто откройте любую страницу в режиме инкогнито, чтобы снова увидеть и рассмотреть Cookie предупреждение.

Вот так это выглядит (внимание в нижний левый угол):

Видео демонстрация WordPress Cookie

Посмотрите короткую видео демонстрацию предупреждения про Cookie на моём WordPress сайте.

Код моего решения

После долгих и утомительных прелюдий я делюсь с вами кодом своего решения и тем как я его использую на своём WordPress сайте.

Этот код размещаю в footer.php

<div id="cookie-notice" class="cookie-notice">
    <p>Продолжая использовать мой сайт вы&nbsp;соглашаетесь с&nbsp;<a href="/cookie/">условиями использования</a> файлов cookie и&nbsp;<a href="/privacy/">политикой</a> в&nbsp;отношении обработки персональных данных.</p>
    <button id="accept-cookies">Хорошо</button>
</div>

<script>
	document.addEventListener("DOMContentLoaded", function() {
			let cookieNotice = document.getElementById("cookie-notice");

			if (localStorage.getItem("cookieAccepted") === "true") {
					// Уведомление не показываем
					cookieNotice.style.display = "none";
			} else {
					// Ждем 3 секунды и показываем
					setTimeout(function() {
							cookieNotice.style.display = "flex";
					}, 3000);
			}

			document.getElementById("accept-cookies").addEventListener("click", function() {
					localStorage.setItem("cookieAccepted", "true");
					cookieNotice.style.display = "none";
			});
	});
</script> 

Текст и ссылки можете изменить под свою ситуацию. Далее щепотка css, чтобы оформить сообщение про Cookie в соответствии с дизайном вашего сайта. Я использую такие стили:

.cookie-notice {
	position: fixed;
	bottom: 20px;
	left: 20px;
	background: var(--main-text);
	color: var(--background-color);
	padding: 4px 20px;
	border-radius: 8px;
	display: none;
	align-items: center;
	gap: 8px;
	z-index: 9999!important;
	max-width: 640px;
	--shadow-color: 0deg 0% 5%;
	--shadow-elevation-medium:
	0px 1px 0.8px hsl(var(--shadow-color) / 0.88),
	0px 1.4px 1px -1.2px hsl(var(--shadow-color) / 0.7),
	0px 4px 3px -2.5px hsl(var(--shadow-color) / 0.52),
	-0.1px 11.1px 8.3px -3.7px hsl(var(--shadow-color) / 0.35),
	-0.3px 25px 18.8px -5px hsl(var(--shadow-color) / 0.17);
	box-shadow: var(--shadow-elevation-medium);
	border: 1px solid var(--card-background);
}

.cookie-notice a {
	color: var(--card-background);
	border-color: var(--background-color);
}

.cookie-notice button {
	cursor: pointer;
	word-break: keep-all;
	word-wrap: normal;
}

@media only screen and (max-width: 960px) {
	.cookie-notice {
		left: 4%;
		right: 4%;
		max-width: 100%;
		flex-wrap: wrap;
	}
	
	.cookie-notice button {
		margin-bottom: 20px!important;
	}
}

Вот и всё — никакого волшебства, простой и легкий код заменяет целый плагин.

Заключение

Соблюдение закона, скорость загрузки и безопасность вашего сайта в наши дни играет значительную роль, если вы всерьез планируете развивать свой проект в интернете. В этих условиях подход по минимизации использования плагинов для сайтов на WordPress завоёвывает все большую популярность среди вебмастеров и владельцев сайтов.

Автор: Тимофей Кузнецов (Tiku Digital)