Wtyczka do ciasteczek na WordPress – przepis idealny

Share on facebook
Facebook
Share on twitter
Twitter
Share on linkedin
LinkedIn
Share on email
Email
Od 2013 roku na stronach internetowych należy informować o korzystaniu z ciasteczek. Dodatkowo trzeba umożliwić ich wyłączenie. Jak to zrobić w WordPressie? - oczywiście wtyczką.

Wtyczka do ciasteczek to podstawa. Jedna z tych rzeczy, o których należy pamiętać po zainstalowaniu WordPress. Ale którą wybrać, gdy wybór jest tak duży? Ja najczęściej korzystam z GDPR Cookie Compliance. Dziś pokażę Ci, jak ją skonfigurować i dopasować jej wygląd do Twojej strony.

GDPR Cookie Compliance ma kilka zalet:

  • daje Użytkownikom strony pełną kontrolę nad plikami cookie przechowywanymi na ich komputerze, w tym możliwość cofnięcia wcześniejszej zgody,
  • umożliwia wstawienie własnego logo, ustawienia kolorów, czy czcionki,
  • dopuszcza wstawienie własnej treści,
  • pozwala ustawić baner zgody na pliki cookie u góry lub u dołu strony,
  • umożliwi Ci decyzję, które skrypty będą ładowane domyślnie lub tylko wtedy, gdy Użytkownik wyrazi na nie zgodę,
  • obejmuje zarówno przyciski „Akceptuj”, jak i „Odrzuć”,
  • zawiera link do strony Polityki Prywatności,
  • jest responsywna, przyjazna dla SEO oraz kompatybilna z WPML, QTranslate, WP Multilang i Polylang,
  • jest dostępna w 11 językach, ale UWAGA! …polskiego akurat nie ma.

Polskie tłumaczenie wtyczki

Z pomocą translatora Google przygotowałem prowizoryczne polskie tłumaczenie wtyczki. Jeśli chcesz, możesz z niego skorzystać.
Pobierz paczkę, rozpakuj i wgraj do katalogu
/wp-content/languages/plugins/.

Po co powstał ten wpis?

Pewnie wystarczyłoby napisać parę słów o tej wtyczce i na tym skończyć. Zarówno instalacja, jak i konfiguracja nie są zbyt skomplikowane. Jednak dla mnie, ze względu na to, że jako grafik przykładam szczególną wagę do wyglądu, jest to zbyt czasochłonne. Bo choć sama wtyczka wygląda bardzo estetycznie, zawsze próbuję ją dostosować do wyglądu tworzonych stron. I to zajmuje mi dodatkowy czas. Dlatego, aby nieco sobie ten proces usprawnić, przygotowałem ten wpis. A jeśli Ty na tym skorzystasz, będzie mi bardzo miło.

Instalacja

Jak każdą darmową wtyczkę, wystarczy odnaleźć ją w repozytorium WordPress, zainstalować i aktywować.

Konfiguracja

Po zainstalowaniu wtyczki najpierw ją konfigurujemy. Zacznijmy od zakładki BRANDING.

wtyczka do ciasteczek

Tu najważniejsze jest, aby dopasować kolory, wybrać logo i ustawić domyślną czcionkę. Ja wpisuję do Niestandardowa zawsze to, co ma szablon w selektorze body, ponieważ Domyślna motywu WordPress zazwyczaj nie działa.

Następnie przechodzimy do zakładki USTAWIENIA BANERA.

Tu należy włączyć baner, określić treść (ale wystarczy, że pobierzesz tłumaczenie udostępnione przeze mnie powyżej), etykietę przycisków, położenie baneru i kolorystykę. Odrzucenie i Przycisk Zamknij pozostawiam zawsze wyłączone.

Zakładkę RUCHOMY PRZYCISK pozostawiam bez zmian. W EKRAN USTAWIEŃ PLIKÓW COOKIE – USTAWIENIA OGÓLNE usuwam jedynie treść w polu Powered by GDPR – Default label.

STRONA WYKORZYSTUJE CIASTECZKA pozostawiam bez zmian. W NIEZBĘDNE PLIKI COOKIE wybieram Opcjonalne (użytkownik wybiera swoje preferencje) 

wtyczka do ciasteczek

PLIKI COOKIE INNYCH FIRM to miejsce, gdzie możesz wstawić kody śledzące, np. od Google Analytics i Facebook Pixel.

wtyczka do ciasteczek

Podobną funkcję pełni zakładka DODATKOWE PLIKI COOKIE. Natomiast w zakładce POLITYKA COOKIE możesz wstawić link do swojej Polityki Ciasteczek.

Ostylowanie wtyczki do ciasteczek

