Tạo floating footer bar sticky trong WordPress
Giới Thiệu Về Floating Footer Bar Sticky Trong WordPress
Floating footer bar sticky, hay còn gọi là thanh footer cố định, là một thành phần giao diện người dùng phổ biến trên các trang web hiện đại. Nó là một thanh ngang nằm ở cuối trang web và luôn hiển thị, ngay cả khi người dùng cuộn trang lên hoặc xuống. Thanh footer này thường chứa các thông tin quan trọng như nút kêu gọi hành động (call-to-action), thông tin liên hệ, biểu tượng mạng xã hội, hoặc menu điều hướng nhanh.
Việc sử dụng floating footer bar sticky mang lại nhiều lợi ích cho trang web WordPress của bạn. Nó giúp:
- Tăng khả năng tương tác của người dùng: Bằng cách luôn hiển thị các nút kêu gọi hành động, bạn khuyến khích người dùng thực hiện các hành động mong muốn như đăng ký, mua hàng, hoặc liên hệ.
- Cải thiện điều hướng: Thanh footer có thể chứa các liên kết điều hướng quan trọng, giúp người dùng dễ dàng tìm thấy thông tin cần thiết.
- Nâng cao trải nghiệm người dùng: Một thanh footer được thiết kế tốt có thể giúp trang web của bạn trông chuyên nghiệp và hấp dẫn hơn.
Các Phương Pháp Tạo Floating Footer Bar Sticky Trong WordPress
Có nhiều cách để tạo floating footer bar sticky trong WordPress, mỗi cách có ưu và nhược điểm riêng. Dưới đây là một số phương pháp phổ biến:
1. Sử Dụng Plugin WordPress
Đây là phương pháp đơn giản và nhanh chóng nhất, đặc biệt phù hợp với người dùng không có nhiều kiến thức về code. Có rất nhiều plugin WordPress miễn phí và trả phí cung cấp chức năng tạo floating footer bar sticky. Một số plugin phổ biến bao gồm:
- Hello Bar
- WP Sticky Bar
- My Sticky Menu
Để sử dụng plugin, bạn chỉ cần cài đặt và kích hoạt plugin, sau đó cấu hình các tùy chọn theo ý muốn. Hầu hết các plugin đều cung cấp giao diện trực quan để bạn dễ dàng tùy chỉnh nội dung, màu sắc, kiểu chữ và các thuộc tính khác của thanh footer.
2. Sử Dụng CSS và JavaScript Tùy Chỉnh
Phương pháp này đòi hỏi bạn có kiến thức về CSS và JavaScript. Tuy nhiên, nó cho phép bạn kiểm soát hoàn toàn giao diện và chức năng của thanh footer.
Bước 1: Thêm HTML vào file footer.php của theme
Mở file footer.php của theme WordPress của bạn. Bạn có thể tìm thấy file này trong thư mục wp-content/themes/[tên-theme-của-bạn]/. Thêm đoạn code HTML sau vào trước thẻ :
<div class="floating-footer-bar">
<div class="container">
<p>Copyright © [Năm] [Tên Trang Web]. All Rights Reserved.</p>
<a href="#" class="button">Liên Hệ Ngay</a>
</div>
</div>
Thay đổi nội dung bên trong thẻ <p> và <a> theo ý muốn.
Bước 2: Thêm CSS vào file style.css của theme
Mở file style.css của theme WordPress của bạn. Thêm đoạn code CSS sau vào cuối file:
.floating-footer-bar {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #f8f8f8;
padding: 10px 0;
z-index: 999;
box-shadow: 0px -2px 5px rgba(0, 0, 0, 0.1);
}
.floating-footer-bar .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px; /* Adjust as needed */
margin: 0 auto;
padding: 0 20px;
}
.floating-footer-bar p {
margin: 0;
font-size: 14px;
}
.floating-footer-bar .button {
background-color: #007bff;
color: #fff;
padding: 10px 20px;
border-radius: 5px;
text-decoration: none;
}
Bạn có thể tùy chỉnh các thuộc tính CSS như background-color, color, padding, font-size, và border-radius để phù hợp với thiết kế của trang web của bạn.
Bước 3 (Tùy chọn): Thêm JavaScript để xử lý các hiệu ứng (nếu cần)
Nếu bạn muốn thêm các hiệu ứng như ẩn/hiện thanh footer khi cuộn trang, bạn có thể sử dụng JavaScript. Tạo một file JavaScript mới (ví dụ: custom.js) và thêm đoạn code sau:
window.addEventListener('scroll', function() {
const floatingFooterBar = document.querySelector('.floating-footer-bar');
if (window.scrollY > 200) {
floatingFooterBar.classList.add('show');
} else {
floatingFooterBar.classList.remove('show');
}
});
Sau đó, thêm đoạn code sau vào file footer.php để liên kết file JavaScript của bạn:
<script src="<?php echo get_template_directory_uri(); ?>/js/custom.js"></script>
Trong CSS, bạn có thể thêm các quy tắc để điều khiển hiệu ứng ẩn/hiện:
.floating-footer-bar {
transition: all 0.3s ease;
transform: translateY(100%);
}
.floating-footer-bar.show {
transform: translateY(0);
}
3. Sử Dụng Child Theme
Bất kể bạn chọn phương pháp nào (plugin hoặc code tùy chỉnh), việc sử dụng child theme là rất quan trọng. Child theme cho phép bạn thực hiện các thay đổi đối với theme WordPress của bạn mà không lo bị mất các thay đổi này khi bạn cập nhật theme chính.
- Tạo child theme: Bạn có thể tìm thấy hướng dẫn chi tiết về cách tạo child theme trên trang web WordPress.org.
- Sao chép các file cần thiết: Sao chép các file như
footer.phpvàstyle.csstừ theme chính sang child theme của bạn. - Thực hiện các thay đổi: Thực hiện các thay đổi đối với các file trong child theme của bạn.
Tối Ưu Hóa Floating Footer Bar Sticky
Sau khi tạo floating footer bar sticky, bạn cần tối ưu hóa nó để đảm bảo nó hoạt động hiệu quả và không ảnh hưởng đến trải nghiệm người dùng.
1. Thiết Kế Responsive
Đảm bảo rằng thanh footer của bạn hiển thị tốt trên tất cả các thiết bị, từ máy tính để bàn đến điện thoại di động. Sử dụng media queries trong CSS để điều chỉnh kích thước, bố cục và kiểu chữ của thanh footer cho các kích thước màn hình khác nhau.
2. Tối Ưu Hóa Tốc Độ
Tránh sử dụng hình ảnh hoặc các tài nguyên nặng trong thanh footer. Tối ưu hóa code CSS và JavaScript của bạn để giảm thiểu thời gian tải trang.
3. Kiểm Tra Trên Nhiều Trình Duyệt
Kiểm tra thanh footer của bạn trên nhiều trình duyệt khác nhau (Chrome, Firefox, Safari, Edge) để đảm bảo nó hiển thị và hoạt động chính xác trên tất cả các trình duyệt.
Kết Luận
Floating footer bar sticky là một công cụ hữu ích để tăng khả năng tương tác của người dùng và cải thiện trải nghiệm người dùng trên trang web WordPress của bạn. Bằng cách sử dụng các phương pháp được trình bày trong bài viết này, bạn có thể dễ dàng tạo ra một thanh footer sticky chuyên nghiệp và hiệu quả cho trang web của mình. Hãy nhớ tối ưu hóa thanh footer để đảm bảo nó hoạt động tốt trên tất cả các thiết bị và trình duyệt.
