Cài đặt Navi+ trên WordPress chỉ mất khoảng 15–30 phút. Đây là toàn bộ quy trình — từ lúc tải plugin xuống đến khi menu đầu tiên của bạn hoạt động.
Những Gì Bạn Cần
- Một website WordPress hoặc WooCommerce (tự host, gói Business của WordPress.com, hoặc bất kỳ hosting WP nào)
- Quyền Admin trên website WordPress của bạn
- Một tài khoản Navi+ miễn phí (tạo tại dash.naviplus.app)
Bước 1 — Cài Đặt Plugin
Cách A: Từ WordPress.org
- Trong WP Admin, vào Plugins → Add New
- Tìm kiếm “Navi+ Menu Builder”
- Nhấn Install Now, sau đó Activate
Cách B: Tải lên thủ công
- Tải file .zip của plugin từ naviplus.io
- Trong WP Admin, vào Plugins → Add New → Upload Plugin
- Tải file .zip lên và kích hoạt
Bước 2 — Kết Nối Với Tài Khoản Navi+
Sau khi kích hoạt, bạn sẽ thấy mục Navi+ trong thanh sidebar của WP Admin.
- Nhấn Navi+ → Settings
- Nhập Site ID và API key của bạn (tìm trong dashboard Navi+ tại Settings → WordPress)
- Nhấn Connect
Nếu bạn chưa có tài khoản Navi+, bạn sẽ được nhắc tạo một tài khoản mới. Gói miễn phí bao gồm tất cả các tính năng cốt lõi.
Bước 3 — Chọn Loại Menu
Từ Navi+ → Menu Builder trong WP Admin, tạo menu đầu tiên của bạn:
- Tab Bar → Phù hợp nhất cho các cửa hàng WooCommerce ưu tiên trải nghiệm di động
- Mega Menu → Điều hướng desktop nhiều cột với danh mục và hình ảnh
- Slide Menu → Kiểu hamburger/ngăn kéo cho các cửa hàng hiện đại
- FAB → Nút hành động nổi cho khuyến mãi hoặc phím tắt liên hệ
- Grid Menu → Bố cục lưới trực quan cho các cửa hàng có nhiều danh mục
Hầu hết các cửa hàng WooCommerce đều được hưởng lợi từ việc triển khai Tab Bar trên mobile và Mega Menu trên desktop đồng thời, sử dụng quy tắc Smart Publish của Navi+.
Bước 4 — Xây Dựng Menu (hoặc Dùng AI)
Cách thủ công:
- Nhấn Add Item để tạo các mục menu
- Đặt nhãn, URL và biểu tượng cho từng mục
- Sắp xếp theo cấu trúc phân cấp bạn muốn
- Thiết lập tùy chọn thiết kế (màu sắc, phông chữ, khoảng cách)
Cách dùng AI (khuyến nghị cho WooCommerce):
- Nhấn Generate with AI
- AI của Navi+ đọc danh mục sản phẩm và taxonomy WooCommerce của bạn
- AI tạo ra cấu trúc menu hoàn chỉnh — bạn xem lại và điều chỉnh
- Xác nhận và tiến hành tạo kiểu
Bước 5 — Thiết Lập Quy Tắc Xuất Bản
Trong phần Smart Publish:
- Devices: Đặt menu hiển thị trên Mobile, Desktop, hoặc Cả hai
- URLs: Cấu hình trang nào hiển thị menu nào (tùy chọn)
- Conditions: Khách hàng đã đăng nhập vs. khách chưa đăng nhập (tùy chọn)
Với thiết lập WooCommerce thông thường, hãy đặt Tab Bar là “Mobile only” và Mega Menu là “Desktop only.”
Bước 6 — Xuất Bản
Nhấn Publish. Menu của bạn sẽ hoạt động ngay lập tức — không cần chỉnh sửa file theme, không cần thay đổi page builder, không cần lập trình viên.
Khả Năng Tương Thích
Navi+ hoạt động với:
| Theme / Hệ thống WordPress | Tương thích |
|---|---|
| WordPress.org (tự host) | ✓ |
| WooCommerce | ✓ |
| Elementor | ✓ |
| Divi | ✓ |
| Avada | ✓ |
| Astra / OceanWP / GeneratePress | ✓ |
| Sage (Roots) / Timber | ✓ |
| Theme tùy chỉnh | ✓ (dạng script) |
Xử Lý Sự Cố
Menu không hiển thị? Kiểm tra xem script Navi+ có đang tải đúng trang không. Vào Settings → Publish Rules và xác minh điều kiện URL.
Xung đột với menu hiện có? Nếu bạn muốn Navi+ thay thế menu gốc của theme, bạn có thể ẩn phần header của theme bằng một đoạn CSS nhỏ (đội hỗ trợ Navi+ có thể cung cấp đoạn code phù hợp với theme của bạn).
Tải chậm? Kiểm tra xem tùy chọn CDN có được bật trong Navi+ Settings không. Điều này đảm bảo các tài nguyên được phân phối từ CDN toàn cầu của Navi+ thay vì máy chủ của bạn.
Kết Luận
Cài đặt Navi+ trên WordPress chỉ mất 15–30 phút và không cần viết code. Tính năng tạo menu bằng AI từ dữ liệu WooCommerce là cách nhanh nhất để có được một hệ thống điều hướng được tổ chức tốt, tối ưu cho mobile.
→ Xem so sánh đầy đủ: Navi+ vs Max Mega Menu