Как добавить уведомление об использовании cookie на сайт?

Как добавить уведомление об использовании cookie на сайт?

Здравствуйте, дорогие друзья!

Наверняка вы уже замечали, что на многих сайтах стали появляться уведомления об использовании cookie на сайте. Они нужны для того чтобы угодить требованиям закона 152-ФЗ «О персональных данных».

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

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

Уведомление об использовании cookie

Для сайтов, работающих на CMS WordPress, для реализации этой задачи существуют различные плагины и сегодня я покажу вам наиболее простой и удобный из них.

Установка плагина уведомления об использовании cookie

Плагин, который мы будем использовать, называется Cookie Notice for GDPR & CCPA

Плагин для вывода уведомлений об использовании cookie
  1. 1 Переходим в административной части сайта в раздел «Плагины»«Добавить новый» — вставляем скопированное название плагина в строку поиска и нажимаем на кнопку «Установить» возле его названия. После установки кнопка «Установить» изменится на «Активировать» и её тоже нужно будет нажать.
    Установка плагина
  2. 2 Теперь переходим в раздел «Настройки» — «Уведомления о куки».
    Настройка уведомлений об использовании cookie

Основные настройки плагина

  1. 1 В поле «Сообщение» задается текст уведомления, которое будет выводиться на сайте. Вы можете его исправить или дополнить при необходимости.
  2. 2 В поле «Текст кнопки» отображается текст, который будет выводиться на кнопке согласия. При желании вы можете его исправить.
  3. 3 Ставим галочку возле пункта Privacy policy чтобы в уведомлении добавилась ссылка на страницу с политикой конфиденциальности.
    О том как создать страницу с политикой конфиденциальности я рассказывала в статье:
    Как добавить политику конфиденциальности на сайт?

    Далее меняем текст надписи и выбираем страницу с политикой конфиденциальности из раскрывающегося списка

    Настройка уведомлений об использовании cookie

    При помощи атрибутов «_blank» и «_self» мы можем задать в какой вкладке или окне будет открываться политика конфиденциальности:

    _blank – ссылка откроется в новой вкладке
    _self – откроется в этой же вкладке.

  4. 4 В пункте «Размещение скрипта» выбираем «Подвал».
    Настройка уведомлений об использовании cookie

Данный плагин имеет ещё множество дополнительных настроек, в том числе и небольшую панель с выводом данных о коронавирусе. Более подробно обо всех дополнительных настройках плагина я рассказала в видео инструкции.

Оформление уведомления об использование куки

Хотя плагин и имеет некоторые настройки оформления уведомления в административной части, но их не всегда достаточно для того чтобы подонгать стиль уведомления о cookie под дизайн сайта. Для более гибкого управления оформлением нам придется прибегнуть к помощи CSS.

Для этого в административной части сайта переходим в раздел «Внешний вид» — «Редактор тем» — убеждаемся в том что у нас выбран файл «Таблица стилей (stle.css)»

Настройка уведомлений об использовании cookie

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

Я подготовила для Вас несколько заготовок, которые вы можете использовать на своем сайте.

  1. 1 Меняем цвет фона и текста для кнопки:
  2. 2 Меняем цвет фона блока с уведомлением:

    Так как плагин выводит цвет фона в самом коде, то для того чтобы наше CSS свойство сработало нужно использовать правило !important;
  3. 3 Цвет шрифта уведомления:

    Чтобы изменить цвет ссылки политики конфиденциальности используем такой код:

Если у вас возникнут трудности с заданием стилей через CSS вот список статей, которые наверняка вам пригодятся:

Видео инструкция


Надеюсь что данная статья была для вас полезной. Буду очень рада видеть ваши комментарии! Успехов вам и вашим проектам!

С уважением Юлия Гусарь

Читайте также:

Подписаться на рассылку

7 комментариев

  1. //impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif то что нужно! Юлия, спасибо за нужную и полезную статью.//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif

    • Спасибо, Александр!

  2. У гугла был скрипт, который показывал уведомления только для Европы. Я его найти не могу, если знаете где его взять — маякните. Или альтернативу.

    Зачем это уведомление показывать для всех, мешает только, если оно только для Европы обязательно.

  3. Все работает почти на ура, вот только есть одно НО.
    Подскажите пожалуйста. Сделал все как Вы и писали, а цвет ссылки на политику конфиденциальности не меняется.

    • Здравствуйте, Евгений! Очень рада что у Вам все получилось! Проблема с изменением цвета ссылки, скорее всего, связана с тем что у Вас в стилях темы задается цвет ссылки для этого блока и у этих стилей высокий приоритет. Опишите, пожалуйста, как именно Вы меняете цвет ссылки и скиньте ссылку на сайт.

  4. Юлия, все оказалось на много проще. Тема не использует CSS файл. А берет разметку с файлов типа LESS. Нашел где она их хранит, и смог редактировать

    • Отлично, Евгений! Спасибо что написали о своем решении!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
//impuls-web.ru/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif