Cách tạo Mega Menu với plugin miễn phí trên WordPress

0
162

Bài viết này sẽ giới thiệu các khía cạnh khác nhau của plugin WP Mega Menu, vốn là một plugin cho phép bạn tạo lập các menu điều hướng nhiều nội dung trên trang web. Sau phần tổng quan sẽ có ví dụ thực tế để minh hoạ rõ hơn.

Tại sao nên dùng Mega Menu?

Trong quá trình phát triển trang web, điều hướng trang là một phần rất quan trọng với nhiều sự lựa chọn khác nhau tuỳ vào loại trang web của bạn. Điều hướng có thể chỉ là menu một thanh đơn hoặc menu nhiều cột thả chứa nhiều thông tin trong đó. Bài viết hôm nay sẽ nói về một loại menu rất phổ biến: Mega Menu.

Nếu có kinh nghiệm sở hữu hoặc phát triển một trang WordPress, bạn đã biết rằng WordPress cung cấp rất nhiều plugin cho hầu hết các tính năng cần thiết và trong nhiều trường hợp, việc chọn một plugin để sử dụng là quyết định khó khăn. Khi cần tạo các menu điều hướng, bạn sẽ có nhiều plugin để lựa chọn trong mục WordPress Plugin Directory. WP Mega Menu giúp bạn tạo menu điều hướng chứa các liên kết đến các hình ảnh, video, widgets.

Plugin WP Mega Menu là gì?

Như đã đề cập ở trên, WP Mega Menu là một plugin cho phép bạn tạo lập các menu điều hướng nhiều nội dung trên trang WordPress. Plugin này rất dễ sử dụng với giao diện kéo-và-thả trong phần backend (máy chủ và dữ liệu lưu trữ) để tạo menu nhanh chóng.

Bên cạnh đó, WP Mega Menu còn cung cấp nhiều style tuỳ chỉnh khác cho menu, do đó bạn có thể chỉnh sửa và thiết kế giao diện menu từ backend mà không cần phải là một chuyên gia về CSS.

Các tính năng WP Mega Menu gồm có:

  • Bảng xây dựng menu kéo-và-thả
  • Hỗ trợ widget
  • Hỗ trợ các theme và giao diện khác nhau
  • Hỗ trợ Social icons, Dashicons, và Font Awesome
  • Xuất / Nhập theme

Có thể thấy, với nhiều tính năng hữu ích, WP Mega Menu sẽ giúp bạn xây dựng được các menu điều hướng nhiều cột đẹp mắt và thu hút người dùng. Với tính năng hỗ trợ widget, bạn có thể thêm mọi thứ vào menu thả. Đây là một plugin phải có nếu bạn đang xây dựng một web dạng portal và cần tìm cách thiết lập một menu điều hướng nhiều nội dung. Phần kế tiếp của bài viết sẽ giới thiệu một số cài đặt cơ bản quan trọng của WP Mega Menu.

Khám phá Cài đặt Plugin

Sau khi cài đặt WP Mega Menu, bạn sẽ thấy các liên kết hiện lên trong thanh bên trái. Hãy cùng đi qua mỗi phần một cách ngắn gọn.

Cài đặt Toàn cầu (Global Settings)

Ở phần này, bạn có thể thiết kế các cài đặt mang tính ứng dụng toàn cầu cho toàn bộ menu được tạo ra. Các cài đặt khác nhau cũng cho phép bạn đặt ra một vài chế độ JavaScript và thiết lập CSS toàn cầu.

Theme menu

Phần này cho phép bạn thiết kế các cài đặt theme đặc biệt. Mặc dù theme mặc định cũng đã bao gồm những cài đặt hữu ích, nhưng bạn vẫn có thể tạo theme mới cho riêng bạn hoặc sao chép lại theme hiện có. Hãy tạo nhiều theme nếu bạn muốn và áp dụng những style khác nhau cho những menu khác nhau.

Với mỗi theme mới, bạn có thể điều chỉnh nhiều phần của menu – như màu phông nền, cài đặt font chữ, khoảng cách, hiệu ứng,… Đây cũng là phần bạn sẽ thường xuyên sử dụng nhất khi chỉnh sửa menu. Có một chức năng hữu ích nữa là di chuyển theme giữa các trang của bạn, có nghĩa là bạn không cần tạo lại theme mới mà có thể sao chép từ nơi khác về.

