Giới thiệu
Nếu bạn để ý các app di động phổ biến như Instagram, Shopee hay các app đặt vé, đặt phòng, hầu hết đều có một thanh menu cố định phía dưới màn hình để người dùng di chuyển qua lại giữa các trang. Website WordPress hoàn toàn có thể mang lại trải nghiệm tương tự nhờ Aithietke Mobile Bottom Nav – plugin giúp bạn biến menu WordPress thành một thanh điều hướng dạng bottom nav hiện đại, chuyên dùng cho phiên bản mobile.
Vì sao nên dùng bottom navigation cho mobile?
Trên màn hình di động, menu dạng hamburger (icon 3 gạch ẩn trong góc) thường khiến người dùng phải bấm thêm một bước mới thấy được các mục điều hướng chính. Một thanh bottom nav cố định giúp:
- Hiển thị ngay các mục quan trọng nhất (Trang chủ, Tìm kiếm, Giỏ hàng, Tài khoản…) mà không cần mở menu ẩn
- Giảm số lần chạm cần thiết để di chuyển giữa các trang, đặc biệt hữu ích cho web dạng app (PWA), web thương mại điện tử, đặt dịch vụ
- Tạo cảm giác quen thuộc, giống ứng dụng di động thật, giúp tăng thời gian ở lại trang
Tính năng nổi bật của Aithietke Mobile Bottom Nav
1. Dùng ngay menu WordPress có sẵn
Plugin đăng ký thêm một vị trí menu riêng (“Mobile Bottom Nav”) ngay trong Appearance → Menus, bạn chỉ cần gắn menu đã có hoặc tạo menu mới như bình thường.
2. Giới hạn thông minh 5 nút, tự động gom nút dư
Thanh nav luôn gọn trong 5 nút. Nếu menu có nhiều hơn 5 mục, 4 mục đầu hiển thị bình thường, các mục còn lại tự động gom vào nút More, bấm vào sẽ mở popover phía trên bên phải – không lo vỡ layout.
3. Icon linh hoạt theo 3 lớp ưu tiên
Mỗi mục menu có thể gắn icon theo thứ tự ưu tiên: nhập icon class (Font Awesome, Feather… nếu theme đã có sẵn thư viện), hoặc upload ảnh riêng qua Media Library quen thuộc của WordPress, hoặc để trống dùng icon mặc định.
4. Dark / Light mode
Chọn nhanh giao diện sáng hoặc tối, đồng bộ với tổng thể thiết kế website.
5. Tùy chỉnh vị trí tên menu và màu sắc
Chọn hiển thị tên menu bên dưới icon, bên phải icon hoặc ẩn hoàn toàn. Màu nền, màu icon/chữ, màu khi active đều có công cụ color picker chuẩn của WordPress, cùng tùy chọn độ mờ nền (opacity) và độ blur kính mờ để giữ hiệu ứng frosted-glass ngay cả khi đổi màu.
6. Ba kích thước Nhỏ / Vừa / Lớn
Điều chỉnh nhanh kích thước icon, chữ và chiều cao thanh nav theo 3 mức có sẵn, phù hợp với nhiều loại màn hình.
7. Hai hiệu ứng khi cuộn trang
- Thu nhỏ khi cuộn (kiểu Instagram) – thanh nav thu nhỏ lại khi kéo xuống, phóng to trở lại khi kéo lên
- Ẩn/hiện khi cuộn – thanh nav tự ẩn khi kéo xuống, hiện lại ngay khi kéo lên, giúp nhường không gian cho nội dung
Hướng dẫn cài đặt
- Tải file plugin (
wp-mobile-bottom-nav.zip) - Vào Plugins → Add New → Upload Plugin trong trang quản trị WordPress
- Chọn file zip vừa tải, nhấn Install Now
- Nhấn Activate để kích hoạt plugin
- Vào Appearance → Menus, gán menu mong muốn vào vị trí Mobile Bottom Nav, sau đó mở từng mục menu để nhập icon class hoặc upload ảnh icon riêng nếu cần
- Vào Appearance → Mobile Bottom Nav để tùy chỉnh dark/light mode, vị trí tên menu, màu sắc, kích thước và hiệu ứng cuộn trang theo ý muốn
Yêu cầu hệ thống
- WordPress: 5.5 trở lên
- PHP: 7.2 trở lên (khuyến nghị PHP 8.x)
- Không yêu cầu thư viện hay plugin phụ thuộc nào khác
Câu hỏi thường gặp (FAQ)
Plugin có tự cài Font Awesome hay Feather Icons không? Không. Plugin không bundle sẵn thư viện icon nào. Nếu theme của bạn đã có sẵn Font Awesome/Feather, chỉ cần nhập đúng class là icon hiển thị được; nếu chưa có, dùng cách upload ảnh icon riêng cho từng mục.
Menu của tôi có hơn 5 mục thì sao? Không giới hạn số mục trong menu WordPress. Plugin sẽ tự hiển thị 4 mục đầu và gom các mục còn lại vào nút More dạng popover, không cần bạn tự cắt bớt menu.
Plugin có làm chậm website không? Không. Aithietke Mobile Bottom Nav chỉ tải CSS/JS khi có menu được gán vào vị trí Mobile Bottom Nav, không nhúng thư viện ngoài, không ảnh hưởng tốc độ tải trang.
Plugin có tương thích với các theme phổ biến không? Có. Plugin dùng CSS độc lập, không phụ thuộc Tailwind hay Bootstrap của theme, tương thích với hầu hết theme WordPress hiện nay.
Kết luận
Với thao tác cài đặt đơn giản, tận dụng đúng menu WordPress quen thuộc và khả năng tùy chỉnh về icon, màu sắc, kích thước, hiệu ứng cuộn trang, Aithietke Mobile Bottom Nav là lựa chọn phù hợp cho bất kỳ website WordPress nào muốn mang trải nghiệm điều hướng mobile hiện đại, giống ứng dụng thật đến người dùng. Plugin phù hợp với website thương mại điện tử, nền tảng đặt dịch vụ, landing page và các website dạng app.
Tải plugin và xem thêm hướng dẫn chi tiết tại aithietke.com.
