Gjennomføring av EUs Cookie Law i ditt WordPress Site

Hvis du bor i Europa, har du sikkert hørt om cookie loven. Den eksakte loven endres fra land til land, og noen av retningslinjene er litt uklare om måter den skal implementeres på.

Denne artikkelen skal ikke diskutere eller gi råd om loven, men for å vise deg metoden bak å lage en enkel cookie law popup plugin.

Koden for denne enkle plugin kan gå i temaet ditt functions.php fil, men jeg tror det er bedre igjen som et plugin, da det ikke er den typen funksjonalitet du vil miste mellom skiftende temaer.

Funksjonaliteten

Gjennomføringen skal være så enkel som mulig. Vi skal ha en linje over toppen av skjermen som viser en melding, en knapp for å avvise meldingen, og en link for å lese mer om informasjonskapslene nettstedet bruker. Noen implementeringer går så langt som å ha en "nekte" -knapp for informasjonskapsler, men vi vil ikke bruke det. 

Det er mange forskjellige implementeringer av denne funksjonaliteten, min personlige favoritt er hva Google bruker:

Den enkle plugin-modulen vi lager under denne opplæringen vil være bra for en utvikler å bruke på prosjekter, men vil trenge litt mer arbeid hvis du ønsker å gjøre det til en "one size fits all" løsning for allmenn bruk.

Verktøyene

Vi skal bruke jQuery, PHP, HTML og CSS for dette enkle plugin-la oss komme i gang.

Først av alt må vi lage en ny mappe - la oss si cookie-pop - og i den mappen må vi lage en ny PHP-fil kalt cookie-pop.php.

Det første vi må gjøre i vår PHP-fil, legges inn i standard plugin-informasjonen som instruert av WordPress Codex:

 
Så langt så bra. Vi skal la jQuery gjøre det meste av arbeidet her, så mengden av PHP vi trenger å bruke er minimal. Vi kommer tilbake til PHP senere i artikkelen.
 
JavaScript
 
La oss lage noen mapper for JavaScript og CSS. Dette er ikke viktig, men det bidrar til å holde ting renere og mer organisert, noe som aldri er en dårlig ting. Vi ringer disse js og css.
 
For å fange opp at brukeren har avtalt å cookies, må vi sette inn en informasjonskapsel som stopper meldingen som vises på hvert besøk til nettstedet. For dette skal vi bruke et veldig populært jQuery-plugin. Ta tak i pluginet fra GitHub og slipp jquery.cookie.js filen i din js mappe. Vi vil også ha en fil å slippe vår tilpassede jQuery for plugin i, så opprett en ny fil i js mappe kalt cookie-pop.js.
 
Du vil legge merke til at jeg har brukt unminified JavaScript her - det er alltid en god ide å inkludere en minifisert versjon av JavaScript sammen med den opprinnelige, linted-versjonen, spesielt hvis du vil slippe dette som en offentlig tilgjengelig plugin. 
Minifisering og sammenkobling er emner for et annet innlegg, men for de som er interessert, kan du sjekke ut CodeKit, Grunt og Gulp. For å lese mer om minifisering, ta en titt på noen av disse andre flotte Tuts + opplæringene:
 
Revisiting JavaScript Minification
 
Administrere dine byggeoppgaver med Gulp.js
 