Xây dựng Mega Menu cho trang web của bạn

Ví dụ trong phần này sẽ hướng dẫn cách sử dụng plugin WP Mega Menu để tạo một mega menu ba cột trên trang WordPress, với mỗi cột chứa mỗi nội dung khác nhau. Bạn hãy cài đặt plugin này trên WordPress trước khi bắt đầu.

Tạo Menu và Sản phẩm trong menu

Bạn cần phải tạo một menu thông thường trước khi thiết lập một mega menu. Truy cập Appearances > Menu (trong thanh quản lí) để tạo menu mới. Làm theo hướng dẫn là thêm một vài sản phẩm vào menu đó.

Menu trong ví dụ này được đặt tên là Demo Mega Menu. Người viết cũng thêm vào một số liên kết tuỳ chỉnh như màn hình bên dưới. Bây giờ, bạn hãy chọn vị trí để hiển thị menu này bằng cách chọn Top Menu trong trường Display Location.

Hãy nhớ là bạn đã có một block Mega Menu Settings nằm bên trái (như hình trên). Trong bảng này, hãy chọn theme theo ý thích và nhấn Save để lưu thay đổi. Ví dụ trong bài sử dụng theme xanh-cổ-điển.

Thiết kế Menu Links

Để hướng dẫn sắp xếp cài đặt cho menu links, ví dụ này sẽ tạo một mega menu cho liên kết Home, tuy nhiên bạn có thể sử dụng hướng dẫn này tương tự đối với các liên kết còn lại. Đi chuột đến liên kết Home và bạn sẽ thấy liên kết WP Mega Menu như hình dưới đây:

Nhấn vào liên kết, một cửa sổ phụ sẽ xuất hiện. Bạn có thể chỉnh sửa cài đặt cho liên kết Home tại đây.

Kích hoạt tuỳ chọn Mega Menu sẽ xuất hiện rất nhiều lựa chọn tuỳ chỉnh. Khi nhấn vào Add Row, bạn có thể chọn bố cục để dùng cho mega menu như hình dưới:

Trong ví dụ này, người viết đã chọn bố cục ba cột như hình trên và sử dụng giao diện người dùng để thêm nhiều nội dung khác nhau.

Nằm bên trái là mục widget, nơi liệt kê các loại widget khả dụng đối với bạn. Khi chọn được widget, hãy kéo thả nó về những cột đã tạo sẵn. Ba widget được sử dụng ở đây là Categories, ArchiveText.

Dĩ nhiên bạn có thể chọn các widget khác nếu muốn. Sau khi chọn xong, bạn có thể thiết kế lại theo ý thích, nhưng nhớ lưu lại. Bây giờ, hãy thoát ra lại frontend để xem menu trông như thế nào.

Như đã thấy, WP Mega Menu đã giúp chuyển đổi một menu thông thường thành một mega menu kiểu thả. Mọi thứ bạn đã thiết kế được hiển thị từ backend. Bằng cách này, bạn có thể kích hoặt cài đặt mega menu cho tất cả các liên kết của menu. Với tính năng hỗ trợ widget, mọi loại nội dung đều được hiển thị trong chính menu của bạn. Bạn hãy thử thiết kế mega menu với các tính năng khác và xem nó hoạt động như thế nào.

Bước tiếp theo: Thêm nhiều Mega Menu nâng cao

Nếu bạn cảm thấy WP Mega Menu là một plugin hữu ích và muốn đào sâu hơn nữa, hãy dành thời gian xem qua phiên bản trả phí của nó: WP Mega Menu Pro. Phiên bản này bao gồm rất nhiều theme chuyên nghiệp mà bạn chắc chắn sẽ thích.

Kết luận

Như vậy, bài viết này đã chia sẻ cách tạo ra những mega menu tuyệt với bằng plugin WP Mega Menu trên WordPress. Và vẫn còn nhiều plugin menu miễn phí khác mà bạn có thể trải nghiệm cho trang web của bạn đấy.

TRẢ LỜI

Please enter your comment!
Please enter your name here