Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Implementare la nuova legge EU sull'utilizzo dei Cookies nel tuo sito Wordpress

by
Difficulty:IntermediateLength:MediumLanguages:

Italian (Italiano) translation by Lorenzo Pieri (you can also view the original English article)

Se vivete in Europa, avrete certo sentito parlare della legge sui Cookies. La legge di per se cambia da paese a paese ed alcune linee guida sono decisamente poco chiare a proposito delle modalità con cui detta legge dovrebbe essere implementata.

Questo articolo non è stato scritto per discutere o dare consigli sulla sopracitata, piuttosto per mostrarvi il metodo utilizzato per creare un semplice plugin che farà apparire l'informativa sulla legge sui Cookies ed il loro utilizzo sul vostro sito Web.

Il codice per questo semplice Plugin potrebbe andare nel file functions.php del vostro Tema, ma credo sia meglio lasciarlo come Plugin visto che non ha quel tipo di funzionalità che vorreste perdere quando vi ritrovate, magari, a cambiare tipo di Tema.

La funzionalità

L'implementazione sarà semplicissima. Avremo una barra che si estende in cima allo schermo e mostra il messaggio, un bottone che lo fa sparire, ed un link per informarsi su quali Cookies il sito utilizzi. Alcune implementazioni arrivano persino a permettere un bottone per 'non acconsentire' i Cookies, mai noi non lo utilizzeremo. 

Ci sono diversi metodi di implemetazione per questa funzionalità, la mia preferita è quella utilizzata da Google:

Il semplice plugin che creeremo durante il tutorial sarà grandioso per essere utilizzato da un Developer su i suoi progetti, ma richiederebbe un po' più di lavoro se volessimo renderlo "universale" tanto da essere la soluzione per un utilizzo pubblico generale.

Gli strumenti

Faremo uso di jQuery, PHP, HTML e CSS per questo semplice Plugin - Iniziamo.

Innanzitutto, dobbiamo creare una nuova cartella - chiamiamola cookie-pop - e all'interno di questa cartella dobbiamo creare un nuovo file PHP che chiameremo cookie-pop.php.

La prima cosa che dobbiamo fare sul file PHP è di aggiungere le informazioni standard per i Plugin, come descritto sul Codex di Wordpress:

Fin qui, tutto bene. Lasceremo che sia jQuery a fare la maggior parte del lavoro così da rendere minimo l'utilizzo di PHP. Torneremo su PHP più tardi.

Il Javascript

Creiamo alcune cartelle per il nostro Javascript e CSS. Ciò non è essenziale, ma aiuta a mantenere il tutto più pulito ed organizzato, e questo non è male. Le chiameremo js and css

Per catturare l'evento in base al quale l'utente ha "acconsentito" all'utilizzo dei Cookies, dobbiamo inserire un Cookie che si cura di non far apparire il messaggio ogni volta che l'utente visita il sito. Per fare ciò, utilizzeremo un plugin di jQuery molto popolare. Prendete il Plugin da GitHub  e inserite il file jquery.cookie.js nella cartella js. Vogliamo anche un file dove inseriremo il nostro codice jQuery, quindi create un file nella cartella js  e chiamatelo cookie-pop.js.

Noterete che non ho utilizzato la versione "minimizzata" per quanto riguarda il nostro JavaScript - E' sempre una buona idea (e buona pratica) includere una versione "minimizzata" del vostro Javascript insieme all'originale, soprattutto se volete rilasciare il Plugin al pubblico. 

La Minimizzazione e la concatenazione sono argomenti per un altro articolo, ma per quelli interessati, potete dare un'occhiata a CodeKit, Grunt, e Gulp. Per leggere di più a proposito della Minimizzazione, qui sotto alcuni dei grandiosi tutorial presenti su Tuts+ (attualmente disponibili in Inglese):

Adesso aprite il vostro file cookie-pop.js ed inserite il codice qui sotto:


