Umsetzung des EU-Cookie-Gesetzes in Ihre WordPress-Site

Wenn Sie in Europa leben, haben Sie wahrscheinlich vom Cookie-Gesetz gehört. Die genauen Gesetze ändern sich von Land zu Land, und einige Richtlinien sind unklar, wie sie umgesetzt werden sollten.

Dieser Artikel soll nicht über das Gesetz diskutieren oder beraten, sondern zeigt Ihnen die Methode zum Erstellen eines einfachen Cookie-Popup-Plugins.

Der Code für dieses einfache Plugin könnte in Ihrem Theme enthalten sein Functions.php Datei, aber ich denke, es ist besser als Plugin, da es nicht die Funktionalität ist, die Sie zwischen wechselnden Themen verlieren möchten.

Die Funktionalität

Die Implementierung wird so einfach wie möglich sein. Am oberen Rand des Bildschirms wird eine Leiste angezeigt, in der eine Nachricht angezeigt wird, eine Schaltfläche, um die Nachricht zu schließen, und einen Link, um mehr über die von der Site verwendeten Cookies zu erfahren. Bei einigen Implementierungen gibt es eine Schaltfläche zum Ablehnen von Cookies, die wir jedoch nicht verwenden werden. 

Es gibt viele verschiedene Implementierungen dieser Funktionalität. Mein persönlicher Favorit ist das, was Google verwendet:

Das einfache Plugin, das wir in diesem Lernprogramm erstellen, ist großartig für Entwickler, die in Projekten verwendet werden können, aber es würde ein wenig mehr Arbeit erfordern, wenn Sie es als "one size fits all" -Lösung für den allgemeinen öffentlichen Gebrauch machen möchten.

Die Werkzeuge

Wir werden jQuery, PHP, HTML und CSS für dieses einfache Plugin verwenden - los geht's.

Zuerst müssen wir einen neuen Ordner erstellen - sagen wir Cookie-Pop - In diesem Ordner müssen wir eine neue PHP-Datei erstellen cookie-pop.php.

Das erste, was wir in unserer PHP-Datei tun müssen, ist die Eingabe der Standard-Plugin-Informationen gemäß den Anweisungen des WordPress-Codex:

 
So weit, ist es gut. Wir werden jQuery die meiste Arbeit hier erledigen lassen, so dass die Menge an PHP, die wir verwenden müssen, minimal ist. Wir werden später in diesem Artikel auf PHP zurückkommen.
 
Das JavaScript
 
Erstellen wir einige Ordner für unser JavaScript und CSS. Dies ist nicht wesentlich, aber es hilft, die Dinge sauberer und organisierter zu halten, was nie eine schlechte Sache ist. Wir rufen diese an js und css.
 
Um zu erfassen, dass der Benutzer den Cookies zugestimmt hat, müssen wir ein Cookie setzen, das die Meldung bei jedem Besuch der Website abschaltet. Dafür verwenden wir ein sehr beliebtes jQuery-Plugin. Nimm das Plugin von GitHub und lassen Sie die jquery.cookie.js Datei in Ihrem js Mappe. Wir möchten auch eine Datei, in der unsere benutzerdefinierte jQuery für das Plugin abgelegt wird. Erstellen Sie also eine neue Datei in der js Ordner genannt cookie-pop.js.
 
Sie werden feststellen, dass ich hier unbemerktes JavaScript verwendet habe. Es ist immer eine gute Idee, eine reduzierte Version Ihres JavaScript-Codes zusammen mit der ursprünglichen gefütterten Version hinzuzufügen, insbesondere wenn Sie dieses als öffentlich verfügbares Plugin veröffentlichen möchten. 
Minification und Verkettung sind Themen für einen anderen Beitrag, aber für Interessierte können Sie CodeKit, Grunt und Gulp ausprobieren. Um mehr über die Minifizierung zu erfahren, werfen Sie einen Blick auf einige dieser großartigen Tuts + Tutorials:
 
Erneute Überprüfung der JavaScript-Reduzierung
 
Verwalten Sie Ihre Build-Aufgaben mit Gulp.js
 
