blog.nayma.pl


Dla miłośników HTML5, CSS3, JS, WordPress oraz systemu macOS

Dariusz Nayma.pl
Autor Wpisu

Podziel się


Tagi


SeoHost.pl

Informacja o plikach Cookies w WordPress

Dariusz Nayma.plDariusz Nayma.pl

Wstęp

Od 2013 roku na większości stron pojawia się nam informacja o wykorzystywaniu plików "cookies" na stronie. Przyjęcie procedury pozyskiwania zgody na stosowanie "cookies" wynika z przepisów znowelizowanej ustawy Prawa Telekomunikacyjnego, która weszła w życie 22 marca 2013 roku. Nowelizacja ta bazuje na ogólnych wytycznych Parlamentu Europejskiego, jednak poszczególne kraje Unii Europejskiej samodzielnie wypracowują przepisy szczegółowe. Jak więc dodać na swoją stronę taka informację i dostosować ją do swoich potrzeb żeby wyglądała ładnie.

Zaczynamy

Zaczniemy od ściągnięcia i dodania wtyczki: Cookie Notice by dFactory. Wtyczka ta jest darmowa i spolszczona więc nikt nie będzie miał z nią żadnych problemów. Jej konfiguracja jest banalnie prosta. W menu admina wchodzimy w Ustawienia i następnie Ciasteczka.

wordpress-informacja-cookie-01

Ustawiamy ogólnie komentarz, guziki i jeśli chcemy to fajną i przydatna opcję która automatycznie zamyka powiadomienie po zjechaniu na stronie o zdefiniowaną liczbę pixeli.

Stylowanie

Teraz pokażemy, jak w kilku prostych krokach dopasować wygląd do naszych potrzeb. Zaczniemy od zmiany koloru paska głównego, dodaniu cienia i przeźroczystości oraz ostylowaniu guzika "OK". Wszystko znajdziemy w kilku linijkach kodu CSS który znajdziecie poniżej. Kod wklejamy najlepiej do pliku style.css naszego szablonu potomnego (Child Theme).

#cookie-notice {
box-shadow: 0 0 18px -5px rgba(0,0,0,0.1);
background-color: rgba(255, 255, 255, 0.97) !important;
font-size: 14px !important;
font-family: "Roboto", sans-serif !important;
color: #4f5459 !important;
}

#cookie-notice .button.bootstrap {
font-family: "Roboto", sans-serif !important;
font-weight: 300 !important;
background-color: #0074BE !important;
color: #fff !important;
font-size: 14px;
line-height: 14px;
padding: 7px 12px;
text-transform: uppercase;
position: relative;
border-radius: 3px;
border: none !important;
text-shadow: none !important;
box-shadow: none !important;
background-image: none !important;
-webkit-transition: .3s ease-in-out;
transition: .3s ease-in-out;
display: inline-block !important;
margin-left: 5px !important;
}

#cookie-notice .button.bootstrap:hover {
background-color: #0094E0 !important;
}

Dzięki temu nasz pasek i guzik zaczną wyglądać dużo ładniej i nowocześniej niż w oryginale. Dodatkowo jeśli chcemy jeszcze bardziej ubarwić nasz pasek możemy dodać obrazek z ciasteczkiem. My taki obrazek przygotowaliśmy w programie Affinity Designer, który polecamy do tworzenia wszelakich grafik wektorowych. Program możecie przetestować za darmo tutaj: https://affinity.serif.com/en-us/designer/. Niestety program jest tylko dla użytkowników OSX, więc użytkownikom Windows pozostaje skorzystanie z Corela lub Illustratora od Adobe.

Zrzut ekranu 2016-02-22 13.34.58

Przygotowanie takiego pliku dla wprawionej osoby jest stosunkowo bardzo proste i zajmuje kilka min. Dla tych którym nie chce się bawić w rysowanie przygotowaliśmy gotową paczkę zip z plikiem w formacie SVG oraz EPS: cookie.zip

Skoro mamy przygotowany nasz plik cookie.svg to wgrywamy go do biblioteki mediów. Pamietamy również o tym, żeby w naszej informacji o plikach cookies znalazł się kod odpowiedzialny za wyświetlanie obrazka.

Teraz pozostaje nam już tylko ostylowanie obrazka:

.cookie-icon {
width: 80px;
height: 79px;
display: inline-block;
background-image: url(/content/images/2016/02/cookie.svg);
background-size: 100% 100%;
position: absolute;
bottom: 0;
left: 3em;
}

@media only screen and (max-width: 780px) {
.cookie-icon {
display: none !important;
}
}

Dzięki temu nasz obrazek pokaże się zawsze w rogu i nie będzie wyświetlany na wyświetlaczach z mniejszą rozdzielczością.

A poniżej efekt finalny na naszej stronie firmowej www.nayma.pl:

Projektowanie Stron WWW nayma.pl

A może wy macie jeszcze jakieś inne doświadczenia i ciekawe pomysły na informację o "cookies" ?? Zapraszamy do komentowania.

Komentarze