VietNetwork.Vn

Bạn có muốn tạo menu thanh bên có thể thu gọn trong WordPress không?

Menu có thể thu gọn có thể cung cấp cho khách truy cập trang web của bạn một cách dễ dàng để truy cập vào nhiều liên kết mà không làm lộn xộn thanh bên của bạn. Nó hoàn hảo 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.

Trong bài viết này, mình sẽ hướng dẫn bạn cách dễ dàng tạo một menu sidebar có thể thu gọn trong WordPress.

1. Menu thanh bên có thể thu gọn là gì (Và khi nào thì sử dụng)

Các menu thân thiện với người dùng nhất 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ể phức tạp đối với các trang web có nhiều trang hoặc bố cục phức tạp hơn.

Hãy nghĩ về một cửa hàng Thương mại điện tử lớn có rất nhiều danh mục sản phẩm và danh mục phụ, chẳng hạn như Amazon.

Hiển thị mọi danh mục sản phẩm trong một menu tiêu chuẩn sẽ không phải là một ý tưởng hay. Người mua hàng có thể cần phải cuộn qua menu để tìm danh mục mà họ quan tâm.

Đây là nơi xuất hiện các menu có thể thu gọn. Các menu này sắp xếp nội dung của chúng theo mối quan hệ cha-con. Nếu khách truy cập nhấp vào một mục chính trong menu có thể thu gọn, thì nó sẽ mở rộng để hiển thị tất cả nội dung con của mục gốc đó.

Tờ báo Guardian sử dụng menu có thể thu gọn cho trang web dành cho thiết bị di động của mình.


Menu có thể thu gọn đôi khi được gọi là menu có thể mở rộng. Điều này là do các phần khác nhau của chúng mở rộng 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 rất nhiều nội dung và độ phức tạp đối với khách truy cập. Điều này thân thiện với người dùng hơn nhiều so với việc cuộn qua một danh sách dài các danh mục và danh mục phụ.

Chúng ta hãy xem cách bạn có thể dễ dàng tạo menu thanh bên có thể thu gọn trên trang web WordPress của mình.

2. Cách tạo Menu thanh bên có thể thu gọn trong WordPress

Bạn có thể tạo menu thanh bên có thể thu gọn trong WordPress bằng cách sử dụng plugin Bellows Accordion Menu.

Bellows Accordion Menu cung cấp một mã ngắn tiện dụng để bạn có thể đặt menu thu gọn của mình trên bất kỳ trang, bài đăng hoặc khu vực tiện ích nào, bao gồm cả thanh bên của bạn.


Đầu tiên, bạn cần cài đặt và kích hoạt plugin. Nếu bạn cần trợ giúp, vui lòng xem hướng dẫn của mình về cách cài đặt plugin WordPress.

Sau khi kích hoạt, hãy chuyển đến trang Appearance >> Menus trong bảng điều khiển WordPress của bạn.


Để bắt đầu, hãy nhập 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 nhìn thấy tên vì nó chỉ để bạn tham khảo. Sau đó, bạn có thể nhấp vào nút Create Menu.

Tiếp theo, bạn có thể chọn các trang bạn muốn thêm vào menu thu gọn. Theo 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 mình, hãy nhấp vào tab View All.


Ngoài ra, bạn có thể nhấp vào Select All. Thao tác này sẽ thêm tất cả các trang của bạn vào menu có thể thu gọn.

Khi bạn hài lòng với lựa chọn của mình, hãy nhấp vào nút 'Add to Menu''. Bạn cũng có thể chọn bài đăng, danh mục blog hoặc thêm liên kết tùy chỉnh. Để biết thêm chi tiết, vui lòng xem hướng dẫn của mình về cách thêm menu điều hướng trong WordPress.

Sau khi thêm tất cả các trang web khác nhau của bạn vào menu, bạn có thể di chuyển chúng xung quanh bằng cách kéo và thả chúng. Điều này sẽ thay đổi thứ tự các trang này xuất hiện trong menu có thể thu gọn của bạn.

