Coduri Cookie pentru o tema WordPress

In acest scurt articol vreau sa prezint codurile cookie care le folosesc la o tema WordPress. Evident codurile se pot folosi in orice alta platforma.

In partea de jos a temei in footer.php avem urmatorul cod html care se pune inainte de functia wp_footer()

<div class="disclaimer-container">
    <div class="container">
      <div class="disclaimer-text">
         <p>Utilizăm cookie-uri pentru a vă oferi cea mai bună experiență posibilă pe site-ul nostru. 
          Apăsând pe OK, sunteți de acord cu politica noastră privind cookie-urile.
<a href="#">Afla mai multe.</a> <span class="disclaimer-button px-4 rounded">OK</span></p>
      </div>
    </div>
</div>

Unde se afla codul pentru ancora (link) se pune locatia catre o pagina cu informatii despre preluarea datelor exemplu www.site.ro/cookie

Dupa functia wp_footer(); din acelasi fisier footer.php avem un cod javascript care ne ajuta sa functioneze totul bine.

( function($) {

function testLocalStorage() {
	var testLS = 'testLS';
	try {
		localStorage.setItem(testLS, true);
		localStorage.removeItem(testLS);
		return true;
	} catch(e) {
		return false;
	}
}

// If localStorage is available
if(testLocalStorage() === true){
	var cookieDisclaimer = document.querySelector('.disclaimer-container');
	var cookieDisclaimerHeight = $('.disclaimer-container').height();
	var mainHeaderTop = $('#main-header').css("top");
	$('.disclaimer-container').css("top", mainHeaderTop);
	if (!localStorage.getItem('cookieDisclaimer')) {
		cookieDisclaimer.classList.add('show');
		$('#main-header').css("top", parseInt(mainHeaderTop) + cookieDisclaimerHeight);
	}
	cookieDisclaimer.querySelector('.disclaimer-button').addEventListener('click', function() {
		localStorage.setItem('cookieDisclaimer', true);
		cookieDisclaimer.classList.remove('show');
	});
}
}) ( jQuery );

Avem si codul de css care se pune intr-un fisier de style.css din tema noastra.

.disclaimer-container { background-color: #040f45; color: #fff; display: none; position: fixed; top: 0; z-index: 999; width: 100%; }
.disclaimer-container.show { display: block; }
.disclaimer-container .disclaimer-text { padding: 8px; }
.disclaimer-container .disclaimer-text p { font-size: 12px; line-height: 22px; margin: 0; text-align: center; }
.disclaimer-container .disclaimer-text p span:before { color: #fff; }
.disclaimer-container .disclaimer-text p a { color: #fff; }
.disclaimer-container .disclaimer-button { background-color: #e04b59; color: #fff; cursor: pointer; display: inline-block; margin-left: 16px; padding: 2px 8px; }
.disclaimer-container .disclaimer-button:hover { background-color: #dc3545; color: #fff; }

Pentru alte modificari de code aveti libertatea total de modificare.

→ Descarca fisierul cookie.txt in care se afla toate codurile.