Lernen Sie Grunt kennen, das Build-Tool für JavaScript
 
 
Öffnen Sie jetzt Ihren Rohling cookie-pop.js Datei und fügen Sie den folgenden Code ein:
 
 
/ * global cookie_pop_text * / (Funktion ($) 'use strict'; if ('set'! == $ .cookie ('cookie-pop')) $ ('body') .prepend ('
 Durch die Nutzung unserer Website stimmen Sie der Verwendung unserer Cookies zu. OK Weiterlesen…  
'); $ ('# accept-cookie') .click (function () $ .cookie ('cookie-pop', 'set'); $ ('.cookie-pop') .remove (););  (jQuery));
 
Diese jQuery-Methode sollte innerhalb von ausgeführt werden document.ready. Die Verwendung von jQuery mit WordPress unterscheidet sich geringfügig von der Verwendung der Bibliothek allein.
 Standardmäßig verwendet WordPress jQuery im Kompatibilitätsmodus, dh anstelle von $ Symbol, müssen Sie jQuery eingeben. Glücklicherweise gibt es einige Möglichkeiten, um dieses Problem zu umgehen - in dem obigen Beispiel sind wir in der $ So kann es innerhalb unserer Funktionen verwendet werden.
 
In diesem Code ist ziemlich viel los. Als Erstes prüfen wir, ob ein Cookie aufgerufen wird Cookie-Pop und dass es keinen Wert von hat einstellen mit der Plätzchen Methode (die zum jQuery Cookie-Skript gehört, wird hier weiter erklärt). 
Wenn der Cookie bereits gesetzt wurde, müssen wir nichts tun, da der Benutzer die Nachricht bereits gesehen und die Schaltfläche gedrückt hat. Wenn es diesen Wert nicht hat, setzen wir das vor  des HTML-Dokuments mit einem 
das hat eine Klasse von .Cookie-Pop. Das div wir haben ein erstellt  Element innen mit einer ID von # Accept-Cookie und einen einfachen Hyperlink. Der Hyperlink muss in einen Pfad Ihrer Seite geändert werden, in dem Sie Cookies erklären.
 
Wir haben dann eine Klickfunktion, die besagt, dass das Element mit der ID steht # Accept-Cookie wird geklickt und dann mit der Cookie-Methode ein Cookie namens Cookie-Pop mit einem Wert von einstellen das läuft in 365 Tagen ab und funktioniert auf der gesamten Website. 
Das .Cookie-Pop div wird dann entfernt und verschwindet vom Bildschirm. Beim nächsten Laden der Seite wird die .Cookie-Pop div wird nicht angezeigt, da der Cookie gesetzt wurde.
 
Das CSS
 
Das CSS hängt letztendlich von Ihrem Design ab, aber es gibt einige gute Daumenregeln, die Sie in Ihrem CSS üben können. Wie Sie im JavaScript sehen können, ist das Popup 
 hat eine Klasse von Cookie-Pop - Es ist ratsam, dies als übergeordneten Selektor in jedem benutzerdefinierten CSS zu verwenden, das Sie für Ihr Popup schreiben. Auf diese Weise besteht eine viel geringere Wahrscheinlichkeit, dass Ihr CSS mit in anderen Designs oder Plugins verwendeten Stilen in Konflikt steht.
 
Hier ist das CSS, das ich mit dem zwanzig dreizehn WordPress-Theme verwendet habe:
 
.Cookie-Pop Hintergrundfarbe: # 000; Rahmen unten: 1px fest #fff; Farbe: #fff; links: 0; Position: feststehend; Text ausrichten: Mitte; oben: 0; Breite: 100%; z-Index: 10;  .cookie-pop button margin: 10px; 
 
Ich habe mich entschieden, die Position der Cookie-Nachricht zu korrigieren, damit sie beim Scrollen durch den Benutzer erhalten bleibt. Alternativ können Sie verwenden absolut Hier bleibt es also immer oben auf der Seite, blättert aber nicht. Ich habe hier sehr minimales Styling verwendet, da das Design über Standardstile für Textgröße, Schaltflächen und Links verfügt.
 
Das PHP
 
Das PHP ist hier ziemlich einfach, da JavaScript und CSS die gesamte Arbeit erledigen. Alles, was Sie mit PHP noch tun müssen, ist, WordPress über unser JavaScript und CSS zu informieren, damit es korrekt eingefügt wird. Wir werden eine einfache Funktion schreiben, die JavaScript und CSS registriert und in eine Warteschlange stellt.
 
Die WordPress-Codierungsstandards besagen:
 
Verwenden Sie Kleinbuchstaben in Variablen-, Aktions- und Funktionsnamen (niemals camelCase). Wörter durch Unterstriche trennen. Abkürzen Sie Variablennamen nicht unbedingt ab. Lassen Sie den Code eindeutig und selbstdokumentierend sein.
 
Wir rufen unsere Funktion an cookie_pop_scripts_and_styles (). Als nächstes werden wir alle benötigten Skripte mit Hilfe von registrieren und in die Warteschlange stellen wp_register_script () Methode und die wp_enqueue_script () Methode. Das wp_register_script () Methode informiert WordPress über unser Skript; Handle, Ort, Abhängigkeiten, Version und ob es sich in der Fußzeile des Dokuments befinden sollte, anstatt in der Kopfzeile. Während die wp_enqueue_script () Die Methode kann ein mit registriertes Skript aufnehmen / laden wp_register_script () oder registrieren Sie sich und schreiben Sie ein Skript allein ein.
Beginnen wir mit dem Einreihen des jQuery Cookie-Skripts:
 
wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', true);
 
Im Klartext sagen wir WordPress, dass das Skript "jquery-cookie" heißt und das plugins_url () Als Methode sagen wir WordPress, wo das Skript zu finden ist. Wir sagen WordPress, dass dieses Skript davon abhängt, dass jQuery funktioniert (eine Liste der Standard-Handles finden Sie hier). Schließlich sagen wir WordPress, dass die Version des Skripts 1.4.1 ist. Ein optionales letztes Argument, das dieser Methode hinzugefügt werden soll, ist wahr Wenn dieses Skript in die Fußzeile geladen werden soll, empfiehlt es sich, die Ladezeit der Seite zu verbessern.
 
Wir müssen dann unseren Zoll registrieren Cookie-Pop Skript auf die gleiche Art und Weise, mit der Ausnahme, dass wir das Skript aufgrund von Übersetzungen, die wir ein wenig behandeln werden, nicht sofort in die Warteschlange stellen werden.
 
wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', true);
 
Der einzige wesentliche Unterschied besteht darin, dass dieses Skript zwei Abhängigkeiten hat - Jquery und unser zuvor eingereihtes Skript, Jquery-Cookie, da wir beide brauchen, damit dieses Skript korrekt funktioniert.
Als nächstes ist es eine gute Idee, unser JavaScript zu internationalisieren. Früher in diesem Artikel haben wir einige Werte hart codiert, was für die Internationalisierung nicht sehr freundlich ist. Glücklicherweise hat WordPress eine großartige Funktion für die eingebauten Funktionen wp_localize_script. Mit dieser Funktion können Sie Daten von PHP an JavaScript übergeben. 
In unserem Skript haben wir nur drei unterscheidbare Textteile - die Nachricht, den Schaltflächentext und den Link zum Lesen. Lasst uns fortfahren und diese zusammenbauen.
wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => __ ('Durch die Nutzung unserer Website erklären Sie sich mit der Verwendung unserer Cookies einverstanden.', 'cookie-pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Mehr lesen ...', 'cookie-pop'))));
 