Po konfiguracji przychodzi pora na dopasowanie wyglądu wtyczki do designu strony. Dodatkowy kod możesz wstawić do Edytora CSS w WordPress.

1. Pasek dolny

Na początek zajmijmy się paskiem dolnym z informacją o ciasteczkach i przyciskiem AKCEPTUJ.

/* --- GDPR --- */

/* PASEK DOLNY */

#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme {
    background-color: #fff; /* możesz zmienić kolor tła */
    border-top: none;
    box-shadow: 0 -20px 40px -20px #00000040; /* dodatkowy cień */
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
    padding: 10px 30px; /* możesz zmienić odstępy */
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p a {
    font-size: 1rem;
    line-height: 1.62em;
    font-weight: 400;
    color: #000 !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content span.change-settings-button {
    text-underline-position: under;
}

/* PRZYCISK */

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder {
    padding-left: 30px;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton {
    font-size: 1rem;
    line-height: 2em;
    color: #fff;
    font-weight: 700;
    text-decoration: none;
    padding: 5px 20px;
    border: none;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a.mgbutton:hover, #moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button.mgbutton:hover {
    color: #fff;
    background-color: #000000; /* tło przycisku po najechaniu kursorem */
}

2. Ekran ustawień

Teraz przyszła kolej na ekran ustawień.

/* EKRAN USTAWIEŃ */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content {
    color: #000;
    background-color: #fff;
    max-width: 1200px;
    min-height: 600px;
    border-radius: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close {
    top: -30px;
    right: -30px;
    width: 60px;
    height: 60px;
    line-height: 60px;
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
    border: none;
}

/* ZAKŁADKI */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content {
    width: 33.333%;
    padding: 30px;
    box-shadow: none;
    background: #fff;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-company-logo-holder {
    margin-bottom: 60px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li {
    margin-bottom: 20px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button {
    -ms-flex-align: center;
    align-items: center;
    font-weight: 700;
    font-size: 1rem;
    text-transform: uppercase;
    background-color: transparent;
    border: none;
    line-height: 1.25em;
    padding: 0;
    color: #00000040;
    border-radius: 0;
    white-space: normal;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected button {
    color: #000000;
    background-color: #fff;
    border-color: #fff;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li:hover a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li:hover button {
    color: #000;
}

/* CONTENT */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
    width: 66.667%;
    padding: 30px;
    background-color: #f5f5f5;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main h3.tab-title, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main span.tab-title {
    font-weight: 700;
    font-size: 2rem;
    line-height: 1.25em;
    margin: 0;
    padding: 0;
    color: #000;
    margin-bottom: 20px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content {
    padding-right: 0;
    padding-bottom: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content a, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content button, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content li, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content p {
    font-weight: 400;
    font-size: 1rem;
    line-height: 2em;
    margin-bottom: 20px;
    margin-top: 0;
    padding: 0;
    color: #000;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-tab-main-content a {
    text-underline-position: under;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content:before {
    bottom: 130px;
    left: 30px;
    right: 30px;
    height: 1px;
    display: none;
    background-color: #e0e0e0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content {
    height: auto;
    background-color: #f5f5f5;
    border-radius: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder {
    padding: 30px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
    color: #fff;
    padding: 5px 20px;
    border: none;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 2em;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton:hover, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton:hover, .gdpr_cookie_settings_shortcode_content .gdpr-shr-button.button-green:hover {
    background-color: #000 !important;
    color: #fff;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
    color: #fff;
    padding: 5px 20px;
    border: none;
    min-width: auto;
    text-transform: uppercase;
    letter-spacing: 0;
    font-weight: 700;
    font-size: 1rem;
    line-height: 2em;
}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider:after, #moove_gdpr_cookie_modal .cookie-switch .slider:after, #moove_gdpr_cookie_modal .switch .cookie-slider:after, #moove_gdpr_cookie_modal .switch .slider:after {
    content: attr(data-text-disabled);
    position: absolute;
    top: 0;
    left: 60px;
    font-weight: 700;
    font-size: 1rem;
    line-height: 30px;
    text-transform: uppercase;
}

#moove_gdpr_cookie_modal .cookie-switch .cookie-slider:before, #moove_gdpr_cookie_modal .cookie-switch .slider:before, #moove_gdpr_cookie_modal .switch .cookie-slider:before, #moove_gdpr_cookie_modal .switch .slider:before {
    left: 2px;
    bottom: 2px;
    border: 1px solid #ffffff;
    box-shadow: none;
    box-sizing: inherit;
}

3. Wersja mobilna

Nie możemy również zapomnieć o wersji mobilnej.

/* WERSJA MOBILNA */

@media (max-width: 767px){
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
    padding: 30px !important;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-cookie-notice {
    padding-left: 0;
    margin-bottom: 30px;
}

#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder {
    padding-left: 0 !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close {
    right: -45px;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content {
    width: 100% !important;
    padding: 30px !important;
    text-align: center;
    height: auto;
    border-radius: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content {
    width: calc(100vw - 30px);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-company-logo-holder {
    display: none;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li {
    margin: 0 10px !important;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-modal-right-content, #moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-tab-content, #moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-tab-main {
    min-height: 40vh;
    max-height: calc(90vh - 91px);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
    width: 100% !important;
    position: relative;
    padding: 30px !important;
    height: calc(90vh - 91px);
    border-radius: 0;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v1 .moove-gdpr-tab-main .moove-gdpr-tab-main-content {
    height: 100%;
    max-height: calc(90vh - 360px);
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content .moove-gdpr-button-holder {
    padding: 30px !important;
}
}

Jeśli chcesz, aby wtyczka do ciasteczek miała inne niż domyślne ikony, wystarczy dodać do pliku style.css w Twoim motywie potomnym (ponieważ WordPressowy edytor Dodatkowego CSS blokuje z powodu nie dozwolonego Markup w CSS):

/* --- GDPR WŁASNE IKONY --- */

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li a span.gdpr-icon, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li button span.gdpr-icon {
    opacity: 0.25;
}

#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected a span.gdpr-icon, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-left-content #moove-gdpr-menu li.menu-item-selected button span.gdpr-icon {
    opacity: 1;
}

/* STRONA WYKORZYSTUJE CIASTECZKA */

.moovegdpr-privacy-overview:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M23.999 12.149c-.049 3.834-1.893 7.223-4.706 9.378-1.993 1.53-4.485 2.449-7.198 2.473-6.464.057-12.051-5.107-12.095-12 3.966 1.066 7.682-1.993 6-6 4.668.655 6.859-2.389 6.077-6 6.724.064 11.999 5.542 11.922 12.149zm-15.576-4.123c-.065 3.393-2.801 5.868-6.182 6.166 1.008 4.489 5.015 7.807 9.759 7.807 5.262 0 9.576-4.072 9.97-9.229.369-4.818-2.755-9.357-7.796-10.534-.277 2.908-2.381 5.357-5.751 5.79zm5.077 8.974c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm-5.5-2.853c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm10-2.147c1.104 0 2 .896 2 2s-.896 2-2 2-2-.896-2-2 .896-2 2-2zm-5 0c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm2.5-5c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm-12.5 0c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1zm-1.5-4c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm6-2c.828 0 1.5.672 1.5 1.5s-.672 1.5-1.5 1.5-1.5-.672-1.5-1.5.672-1.5 1.5-1.5zm-3.5-1c.552 0 1 .448 1 1s-.448 1-1 1-1-.448-1-1 .448-1 1-1z'/></svg>") !important;
}

/* NIEZBĘDNE PLIKI COOKIE */

.moovegdpr-strict-necessary:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 5.177l8.631 15.823h-17.262l8.631-15.823zm0-4.177l-12 22h24l-12-22zm-1 9h2v6h-2v-6zm1 9.75c-.689 0-1.25-.56-1.25-1.25s.561-1.25 1.25-1.25 1.25.56 1.25 1.25-.561 1.25-1.25 1.25z'/></svg>") !important;
}

/* PLIKI COOKIE INNYCH FIRM */

.moovegdpr-3rd-party:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M16 2v7h-2v-5h-12v16h12v-5h2v7h-16v-20h16zm2 9v-4l6 5-6 5v-4h-10v-2h10z'/></svg>") !important;
}

/* DODATKOWE PLIKI COOKIE */

.moovegdpr-advanced:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M12 2c5.514 0 10 4.486 10 10s-4.486 10-10 10-10-4.486-10-10 4.486-10 10-10zm0-2c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm6 13h-5v5h-2v-5h-5v-2h5v-5h2v5h5v2z'/></svg>") !important;
}

/* POLITYKA COOKIE */

.moovegdpr-policy:before {
    content: url("data:image/svg+xml;charset=UTF-8, <svg xmlns='http://www.w3.org/2000/svg' version='1.1' height='24' width='24'><path d='M4 22v-20h16v11.543c0 4.107-6 2.457-6 2.457s1.518 6-2.638 6h-7.362zm18-7.614v-14.386h-20v24h10.189c3.163 0 9.811-7.223 9.811-9.614zm-5-1.386h-10v-1h10v1zm0-4h-10v1h10v-1zm0-3h-10v1h10v-1z'/></svg>") !important;
}

Na koniec – bonus

Cały dodatkowy kod w jednym pliku

Aby zaoszczędzić jeszcze trochę czasu, przygotowałem cały kod, który możesz wkleić na raz.

Zapisz się na newsletter

Kategorie wpisów

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *