Implementatie van de EU-cookiewet in uw WordPress-site

Als je in Europa woont, heb je waarschijnlijk wel eens gehoord van de cookiewet. De exacte wet verandert van land tot land en sommige richtlijnen zijn een beetje onduidelijk over de manier waarop het moet worden geïmplementeerd.

Dit artikel is niet bedoeld om de wet te bespreken of te adviseren, maar om u de methode te laten zien achter het maken van een eenvoudige pop-upplugin voor cookiewetgeving.

De code voor deze eenvoudige plug-in kan gaan in uw thema's functions.php bestand, maar ik denk dat het beter kan worden overgelaten als een plug-in, omdat het niet het soort functionaliteit is dat je wilt verliezen tussen wisselende thema's.

De functionaliteit

De implementatie zal zo eenvoudig mogelijk zijn. We gaan een balk aan de bovenkant van het scherm plaatsen met een bericht, een knop om het bericht te sluiten en een link om meer te lezen over de cookies die de site gebruikt. Sommige implementaties gaan zelfs zo ver als het hebben van een 'ontkenneknop' voor cookies, maar we zullen dat niet gebruiken. 

Er zijn veel verschillende implementaties van deze functionaliteit, mijn persoonlijke favoriet is wat Google gebruikt:

De eenvoudige plug-in die we tijdens deze tutorial maken, is geweldig voor een ontwikkelaar om projecten te gebruiken, maar zou wat meer werk nodig hebben als je er een "one size fits all" -oplossing voor algemeen openbaar gebruik van wilde maken..

Het gereedschap

We gaan jQuery, PHP, HTML en CSS gebruiken voor deze eenvoudige plug-in - laten we aan de slag gaan.

Allereerst moeten we een nieuwe map maken, laten we zeggen koekje-pop - en binnen die map moeten we een nieuw PHP-bestand maken met de naam koekje-pop.php.

Het eerste dat we moeten doen binnen ons PHP-bestand is de standaard plugin-informatie in te voeren zoals aangegeven door de WordPress Codex:

 
Tot nu toe, zo goed. We laten jQuery het meeste werk hier doen, dus de hoeveelheid PHP die we moeten gebruiken is minimaal. We komen later in het artikel terug naar de PHP.
 
JavaScript
 
Laten we een aantal mappen maken voor onze JavaScript en CSS. Dit is niet essentieel, maar het helpt wel om het schoner en georganiseerder te houden, wat nooit erg is. We zullen dit noemen js en css.
 
Om vast te leggen dat de gebruiker akkoord is gegaan met cookies, moeten we een cookie instellen die voorkomt dat het bericht bij elk sitebezoek verschijnt. Hiervoor gaan we een zeer populaire jQuery-plug-in gebruiken. Pak de plug-in in GitHub en laat de jquery.cookie.js bestand in uw js map. We willen ook dat een bestand onze aangepaste jQuery laat vallen voor de plug-in, dus maak een nieuw bestand aan in de js map genoemd koekje-pop.js.
 
U zult merken dat ik hier niet-geminimaliseerd JavaScript heb gebruikt - het is altijd een goed idee om een ​​geminimaliseerde versie van uw JavaScript samen met de originele, pluizige versie op te nemen, vooral als u dit als een openbare plug-in zou willen vrijgeven. 
Minificatie en concatenatie zijn onderwerpen voor een andere post, maar voor geïnteresseerden kun je CodeKit, Grunt en Gulp bekijken. Om meer over verkleinen te lezen, bekijk eens enkele van deze andere geweldige Tuts + tutorials:
 
JavaScript-minificatie opnieuw bekijken
 
Uw bouwtaken beheren met Gulp.js
 