Diese Funktion akzeptiert drei Parameter. Zunächst haben wir das Handle des Skripts, das wir lokalisieren möchten - Cookie-Pop-Skript. Wir haben dann den Namen des JavaScript-Objekts - dies kann alles sein, sollte aber im Idealfall ein Name sein, der sich auf Ihr Skript bezieht. In diesem Fall verwende ich diesen cookie_pop_text. Der letzte Parameter ist ein Array der Werte, die wir in unserem JavaScript verwenden möchten - jeder von ihnen hat seinen eigenen Namen und den anzuzeigenden Text.
Nun müssen wir zu unserem JavaScript zurückkehren und es anweisen, diese Werte zu verwenden. Auf die Werte wird wie folgt zugegriffen: cookie_pop_text.message würde unsere Nachricht anzeigen. Machen wir weiter und nehmen Sie einige Änderungen an unserem JavaScript vor. Wir müssen nur die eine Zeile ändern:
$ ('body'). voranstellen ('
'+ cookie_pop_text.message +''+ cookie_pop_text.button +' '+ cookie_pop_text.more +'
');

Das letzte, was wir tun müssen, ist WordPress mitzuteilen, dass diese Dateien tatsächlich verwendet werden sollen wp_enqueue_script () Methode:

wp_enqueue_script ('cookie-pop-script');

Sie werden feststellen, dass ich das nur in die Warteschlange gestellt habe Cookie-Pop-Skript Skript hier - hier setzen diese Abhängigkeitserklärungen ein, wenn wir unsere Skripts registrieren. WordPress erfasst automatisch alle Abhängigkeiten.

Als nächstes das CSS. Dies funktioniert auf die gleiche Weise wie das JavaScript:

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

Das letzte, was wir tun müssen, ist, dies alles in unserem cookie_pop_scripts_and_styles () Funktion und haken Sie es an wp_enqueue_scripts Aktion, also sieht das komplette Paket so aus:

function cookie_pop_scripts_and_styles () wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.cs.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' => __ ('Durch die Nutzung unserer Website erklären Sie sich mit der Verwendung unserer Cookies einverstanden.', 'cookie-pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Mehr lesen ...', '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');

Zusammenfassend

Jetzt haben wir ein funktionierendes Plugin mit einer einfachen Nachricht und einer Schaltfläche zum Klicken, mit der die Nachricht gelöscht und für eine bestimmte Zeit nicht mehr angezeigt wird. 

Das Beispiel, das ich hier verwendet habe, bezieht sich auf das EU-Cookie-Gesetz, aber in Wirklichkeit könnte diese Art von Funktionalität für alle möglichen Dinge in WordPress nützlich sein, wie beispielsweise die Anzeige von Lieferzeiten zu Weihnachten in einem E-Commerce-Shop. 

Die Implementierung hier ist sehr einfach und erfordert einige manuelle Bearbeitungen für den Link "Weitere Informationen" - dies könnte leicht mit der WordPress-Options-API erweitert werden.