#6 – WordPress Menu – register_nav_menu – Tạo menu cho theme goclamweb

0

Trong bài học này, chúng ta sẽ sẽ tiến hành tạo menu cho theme , đặt vị trí trong menu chính của theme goclamweb thông qua register_nav_menu.

Video Tạo menu cho theme goclamweb – register_nav_menu

Hướng dẫn chi tiết

Để tiện theo dõi, các bạn nên download code hoàn thành của bài trước nhé.

Bài học trước chúng ta đã phân tách template thành các file header.php và footer.php. Tuy nhiên, menu trong header vẫn là html tĩnh, chưa phải là dữ liệu tùy chỉnh do người dùng theme nhập vào. Để tạo menu, đúng hơn là tạo vị trí đặt menu mà người dùng có thể thay đổi, các bạn cần phải khai báo với WordPress về tên định danh và thông tin của của menu. Sau đó, các bạn đặt các vị trí menu đã khai báo trên template, cụ thể ở đây là file header.php. Khai người dùng tạo menu của họ, họ có thể chọn các vị trí menu mà bạn đã tạo trong theme.

Ví dụ bên dưới mình chỉ làm cho menu chính thui nhé, ngoài ra các bạn có thể tạo thêm các menu khác ở top bar đầu trang, footer menu ở cuối trang hay mọi chỗ mà bạn muốn. Chúng ta bắt đầu nào.

Khai báo menu

Trong file setup.php (file dùng để khai báo các hỗ trợ mặc định cho theme), chúng ta sẽ viết vào hàm glw_theme_setup ở những bài trước dòng sau:

register_nav_menu( 'glw_primary_menu', __('Primary Menu','glw') );

Sau đó add_action cho hook nhé (thực ra mình đã làm ở bài trước rồi do chúng ta dùng chung 1 hàm setup mà). Phần // có ý nghĩa đấy, bạn nên đọc tiếp hook inithook after_theme_setup ở bên dưới nhé.

add_action( 'init', 'glw_theme_setup' );

Chúng ta sẽ sử dụng hàm register_nav_menu(location, description) để khai báo vị trí menu chính:, hàm này gồm 2 tham số:

  • location: vị trí sẽ hiển thị menu, giống như một ID mà chúng ta sẽ báo cho WordPress biết rằng: chỗ nào xuất hiện cái ID này, vui lòng hiển thị menu. Bạn nên đặt tên sao cho đừng bị trùng nhé (Tips: tên theo kiểu textdomain_tên menu).
  • description: mô tả. Giải thích cho người dùng biết menu này là gì, hiển thị ở đâu.

Trong ví dụ, menu chính mình sẽ đặt vị trí (hoặc có thể nói là ID định danh) là glw_primary_menu,  và mô tả cho người dùng biết đây sẽ là Primary Menu – menu chính. Hàm __( ‘String’, ‘text-domain’ ) dùng để cho phép người dùng có thể dịch phần mô tả này. Lúc này menu của bạn sẽ xuất hiện trong phần Apperence -> Menu

Tạo menu cho theme goclamweb - trang admin Các bạn tự tạo 1 menu vào gán cho nó làm primary menu nhé.

Vài giây cho quảng cáo Hosting

Các bạn cần hosting PHP - WordPress nhanh, rẻ và dễ sử dụng có thể chọn Azdigi nhé.
Link đăng ký: https://my.azdigi.com/aff.php?aff=1612
Nếu các bạn đăng ký và sử dụng hosting, Góc Làm Web sẽ có một ít tiền để duy trì.

Hiển thị menu

Thao tác vừa rồi chúng ta chỉ mới tạo vị trí primary menu, tạo menu 1 sau đó cho WordPress biết menu 1 có vị trí primary menu. Chúng ta cần làm tiếp 1 bước nữa là hiển thị menu ra giao diện người dùng.

Các bạn mở file header.php, đến phần <nav class="mainmenu">.  Xóa hoặc comment (ctrl + /) phần code nằm trong <div id="navbar" class="navbar-collapse collapse no-padding">

Chúng ta sẽ dùng hàm wp_nav_menu để hiển thị menu ra giao diện. Hàm này khá nhiều tham số nên các bạn chịu khó đọc trên Codex WordPress nhé. Mình sẽ để wp_nav_menu tại đây.

if(has_nav_menu( 'glw_primary_menu' )){
   wp_nav_menu(array(
     'theme_location'    => 'glw_primary_menu',
     'container'         => false,
     'fallback_cb'      => false,
     'depth'            => 5
   ));
}

Một số tham số mỉnh đã sử dụng trong phần code này (còn rất nhiều tham số khác nhưng mình không dùng đến, bạn nên xem hết trong codex nha).

  • theme_location: vị trí menu mà chúng ta muốn hiển thị. Vị trí này chúng ta đã đăng ký trong phần code phía trên nhé.
  • container: các bạn muốn bao bọc toàn bộ menu trong thẻ div hay thẻ ul. Nếu muốn div, chọn true, muốn ul chọn false. Mặc dịnh là div nha.
  • fallback_cb: hàm callback gọi lại dự phòng. Nếu menu này không tồn tại và bạn muốn xử lý như thế nào đó khi không có menu, các bạn có thể sử dụng tham số này, mình chọn false nhé, kh6ong dùng đến.
  • depth: độ sau hay phân tầng. Các bạn muốn menu của mình hỗ trợ tối đa bao nhiêu tầng. Mình chọn 5 nha.

Hàm has_nav_menu dùng để kiểm tra xem vị trí menu glw_primary_menu được khai báo chưa, để tránh lỗi không mong muốn xảy ra.

Các bạn thử chạy xem. Mặc dù chúng ta cho phép menu 5 tầng nhưng lưu ý là các class của item menuclass mặc định của WordPress nên kết quả sẽ không đúng đâu, chỉ hiển thị được 1 tầng thui. Để hiển thị được 5 tầng, các bạn cần tùy chỉnh lại các class của menu. Hẹn bài học sau nhé.

Tài liệu WordPress

Link tài liệu chính chủ WordPress về các hàm đã dùng trong bài học nếu muốn tìm hiểu sâu hơn

Code hoàn thành của bài học: Google Drive

Nếu có thắc mắc, đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Đừng quên LikeShare nếu thấy bài viết thú vị.

Liên hệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.