Bạn có muốn tạo một menu sidebar có thể thu gọn trong WordPress không? Một menu có khả năng thu gọn có thể giúp khách truy cập trang web của bạn dễ dàng tiếp cận nhiều liên kết mà không làm rối mắt sidebar web. Điều này khá tốt và hiệu quả cho các trang web lớn, cửa hàng thương mại điện tử hoặc bất kỳ trang web nào có bố cục phức tạp hơn.
Bạn cần làm gì để tạo menu sidebar có thể thu gọn trong WordPress? Và khi nào thì bạn nên sử dụng menu sidebar?
Các menu thân thiện với người dùng cung cấp khả năng truy cập dễ dàng vào tất cả các liên kết mà khách truy cập cần. Tuy nhiên, điều này có thể là một thách thức đối với các trang web WordPress có nhiều trang hoặc bố cục phức tạp hơn.
Hiển thị tất cả các category sản phẩm trong một menu tiêu chuẩn sẽ không phải là ý tưởng tốt. Người mua hàng có thể cần cuộn qua menu để tìm category họ quan tâm; điều này sẽ ảnh hưởng rất nhiều đến trải nghiệm người dùng.
Menu có thể thu gọn giúp các trang web WordPress có nhiều trang hoặc bố cục phức tạp trở nên thân thiện hơn với người dùng. Các menu này tổ chức nội dung của chúng theo mối quan hệ cha-con, giúp người dùng dễ dàng tìm thấy thông tin cần thiết. Khi người dùng nhấp vào một mục cha trong menu có thể thu gọn, tất cả nội dung con của mục đó sẽ được hiển thị.
Menu sidebar có khả năng thu gọn đôi khi còn được gọi là menu expandable. Điều này bởi vì các phần khác nhau của chúng mở ra khi khách truy cập nhấp vào chúng.
Theo mặc định, các menu có thể thu gọn ẩn nhiều nội dung và giảm độ phức tạp đối với khách truy cập. Điều này thân thiện hơn nhiều so với việc cuộn qua một danh sách dài các category cha và category con trên blog WordPress.
Để tạo menu sidebar có khả năng thu gọn linh hoạt trong WordPress, bạn có thể sử dụng plugin Elementor Pro. Đây là một plugin mạnh mẽ giúp bạn xây dựng và điều chỉnh giao diện website một cách trực quan với thao tác kéo thả. Với Elementor Pro, việc tạo ra các menu sidebar có thể thu gọn trở nên dễ dàng hơn bao giờ hết.
Cách tạo menu sidebar có thể thu gọn trong WordPress
Bạn có thể tạo một menu sidebar có khả năng thu gọn trong WordPress bằng cách sử dụng plugin Bellows Accordion Menu.
Plugin Bellows Accordion Menu cung cấp một shortcode tiện lợi để đặt menu có khả năng thu gọn của bạn trên bất kỳ trang nào, bài viết hoặc khu vực widget nào, bao gồm cả sidebar của bạn.
Trước tiên, bạn cần cài đặt và kích hoạt plugin Bellows Accordion Menu
Sau khi kích hoạt, hãy truy cập trang Appearance > Menus trong WordPress dashboard.
Để bắt đầu, gõ tên cho menu của bạn vào trường “Menu name”. Khách truy cập trang web của bạn sẽ không thấy tên vì đây chỉ dành cho bạn tham khảo và lưu lại.
Tiếp theo, bạn có thể nhấn vào nút “Create Menu”.
Sau đó, chọn các trang bạn muốn thêm vào menu sidebar có khả năng thu gọn. Mặc định, WordPress chỉ hiển thị các trang gần đây nhất của bạn.
Nếu bạn muốn xem danh sách tất cả các trang trên trang web của bạn, hãy nhấn vào tab “View all”.
Hoặc bạn có thể nhấn vào “Select All”, với thao tác này sẽ thêm tất cả các trang của bạn vào menu có khả năng thu gọn.
Khi bạn hài lòng với sự lựa chọn của mình, hãy nhấn vào nút “Add to menu”. Bạn cũng có thể chọn các bài viết, category blog hoặc thêm link tùy chỉnh.
Sau khi đã thêm tất cả các trang web khác nhau vào menu, bạn có thể di chuyển chúng bằng cách kéo và thả. Điều này sẽ thay đổi thứ tự các trang này xuất hiện trong menu có khả năng thu gọn.
Menu có khả năng thu gọn đều xoay quanh mối quan hệ cha-con.
Khi một khách truy cập nhấp vào một mục cha trong menu có khả năng thu gọn của bạn, nó sẽ mở rộng để hiển thị toàn bộ nội dung con.
Để tạo mối quan hệ này, chỉ cần sử dụng kéo và thả để sắp xếp tất cả các trang con của bạn dưới mỗi mục cha của chúng.
Tiếp theo, kéo từng trang con và kéo nó một chút sang phải. Sau đó, bạn có thể thả trang này. Điều này sẽ thụt đầu trang và biến nó thành một trang con.
Đừng quên nhấn vào nút “Save change” khi bạn hoàn thành.
Bây giờ chúng ta muốn thêm menu có khả năng thu gọn này vào sidebar WordPress. Để làm điều này, chúng ta sẽ sử dụng một số shortcode mà Bellows Accordion tự động tạo ra.
Để lấy shortcode, hãy vào trang Appearance > Bellows Menu từ WordPress dashboard. Nếu nó chưa được chọn, hãy đảm bảo bạn chọn tab “Show all”.
Sau đó, bạn có thể nhấn vào hộp shortcode, điều này sẽ làm nổi bật toàn bộ code. Bây giờ, sao chép code này bằng cách sử dụng phím tắt bàn phím Command + C hoặc Ctrl + C.
Bước tiếp theo là dán shortcode này vào một widget, vì vậy hãy chuyển đến trang Appearance > Widgets từ khu vực admin.
Điều này sẽ hiển thị tất cả các khu vực widget trong theme hiện tại của bạn. Các tùy chọn bạn thấy có thể thay đổi, nhưng hầu hết các theme WordPress hiện đại đều có một sidebar.
Sau khi bạn đã tìm thấy khu vực sidebar, hãy nhấn vào đó. Phần này sẽ mở rộng.
Để thêm một block, nhấn vào biểu tượng + và bắt đầu gõ “shortcode”. Khi nó xuất hiện, hãy chọn block shortcode.
Bây giờ, chỉ cần dán shortcode của menu có khả năng thu gọn vào khối này. Để xuất bản menu của bạn, bạn cần nhấn vào nút “Update” ở phía trên màn hình của bạn.
Bây giờ, khi bạn truy cập trang web của mình, bạn nên thấy một menu sidebar có khả năng thu gọn mới.
Plugin Bellows Accordion cũng giúp bạn dễ dàng tùy chỉnh menu mặc định này. Ví dụ, bạn có thể thay đổi bảng màu để thể hiện đặc trưng thương hiệu của trang web.
Nếu bạn muốn điều chỉnh menu mặc định, chỉ cần vào trang Appearance > Bellows Menu trong WordPress dashboard.
Menu này có tất cả các thiết lập bạn cần để tùy chỉnh menu thu gọn của bạn. Có rất nhiều cài đặt để khám phá. Tuy nhiên, bạn có thể bắt đầu bằng cách vào Main Configuration > Basic Configuration.
Ở đây, bạn có thể chuyển đổi giữa một số màu sắc menu khác nhau. Bạn cũng có thể chọn liệu khách truy cập có thể mở nhiều category con cùng một lúc bằng cách sử dụng các thiết lập Accordion Folding.
Để thay đổi căn chỉnh và chiều rộng của menu, nhấn vào tab “Layout & Position”.
Nếu bạn muốn xem trước các thay đổi của mình trong thời gian thực, bạn có thể chỉnh sửa menu sidebar có khả năng thu gọn trong Customizer của WordPress.
Để làm điều này, hãy chuyển đến trang Appearance > Customize từ khu vực admin và chọn tab “Bellows” từ cột bên trái.
Ở đây, bạn sẽ tìm thấy nhiều thiết lập khác nhau cho sidebar của bạn. Điều này bao gồm việc thay đổi chiều rộng, căn chỉnh và màu sắc của menu sidebar có khả năng thu gọn.