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

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

Под­пи­ши­тесь на Tiku Digital ВКонтакте

Почему стоит минимизировать использование плагинов 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 заво­ё­вы­ва­ет все боль­шую попу­ляр­ность сре­ди веб­ма­сте­ров и вла­дель­цев сайтов.

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