Implementazione della legge sui cookie dell'UE nel tuo sito WordPress

Se vivi in ​​Europa, probabilmente hai sentito parlare della legge sui cookie. La legge esatta cambia da paese a paese e alcune delle linee guida sono un po 'oscure sui modi in cui dovrebbe essere implementata.

Questo articolo non è per discutere o consigliare sulla legge, ma per mostrarti il ​​metodo alla base della creazione di un semplice plugin popup di cookie law.

Il codice per questo semplice plugin potrebbe andare nel tuo tema functions.php file, ma penso che sia meglio lasciarlo come plug-in in quanto non è il tipo di funzionalità che si desidera perdere tra la modifica dei temi.

La funzionalità

L'implementazione sarà il più semplice possibile. Verrà visualizzata una barra nella parte superiore dello schermo che visualizza un messaggio, un pulsante per chiudere il messaggio e un collegamento per ulteriori informazioni sui cookie utilizzati dal sito. Alcune implementazioni arrivano ad avere un pulsante 'nega' per i cookie, ma non lo useremo. 

Esistono molte implementazioni diverse di questa funzionalità, il mio preferito è ciò che Google utilizza:

Il semplice plugin che creiamo durante questo tutorial sarà fantastico per uno sviluppatore da utilizzare sui progetti, ma avrebbe bisogno di un po 'più di lavoro se si volesse renderlo una soluzione "unica per tutti" per uso pubblico in generale.

Gli attrezzi

Utilizzeremo jQuery, PHP, HTML e CSS per questo semplice plug-in: iniziamo.

Prima di tutto, dobbiamo creare una nuova cartella, diciamo biscotto-pop - e all'interno di quella cartella abbiamo bisogno di creare un nuovo file PHP chiamato cookie-pop.php.

La prima cosa che dobbiamo fare all'interno del nostro file PHP è inserire le informazioni standard del plugin come indicato dal codice WordPress:

 
Fin qui tutto bene. Lasciamo che jQuery faccia la maggior parte del lavoro qui, quindi la quantità di PHP che dobbiamo usare è minima. Torneremo al PHP più avanti nell'articolo.
 
Il JavaScript
 
Creiamo alcune cartelle per i nostri JavaScript e CSS. Questo non è essenziale, ma aiuta a mantenere le cose più pulite e organizzate, il che non è mai una cosa negativa. Li chiameremo js e css.
 
Al fine di rilevare che l'utente ha accettato i cookie, è necessario impostare un cookie che interrompa il messaggio visualizzato in ogni visita del sito. Per questo useremo un plugin jQuery molto popolare. Prendi il plugin da GitHub e rilasciare il jquery.cookie.js file nel tuo js cartella. Vogliamo anche che un file lasci cadere la nostra jQuery personalizzata per il plug-in, quindi crea un nuovo file nel file js cartella chiamata cookie-pop.js.
 
Noterai che ho usato JavaScript non ancora terminato qui - è sempre una buona idea includere una versione miniata del tuo JavaScript insieme alla versione originale, lossa, specialmente se volessi rilasciarlo come plugin pubblicamente disponibile. 
Minificazione e concatenazione sono argomenti per un altro post, ma per coloro che sono interessati, è possibile controllare CodeKit, Grunt e Gulp. Per saperne di più su Minification, dai un'occhiata ad alcuni di questi tutorial di Tuts +:
 
Rivisitazione del codice JavaScript
 
Gestione delle attività di build con Gulp.js
 