Møt Grunt, Byggverktøyet for JavaScript
 
 
Åpne nå tomt cookie-pop.js fil og legg inn koden nedenfor:
 
 
/ * global cookie_pop_text * / (funksjon ($) 'bruk streng'; hvis ('set'! == $ .cookie ('cookie pop')) $ ('body') .prepend
 Ved å bruke nettstedet vårt, godtar du bruken av våre cookies. OK Les mer…  
'); $ ('# accept-cookie') .click (funksjon () $ .cookie ('cookie-pop', 'set'); $ ('.cookie-pop') .remove (););  (jQuery));
 
Denne jQuery-metoden bør utføres innenfor document.ready. Bruke jQuery med WordPress er litt annerledes enn å bruke biblioteket på egenhånd.
 Som standard bruker WordPress jQuery i kompatibilitetsmodus, som betyr i stedet for å bruke $ symbol, må du skrive jQuery. Heldigvis er det noen måter å komme seg rundt på dette problemet - i eksempelet ovenfor har vi passert i $ slik at den kan brukes i våre funksjoner.
 
Det går ganske mye i denne koden, så vi kan bryte det litt ned. Det første vi gjør her, er å sjekke om det heter en kake cookie-pop og at den ikke har verdi av sett ved å bruke cookie metode (som tilhører jQuery Cookie-skriptet, nærmere forklart her). 
Hvis cookien allerede er satt, trenger vi ikke å gjøre noe, siden brukeren allerede har sett meldingen og trykket på knappen. Hvis den ikke har den verdien, så forbereder vi den  av HTML-dokumentet med en 
som har en klasse av .cookie-pop. De div vi har opprettet har a  element inne med en ID av # Akseptere-cookie og en enkel hyperkobling. Hyperkoblingen må redigeres til en bane på siden din der du forklarer om informasjonskapsler.
 
Vi har da en klikk-funksjon, som sier at når elementet med id # Akseptere-cookie er klikket, bruk deretter informasjonskapselmetoden til å lage en kake som heter cookie-pop med en verdi på sett som utløper om 365 dager og fungerer på hele nettstedet. 
De .cookie-pop div blir deretter fjernet og vil forsvinne fra skjermen. Neste gang siden er lastet, vil .cookie-pop div vil ikke vises som informasjonskapsel vil bli stilt inn.
 
CSS
 
CSS vil i siste instans avhenge av temaet ditt, men det er noen gode tommelfingerregler for å øve på CSS her. Som du kan se i JavaScript, popup-vinduet 
 har en klasse av cookie-pop - det er lurt å bruke dette som foreldrevelgeren i alle egendefinerte CSS som du skriver for popupen din. På denne måten er det mye mindre sjanse for at CSS er i konflikt med stiler som brukes i andre temaer eller plugins.
 
Her er CSS som jeg brukte med tjue-tretten WordPress-temaet:
 
.cookie-pop bakgrunnsfarge: # 000; grensebunn: 1px solid #fff; farge: #fff; venstre: 0; posisjon: fast; tekst-align: center; topp: 0; bredde: 100%; z-indeks: 10;  .cookie-pop-knappen margin: 10px; 
 
Jeg valgte å fikse plasseringen av informasjonskapselmeldingen, slik at den forblir tilstede når brukeren ruller. Alternativt kan du bruke absolutte her, så det forblir alltid øverst på siden, men ruller ikke. Jeg har brukt veldig minimal styling her som temaet har standard stiler angitt for tekststørrelse, knapper og lenker.
 
PHP
 
PHP er ganske enkelt her som JavaScript og CSS gjør stort sett alt arbeidet. Alt som er igjen å gjøre med PHP er å fortelle WordPress om JavaScript og CSS, slik at det blir satt inn riktig. Vi skal skrive en enkel funksjon som registrerer og anklager våre JavaScript og CSS.
 
WordPress-kodingsstandardene sier:
 
Bruk små bokstaver i variabel-, handling- og funksjonsnavn (aldri camelCase). Separate ord via underskrifter. Ikke forkort variable navn unødvendigvis; la koden være entydig og selvdokumenterende.
 
Vi ringer vår funksjon cookie_pop_scripts_and_styles (). Deretter registrerer og registrerer vi alle skriptene vi trenger ved hjelp av wp_register_script () metode og wp_enqueue_script () metode. De wp_register_script () Metoden forteller WordPress om vårt skript; dets håndtak, plassering, avhengighet, versjon og om det skal være plassert i dokumentets bunntekst, i stedet for overskriften. Mens wp_enqueue_script () Metode kan enqueue / laste et script registrert med wp_register_script () eller registrer og skriv / skriv et skript alt av seg selv.
Vi starter med enqueueing jQuery Cookie-skriptet:
 
wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', true);
 
På vanlig engelsk, det som vi gjør her, forteller WordPress at manuset kalles "jquery-cookie", ved hjelp av plugins_url () Metode vi forteller WordPress hvor du finner skriptet, forteller vi WordPress at dette skriptet avhenger av jQuery å jobbe (se en liste over standardhåndtak her), og til slutt forteller vi WordPress at versjonen av scriptet er 1.4.1. Et valgfritt siste argument for å legge til denne metoden er ekte hvis du vil at dette skriptet skal lastes i bunnteksten, noe som er en god praksis for å forbedre sidetilpasningstiden.
 
Vi må da registrere vår egendefinerte cookie-pop Skript på mye samme måte, bortsett fra at vi ikke vil skape skriptet med en gang på grunn av oversettelser, som vi vil dekke litt.
 
wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', sant);
 
Den eneste store forskjellen her er at dette skriptet har to avhengigheter - jquery og vårt tidligere enqueued script, jquery-cookie, som vi trenger både for dette skriptet å fungere riktig.
Deretter er det en god ide å internasjonalisere JavaScript. Tidligere i denne artikkelen har vi hardt kodet noen verdier som ikke er veldig vennlige for internasjonalisering. Heldigvis har WordPress en flott funksjon for dette innebygde kalles wp_localize_script. Denne funksjonen lar deg overføre data fra PHP til JavaScript. 
I vårt skript har vi bare tre stykker av skillebar tekst - meldingen, knappeteksten og leselisten. La oss gå videre og koble disse opp.
wp_localize_script ('cookie pop popup script', 'cookie_pop_text', array ('message' => __ ('Ved å bruke nettstedet vårt, godtar du bruk av våre cookies.', 'cookie pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Les mer ...', 'cookie-pop')));
 
Denne funksjonen aksepterer tre parametere. Først har vi håndtaket av skriptet vi vil lokalisere - cookie-pop-script. Vi har da navnet på JavaScript-objektet - dette kan være alt annet enn ideelt, bør være et navn knyttet til skriptet ditt, i dette tilfellet Ive brukt cookie_pop_text. Den siste parameteren er en rekke verdier vi vil bruke i vårt JavaScript - hver av disse har sitt eget navn og teksten vi vil vise.
Nå må vi gå tilbake til vårt JavaScript og fortelle det å bruke disse verdiene. Verdiene er tilgjengelige slik: cookie_pop_text.message vil vise vår melding. La oss gå videre og gjøre noen få endringer i JavaScript; vi trenger bare å endre en linje:
$ ('body'). prepend ('
'+ cookie_pop_text.message +''+ cookie_pop_text.button +' '+ cookie_pop_text.more +'
');

Det siste vi må gjøre er å fortelle WordPress å faktisk bruke disse filene - for dette bruker vi wp_enqueue_script () metode:

wp_enqueue_script ('cookie-pop-script');

Du vil legge merke til at jeg bare har mottatt cookie-pop-script Skript her - dette er her disse avhengighetserklæringene kommer inn for å spille når vi registrerte våre skript. WordPress vil automatisk benytte alle avhengigheter.

Neste opp, CSS. Dette fungerer på omtrent samme måte som JavaScript:

wp_enqueue_style ('cookie-pop-style', plugins_url ('/css/cookie-pop.css', __FILE__), array (), '1.0.0');

Den siste tingen å gjøre er å sette alt sammen i vår cookie_pop_scripts_and_styles () funksjonen og koble den til wp_enqueue_scripts handling, slik at hele pakken ser slik ut:

funksjon cookie_pop_scripts_and_styles () wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', true); wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', sant); wp_localize_script ('cookie pop popup script', 'cookie_pop_text', array ('message' => __ ('Ved å bruke nettstedet vårt, godtar du bruk av våre cookies.', 'cookie pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Les mer ...', 'cookie-pop'))); wp_enqueue_script ('cookie-pop-script'); wp_enqueue_style ('cookie-pop-style', plugins_url ('/css/cookie-pop.css', __FILE__), array (), '1.0.0');  add_action ('wp_enqueue_scripts', 'cookie_pop_scripts_and_styles');

Oppsummering

Nå har vi en arbeidsplugin med en enkel melding og en knapp for å klikke som vil fjerne meldingen og få den ikke til å dukke opp igjen i en angitt tid. 

Eksempelet jeg brukte her, er for EU-informasjonskapsloven, men i virkeligheten kan denne typen funksjonalitet være nyttig for alle slags ting i WordPress, som for eksempel å avkjøre leveringstidene til jul i en e-handelsbutikk. 

Implementeringen her er veldig enkel og krever litt manuell redigering for "read more" -linken - dette kan enkelt utvides ved bruk av WordPress-opsjons API.