Tạo floating panel ở cuối trang web WordPress

Để tạo một floating panel (thanh nổi) ở cuối trang web WordPress của bạn, bạn có thể sử dụng plugin hoặc thêm mã tùy chỉnh. Đây là hai phương pháp đơn giản và hiệu quả nhất:

Phương pháp 1: Sử dụng Plugin

Đây là cách dễ nhất cho người mới bắt đầu, không yêu cầu kiến thức về lập trình.

  1. Cài đặt Plugin:

    • Trong bảng điều khiển WordPress, đi đến Plugins > Add New.

    • Tìm kiếm các plugin như Sticky Menu (or Anything!) on Scroll, Float and Sticky, hoặc My Sticky Elements.

    • Cài đặt và kích hoạt một trong các plugin này.

  2. Cấu hình Plugin:

    • Sau khi kích hoạt, bạn sẽ thấy menu cài đặt của plugin trong bảng điều khiển. Thường là trong Settings hoặc một menu riêng với tên plugin.

    • Bạn có thể tùy chỉnh nội dung, vị trí (chọn bottom hoặc dưới cùng), màu sắc và các hiệu ứng khác cho floating panel.

    • Nhiều plugin cho phép bạn thêm văn bản, hình ảnh, nút bấm hoặc thậm chí là mã HTML tùy chỉnh vào panel.

Phương pháp 2: Sử dụng Mã CSS và JavaScript Tùy chỉnh

Nếu bạn muốn kiểm soát hoàn toàn giao diện và chức năng, bạn có thể thêm mã thủ công.

  1. Thêm mã HTML cho panel:

    • Trong bảng điều khiển WordPress, đi tới Appearance > Theme File Editor (hoặc Editor).

    • Tìm và mở file footer.php.

    • Thêm đoạn mã HTML này ngay trước thẻ </body>:

    HTML
    <div id="sticky-footer-panel">
    <p>Đây là nội dung của floating panel.</p>
    <a href="#">Liên kết ví dụ</a>
</div>

  2. Thêm mã CSS để định vị panel:

    • Trong bảng điều khiển WordPress, đi tới Appearance > Customize.

    • Chọn Additional CSS (CSS bổ sung).

    • Dán đoạn mã CSS sau vào:

    CSS
    #sticky-footer-panel {
    position: fixed; /* Giữ panel ở vị trí cố định */
    bottom: 0; /* Đặt panel ở cuối trang */
    left: 0; /* Căn lề trái */
    width: 100%; /* Chiều rộng 100% của màn hình */
    background-color: #333; /* Màu nền */
    color: white; /* Màu chữ */
    text-align: center; /* Căn giữa nội dung */
    padding: 10px; /* Khoảng đệm bên trong */
    box-shadow: 0 -2px 5px rgba(0,0,0,0.2); /* Tạo bóng đổ */
    z-index: 1000; /* Đảm bảo panel luôn nằm trên cùng */
}

    • Bạn có thể thay đổi các giá trị như background-color, padding và color để phù hợp với giao diện trang web của bạn.

  3. Lưu ý quan trọng:

    • Nếu bạn sử dụng phương pháp mã tùy chỉnh, hãy luôn tạo một bản sao lưu (backup) trang web trước khi chỉnh sửa file theme.

    • Khi cập nhật theme, các thay đổi của bạn trong file footer.php có thể bị mất. Tốt nhất là bạn nên sử dụng Child Theme để giữ lại các tùy chỉnh này.

Cả hai phương pháp trên đều hiệu quả. Nếu bạn không rành về mã, sử dụng plugin là lựa chọn an toàn và nhanh chóng. Nếu bạn muốn tùy chỉnh sâu hơn, thêm mã thủ công sẽ cho bạn sự linh hoạt tuyệt đối.