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.
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.
Tu najważniejsze jest, aby dopasować kolory, wybrać logo i ustawić domyślną czcionkę. Ja wybieram Niestandardowa i wpisuję var( --e-global-typography-text-font-family ), Sans-serif, 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)
PLIKI COOKIE INNYCH FIRM to miejsce, gdzie możesz wstawić kody śledzące, np. od Google Analytics i Facebook Pixel.
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 */
#moove_gdpr_cookie_info_bar {
background-color: #fff;
border-top: none !important;
box-shadow: 0 0 60px -25px var( --e-global-color-text);
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container {
padding: 15px 30px;
width: 1200px;
max-width: 100%;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content {
padding-left: 0;
padding-right: 0;
justify-content: space-between;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content h1, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content h2, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content h3, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content h4, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content h5, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content h6, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content p a, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme p {
color: var(--e-global-color-text);
}
#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: var(--e-global-typography-text-font-size);
line-height: var(--e-global-typography-text-line-height);
font-weight: var(--e-global-typography-text-font-weight) !important;
}
#moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content a, #moove_gdpr_cookie_info_bar.moove-gdpr-light-scheme .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content button {
text-underline-position: under;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-button-holder {
padding-left: 0px !important;
}
/* PRZYCISKI */
#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, #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 {
font-size: var(--e-global-typography-accent-font-size);
line-height: var(--e-global-typography-accent-line-height);
color: #fff;
font-weight: var(--e-global-typography-accent-font-weight) !important;
text-decoration: var( --e-global-typography-accent-text-decoration );
border-radius: 0px;
padding: 15px 30px !important;
margin: 0;
text-transform: var(--e-global-typography-accent-text-transform);
letter-spacing: var(--e-global-typography-accent-letter-spacing);
border: none;
font-family: var(--e-global-typography-accent-font-family);
}
#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, #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 {
background-color: var( --e-global-color-accent );
}
#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, #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 {
color: #fff;
background-color: var(--e-global-color-text) !important;
}2. Ekran ustawień
Teraz przyszła kolej na ekran ustawień.
/* USTAWIENIA */
.gdpr_lightbox {
background: #000000bf;
backdrop-filter: blur(5px);
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content {
max-width: 1200px;
border-radius: 14px;
box-shadow: 0 30px 30px -30px var( --e-global-color-text);
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close {
top: -20px;
right: -20px;
width: 40px;
height: 40px;
line-height: 40px;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close i, #moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-close span.gdpr-icon {
width: 40px;
height: 40px;
line-height: 40px;
color: #fff;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-infobar-close-btn.moovegdpr-arrow-close:after, #moove_gdpr_cookie_info_bar .moove-gdpr-infobar-close-btn.moovegdpr-arrow-close:before, .gdpr-icon.moovegdpr-arrow-close:after, .gdpr-icon.moovegdpr-arrow-close:before, i.moovegdpr-arrow-close.moovegdpr-arrow-close:after, i.moovegdpr-arrow-close.moovegdpr-arrow-close:before {
height: 20px;
top: calc(50% - 10px);
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-right-content {
width: 100%;
border-top-left-radius: 0px;
border-bottom-left-radius: 0px;
padding-bottom: 135px !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
padding: 60px;
background-color: #fff;
border-top-right-radius: 0px;
border-bottom-right-radius: 0px;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-title {
margin-bottom: 30px;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-title .tab-title {
width: 100%;
font-weight: var(--e-global-typography-secondary-font-weight) !important;
font-size: var(--e-global-typography-secondary-font-size);
line-height: var(--e-global-typography-secondary-line-height);
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-title .moove-gdpr-company-logo-holder {
height: auto;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-tab-main .moove-gdpr-tab-main-content {
padding-bottom: 0px;
}
#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: var(--e-global-typography-text-font-weight);
font-size: var(--e-global-typography-text-font-size);
line-height: var(--e-global-typography-text-line-height);
margin-bottom: 30px !important;
margin-top: 0;
padding: 0;
color: var(--e-global-color-text);
}
#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: var(--e-global-typography-accent-font-weight) !important;
font-size: var(--e-global-typography-accent-font-size) !important;
line-height: var(--e-global-typography-accent-line-height);
color: var(--e-global-color-text);
margin-bottom: 15px !important;
text-transform: var(--e-global-typography-accent-text-transform);
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-tab-main .moove-gdpr-status-bar {
padding: 0;
margin-right: 0;
margin-bottom: 30px;
}
#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 {
font-weight: var(--e-global-typography-accent-font-weight);
font-size: var(--e-global-typography-accent-font-size) !important;
line-height: 30px;
color: red;
text-transform: var(--e-global-typography-accent-text-transform);
}
#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: none;
box-shadow: none;
}
#moove_gdpr_cookie_modal .cookie-switch input:checked+.cookie-slider, #moove_gdpr_cookie_modal .cookie-switch input:checked+.slider, #moove_gdpr_cookie_modal .switch input:checked+.cookie-slider, #moove_gdpr_cookie_modal .switch input:checked+.slider {
background-color: #2e9935;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content {
background-color: #fff;
border-radius: 0px;
height: 130px !important;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content:before {
background-color: #eeeeee;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-footer-content .moove-gdpr-button-holder {
margin: 0;
gap: 10px;
padding: 0 60px;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-footer-content .moove-gdpr-button-holder a.mgbutton, #moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-footer-content .moove-gdpr-button-holder button.mgbutton {
margin: 0 !important;
}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_modal .moove-gdpr-modal-content .moove-gdpr-modal-right-content {
padding: 30px;
}
#moove_gdpr_cookie_info_bar .moove-gdpr-info-bar-container .moove-gdpr-info-bar-content .moove-gdpr-cookie-notice {
padding-left: 0;
margin-bottom: var( --e-global-typography-text-line-height );
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-right-content .main-modal-content {
max-height: calc(80vh - 225px);
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content .moove-gdpr-modal-footer-content:before {
left: 30px;
right: 30px;
bottom: 130px;
}
#moove_gdpr_cookie_modal .moove-gdpr-modal-content.moove_gdpr_modal_theme_v2 .moove-gdpr-modal-footer-content .moove-gdpr-button-holder {
padding: 0 30px;
}}