Hướng dẫn này mình hướng đến tạo giá trị - hỗ trợ mọi người và không nhằm mục đích thương mại. Trong hướng dẫn này mình chỉ vào trọng tâm tất tần tật về tùy biến website bằng code (hạn chế plugin nhiều nhất có thể) nên nội dung nó sẽ cực kỳ ngắn và không vòng vo. Hi vọng bạn không quá khó chịu vì sự quá ngắn gọn của mình.
- CODE chỉnh sửa mình thường can thiệp trực tiếp vào file (mục đích là để dễ kiểm soát vị trí hiển thị hơn là sử dụng hook)
- Nếu bạn có khó khăn hay cần mình hỗ trợ bất kì nội dung nào thì hãy để lại bình luận phía bên dưới, mình sẽ sớm ra nội dung hướng dẫn bạn.
- Nếu bạn thấy website mình có gì hay ho muốn ứng dụng lên website bạn thì liên hệ với mình để được hỗ trợ!
Thêm thanh thông báo Cookie Bar cho website
Mới đây tôi có làm 1 website cho 1 bên liên quan tới pháp luật và có làm thanh cookie bar nên tiện thể share code cho những ai cần. Code này hiển thị 1 thông báo về việc website thu thập dữ liệu hoặc có quảng cáo …
Theo Nghị định 13/2023/NĐ-CP bảo vệ dữ liệu cá nhân mới nhất các website cần thông báo cho người dùng biết các dữ liệu sẽ được theo dõi hoặc thu thập và thanh cookie bar kia chắc chắn mọi website cần có, thời điểm hiện tại các website lớn sẽ đi đầu việc hiện thông báo GDPR Cookie Consent Bar giống như bên liên minh Châu Âu EU yêu cầu, sau đó gần như toàn bộ website tại Việt Nam cần hiển thị thông báo trên nếu sử dụng bất cứ trình theo dõi người dùng.
Ưu điểm của code này là chỉ hiển thị thông báo 1 lần, khi click đồng ý thì sẽ ẩn thông báo đi, tránh làm phiền cho khách hàng xem các page khác.
Bạn thêm code HTML này nhé!
<section class="cookie-bar">
<div class="cookie-notice container">
<p class="cookie-para">Trang web của chúng tôi sử dụng cookie để cải thiện và cá nhân hóa trải nghiệm của bạn, đồng thời hiển thị quảng cáo (nếu có). Trang web của chúng tôi cũng có thể bao gồm cookie của các bên thứ ba như Google Adsense, Google Analytics, YouTube. Bằng cách sử dụng trang web này, bạn đồng ý với việc sử dụng cookie. Chúng tôi đã cập nhật Chính sách quyền riêng tư, vui lòng nhấp vào nút bên cạnh để kiểm tra Chính sách quyền riêng tư của chúng tôi.</p>
<a href="javascript:;" class="cookie-btn">Ok</a>
<a href="#" class="cookie-btn secondary">Chính sách bảo mật</a>
</div>
</section>
Thêm Code JS cho vào footer website
<script>
jQuery(document).ready(function($) {
// Function to read a cookie
function readCookie(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;
}
// Function to create a cookie
function createCookie(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=/";
}
// Show or hide the cookie bar based on the cookie
if (readCookie("cookie_accepted") == "1") {
$(".cookie-bar").hide();
} else {
$(".cookie-bar").show();
$('body').addClass('cookie-space');
}
// Handle the cookie bar button click
$('.cookie-btn').click(function() {
$('body').removeClass('cookie-space');
$('.cookie-bar').fadeOut();
createCookie("cookie_accepted", 1, 365);
});
// Additional functions (optional)
function getParameterByName(name, url) {
if (!url) url = window.location.href;
name = name.replace(/[\[\]]/g, "\\$&");
var regex = new RegExp("[?&]" + name + "(=([^&#]*)|&|#|$)"),
results = regex.exec(url);
if (!results) return null;
if (!results[2]) return '';
return decodeURIComponent(results[2].replace(/\+/g, " "));
}
jQuery(document).ready(function($) {
var advMedium = getParameterByName('advm');
if (advMedium != null) {
$('input[name=advm]').val(advMedium);
createCookie('advm', advMedium, 1);
} else {
advMedium = readCookie('advm');
$('input[name=advm]').val(advMedium);
}
var nodeCount = document.getElementsByName('ft').length;
for (var count = 0; count < nodeCount; count++) {
document.getElementsByName('ft')[count].value = window.location.href;
}
});
});
</script>
Code CSS để trang trí
.cookie-bar{ position: fixed; bottom: 0px; padding:10px 15px; width: 100%; display: none; z-index: 15; background-color:black; font-family: "Poppins", sans-serif; }
.cookie-para { color: white; font-size: 12px; font-weight: normal; display: inline-block;margin-bottom: 8px;display: block;
}
.cookie-space { padding-bottom: 45px; }
.cookie-btn{ font-size:14px; color: #ffffff; background: red; padding: 2px 15px; border-radius: 4px;
display: inline-block; }
.cookie-btn.secondary {color:#ffffff; background: #008000;}
@media (max-width: 767px) {
.cookie-bar{ padding:10px 15px 40px 15px; }
}Ngoài code trên, nếu bạn sử dụng mã nguồn WordPress thì có thể sử dụng 1 số plugin nếu cần, từ khoá để tìm đó là Cookie Bar plugin.
Nội dung được tham khảo từ Vũ trụ số
Nếu bạn gặp khó khăn trong chỉnh sửa hoặc muốn phát triển tính năng riêng cho website thì có thể tham khảo dịch vụ bảo trì - phát triển tính năng website wordpress tại TNDigi nhé!
Mình tự học - tìm hiểu - nghiên cứu và làm việc với WordPress được khoảng thời gian nhất định nên lên serial chia sẻ những gì mà mình từng gặp qua. Sẽ có nhiều thiếu sót nên nếu như có chổ nào chưa đúng hay chưa hoạt động được bạn contact với mình để hoàn thiện hơn.
Ghi chú quan trọng:
Cách tuỳ biến không cần can thiệp vào CODE mà sử dụng hook (nếu chưa có trong hướng dẫn) sẽ được mình sớm cập nhật!
Kênh Zalo hỗ trợ miễn phí. Chúc bạn áp dụng thành công!
Tặng mình 1 vote tăng động lực ra thêm nội dung:TNDigi cho ra mắt Hướng dẫn thiết kế website bằng wordpress từ cơ bản đến nâng cao miễn phí
Hướng dẫn gồm có 2 phần: phần 1 hướng dẫn bạn cách làm website | phần 2 hướng dẫn bạn tuỳ biến, phát triển tính năng website bằng CODE
