A seguito delle modifiche inerenti la legge sulla privacy sui siti web è necessario specificare sul proprio sito che vengono utilizzati i cookies (per i siti che li utilizzano).
Vediamo come impostare un messaggio che appaia in base alla sessione del proprio browser!
Innanzitutto verifichiamo che nel nostro file functions.php ci sia il comando session_start() di PHP. Qualora non ci fosse aggiungiamolo all’inizio del file (functions.php):
if (!session_id()) {
session_start();
}Il messaggio in HTML
A questo punto dovete decidere dove fare apparire il vostro messaggio, io ho deciso di inserirlo in testa al sito in modo che preceda ogni cosa. Ecco perché ho aperto il file header.php del mio tema e ho inserito il messaggio:
<div class="cookie-msg">
<div class="container">
<div class="row">
<div class="col-md-10"><p>Utilizzando il nostro sito web, si acconsente all'uso dei
cookie anche di terze parti. Puoi modificare l'impostazione dei
cookie dal tuo browser.</p></div>
<div class="col-md-2 text-right"><a id="hide-cookie-msg" href="<?php echo get_template_directory_uri(); ?>/disable-message.php" class="cookie-msg-close"><i class="fa fa-times"></i></a></div>
</div>
</div>
</div>Io ho utilizzato le classi container, row e col di bootstrap ma non sono necessarie, così come non è necessario l’utilizzo di icone di font-awesome.
Avrete da subito notato che oltre al messaggio in puro codice HTML è presente un link ad una nuova pagina del nostro tema chiamata disable-message.php . Questo link permetterà di scrivere una nuova variabile di sessione che controllerà se avete già disabilitato il messaggio dei cookies. Non vorremo infatti che i nostri utenti vengano tediati dal messaggio se hanno deciso di non visualizzarlo più, ecco il perchè di questa azione. Per fare ciò dobbiamo però inserire un controllo in PHP agli estremi del nostro codice HTML:
<?php if (!isset($_SESSION["hide_cookie_message"])) { ?>
Nostro codice HTML...
<?php } ?>All’interno del controllo ovviamente inseriremo il codice HTML precedentemente citato.
Personalizziamo il nostro messaggio
Potete scegliere di personalizzare o meno il vostro messaggio, io ho deciso di farlo apparire in bianco su sfondo azzurro:
.cookie-msg{
background: #2e63c6;
color: #fff;
}
.cookie-msg p{
height: 20px;
line-height: 20px;
}
.cookie-msg a{
color: #fff;
display: inline-block;
height: 20px;
line-height: 20px;
}Usufruendo delle classi di Bootstrap ho personalizzato minimamente il CSS, se non lo utilizzate potrete fare a meno delle classi container, row e col e gestirete posizioni e spazi manualmente.
Il file disable-message.php
Andiamo a creare un nuovo file PHP nella cartella del nostro tema e lo chiamiamo disable-message.php. All’interno inseriremo:
<?php
// Carichiamo le librerie di WordPress
list($before_content, $after_content) = explode( 'wp-content',
$_SERVER['SCRIPT_FILENAME'] );
require_once( $before_content . 'wp-load.php' );
// Creiamo la sessione se non esiste
if (!session_id()) {
session_start();
}
// Scriviamo la sessione
$_SESSION["hide_cookie_message"] = "true";
?>La chiamata Ajax
In ultimo inseriamo la chiamata ajax (con jQuery) al nostro file disable-message.php.
Io consiglio sempre di inserire un file dove comandiamo tutti i plugin e le chiamate jQuery, in questo caso io ho incluso al fondo della mia pagina (prima del </body>) il mio file script.js e all’interno ho inserito:
jQuery(document).ready(function($) {
...
$("#hide-cookie-msg").bind('click', function(event){
event.preventDefault();
var url_ajax = $(this).attr('href');
$.ajax({
url: url_ajax
}).done(function() {
$(".cookie-msg").slideUp();
});
});
});
Cosa fa il nostro codice jQuery?
Prima di tutto attiviamo un evento (tramite il comando bind) sull’id della nostra icona (#hide-cookie-msg) che eseguirà la chiamata ajax.
Fatto ciò disabilitiamo l’evento standard del tag <a> (con il comanto event.preventDefault()) e scarichiamo l’attributo href in una variabile (url_ajax).
A questo punto non ci resta che eseguire la chiamata ($.ajax) all’url appena scaricato sulla variabile e al termine della chiamata nascondere il messaggio tramite un’animazione di jQuery (slideUp).
Abbiamo finito, non ci resta che testare il tutto e verificare di aver fatto tutto correttamente!