Implementarea legii UE Cookie în site-ul dvs. WordPress

Dacă locuiți în Europa, probabil ați auzit despre legea cookie-urilor. Legile exacte se schimbă de la o țară la alta și unele dintre liniile directoare sunt puțin clar despre modurile în care ar trebui implementate.

Acest articol nu este de a discuta sau de a oferi consiliere cu privire la lege, ci pentru a vă arăta metoda din spatele creării unui plugin simplu popup pentru legea cookie-urilor.

Codul pentru acest plugin simplu ar putea merge în tema ta functions.php fișier, dar cred că este mai bine ca un plugin, deoarece nu este un fel de funcționalitate pe care doriți să-l pierdeți între schimbarea temelor.

Funcționalitatea

Implementarea va fi cât mai simplă posibil. Vom avea o bară în partea de sus a ecranului care afișează un mesaj, un buton pentru a elimina mesajul și un link pentru a citi mai multe despre cookie-urile pe care le utilizează site-ul. Unele implementări merg până la atingerea unui buton "deny" pentru cookie-uri, dar nu vom folosi asta. 

Există o mulțime de implementări diferite ale acestei funcționalități, preferința mea personală este ceea ce Google utilizează:

Pluginul simplu pe care îl creăm în timpul acestui tutorial va fi grozav pentru un dezvoltator de a utiliza pe proiecte, dar ar avea nevoie de puțin mai mult de lucru dacă ați dori să o transformați într-o soluție "de o mărime potrivită tuturor" pentru uz general.

Uneltele

Vom folosi jQuery, PHP, HTML și CSS pentru acest plugin simplu - să începem.

Mai întâi de toate, trebuie să facem un nou dosar - să spunem cookie-pop - și în cadrul acelui dosar trebuie să facem un nou fișier PHP numit cookie-pop.php.

Primul lucru pe care trebuie să-l facem în fișierul nostru PHP este să introduceți informațiile despre plugin-ul standard conform instrucțiunilor de la Codex-ul WordPress:

 
Până acum, bine. Vom lăsa jQuery să facă majoritatea lucrărilor aici, astfel încât cantitatea de PHP pe care trebuie să o folosim este minimă. Vom reveni la PHP mai târziu în articol.
 
JavaScript
 
Să creăm niște foldere pentru JavaScript și CSS. Acest lucru nu este esențial, dar ajută la menținerea lucrurilor mai curate și mai organizate, ceea ce nu este niciodată un lucru rău. Vom numi asta js și css.
 
Pentru a capta faptul că utilizatorul a fost de acord cu cookie-urile, trebuie să setăm un cookie care să oprească mesajul care apare la fiecare vizită a site-ului. Pentru aceasta vom folosi un plugin foarte popular jQuery. Luați pluginul de la GitHub și aruncați jquery.cookie.js fișier în dvs. js pliant. De asemenea, dorim ca un fișier să renunțe la jQuery personalizat pentru plugin, pentru a crea un fișier nou în js director numit cookie-ul pop.js.
 
Veți observa că am folosit JavaScript neintenționat aici - este întotdeauna o idee bună să includeți o versiune minimizată a JavaScript-ului dvs. împreună cu versiunea originală, linted, mai ales dacă doriți să lansați acest plugin ca un plugin public. 
Minificarea și concatenarea sunt subiecte pentru un alt post, dar pentru cei care sunt interesați, puteți verifica CodeKit, Grunt și Gulp. Pentru a citi mai multe despre minificare, aruncați o privire la unele dintre aceste alte tutoriale Tuts +:
 
Revizuirea minerificării JavaScript
 
Gestionarea sarcinilor dvs. de construire cu Gulp.js
 
