Как добавить стильный баннер с согласием на cookie на сайт WordPress

Каждый современный сайт обязан уведомлять пользователей о том, что он использует файлы cookie. Это требование не только европейских регуляторов (GDPR), но и хороший способ быть прозрачным перед своими посетителями.
В этом уроке разберём, как создать красивый и плавно появляющийся баннер с согласием на использование cookie для сайта на WordPress — без плагинов, всего несколькими строками кода.

---

📌 Что делает этот сниппет

Сниппет создаёт компактное всплывающее окно в правом нижнем углу экрана. Оно появляется через секунду после загрузки страницы и предлагает пользователю принять использование cookie. После нажатия на кнопку «Принять» окно исчезает и больше не показывается, пока не истечёт срок действия cookie (в нашем случае — 1 год).

---

🧩 Как добавить код

1. Открой файл functions.php вашей активной темы (или лучше дочерней темы) или используйте плагин Code Snippets.
2. Вставьте в конец файла следующий код:

function cookie_consent_banner() {
    ?>
    <style>
        #cookie-consent-banner {
            position: fixed;
            bottom: 20px;
            right: 20px;
            max-width: 320px;
            background: #fff;
            color: #000;
            padding: 16px;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.15);
            font-size: 12px;
            line-height: 1.5;
            z-index: 999999;
            opacity: 0;
            transform: translateY(30px);
            transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
            pointer-events: none;
        }

        #cookie-consent-banner.show {
            opacity: 1;
            transform: translateY(0);
            pointer-events: auto;
        }

        #cookie-consent-banner p {
            margin: 0 0 12px 0;
        }

        #cookie-consent-banner a {
            color: #000;
            text-decoration: underline;
            font-weight: 500;
        }

        #cookie-consent-banner a:hover {
            opacity: 0.8;
        }

        .cookie-buttons {
            display: flex;
            gap: 8px;
            justify-content: flex-end;
        }

        .cookie-btn {
            padding: 6px 12px;
            border: 1px solid #000;
            background: transparent;
            color: #000;
            font-size: 13px;
            font-weight: 600;
            border-radius: 4px;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .cookie-btn.accept {
            background: #000;
            color: #fff;
        }

        .cookie-btn:hover {
            background: #333;
            color: #fff;
            border-color: #333;
        }
    </style>

    <div id="cookie-consent-banner">
        <p>Мы используем файлы cookie для улучшения вашего опыта. Ознакомьтесь с нашей <a href="/privacy/" target="_blank" rel="noopener">Политикой конфиденциальности</a>.</p>
        <div class="cookie-buttons">
            <button class="cookie-btn accept" id="accept-cookies">Принять</button>
        </div>
    </div>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            const banner = document.getElementById('cookie-consent-banner');
            const acceptBtn = document.getElementById('accept-cookies');

            if (!getCookie('cookie_consent')) {
                setTimeout(() => {
                    banner.classList.add('show');
                }, 1000);
            }

            acceptBtn.addEventListener('click', function() {
                setCookie('cookie_consent', 'accepted', 365);
                banner.classList.remove('show');
                setTimeout(() => banner.style.display = 'none', 400);
            });

            function setCookie(name, value, days) {
                const date = new Date();
                date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
                document.cookie = `${name}=${value};expires=${date.toUTCString()};path=/`;
            }

            function getCookie(name) {
                const cname = name + "=";
                const ca = decodeURIComponent(document.cookie).split(';');
                for (let c of ca) {
                    while (c.charAt(0) === ' ') c = c.substring(1);
                    if (c.indexOf(cname) === 0) return c.substring(cname.length, c.length);
                }
                return "";
            }
        });
    </script>
    <?php
}
add_action('wp_footer', 'cookie_consent_banner');

💡 Как это работает

1. CSS оформляет баннер — задаёт фон, тень, плавное появление и стиль кнопки (Можете перенести его в отдельный файл или оставить в сниппете).
2. HTML создаёт структуру окна с текстом и ссылкой на страницу политики конфиденциальности.
3. JavaScript проверяет, есть ли уже cookie с согласием.
   • Если cookie нет — баннер появляется через 1 секунду.
   • После клика по кнопке «Принять» создаётся cookie cookie_consent на 365 дней, и баннер скрывается.

---

🎨 Как изменить внешний вид

Ты можешь:

• поменять позицию (например, left: 20px; bottom: 20px;);
• изменить цвета кнопки и текста;
• Добавить дополнительные соглашения и ссылки в HTML.

---

🧠 Почему это решение удобно

• ✅ Не требует установки плагинов — только нативный код.
• ✅ Работает быстро и легко адаптируется под любой дизайн.
• ✅ Не влияет на SEO и не мешает загрузке сайта.