Tạo thông báo Cookies popup cho website WordPress

Chia sẻ:

Nếu trang web của bạn lưu trữ thông tin người dùng trên Cookies, và bạn muốn cho người dùng hiểu và đồng ý với những thông tin đó, thì đơn giản việc của bạn là tạo một Cookies popup cho phép người dùng đọc qua và họ có thể xem được điều khoản từ liên kết hiển thị, cùng nội dung ngắn mà bạn cung cấp, từ đó người dùng có thể sẵn sàng đồng ý để sử dụng nó. Việc làm này ngoài giúp cho người dùng có thể hiểu rõ những gì họ cần biết trước khi truy cập vào trang web của bạn, thì thực ra cũng khiến trang web của bạn trong có vẽ chuyên nghiệp và an toàn hơn.

Để thêm vào trang web WordPress của bạn, bạn chỉ cần sao chép toàn bộ 3 phần code ở dưới, sau đó mở file footer.php trong thư mục theme mà bạn đang sử dụng lên, dán nó trên thẻ đóng </footer> hoặc cuối trang đều được.

HTML

<div id="cookie-popup" style="display: none;">
  <div class="popup-content">
    <div class="popup-text">
      <p>Website này sử dụng cookie để đảm bảo trải nghiệm tốt nhất cho bạn. Bằng cách tiếp tục sử dụng website, bạn đồng ý với việc sử dụng cookie của chúng tôi.</p>
    </div>
    <div class="popup-buttons">
      <button id="accept-cookie">Đồng ý</button>
      <button id="reject-cookie">Từ chối</button>
    </div>
  </div>
</div>

Style CSS

<style>
#cookie-popup {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #333;
  color: #fff;
  padding: 20px;
  z-index: 1;
}

.popup-content {
  display: flex;
  justify-content: space-between; /* Chia đều không gian giữa text và buttons */
  align-items: center; /* Căn giữa theo chiều dọc */
}

.popup-text p{
  font-size:16px;
}

.popup-buttons {
  /* Buttons nằm bên phải */
  display: flex; /* Kích hoạt flexbox cho buttons */
}

#cookie-popup button {
  margin: 0 10px;
  padding: 10px 20px;
  background-color: #ed2a2a;
  color: #fff;
  border: none;
  cursor: pointer;
}
	
#cookie-popup button#reject-cookie {
  background-color: transparent; /* Trong suốt */
  color: #ccc; /* Màu xám nhạt */
  border: 1px solid #ccc; /* Viền xám nhạt */
}
/* Media query cho màn hình nhỏ hơn 640px */
@media (max-width: 640px) {
  .popup-content {
    flex-direction: column; /* Chắc chắn là bố cục dọc */
  }
 .popup-buttons {
    flex-direction: row; /* Bố cục ngang cho nút */
    justify-content: space-between; /* Chia đều không gian giữa các nút */
	  width: 100%;
  }
  #cookie-popup button {
    flex: min-content;
	  margin:0 10px 0 0;/* Loại bỏ flex để nút không bị co lại */
  }
  #cookie-popup button#reject-cookie {
    margin:0
  }
}
</style>

JavaScript

<script>
window.onload = function() {
  var popup = document.getElementById("cookie-popup");
  var acceptButton = document.getElementById("accept-cookie");
  var rejectButton = document.getElementById("reject-cookie");

  if (document.cookie.indexOf("cookie_consent=true") === -1) {
    popup.style.display = "block";
  }

  acceptButton.onclick = function() {
    document.cookie = "cookie_consent=true; expires=Fri, 31 Dec 9999 23:59:59 GMT; path=/";
    popup.style.display = "none";
  };

  rejectButton.onclick = function() {
    window.location.href = "/privacy-policy"; // Thay đổi đường dẫn trang Chính sách Bảo mật
  };
};
</script>

Giải thích

HTML:*
- Chúng ta bọc nội dung của popup trong một div có class là popup-content.
- Bên trong popup-content, chúng ta có một div cho text với class là popup-text và một div cho hai nút với class là popup-buttons.
CSS:*
- Chúng ta sử dụng display: flex cho popup-content để kích hoạt Flexbox.
- justify-content: space-between sẽ chia đều không gian giữa popup-text và popup-buttons, đẩy chúng về hai phía của popup.
- align-items: center sẽ căn giữa popup-text và popup-buttons theo chiều dọc.
Media query:*
- @media (max-width: 640px): Khai báo media query, áp dụng các style bên trong khi màn hình có chiều rộng nhỏ hơn hoặc bằng 640px.
Thay đổi trong media query:*
- flex-direction: column;: Chuyển đổi bố cục của .popup-content và .popup-buttons sang dạng dọc.
- align-items: center;: Căn giữa các phần tử theo chiều ngang.
Với đoạn code CSS này, khi màn hình đạt kích thước nhỏ hơn 640px, hai nút “Đồng ý” và “Từ chối” sẽ tự động chuyển sang bố cục dọc, nằm dưới đoạn text văn bảng.

Lưu ý

Bạn có thể tùy chỉnh thêm CSS để thay đổi màu sắc, font chữ, kích thước và các thuộc tính khác của popup.
Đừng quên thêm JavaScript để xử lý sự kiện click cho hai nút “Đồng ý” và “Từ chối”.
Bạn có thể tùy chỉnh giá trị 640px trong media query để phù hợp với thiết kế của website.

Hy vọng đoạn code này sẽ giúp bạn bố trí text và nút theo ý muốn. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại hỏi tôi nhé.

Quét mã QR

Để xem nhanh bài viết trên điện thoại