Questo metodo jQuery dovrebbe essere eseguito all'interno di document.ready. Utilizzare jQuery con Wordpress è leggermente diverso da ciò a cui siamo abituati.

 Di base, Wordpress utilizza jQuery in modalità compatibile, ciò implica che utilizzeremo la forma lungha, quindi "jQuery", piuttosto che il simbolo $, a cui siamo abituati. Fortunatamente, ci sono molti modi per aggirare questo problema - nell'esempio sopra, abbiamo passato $ come argomento della funzione, potendolo così utilizzare.

Come avrete notato, vi sono un sacco di elementi in gioco nel nostro codice, quindi andiamo a frammentarlo per capirlo. La prima cosa che facciamo è di controllare se esiste un Cookie chiamato cookie-pop e che non abbia un valore di set utilizzando il metodo cookie (che appartiene allo script di jQuery Cookie, approfondito qui).  

Se il Cookie è già stato impostato, allora non abbiamo bisogno di fare alcunché poiché l'utente avrà già visualizzato il messaggio e premuto il bottone. Se non ha quel valore, allora utilizziamo prepend per inserire una <div> che ha come classe .cookie-pop. La div che abbiamo creato ha un elemento <button> al suo interno, con ID #accept-cookie ed un semplice hyperlink. L'hyperlink dovrà essere modificato così da poter reindirizzare ad una pagina del vostro sito Web, quest'ultima contenente le informazioni e le spiegazioni sui Cookies.

Abbiamo poi una funzione sull'evento click, che ci dice ciò: quando l'elemento con id #accept-cookie è cliccato, allora utilizza il metodo cookie per creare un cookie cookie-pop con il valore set che si estingue in 365 giorni e funziona su tutto il sito Web. 

La div con classe .cookie-pop è poi rimossa e scomparirà dallo schermo. La prossima volta che la pagina è caricata, la sopracitata div non apparirà in quanto il cookie con valore set risulterà presente.

Il CSS

Il CSS dipenderà principalmente dal Tema che utilizzate o utilizzerete, ad ogni modo vi sono alcune regole empiriche da praticare sul nostro CSS. Come potete notare nel JavaScript, il popup <div> ha una classe cookie-pop - è saggio fare uso di tale classe come parent selector per ogni CSS costumizzato che scriveremo per il popup, a questo modo si evitano probabili conflitti con gli stili degli altri Temi e dei  plugins.

Ecco il CSS che ho utilizzato per il tema WordPress, twenty-thirteen:

Ho deciso di rendere la posizione fixed per quanto riguarda il messaggio sui Cookies così che il posizionamento rimanga invariato anche nell'evento che l'utente faccia scroll con il mouse. Alternativamente, potete utilizzare absolute così che rimanga sempre sulla parte top della pagina, ma non sarà affetto dallo scrolling dell'utente. Ho utilizzato uno stile minimale perché il Tema possiede già stili per la grandezza del testo, i bottoni ed i link.

Il PHP

Il PHP è piuttosto semplice perchè JavaScript e CSS fanno la maggior parte del lavoro. Tutto ciò che manca da fare con il nostro PHP, è di dire a Wordpress che i nostri Javascript e CSS devono essere inseriti correttamente. Scriveremo una facile funzione che registri (register) ed inserisca (enqueues) i nostri JavaScript e CSS.

Gli standard di codifica di Wordpress dicono:

Utilizzate lettere minuscole nelle variabili, azioni e nomi di funzione (mai il camelCase). Separate le parole con gli underscore. Non rimpicciolite i nome delle variabili se non necessario; lasciate che il codice sia non ambiguo e auto-documentato.

Chiameremo la nostra funzione cookie_pop_scripts_and_styles(). Poi, registreremo ed inseriremo tutti gli script di cui facciamo uso rifacendoci ai metodi forniti da Wordpress wp_register_script() e wp_enqueue_script(). Il metodo wp_register_script() avverte Wordpress del nostro script; Tutte le informazioni, l'handle, la location, le dipendenze, la versione e qualora dovesse essere nel footer piuttosto che l'header. Il metodo wp_enqueue_script() può inserire / caricare uno script registrato con  wp_register_script() o registrare e inserire / caricare uno script, tutto da solo.