Menu có thể thu gọn là tất cả về mối quan hệ cha mẹ - con cái.

Khi khách truy cập nhấp vào một mục chính trong menu có thể thu gọn của bạn, nó sẽ mở rộng để hiển thị tất cả 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 bên dưới trang mẹ của chúng.

Tiếp theo, nắm lấy từng con và kéo sang phải một chút. Sau đó, bạn có thể phát hành trang này. Thao tác này sẽ thụt lề mục và biến nó thành một trang con.


Đừng quên nhấp vào nút Save Changes khi bạn hoàn tất.

Bây giờ chúng ta muốn thêm menu có thể thu gọn này vào thanh bên của WordPress. Để làm điều này, mình sẽ sử dụng một số shortcode mà Bellows Accordion tạo tự động.

Để lấy shortcode, hãy chuyển đến Menu Appearance >> Bellows. Nếu nó chưa được chọn, hãy đảm bảo rằng bạn chọn tab Show All.


Bây giờ bạn có thể nhấp vào hộp Shortcode, hộp này sẽ đánh dấu tất cả mã. Bây giờ, sao chép mã này bằng phím tắt Command + c hoặc Ctrl + c.

Bước tiếp theo là dán mã ngắn này vào một tiện ích, vì vậy hãy chuyển đến Appearance >> Widgets. Điều này sẽ hiển thị tất cả các khu vực được mở rộng trong giao diện hiện tại của bạn. Các tùy chọn bạn thấy có thể khác nhau, nhưng hầu hết các giao diện WordPress hiện đại đều có thanh bên.


Khi bạn đã tìm thấy khu vực thanh bên, hãy nhấp vào nó. Phần này bây giờ sẽ mở rộng.

Để thêm một khối, hãy nhấp vào biểu tượng + và bắt đầu nhập Mã ngắn. Khi nó xuất hiện, hãy chọn khối Shortcode.


Bây giờ, chỉ cần dán shortcode menu có thể thu gọn của bạn vào khối này. Để xuất bản menu của bạn, bạn cần nhấp vào nút Update ở đầu màn hình.

Bây giờ, khi bạn truy cập trang web của mình, bạn sẽ thấy một menu thanh bên có thể thu gọn mới.


Plugin Bellows Accordion 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 của nó để phản ánh tốt hơn thương hiệu trang web của bạn.

Nếu bạn muốn chỉnh sửa menu mặc định, chỉ cần đi tới Appearance >> Bellows Menu trong bảng điều khiển WordPress của bạn.

Menu này có tất cả các cài đặt bạn cần để tùy chỉnh menu có thể thu gọn của mình. Có rất nhiều cài đặt để khám phá. Tuy nhiên, bạn có thể muốn bắt đầu bằng cách đi tới Main Configuration >> Basic Configuration.


Tại đây, bạn có thể chuyển đổi giữa một số màu menu khác nhau. Bạn cũng có thể chọn xem khách truy cập có thể mở rộng nhiều menu con cùng một lúc hay không bằng cách sử dụng cài đặt Accordion Folding.

Để thay đổi căn chỉnh và chiều rộng của menu, hãy nhấp 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, thì bạn có thể chỉnh sửa menu thanh bên có thể thu gọn trong WordPress Customizer. Để thực hiện việc này, hãy chuyển đến Appearance >> Customize.

Trong thanh bên trái, chọn Bellows.


Tại đây, bạn sẽ tìm thấy nhiều cài đặt khác nhau cho thanh bên có thể thu gọn của mình. Đ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 thanh bên của bạn.

Mình hy vọng bài viết này đã giúp bạn tìm hiểu cách tạo menu thanh bên có thể thu gọn trong WordPress. Bạn cũng có thể xem qua hướng dẫn của mình về cách theo dõi khách truy cập trang web của bạn và phần mềm thông báo đẩy tốt nhất để tăng lưu lượng truy cập của bạn.