Incontra Grunt, lo strumento di costruzione per JavaScript
 
 
Ora apri il tuo vuoto cookie-pop.js file e inserisci il seguente codice:
 
 
/ * global cookie_pop_text * / (function ($) 'use strict'; if ('set'! == $ .cookie ('cookie-pop')) $ ('body') .prepend ('
 Utilizzando il nostro sito Web, l'utente accetta l'uso dei nostri cookie. ok Leggi di più…  
'); $ ('# accept-cookie') .click (function () $ .cookie ('cookie-pop', 'set'); $ ('.cookie-pop') .remove (););  (jQuery));
 
Questo metodo jQuery dovrebbe essere eseguito all'interno document.ready. Usare jQuery con WordPress è leggermente diverso dall'usare la libreria da sola.
 Per impostazione predefinita, WordPress utilizza jQuery in modalità compatibilità che significa invece di usare il $ simbolo, devi digitare jQuery. Fortunatamente, ci sono alcuni modi per aggirare questo problema - nell'esempio sopra abbiamo passato nel $ quindi può essere utilizzato all'interno delle nostre funzioni.
 
C'è un bel po 'di cose in questo codice, quindi lasciamolo un po'. La prima cosa che facciamo qui è controllare se c'è un cookie chiamato biscotto-pop e che non ha valore di impostato usando il biscotto metodo (che appartiene allo script jQuery Cookie, ulteriormente spiegato qui). 
Se il cookie è già stato impostato, non è necessario fare nulla in quanto l'utente avrà già visualizzato il messaggio e premuto il pulsante. Se non ha quel valore, allora stiamo preparando il  del documento HTML con a 
che ha una classe di .biscotto-pop. Il div abbiamo creato ha a  elemento all'interno con un ID di # Accetta-cookie e un semplice collegamento ipertestuale. Il collegamento ipertestuale dovrà essere modificato in un percorso della pagina in cui vengono spiegati i cookie.
 
Abbiamo quindi una funzione click, che sta dicendo che quando l'elemento con l'id # Accetta-cookie viene cliccato quindi utilizzare il metodo cookie per creare un cookie chiamato biscotto-pop con un valore di impostato che scade tra 365 giorni e funziona attraverso l'intero sito web. 
Il .biscotto-pop div viene quindi rimosso e scomparirà dallo schermo. La prossima volta che la pagina viene caricata, il .biscotto-pop div non apparirà come il cookie sarà stato impostato.
 
Il CSS
 
Il CSS dipenderà in ultima analisi dal tuo tema, ma ci sono alcune buone regole pratiche per esercitarti all'interno del tuo CSS qui. Come puoi vedere nel JavaScript, il popup 
 ha una classe di biscotto-pop - è consigliabile utilizzarlo come selettore genitore in qualsiasi CSS personalizzato che scrivi per il tuo popup, in questo modo, c'è molta meno possibilità che il tuo CSS sia in conflitto con gli stili usati in altri temi o plugin.
 
Ecco il CSS che ho usato con il tema dei trentadue WordPress:
 
.cookie-pop background-color: # 000; border-bottom: 1px solid #fff; colore: #fff; a sinistra: 0; posizione: fissa; allineamento del testo: centro; inizio: 0; larghezza: 100%; z-index: 10;  .cookie-pop button margin: 10px; 
 
Ho scelto di correggere la posizione del messaggio cookie in modo che rimanga presente quando l'utente scorre. In alternativa, puoi usare assoluto qui quindi rimane sempre in cima alla pagina, ma non scorre. Ho usato uno stile molto minimale in quanto il tema ha gli stili predefiniti impostati per dimensioni del testo, pulsanti e collegamenti.
 
Il PHP
 
Il PHP è piuttosto semplice qui dato che JavaScript e CSS fanno praticamente tutto il lavoro. Tutto ciò che resta da fare con il nostro PHP è dire a WordPress del nostro JavaScript e CSS in modo che venga inserito correttamente. Scriveremo una semplice funzione che registra e accoda i nostri JavaScript e CSS.
 
Gli standard di codifica di WordPress dicono:
 
Usa lettere minuscole nei nomi di variabili, azioni e funzioni (mai camelCase). Separare le parole tramite underscore. Non abbreviare i nomi delle variabili non necessariamente; lascia che il codice sia inequivocabile e auto-documentante.
 
Chiameremo la nostra funzione cookie_pop_scripts_and_styles (). Successivamente, registreremo e accodare tutti gli script di cui abbiamo bisogno usando il wp_register_script () metodo e il wp_enqueue_script () metodo. Il wp_register_script () metodo dice a WordPress del nostro script; il suo handle, posizione, dipendenze, versione e se dovrebbe essere collocato nel piè di pagina del documento, piuttosto che l'intestazione. Mentre il wp_enqueue_script () il metodo può accodare / caricare uno script registrato con wp_register_script () o registrare e accodare / caricare uno script tutto da solo.
Inizieremo accodando lo script di jQuery Cookie:
 
wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', vero);
 
In parole povere, quello che stiamo facendo qui sta dicendo a WordPress che lo script è chiamato "jquery-cookie", usando il plugins_url () metodo diciamo a WordPress dove trovare lo script, diciamo a WordPress che questo script dipende da jQuery per funzionare (vedere un elenco di handle di default qui), e infine, diciamo a WordPress che la versione dello script è 1.4.1. L'ultimo argomento facoltativo da aggiungere a questo metodo è vero se vuoi che questo script venga caricato nel piè di pagina, che è una best practice per migliorare il tempo di caricamento della pagina.
 
Abbiamo quindi bisogno di registrare la nostra abitudine biscotto-pop script più o meno allo stesso modo, tranne che non accoderemo subito lo script a causa delle traduzioni, che copriremo tra un po '.
 
wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', vero);
 
L'unica grande differenza qui è che questo script ha due dipendenze - jquery e il nostro script precedentemente accatastato, jquery-cookie, come abbiamo bisogno sia di questo script per funzionare correttamente.
Successivamente, è una buona idea internazionalizzare il nostro JavaScript. In precedenza in questo articolo abbiamo codificato alcuni valori che non sono molto amichevoli per l'internazionalizzazione. Fortunatamente WordPress ha una grande funzione per questo chiamato wp_localize_script. Questa funzione ti consente di passare dati da PHP a JavaScript. 
Nella nostra sceneggiatura, abbiamo solo tre pezzi di testo distinguibile: il messaggio, il testo del pulsante e il link Leggi altro. Andiamo avanti e agganciamo questi.
wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => __ ('Usando il nostro sito web, accetti l'uso dei nostri cookie.', 'cookie-pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Leggi altro ...', 'cookie-pop'))));
 
Questa funzione accetta tre parametri. Innanzitutto, abbiamo la maniglia dello script che vogliamo localizzare - biscotto-pop-script. Abbiamo quindi il nome dell'oggetto JavaScript - questo può essere qualsiasi cosa ma idealmente dovrebbe essere un nome correlato al tuo script, in questo caso Ive usato cookie_pop_text. L'ultimo parametro è un array di valori che vogliamo usare all'interno del nostro JavaScript - ognuno di questi ha il proprio nome e il testo che vogliamo mostrare.
Ora, dobbiamo tornare al nostro JavaScript e dirgli di usare questi valori. I valori sono accessibili in questo modo: cookie_pop_text.message mostrerebbe il nostro messaggio Andiamo avanti e apportiamo alcune modifiche al nostro JavaScript; abbiamo solo bisogno di cambiare la linea:
$ ('body'). antefatto ('
'+ cookie_pop_text.message +''+ cookie_pop_text.button +' '+ cookie_pop_text.more +'
');

L'ultima cosa che dobbiamo fare è dire a WordPress di usare effettivamente questi file - per questo usiamo il wp_enqueue_script () metodo:

wp_enqueue_script ('cookie-pop-script');

Noterai che ho solo accodato il biscotto-pop-script script qui - questo è dove queste dichiarazioni di dipendenza entrano in gioco quando abbiamo registrato i nostri script. WordPress accoderà automaticamente tutte le dipendenze.

Il prossimo, il CSS. Funziona allo stesso modo del JavaScript:

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

L'ultima cosa da fare è mettere tutto questo insieme cookie_pop_scripts_and_styles () funzione e collegalo al wp_enqueue_scripts azione, quindi il pacchetto completo ha il seguente aspetto:

function cookie_pop_scripts_and_styles () wp_enqueue_script ('jquery-cookie', plugins_url ('/lib/jquery.cookie.js', __FILE__), array ('jquery'), '1.4.1', vero); wp_register_script ('cookie-pop-script', plugins_url ('/js/cookie-pop.js', __FILE__), array ('jquery', 'jquery-cookie'), '1.0.0', vero); wp_localize_script ('cookie-pop-script', 'cookie_pop_text', array ('message' => __ ('Usando il nostro sito web, accetti l'uso dei nostri cookie.', 'cookie-pop'), 'button' => __ ('OK', 'cookie-pop'), 'more' => __ ('Leggi altro ...', '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');

Riassumendo

Ora abbiamo un plug-in funzionante con un semplice messaggio e un pulsante per fare clic che cancellerà il messaggio e lo farà non mostrare più per un determinato periodo di tempo. 

L'esempio che ho usato qui è per la normativa europea sui cookie, ma in realtà questo tipo di funzionalità potrebbe essere utile per ogni genere di cosa in WordPress come mostrare tempi di consegna ridotti a Natale in un negozio di e-commerce. 

L'implementazione qui è molto semplice e richiede alcune modifiche manuali per il link "leggi di più" - questo potrebbe facilmente essere esteso usando l'API delle opzioni di WordPress.