Günümüzde birçok web sitesi, kullanıcı deneyimini geliştirmek ve siteyi daha işlevsel hale getirmek için çerezleri kullanmaktadır. Ancak, Avrupa Birliği Genel Veri Koruma Tüzüğü (GDPR) ve diğer yasal düzenlemeler gereği, kullanıcıların çerez kullanımı hakkında bilgilendirilmesi ve onay vermeleri gerekmektedir. Bu nedenle, WordPress sitenize bir çerez uyarısı eklemek önemlidir. Bu yazıda, WordPress sitenize nasıl bir çerez uyarısı ekleyebileceğinizi adım adım açıklayacağız.
WordPress’te çerez uyarısı eklemek için birçok eklenti bulunmaktadır. Ancak, en popüler ve kullanıcı dostu olanları tercih etmek önemlidir. Önerilen eklentiler arasında Cookie Notice, GDPR Cookie Consent ve Cookiebot gibi eklentiler bulunmaktadır. Bu eklentilerin kurulumu ve yapılandırılması oldukça basittir.
Eklentiler aracılığı ile wordpress sitenize çerez uyarısı eklemek istiyorsunuz yapmanız gereken Öncelikle, WordPress yönetici panelinize giriş yapın ve Eklentiler > Yeni Ekle bölümüne gidin. Ardından, arama çubuğuna seçtiğiniz çerez uyarısı eklentisinin adını yazarak arayın. Eklentiyi bulduktan sonra “Kur” ve “Etkinleştir” düğmelerini tıklayarak eklentiyi yükleyin ve etkinleştirin.
Sonrasında ise eklentiyi etkinleştirdikten sonra, genellikle Ayarlar veya Kurulum bölümünde çerez uyarısı için seçenekler bulunur. Bu bölümde, çerez uyarısının metni, renkleri, düğmelerin metinleri ve davranışları gibi çeşitli ayarları özelleştirebilirsiniz. Ayrıca, çerez politikası sayfasının bağlantısını eklemek ve kullanıcının çerezleri kabul etmesini veya reddetmesini sağlamak için gerekli seçenekleri ayarlayabilirsiniz.
Çerez uyarısı, sitenizin tasarımına uygun olmalı ve mobil cihazlarda da düzgün görünmelidir. Bu nedenle, seçtiğiniz eklentinin duyarlılık ve özelleştirme seçeneklerine dikkat edin. Ayrıca, çerez uyarısının site ziyaretçileri tarafından kolayca kapatılabilmesi önemlidir.
Çerez uyarısıyla birlikte, sitenizin çerez kullanımıyla ilgili detaylı bilgi vermek için bir çerez politikası sayfası oluşturmanız gerekmektedir. Bu sayfada, hangi çerezlerin kullanıldığı, nasıl kullanıldığı ve kullanıcıların çerezleri nasıl yönetebilecekleri gibi bilgiler bulunmalıdır. Çerez politikası sayfasının bağlantısını çerez uyarısına ekleyerek kullanıcıların detaylı bilgi almasını sağlayabilirsiniz.
Eklenti kullanmadan çerez uyarısı ekleme
Her ne kadar çerez uyarısı ekleme işini eklentiler ile çözebilirsiniz. Ama genel wordpress eklentileri az veya çok site hızınızda ister istemez bir yavaşlamaya neden olacaktır. Zaten halihazırda bir çok web site istenmeyen CSS ve JavaScript ile şişmiş durumdalar. Bu yüzden çerez uyarısı ekleme işini eklentisiz halletmek daha mantıklı bir durum oluyor.
Çerez uyarısı ekleme
Sizlere kendi web sitem için kullandığım ve sadece basit kodlar ile kolayca özelleştirilebilen kodları paylaşacağım.
Boyutu 1 KB’tan küçük
CSS veya JavaScript dosyası yok (her şey satır içi)
JQuery bağımlılığı yok
Veritabanı sorgusuna gerek yok
Duyarlı
Tamamen özelleştirilebilir
Görüntüsü resimdeki gibi ve sizler bu görüntüyü kendiniz istediğiniz gibi özelleştirebilirsiniz.
Genel olarak sitenize ilk defa girenlerin için alt ekrandaki gibi görünmektedir.
Mobil cihazlarda da alttaki gibi görünmektedir.
Sizler bu görüntüleri ve içeriğini kendi web sitenize uyacak şekilde özelleştirebileceksiniz.
Kodlar
function add_cookie_popup() { ?> <div id="cookie-popup" style="display: none;"> <div id="cookie-content"> <p>Web sitemizde size daha iyi hizmet verebilmek için çerezler kullanılmaktadır. Detaylı bilgi için <a href="<?php echo esc_url(get_permalink(2094)); ?>" target="_blank">Çerez Politikası</a>'na göz atabilirsiniz.</p> <div id="cookie-options" style="display: none;"> <div class="cookie-option"> <input type="checkbox" name="essential_cookies" id="essential_cookies" value="1" checked> <label for="essential_cookies">Zorunlu Çerezler</label> <p>Bu çerezler, web sitesinin temel işlevselliği için gereklidir.</p> </div> <div class="cookie-option"> <input type="checkbox" name="performance_cookies" id="performance_cookies" value="1"> <label for="performance_cookies">Performans Çerezleri</label> <p>Bu çerezler, web sitesinin performansını ölçmemize ve iyileştirmemize yardımcı olur.</p> </div> <div class="cookie-option"> <input type="checkbox" name="functional_cookies" id="functional_cookies" value="1"> <label for="functional_cookies">Fonksiyonel Çerezler</label> <p>Bu çerezler, belirli tercihlerinizi hatırlayarak web sitesinin işlevselliğini artırır.</p> </div> <div class="cookie-option"> <input type="checkbox" name="marketing_cookies" id="marketing_cookies" value="1"> <label for="marketing_cookies">Pazarlama Çerezleri</label> <p>Bu çerezler, reklamları ve reklam kampanyalarını kişiselleştirmemize yardımcı olur.</p> </div> <button id="save-settings">Kaydet</button> </div> </div> <div id="cookie-buttons"> <button id="cookie-settings">Ayarlar</button> <button id="accept-cookies">Kabul Et</button> <button id="reject-cookies">Reddet</button> </div> </div> <style> #cookie-popup { position: fixed; bottom: 50px; /* Popup'ın alt kenarını sayfanın altından 50px yukarıda konumlandırır */ left: 50%; transform: translateX(-50%); max-width: 90%; /* Popup'ın maksimum genişliğini %90 olarak belirler */ background: #f8f8f8; padding: 20px; box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1); z-index: 9999; text-align: center;
} #cookie-content { max-width: 1000px; margin: 0 auto; } #cookie-content p { margin-bottom: 15px; color: #555; } #cookie-buttons { margin-top: 15px; } #cookie-buttons button { margin: 0 5px; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; outline: none; } #cookie-buttons button#accept-cookies { background-color: #5cb85c; color: #fff; } #cookie-buttons button#reject-cookies { background-color: #d9534f; color: #fff; } #cookie-buttons button#cookie-settings { background-color: #f0ad4e; color: #fff; } #cookie-options { margin-top: 15px; } .cookie-option { margin-bottom: 10px; } .cookie-option label { margin-left: 5px; } #save-settings { margin-top: 10px; padding: 10px 20px; border: none; border-radius: 5px; cursor: pointer; background-color: #428bca; color: #fff; outline: none; } </style> <script> document.addEventListener("DOMContentLoaded", function() { var cookiePopup = document.getElementById('cookie-popup'); var acceptCookiesBtn = document.getElementById('accept-cookies'); var rejectCookiesBtn = document.getElementById('reject-cookies'); var cookieSettingsBtn = document.getElementById('cookie-settings'); var cookieOptions = document.getElementById('cookie-options'); var saveSettingsBtn = document.getElementById('save-settings'); if (!getCookie('cookieAccepted')) { cookiePopup.style.display = 'block'; } acceptCookiesBtn.addEventListener('click', function() { cookiePopup.style.display = 'none'; setCookie('cookieAccepted', true, 365); }); rejectCookiesBtn.addEventListener('click', function() { // Burada çerezleri reddetme işlemleri yapılabilir, isteğe bağlı olarak cookiePopup.style.display = 'none'; }); cookieSettingsBtn.addEventListener('click', function() { cookieOptions.style.display = 'block'; }); saveSettingsBtn.addEventListener('click', function() { // Burada çerez ayarlarını kaydetme işlemleri yapılabilir, isteğe bağlı olarak alert('Ayarlar kaydedildi.'); cookieOptions.style.display = 'none'; }); function setCookie(name, value, days) { var expires = ""; if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); expires = "; expires=" + date.toUTCString(); } document.cookie = name + "=" + (value || "") + expires + "; path=/"; } function getCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } }); </script> <?php
}
add_action('wp_footer', 'add_cookie_popup');
WordPress’e ekleme
Adım 1: Temanızın functions.php dosyasına aşağıdaki kodu ekleyin. Bu kod, sitenizin tüm sayfalarında çerez uyarı popup’ını gösterecektir.
Bu kod, bir div elementi içinde bir çerez uyarı popup’ı oluşturur. Kullanıcı “Kabul Et” düğmesine tıkladığında, çerez kabul edilmiş sayılır ve popup kapatılır. Çerez kabul edildiğinde kullanıcıya bir yıl boyunca hatırlatılmaz.
Adım 2: Temanızın style.css dosyasına aşağıdaki CSS kodunu ekleyin. Bu, popup’ın görünümünü özelleştirmek için kullanılır.
Bu CSS kodları, popup’ı sitenin en altında ortada konumlandırır ve yazıları kapsayacak kadar genişlikte ayarlandı. Dilerseniz bottom ve max-width değerlerini ihtiyacınıza göre ayarlayabilirsiniz.
Renk kodlarında da oynama yaparak istediğiniz arka plan ve yazı rengini ayarlayabilirsiniz.
Sonuç olarak WordPress sitenize bir çerez uyarısı eklemek, hem yasal gereksinimleri yerine getirmek hem de kullanıcı gizliliğini ve güvenliğini sağlamak için önemlidir. Bu yazıda, WordPress sitenize çerez uyarısı eklemenin basit adımlarını anlattım. Eğer henüz bir çerez uyarısı eklememişseniz, hemen harekete geçin ve sitenizi güncelleyin!
Herhangi bir sorunuz veya geri bildiriminiz varsa aşağıya yorum yapmaktan kaçınmayın. Sizlere yardımcı olmak için elimden gelen yardımı yapmaktan mutluluk duyarım.
