Merhaba

Hali hazırda yapmış olduğum temaya eklediğim özelliği blogumda ücretsiz olarak paylaştım. İşine yarayanlar olabilir diye burada paylaşmak istedim.

https://wpdoz.com/wordpress-cerez-bi...okie-destekli/

CSS kodları:

.hidden {
  display: none;
}

#wpd-cookie-banner {
  position: fixed;
  padding: 2rem;
  width: 100%;
  text-align: center;
  bottom: 0;
  left: 0;
}

#wpd-cookie-banner div {
  background-color: #551378;
  color: #ebf8ff;
  align-items: center;
  display: inline-flex;
  border-radius: 2px;
  padding: 1rem 1.5rem;
  line-height: 1;
}

#wpd-cookie-banner div span:first-child {
  text-align: left;
  font-weight: 500;
  flex: 1 1 auto;
  margin-right: 0.5rem;
}

#wpd-cookie-banner div span:second-child {
  font-size: 0.75rem;
  display: flex;
  cursor: pointer;
  border-radius: 9999px;
  padding: 0.25rem 0.5rem;
  font-weight: 700;
}
#wpd-cookie-banner div span i {
  margin-left: 5px;
  cursor: pointer;
}

JS Kodları:

function getCookie(cname) {
    const name = cname + "=";
    const decodedCookie = decodeURIComponent(document.cookie);
    const ca = decodedCookie.split(';');

    for (let i = 0; i < ca.length; i++) {
        let c = ca[i];
        while (c.charAt(0) === ' ') {
            c = c.substring(1);
        }
        if (c.indexOf(name) === 0) {
            return c.substring(name.length, c.length);
        }
    }

    return "";
}

function setCookie(cname, cvalue, exdays) {
    const d = new Date();

    d.setTime(d.getTime() + (exdays * 24 * 60 * 60 * 1000));

    const expires = "expires=" + d.toUTCString();

    document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
}

const cookieBanner = document.querySelector('#wpd-cookie-banner');
const hasCookieConsent = getCookie('wpdoz-cookie');

if (!hasCookieConsent) {
    cookieBanner.classList.remove('hidden');
}

const consentCta = cookieBanner.querySelector('#wpd-consent-cookies');

consentCta.addEventListener('click', () => {
    cookieBanner.classList.add('hidden');
    setCookie('wpdoz-cookie', 1, 365);
});

HTML (<footer> etiketinin üstüne)

<div class="hidden" id="wpd-cookie-banner">
    <div>
         <span>
                Size daha iyi hizmet vermek için çerezleri kullanıyoruz.
         </span>
         <span id="wpd-consent-cookies">
                <i class="fa fa-times"></i>
         </span>
    </div>
</div>