Meet Grunt, The Build Tool voor JavaScript
 
 
Open nu je blanco koekje-pop.js bestand en plaats de onderstaande code:
 
 
/ * global cookie_pop_text * / (functie ($) 'gebruik strict'; if ('set'! == $ .cookie ('cookie-pop')) $ ('body') .prepend ('
 Door onze website te gebruiken, gaat u akkoord met het gebruik van onze cookies. OK Lees verder…  
'); $ ('# accept-cookie') .klik (functie () $ .cookie ('cookie-pop', 'set'); $ ('.cookie-pop') .remove (););  (jQuery));
 
Deze jQuery-methode moet binnen worden uitgevoerd document.ready. Het gebruik van jQuery met WordPress verschilt enigszins van het gebruik van de eigen bibliotheek.
 WordPress gebruikt standaard jQuery in de compatibiliteitsmodus wat betekent dat in plaats van het gebruik van de $ symbool, je moet jQuery typen. Gelukkig zijn er een paar manieren om dit probleem te omzeilen - in het bovenstaande voorbeeld zijn we geslaagd in de $ dus het kan binnen onze functies worden gebruikt.
 
Er is nogal wat gaande in deze code, dus laten we het een beetje afbreken. Het eerste wat we hier doen is controleren of er een cookie is gebeld koekje-pop en dat het geen waarde heeft van reeks door de koekje methode (die bij het jQuery Cookie-script hoort, wordt hier verder uitgelegd). 
Als de cookie al is ingesteld, hoeven we niets te doen omdat de gebruiker het bericht al heeft gezien en op de knop heeft gedrukt. Als het die waarde niet heeft, zijn we de  van het HTML-document met een 
dat heeft een klasse van .koekje-pop. De div we hebben gemaakt heeft een  element binnen met een ID van # Accepteren cookies en een eenvoudige hyperlink. De hyperlink moet worden bewerkt naar een pad van uw pagina waar u uitleg geeft over cookies.
 
We hebben dan een klikfunctie, die zegt dat wanneer het element met de ID # Accepteren cookies wordt geklikt en vervolgens de cookiemethode gebruikt om een ​​opgeroepen cookie te maken koekje-pop met een waarde van reeks dat verloopt over 365 dagen en werkt op de hele website. 
De .koekje-pop div wordt vervolgens verwijderd en verdwijnt van het scherm. De volgende keer dat de pagina wordt geladen, de .koekje-pop div wordt niet weergegeven omdat de cookie is ingesteld.
 
De CSS
 
De CSS hangt uiteindelijk af van je thema, maar er zijn enkele goede vuistregels om hier in je CSS te oefenen. Zoals je kunt zien in de JavaScript, de pop-up 
 heeft een klasse van koekje-pop - het is verstandig om dit te gebruiken als de bovenliggende selector in elke aangepaste CSS die je voor je popup schrijft, op deze manier is er veel minder kans dat je CSS in conflict komt met stijlen die in andere thema's of plug-ins worden gebruikt.
 
Hier is de CSS die ik gebruikte met het thema van de dertien-dertien WordPress:
 
.cookie-pop background-color: # 000; border-bottom: 1px solid #fff; kleur: #fff; links: 0; positie: vast; text-align: center; boven: 0; breedte: 100%; z-index: 10;  .cookie-pop-knop margin: 10px; 
 
Ik heb ervoor gekozen de positie van het cookiebericht te corrigeren zodat het aanwezig blijft wanneer de gebruiker scrolt. Als alternatief kunt u gebruiken absoluut hier dus het blijft altijd bovenaan de pagina, maar scrolt niet. Ik heb hier een minimale styling gebruikt omdat het thema standaardstijlen heeft die zijn ingesteld voor tekstgrootte, knoppen en links.
 
De PHP
 
De PHP is vrij eenvoudig hier, omdat JavaScript en CSS vrijwel al het werk doen. Het enige dat nog te maken heeft met onze PHP is WordPress vertellen over onze JavaScript en CSS, zodat deze correct wordt ingevoegd. We gaan een eenvoudige functie schrijven die onze JavaScript en CSS registreert en in de wacht sleept.
 
De coderingsstandaarden van WordPress zeggen:
 
Gebruik kleine letters in namen van variabelen, acties en functies (nooit camelCase). Aparte woorden via onderstrepingstekens. Afkorting van variabelenamen niet noodzakelijkerwijs afkorten; laat de code ondubbelzinnig zijn en zelfdocumenteren.
 
We zullen onze functie noemen cookie_pop_scripts_and_styles (). Vervolgens zullen we alle scripts die we nodig hebben registreren en in de wacht slepen met behulp van de wp_register_script () methode en de wp_enqueue_script () methode. De wp_register_script () methode vertelt WordPress over ons script; de handle, locatie, afhankelijkheden, versie en of deze zich in de footer van het document moet bevinden, in plaats van de header. Terwijl de wp_enqueue_script () methode kan een script in register brengen / laden dat is geregistreerd met wp_register_script () of registreer en wacht / laad een script helemaal zelf.
We beginnen met het inladen van het jQuery Cookie-script:
 
wp_enqueue_script ('jQuery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jQuery'), '1.4.1', true);
 
Eenvoudig gezegd, vertellen we hier aan WordPress dat het script "jQuery-cookie" wordt genoemd, met behulp van de plugins_url () methode vertellen we WordPress waar het script te vinden is, we vertellen WordPress dat dit script afhankelijk is van jQuery om te werken (zie een lijst met standaard handvatten hier), en ten slotte vertellen we WordPress dat de versie van het script 1.4.1 is. Een optioneel laatste argument om toe te voegen aan deze methode is waar als u wilt dat dit script in de voettekst wordt geladen, wat een goede methode is om de laadtijd van de pagina te verbeteren.
 
We moeten dan onze gewoonte registreren koekje-pop script op vrijwel dezelfde manier, behalve dat we het script niet meteen in de wachtrij plaatsen vanwege vertalingen, die we in een beetje zullen bespreken.
 
wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jQuery', 'jQuery-cookie'), '1.0.0', true);
 
Het enige grote verschil hier is dat dit script twee afhankelijkheden heeft - jQuery en ons eerder in wachtrij geplaatste script, jquery-koekje, omdat we beide nodig hebben om dit script correct te laten werken.
Vervolgens is het een goed idee om onze JavaScript te internationaliseren. Eerder in dit artikel codeerden we enkele waarden die niet erg vriendelijk zijn voor internationalisering. Gelukkig heeft WordPress een geweldige functie voor deze ingebouwde call wp_localize_script. Met deze functie kunt u gegevens van PHP naar JavaScript doorgeven. 
In ons script hebben we slechts drie stukjes herkenbare tekst - het bericht, de knoptekst en de link meer lezen. Laten we doorgaan en deze aansluiten.
wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => __ ('Door onze website te gebruiken, gaat u akkoord met het gebruik van onze cookies.', 'cookie-pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Lees meer ...', 'cookie-pop')));
 
