110-wolfactive-949x475
01/04/2020

Hướng dẫn tạo theme WP – Phần 3: Custom menu WordPress

Trong phần 1 và phần 2 của series mình đã hướng dẫn các bước cơ bản để làm quen và làm một theme WordPress. Nếu các bạn có kiến thức Frontend vững thì việc build 1 theme WordPress là 1 việc dễ dàng. Thì trong phần này mình sẽ hướng dẫn các bạn tạo custom menu để các bạn có thể có nhiều lựa chọn hơn khi develop một theme WordPress

1. Cách gọi menu trong WordPress

Thông thường nếu làm một trang web không dùng đến CMS WordPress thì menu bạn sẽ phải tự đi khung HMTL và CSS cho menu. Nhưng trong WordPress sẽ hỗ trợ bạn render ra menu và sub menu để bạn không phải khó khăn trong việc làm menu của trang web.

WordPress-phan-3-main-menu

Các bạn nhìn thấy trang WordPress hỗ trợ rất tốt trong việc tạo menu. Trong phần admin tạo menu WordPress có rất nhiều gợi ý để các bạn có thể chèn item vào menu như trang, post, chuyên mục bài viết,… Sau khi thiết lập trong admin xong thì việc còn lại là dùng code render ra trang giao diện.

12wp_nav_menu(array('theme_location' => '<strong>{menu-name-slug}</strong>' ));

Chèn đoạn code này vào nơi bạn muốn render ra menu. Thì trên trang chủ sẽ hiện ra menu theo các bạn setup ở admin

2. Tạo custom menu trong WordPress

Để tạo một custom menu  các bạn vào file functions.php kéo đến cuối file và thêm đoạn code sau để tạo custom menu.

123456<div><div>function create_custom_menu () {</div><div>register_nav_menu('headerMenuLocation','Header Menu Location');</div><div>}</div><div>add_action('after_setup_theme', 'create_custom_menu');</div></div>

Như các bạn thấy thì ở trong đoạn code này mịnh tạo một custom menu có {name-slug} là headerMenuLocation và tên menu là Header Menu Location nếu nhìn trên hình ảnh phía trên các bạn có thể thấy mình tạo ra một cusom menu có tên như trên.  Sau đó mình dùng lên để thực thi function tạo menu đó. Vậy là xong bước để tạo một custom menu. Để sử dụng các bạn dùng như phần 1 mình hướng dẫn để gọi menu ra trang gido diện.

Vui lòng chọn size trước khi đặt hàng (*)