Faceți cunoștință cu Grunt, The Build Tool pentru JavaScript
 
 
Acum deschide-ți martorul cookie-ul pop.js fișier și puneți în codul de mai jos:
 
 
/ * globală cookie_pop_text * / (funcția ($) 'use strict'; if ('set'! == $ .cookie ('cookie-pop'
 Prin utilizarea site-ului nostru, sunteți de acord cu utilizarea cookie-urilor noastre. O.K Citeste mai mult…  
'); $ ('# accept-cookie') .click (funcția () $ .cookie ('cookie-pop', 'set');  (jQuery));
 
Această metodă jQuery trebuie executată în interiorul document.ready. Utilizarea jQuery cu WordPress este ușor diferită de utilizarea bibliotecii pe cont propriu.
 Implicit, WordPress utilizează jQuery în modul de compatibilitate, ceea ce înseamnă că în loc să utilizați $ simbol, trebuie să tastați jQuery. Din fericire, există câteva modalități de a aborda această problemă - în exemplul de mai sus, am trecut în $ astfel încât acesta poate fi folosit în cadrul funcțiilor noastre.
 
Se întâmplă destul de mult în acest cod, așa că l-am lăsat puțin mai jos. Primul lucru pe care îl facem aici este să verificăm dacă există un cookie numit cookie-pop și că nu are valoare a stabilit folosind fursec (care aparține scriptului jQuery Cookie, explicat mai jos aici). 
Dacă cookie-ul a fost deja setat, atunci nu este nevoie să faceți nimic deoarece utilizatorul va fi văzut deja mesajul și va apăsa butonul. Dacă nu are acea valoare atunci suntem prepending  a documentului HTML cu 
care are o clasă de .cookie-pop.  div pe care am creat-o are  element interior cu un ID de # Accepta cookie- și un hyperlink simplu. Hyperlink-ul va trebui să fie editat pe o cale a paginii dvs. unde explicați despre cookie-uri.
 
Apoi avem o funcție de clic, care spune că atunci când elementul cu id # Accepta cookie- este făcută clic pe apoi utilizați metoda cookie pentru a crea un cookie numit cookie-pop cu o valoare de a stabilit care expiră în 365 de zile și funcționează pe întregul site web. 
 .cookie-pop div este apoi eliminat și va dispărea de pe ecran. Data viitoare când pagina este încărcată .cookie-pop div nu va apărea pe măsură ce fișierul cookie va fi setat.
 
CSS
 
CSS va depinde în cele din urmă de tema dvs., dar există câteva reguli bune pentru a fi practicate în CSS aici. După cum puteți vedea în JavaScript, pop-ul 
 are o clasă de cookie-pop - este înțelept să folosiți acest lucru ca selector parental în orice CSS personalizat pe care îl scrieți pentru popup-ul dvs., astfel, există șanse mult mai mici ca conflictul dvs. CSS să se potrivească cu stilurile utilizate în alte teme sau pluginuri.
 
Iată CSS pe care l-am folosit cu tema WordPress de douăzeci și unu:
 
.cookie-pop fundal-culoare: # 000; frontieră-fund: 1px solid #fff; culoare: #fff; stânga: 0; poziție: fixă; text-align: centru; top: 0; lățime: 100%; z-index: 10; . butonul "cookie-pop" margin: 10px; 
 
Am ales să fixez poziția mesajului cookie astfel încât să rămână prezentă atunci când utilizatorul scroll. Alternativ, puteți utiliza absolut aici, astfel încât întotdeauna rămâne în partea de sus a paginii, dar nu derulați. Am folosit un stil foarte minim, deoarece tema are stiluri implicite stabilite pentru dimensiunea textului, butoane și link-uri.
 
PHP
 
PHP este destul de simplu aici, deoarece JavaScript și CSS fac aproape toată munca. Tot ce a mai rămas în legătură cu PHP este să spuneți WordPress despre JavaScript și CSS, astfel încât acesta să fie inserat corect. Vom scrie o funcție simplă care înregistrează și enquează JavaScript și CSS.
 
Standardele de codare WordPress spun:
 
Utilizați litere mici în nume variabil, acțiune și funcție (niciodată camelCase). Separați cuvintele prin subliniere. Nu abreviați numele variabilelor neapărat; lăsați codul să fie neechivoc și autocumentant.
 
Ne vom numi funcția cookie_pop_scripts_and_styles (). Apoi, vom înregistra și enqueue toate scripturile de care avem nevoie folosind wp_register_script () și metoda wp_enqueue_script () metodă. wp_register_script () metoda spune WordPress despre scenariul nostru; mânerul, locația, dependențele, versiunea și dacă ar trebui să fie localizată în subsolul documentului, mai degrabă decât antetul. Întrucât wp_enqueue_script () metoda poate enqueue / încărca un script înregistrat cu wp_register_script () sau să înregistreze și să încarce / încarce un script singur.
Vom începe prin încorporarea scriptului jQuery Cookie:
 
wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', true);
 
În limba engleză, ceea ce facem aici este să spunem WordPress că scriptul este numit "jquery-cookie", folosind plugins_url () metodă spunem WordPress în cazul în care pentru a găsi script-ul, spunem WordPress că acest script depinde de jQuery pentru a lucra (vedeți o listă de mânere implicite aici) și, în sfârșit, îi spunem WordPress că versiunea scriptului este 1.4.1. Un ultim argument opțional pentru a adăuga la această metodă este Adevărat dacă doriți ca acest script să fie încărcat în subsol, ceea ce reprezintă o bună practică pentru îmbunătățirea timpului de încărcare a paginii.
 
Apoi trebuie să ne înregistrăm obiceiul cookie-pop scenariu în același mod, cu excepția faptului că nu vom introduce imediat scenariul din cauza traducerilor, pe care le vom acoperi puțin.
 
wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie');
 
Singura diferență majoră este că acest script are două dependențe - jquery și scriptul nostru anterior enqueued, jquery-cookie, deoarece avem nevoie atât pentru ca acest script să funcționeze corect.
Apoi, este o idee bună să internaționalizăm JavaScript-ul nostru. Mai devreme, în acest articol, am codificat greu unele valori care nu sunt foarte prietenoase pentru internaționalizare. Din fericire, WordPress are o funcție excelentă pentru această construită numită wp_localize_script. Această funcție vă permite să transmiteți date din PHP către JavaScript. 
În scriptul nostru, avem doar trei fragmente de text distinct - mesajul, textul butonului și link-ul citiți mai mult. Să mergem mai departe și să le prindem.
wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => => __ ('OK', 'cookie-pop'), 'more' => __ ('Read More ...', 'cookie-pop')));
 
Această funcție acceptă trei parametri. În primul rând, avem mânerul scenariului pe care dorim să-l localizăm - cookie-pop-script. Apoi avem numele obiectului JavaScript - acesta poate fi orice, dar în mod ideal ar trebui să fie un nume legat de scenariul dvs., în acest caz am folosit cookie_pop_text. Ultimul parametru este o serie de valori pe care dorim să le folosim în JavaScript - fiecare dintre acestea are propriul nume și textul pe care dorim să-l afișăm.
Acum, trebuie să ne întoarcem la JavaScript și să îi spunem să utilizeze aceste valori. Valorile sunt accesate astfel: cookie_pop_text.message ar afișa mesajul nostru. Să mergem mai departe și să facem câteva schimbări în JavaScript; trebuie doar să schimbăm linia:
$ ('body') prepend ('
'+ cookie_pop_text.message +''+ cookie_pop_text.button +' '+ cookie_pop_text.more +'
');

Ultimul lucru pe care trebuie să-l facem este să spui WordPress să folosească de fapt aceste fișiere - pentru asta folosim wp_enqueue_script () metodă:

wp_enqueue_script ("cookie-pop-script");

Veți observa că l-am encuitat doar cookie-pop-script scenariu aici - aici sunt acele declarații de dependență care intră în joc atunci când ne-am înregistrat scripturile. WordPress va încorpora automat toate dependențele.

În continuare, CSS. Acest lucru funcționează în același mod ca JavaScript:

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

Ultimul lucru pe care trebuie să-l faceți este să puneți totul împreună în noi cookie_pop_scripts_and_styles () funcția și cârlig la wp_enqueue_scripts acțiune, astfel încât pachetul complet arată astfel:

funcția 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'); wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => => __ ('OK', 'cookie-pop'), 'more' => __ ('Read More ...', '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');

Summing It Up

Acum avem un plug-in de lucru cu un mesaj simplu și un buton pentru a face clic, care va șterge mesajul și îl va face să nu apară din nou pentru o anumită perioadă de timp. 

Exemplul pe care l-am folosit aici este legile cookie ale UE, dar în realitate acest tip de funcționalitate ar putea fi util pentru tot felul de lucruri din WordPress, cum ar fi afișarea timpilor de livrare tăiați la Crăciun într-un magazin de eCommerce. 

Implementarea aici este foarte simplă și necesită o editare manuală pentru linkul "citiți mai mult" - acest lucru ar putea fi ușor extins la utilizarea opțiunii WordPress Options.