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.

Cookie (197 downloads)

 

Lasă un răspuns

Adresa ta de email nu va fi publicată. Câmpurile obligatorii sunt marcate cu *

Salut și bine ai venit pe acest blog!

Eu sunt Bucur si acesta este blogul meu in care vei gasi articole in majoritatea lor despre Programare web Front-end si un pic de back-end.

Iată cum mă poți contacta:

Ai o intrebare? nu ezita sa ma contactezi.

Vei primi un raspuns in cel mai scurt timp posibil.

    Numele tau (necesar)

    Email (necesar)

    Subiect

    Mesaj

    Prin utilizarea acestui formular sunteți de acord cu stocarea și manipularea datelor dvs. pe acest site web.