Cominceremo dall'inserire (wp_enqueue_script()) lo script Cookie:

Parlando come si mangia, ciò che stiamo facendo è di dire a Wordpress che lo script si chiama "jquery-cookie", utilizzando il metodo plugins_url() gli facciamo sapere dove potrà trovare lo script, gli diciamo anche che questo script dipende da jQuery per funzionare (vedi una lista degli handles di default qui), e finalmente, diciamo a Wordpress che la versione dello script è 1.4.1. Un argomento opzionale che potremmo aggiungere a questo metodo è true se volete che lo script venga caricato nel footer, che anche la migliore pratica per migliorare i tempi di caricamento della pagina.

Andiamo poi a registrare il nostro script cookie-pop nella stessa maniera, tolto il fatto che non lo inseriremo (enqueueing) direttamente a causa delle traduzioni, argomento che tratteremo a breve.

L'unica grande differenza qui è che lo script ha due dipendenze - jquery e lo script precedentemente inserito (enqueued), jquery-cookie, perchè necessitiamo di entrambi per far sì che lo script funzioni correttamente.

Fatto ciò, è senz'altro una buona idea quella di internazionalizzare il nostro Javascript. Precedentemente in questo articolo, abbiamo codificato alcuni valori non esattamente international-friendly. Fortunatamente, Wordpress possiede una fantastica funzione per questo genere di costruzione chiamato wp_localize_script. Questa funzione vi permette di passare data da PHP a Javascript. 

Nel nostro script, abbiamo aggiunto tre parti di testo - il messaggio, il testo del bottone ed il link a "leggi di più". Andiamo avanti!

Questa funzione accetta tre parametri. Primo, abbiamo l'handle dello script che vogliamo localizzare - cookie-pop-script. Abbiamo poi il nome dell'oggetto Javascript - questo è a libera scelta ma idealmente dovrebbe essere un nome che è basato sullo script, in questo caso ho utilizzato cookie_pop_text. L'ultimo parametro è un array dei valori che vogliamo utilizzare nel nostro Javascript - ognuno di questo ha il proprio nome ed il testo che vogliamo mostrare.

Adesso, dobbiamo tornare al nostro Javascript e impostarlo affinché utilizzi i valori di cui sopra. I valori possono essere estrapolati così: cookie_pop_text.message mostrerebbe il nostro messaggio. Andiamo avanti e applichiamo alcune modifiche al nostro Javascript; dobbiamo solamente cambiare la riga:

L'ultima cosa che dobbiamo fare è di dire a Wordpress di utilizzare questi file - per fare questo faremo uso del metodo wp_enqueue_script():

Noterete che ho caricato solamente lo script cookie-pop-script - qui è dove le dichiarazioni per le dipendenze che abbiamo registrato entrano in gioco. Wordpress caricherà automaticamente tutte le dipendenze.

Prossimo, il CSS. Questo funziona nello stesso modo del Javascript:

L'ultima cosa che dobbiamo fare per riunire il tutto nella nostra funzione cookie_pop_scripts_and_styles() e agganciarla all'azione  wp_enqueue_scripts, così che per intero sia come sotto:

Tirando le somme

Adesso abbiamo un plugin con un semplice messaggio ed un bottone da cliccare così che il messaggio scompaia e non venga mostrato di nuovo per un dato periodo di tempo. 

L'esempio che ho fatto è utilizzato per la legge EU sui Cookies, ma in realtà questo tipo di funzionalità potrebbe essere utile per molte cose su Wordpress, come per mostrare i tempi di consegna per un negozio online nel periodo natalizio. 

L'implementazione qui è molto semplice e non richiede alcuna modifica manuale per il link "Leggi di più..." - ciò potrebbe facilmente essere esteso utilizzando le opzioni della API di Wordpress.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.