Genomföra EU-cookielagen till din WordPress-webbplats

Om du bor i Europa har du säkert hört talas om cookielagen. Den exakta lagen ändras från land till land och några av riktlinjerna är lite oklara hur det ska genomföras.

Denna artikel ska inte diskutera eller ge råd om lagen, men för att visa dig metoden bakom att skapa en enkel cookie law popup plugin.

Koden för det här enkla pluginet kan gå in i ditt tema functions.php fil, men jag tror att det är bättre kvar som ett plugin eftersom det inte är den typ av funktionalitet som du vill förlora mellan att ändra teman.

Funktionaliteten

Genomförandet ska vara så enkelt som möjligt. Vi ska ha en stapel över skärmens övre del som visar ett meddelande, en knapp för att avvisa meddelandet och en länk för att läsa mer om de cookies som webbplatsen använder. Vissa implementeringar går så långt som att ha en "neka" -knapp för cookies, men vi kommer inte använda det. 

Det finns många olika implementeringar av denna funktionalitet, min personliga favorit är vad Google använder:

Den enkla plugin som vi skapar under denna handledning kommer att vara bra för en utvecklare att använda på projekt men skulle behöva lite mer arbete om du ville göra det till en "one size fits all" lösning för allmänhetens användning.

Verktygen

Vi kommer att använda jQuery, PHP, HTML och CSS för det här enkla plugin-låt oss komma igång.

Först av allt måste vi skapa en ny mapp - låt oss säga kaka-pop - och inom den mappen måste vi skapa en ny PHP-fil som heter kaka-pop.php.

Det första vi behöver göra inom vår PHP-fil matas in i standardinställningsinformationen enligt WordPress Codex:

 
Än så länge är allt bra. Vi kommer att låta jQuery göra det mesta av arbetet här så mängden PHP som vi behöver använda är minimal. Vi kommer tillbaka till PHP senare i artikeln.
 
JavaScript
 
Låt oss skapa några mappar för vår JavaScript och CSS. Detta är inte nödvändigt men det hjälper till att hålla saker renare och mer organiserade, vilket aldrig är en dålig sak. Vi ringer dessa js och css.
 
För att fånga det som användaren har kommit överens om att kakor, måste vi ställa in en cookie som stannar meddelandet som visas vid varje besök på webbplatsen. För detta kommer vi att använda ett mycket populärt jQuery-plugin. Ta tag i plugin från GitHub och släpp den jquery.cookie.js filen i din js mapp. Vi vill också ha en fil att släppa vår anpassade jQuery för plugin in, så skapa en ny fil i js mapp som heter kaka-pop.js.
 
Du kommer märka att jag har använt unminified JavaScript här - det är alltid en bra idé att inkludera en minifierad version av JavaScript tillsammans med den ursprungliga, linted versionen, speciellt om du vill släppa det här som en offentligt tillgänglig plugin. 
Minifiering och sammankoppling är ämnen för ett annat inlägg, men för de som är intresserade kan du kolla in CodeKit, Grunt och Gulp. För att läsa mer om minifiering, ta en titt på några av dessa andra bra Tuts + handledning:
 
Ändra JavaScript Minifiering
 
Hantera dina bygguppgifter med Gulp.js
 
