Добавляем уведомление о cookies на WordPress сайт

Приветствую, коллеги!

Сегодня поделюсь готовым решением для добавления уведомления о cookies на сайт WordPress. Код подходит для Elementor, Bricks Builder, Gutenberg и любых других тем.

Зачем это нужно?

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

Решение в 3 шага

1. JavaScript в functions.php

Добавьте в файл functions.php вашей темы:

// Уведомление о cookies
function add_cookie_consent_script() {
    ?>
    <script>
    document.addEventListener("DOMContentLoaded", function() {
        const cookieNotify = document.getElementById("cookie-notify");
        const acceptBtn = document.getElementById("cookie-accept");
        
        if (!cookieNotify || !acceptBtn) return;
        
        // Проверяем, соглашался ли пользователь ранее
        if (localStorage.getItem("cookie-accepted")) {
            cookieNotify.style.display = "none";
            return;
        }
        
        // Показываем уведомление через 2 секунды
        setTimeout(function() {
            cookieNotify.style.display = "flex";
        }, 2000);
        
        // Обработка клика
        acceptBtn.addEventListener("click", function() {
            cookieNotify.style.display = "none";
            localStorage.setItem("cookie-accepted", "true");
        });
    });
    </script>
    <?php
}
add_action('wp_footer', 'add_cookie_consent_script');

2. HTML разметка в подвале

Добавьте перед закрывающим тегом </body> или в футер темы:

<div id="cookie-notify" class="cookie-notification">
    <div class="cookie-content">
        <p>Оставаясь на сайте, вы соглашаетесь с условием использования файлов cookie. Подробности в <a href="/privacy-policy/">политике конфиденциальности</a>.</p>
        <button id="cookie-accept" class="cookie-btn">Хорошо</button>
    </div>
</div>

3. CSS стили

Добавьте в CSS файл темы или в раздел «Дополнительный CSS»:

/* Cookie Notification Styles */
.cookie-notification {
    display: none;
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 40px);
    max-width: 700px;
    background: #2c3e50;
    color: #fff;
    padding: 15px 25px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    z-index: 9999;
    border-radius: 8px;
    animation: fadeInUp 0.5s ease-out;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.cookie-content {
    width: 100%;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.cookie-content p {
    margin: 0;
    flex: 1;
    min-width: 250px;
    font-size: 13px;
    line-height: 1.4;
}

.cookie-content a {
    color: #3498db;
    text-decoration: underline;
    transition: opacity 0.3s;
}

.cookie-content a:hover {
    opacity: 0.8;
}

.cookie-btn {
    background: #eaad44;
    color: white;
    border: none;
    padding: 10px 25px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 13px;
    font-weight: 400;
}

.cookie-btn:hover {
    background: #f0ad4e;
    color: #222222;
    transform: translateY(-2px);
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

@media (max-width: 768px) {
    .cookie-notification {
        width: calc(100% - 30px);
        bottom: 10px;
        padding: 12px 20px;
    }
}

@media (max-width: 600px) {
    .cookie-content {
        flex-direction: column;
        text-align: center;
        gap: 10px;
    }
    
    .cookie-btn {
        width: 60%;
        padding: 10px;
        margin-top: 5px;
    }
    
    .cookie-content p {
        min-width: 100%;
    }
}

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

1. Проверка — код проверяет, соглашался ли пользователь ранее (через localStorage)
2. Показ — через 2 секунды появляется уведомление
3. Сохранение — при клике «Хорошо» согласие сохраняется на 1 год
4. Запоминание — при повторном посещении уведомление не показывается

Преимущества решения

• Без плагинов — не нагружает сайт
• Адаптивный дизайн — работает на всех устройствах
• Легкая настройка — меняйте текст, цвета, ссылки
• Запоминание выбора — не надоедает пользователям
• Подходит для всех билдеров — Elementor, Bricks, Gutenberg

Кастомизация

Изменить цвета:

.cookie-notification {
    background: #1a1a1a; /* Фон */
}
.cookie-btn {
    background: #007cba; /* Кнопка */
}

Изменить текст:

<p>Мы используем cookies для улучшения работы сайта. <a href="/cookies/">Подробнее</a></p>
<button id="cookie-accept" class="cookie-btn">Принять</button>

Изменить время появления:

setTimeout(function() {
    cookieNotify.style.display = "flex";
}, 5000); // Через 5 секунд

Где размещать код?

1. functions.php — для JavaScript
2. footer.php или через хук wp_footer — для HTML
3. style.css или «Дополнительный CSS» — для стилей

Для Elementor: HTML можно добавить через виджет «HTML» в шаблоне подвала сайта.

Важные моменты

• Укажите правильную ссылку на политику конфиденциальности
• Протестируйте на мобильных устройствах
• Проверьте z-index — уведомление должно быть поверх всех элементов
• Обновите политику конфиденциальности — добавьте раздел о cookies

Заключение

Это решение проверено на реальных проектах и работает стабильно. Код легкий, не влияет на скорость сайта и соответствует основным требованиям.

Попробуйте и напишите в комментариях, как применили это решение!