Thiết kế theme WP – phần 11: Menu

Chào mừng các bạn quay lại với chuỗi bài viết về thiết kế giao diện cho WordPress. Hôm nay, chúng ta sẽ nghiên cứu một số thành phần thường được sử dụng trong WordPress mà ở những bài trước chúng ta chưa nhắc đến: xây dựng menu.

Làm việc với Menu

Trước phiên bản 3.0, hệ thống Menu của WordPress không được xây dựng nên đối với những giao diện được xây dựng cho các phiên bản trước đó hầu như không được hỗ trợ thành phần này. Việc sử dụng menu cũng giúp cho quá trình tùy biến và chỉnh sửa thanh thực đơn của WordPress được tùy biến hơn trước rất nhiều. Đối với các theme được xây dựng trên các nền tảng cũ bạn sẽ gặp hàm wp_list_categories() để lấy toàn bộ danh sách category, hay hàm wp_list_cats() thường được sử dụng để lấy danh sách category đưa lên menu, hàm wp_list_pages() thì làm công việc lấy ra danh sách các Page…

Giờ đây mọi chuyện thực hiện trên Menu có vẻ đã đơn giản hơn với người dùng WordPress bằng các thao tác kéo thả và tạo Menu từ Admin. Bạn chỉ việc chọn những thành phần (page, category, link) muốn đưa lên rồi kéo thả và sắp xếp thành các danh mục trên menu rất dễ dàng.

Đối với người thiết kế theme, để giao diện của bạn “đi kịp thời đại” và hỗ trợ Menu cho người dùng chúng ta cần bổ sung vào theme những yếu tố sau:

Bước 1: đăng ký sử dụng Menu

Bạn thêm đoạn mã sau vào file function của theme.
[php] // This theme uses wp_nav_menu() in one location.
register_nav_menus( array(
‘main_top’ => __( ‘Menu chính ở trên’),
) );
[/php]

Ở đoạn mã trên, bạn có:

• main_top: key của menu. Căn cứ vào key này mà WordPress sẽ tìm và đặt đúng vị trí của Menu tương ứng.
• Menu chính ở trên: đây là tên của menu, bạn muốn đặt tên gì thì đặt.

Bằng đoạn mã trên, nếu bạn muốn tạo nhiều hơn 1 Menu bạn vẫn giữ cấu trúc trên và bổ sung thêm các phần tử của mảng menu. Bạn có bao nhiêu vị trí menu trên site bạn thêm bấy nhiêu.

Bước 2: Xác định vị trí sẽ hiện menu và thể hiện menu

Tùy theo layout của mình bạn sẽ chọn vị trí thích hợp để menu có thể hiện ra. Ví dụ trên, theo cách đặt tên chúng ta có thể hiểu là tôi muốn menu này nằm ở trên và hiện ở tất cả các trang.

Tại vị trí cần thể hiện menu bạn thêm đoạn code sau:

[php] <div id="menu">
<?php wp_nav_menu( array( ‘container_class’ => ‘menu-header’, ‘theme_location’ => ‘main_top’ ) ); ?>
</div>
[/php]

Bạn để ý nhé, các thành phần của menu được đưa vào trong một thẻ ul. Điều đó chứng tỏ mỗi menu được bạn tạo trong Admin sẽ là một phần tử trong list đó.

Đối với các vị trí hiển thị menu khác bạn làm tương tự, chỉ việc thay phần theme_location lại cho đúng với key để có thể thêm vào trong Dashboar là được.

Làm việc với các theme cũ

Giờ thì bạn đã biết cách một menu được tạo ra trong WordPress đơn giản như thế nào rồi đấy. Bạn cũng có thể nâng cấp các theme cũ mà bạn đang dùng và khiến cho nó hỗ trợ menu bằng cách sử dụng cách thức tạo menu như trên. Bạn chỉ việc thay đổi đoạn mã lấy category(hoặc Page) của theme mà tôi đã nói ở trên thành đoạn mã tạo menu. Sau đó vào Dashboard để tạo menu.

Kinh nghiệm bé nhỏ của tôi cho thấy, bạn không nhất thiết phải xây dựng một giao diện với menu rắc rối quá sức, bạn chỉ việc dùng CSS cũ đã dùng tạo menu (bằng phương pháp lấy Page và Category) để sử dụng cho Menu là được rồi.