Möt Grunt, Byggverktyget för JavaScript
 
 
Öppna nu ditt tomma kaka-pop.js fil och ange följande kod:
 
 
/ * global cookie_pop_text * / (funktion ($) 'använd sträng'; om ('set'! == $ .cookie ('cookie pop')) $ ('body') .prepend
 Genom att använda vår hemsida godkänner du användningen av våra cookies. ok Läs mer…  
'); $ ('# accept-cookie') .click (funktion () $ .cookie ('cookie-pop', 'set'); $ ('.cookie-pop') .remove (););  (jQuery));
 
Den här jQuery-metoden ska utföras inom document.ready. Att använda jQuery med WordPress är lite annorlunda än att använda biblioteket på egen hand.
 Som standard använder WordPress jQuery i kompatibilitetsläge vilket betyder istället för att använda $ symbol, du måste skriva jQuery. Lyckligtvis finns det några sätt att komma runt om problemet - i exemplet ovan har vi passerat i $ så det kan användas inom våra funktioner.
 
Det går ganska lite i den här koden, så vi kan bryta ner det lite. Det första vi gör här är att kontrollera om det finns en cookie som heter kaka-pop och att det inte har värde av uppsättning genom att använda kaka metod (som tillhör skriptet jQuery Cookie, förklaras mer här). 
Om kakan redan har ställts in behöver vi inte göra något eftersom användaren redan har sett meddelandet och tryckt på knappen. Om det inte har det värdet så förbereder vi oss  av HTML-dokumentet med en 
som har en klass av .kaka-pop. De div vi har skapat har a  element inuti med ett ID av # Acceptera-cookien och en enkel hyperlänk. Hyperlänken måste redigeras till en sökväg på din sida där du förklarar cookies.
 
Vi har då en klickfunktion, som säger att när elementet med id # Acceptera-cookien klickas sedan använd cookiemetoden för att skapa en cookie som heter kaka-pop med ett värde av uppsättning som löper ut på 365 dagar och fungerar över hela webbplatsen. 
De .kaka-pop div tas bort och kommer att försvinna från skärmen. Nästa gång sidan är laddad, kommer .kaka-pop div kommer inte att visas som cookien kommer att ha ställts in.
 
CSS
 
CSS kommer i slutändan att bero på ditt tema, men det finns några bra tumregler att öva inom din CSS här. Som du kan se i JavaScript, popupen 
 har en klass av kaka-pop - det är klokt att använda detta som förälderväljare i någon anpassad CSS som du skriver för din popup, så det finns mycket mindre chans att din CSS står i konflikt med stilar som används i andra teman eller plugins.
 
Här är CSS som jag använde med den tjugotrexton WordPress-teman:
 
.cookie-pop bakgrundsfärg: # 000; border-bottom: 1px solid #fff; färg: #fff; vänster: 0; position: fast; text-align: center; topp: 0; bredd: 100%; z-index: 10;  .cookie-pop-knappen margin: 10px; 
 
Jag valde att fixa positionen för cookiemeddelandet så att det förblir närvarande när användaren rullar. Alternativt kan du använda absolut här så stannar den alltid överst på sidan, men rullar inte. Jag har använt mycket minimal styling här, eftersom temat har standardstilar som är inställda för textstorlek, knappar och länkar.
 
PHP
 
PHP är ganska enkelt här, eftersom JavaScript och CSS gör nästan allt arbete. Allt som är kvar att göra med vårt PHP är att berätta för WordPress om vår JavaScript och CSS så att den blir korrekt införd. Vi ska skriva en enkel funktion som registrerar och anslår våra JavaScript och CSS.
 
WordPress-kodningsstandarderna säger:
 
Använd små bokstäver i variabel-, åtgärds- och funktionsnamn (aldrig camelCase). Separata ord via underskrifter. Förkorta inte variabla namn oundvikligen; låt koden vara entydig och självdokumentation.
 
Vi ringer vår funktion cookie_pop_scripts_and_styles (). Därefter registrerar och registrerar vi alla skript vi behöver använda wp_register_script () metod och wp_enqueue_script () metod. De wp_register_script () Metoden berättar om WordPress om vårt manus; dess handtag, plats, beroenden, version och om den borde placeras i dokumentets sidfot snarare än rubriken. Medan wp_enqueue_script () Metod kan ange / ladda ett skript som registrerats med wp_register_script () eller registrera och skatta / ladda ett skript allt av sig själv.
Vi börjar med att ange jQuery Cookies manus:
 
wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', true);
 
På vanlig engelska säger vi vad WordPress säger att manuset kallas "jquery-cookie", med hjälp av plugins_url () metod vi berättar för WordPress där man hittar skriptet, säger vi till WordPress att det här skriptet beror på att jQuery ska fungera (se en lista över standardhandtag här), och slutligen berättar vi WordPress om att versionen av scriptet är 1.4.1. Ett valfritt sista argument för att lägga till den här metoden är Sann om du vill att det här skriptet ska laddas i sidfoten, vilket är en bra metod för att förbättra sidladdningstiden.
 
Vi måste då registrera vår anpassade kaka-pop skript på ungefär samma sätt, förutom att vi inte kommer att skymma manuset med en gång på grund av översättningar, som vi kommer att täcka på lite.
 
wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', true);
 
Den enda stora skillnaden här är att det här skriptet har två beroenden - jQuery och vårt tidigare skriven skript, jquery-kaka, som vi behöver både för att detta skript ska fungera korrekt.
Därefter är det en bra idé att internationalisera vår JavaScript. Tidigare i denna artikel har vi kodat vissa värden som inte är särskilt vänliga för internationalisering. Lyckligtvis har WordPress en bra funktion för detta inbyggda kallat wp_localize_script. Med den här funktionen kan du skicka data från PHP till JavaScript. 
I vårt skript har vi bara tre delar av särskild text - meddelandet, knapptexten och läs mer länken. Låt oss gå och koppla upp dessa.
wp_localize_script ('cookie pop-script', 'cookie_pop_text', array ('message' => __ ('Genom att använda vår hemsida accepterar du användningen av våra cookies.', 'cookie pop' => __ ('OK', 'cookie-pop'), 'more' => __ ('Läs mer ...', 'cookie-pop'))));
 
Denna funktion accepterar tre parametrar. Först har vi handtaget på det manus som vi vill lokalisera - cookie pop-script. Vi har då namnet på JavaScript-objektet - det här kan vara allt annat än helst bör vara ett namn som är relaterat till ditt manus, i det här fallet har jag använt cookie_pop_text. Den sista parametern är en uppsättning värden som vi vill använda inom vår JavaScript - var och en har sitt eget namn och den text som vi vill visa.
Nu måste vi gå tillbaka till vår JavaScript och berätta att den ska använda dessa värden. Värdena nås som så: cookie_pop_text.message skulle visa vårt meddelande. Låt oss fortsätta och göra några ändringar i vår JavaScript; vi behöver bara ändra en rad:
$ ('body'). prepend ('
'+ cookie_pop_text.message +''+ cookie_pop_text.button +' '+ cookie_pop_text.more +'
');

Det sista vi behöver göra är att berätta för WordPress att faktiskt använda dessa filer - för det här använder vi wp_enqueue_script () metod:

wp_enqueue_script ('cookie-pop-script');

Du kommer märka att jag bara har kalkylerat cookie pop-script skript här - det är här dessa beredskapsdeklarationer kommer att spela när vi registrerade våra skript. WordPress kommer automatiskt att förutse alla beroenden.

Nästa upp, CSS. Det fungerar på ungefär samma sätt som JavaScript:

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

Det sista att göra är att sätta allt ihop i vårt cookie_pop_scripts_and_styles () funktionen och haka den till wp_enqueue_scripts åtgärd, så det kompletta paketet ser ut så här:

funktion 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', true); wp_localize_script ('cookie pop-script', 'cookie_pop_text', array ('message' => __ ('Genom att använda vår hemsida accepterar du användningen av våra cookies.', 'cookie pop' => __ ('OK', 'cookie-pop'), 'more' => __ ('Läs 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');

Sammanfatta det

Nu har vi ett arbetsplugin med ett enkelt meddelande och en knapp för att klicka som kommer att rensa meddelandet och få det inte att dyka upp igen under en viss tid. 

Exemplet jag använde här är för EU-cookielagen, men i verkligheten kan den här typen av funktionalitet vara till nytta för alla sorters saker i WordPress som att visa avbrutna leveranstider på jul i en e-handelsbutik. 

Implementeringen här är väldigt enkel och kräver lite manuell redigering för länken "Läs mer" - det här kan enkelt utökas med hjälp av API: ns API-alternativ.