Deze functie accepteert drie parameters. Ten eerste hebben we het handvat van het script dat we willen lokaliseren - koekje-pop-script. We hebben dan de naam van het JavaScript-object - dit kan allesbehalve ideaal zijn, zou een naam moeten zijn die is gerelateerd aan uw script, in dit geval is Ive gebruikt cookie_pop_text. De laatste parameter is een array van de waarden die we willen gebruiken in ons JavaScript - elk van deze heeft zijn eigen naam en de tekst die we willen weergeven.
Nu moeten we teruggaan naar ons JavaScript en het vertellen om deze waarden te gebruiken. De waarden worden als volgt benaderd: cookie_pop_text.message zou onze boodschap weergeven. Laten we doorgaan en een paar wijzigingen aanbrengen in ons JavaScript; we hoeven alleen de regel te wijzigen:
$ ('body'). prepend ('
'+ cookie_pop_text.message +''+ cookie_pop_text.button +' '+ cookie_pop_text.more +'
');

Het laatste dat we moeten doen is WordPress vertellen om deze bestanden daadwerkelijk te gebruiken - hiervoor gebruiken we de wp_enqueue_script () methode:

wp_enqueue_script ('cookie-pop-script');

U zult opmerken dat ik het alleen in de wacht heb gezet koekje-pop-script script hier - hier komen die afhankelijkheidsverklaringen binnen om te spelen toen we onze scripts registreerden. WordPress zal automatisch alle afhankelijkheden in wachtrij plaatsen.

Vervolgens de CSS. Dit werkt op vrijwel dezelfde manier als JavaScript:

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

Het laatste wat je moet doen, is om dit alles samen te voegen in onze cookie_pop_scripts_and_styles () functie en haak het aan de wp_enqueue_scripts actie, dus het complete pakket ziet er als volgt uit:

function 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' => __ ('Door onze website te gebruiken, gaat u akkoord met het gebruik van onze cookies.', 'cookie-pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Lees meer ...', 'cookie-pop'))); wp_enqueue_script ('cookie-pop-script'); wp_enqueue_style ('cookie-pop-stijl', plugins_url ('/css/cookie-pop.css', __FILE__), array (), '1.0.0');  add_action ('wp_enqueue_scripts', 'cookie_pop_scripts_and_styles');

Samenvattend

Nu hebben we een werkende plug-in met een eenvoudig bericht en een knop om te klikken, waardoor het bericht wordt gewist en het niet weer verschijnt gedurende een bepaalde tijd. 

Het voorbeeld dat ik hier gebruikte, is voor de EU-cookiewet, maar in werkelijkheid kan dit soort functionaliteit nuttig zijn voor allerlei dingen in WordPress, zoals het afleveren van bezorgtijden met Kerstmis in een eCommerce-winkel. 

De implementatie is hier heel eenvoudig en vereist enige handmatige bewerking voor de koppeling "lees meer" - dit kan eenvoudig worden uitgebreid met de API voor WordPress-opties.