Kho giao diện web đa dạngVới đủ các lĩnh vực - ngành nghề kinh doanh khác nhau
Kinh doanh hiệu quả hơn trên internet
MẪU WEBSITE THEO GIÁ
Hướng dẫn tạo dropdown menu với wp_nav_menu() trong wordpress
Thay đổi dễ dàng theo phong cách của riêng của bạn
NULLHướng dẫn tạo dropdown menu với wp_nav_menu() trong wordpress
Tác giả : Số lượt xem : 3386 lượt xem
Nếu các bạn đã và đang học wordpress thì code tạo menu dropdown cho wordpress cho người mới chắc cũng gặp khá nhiều rắc rối. Hôm nay mình xin giới thiệu các bạn cách tạo menu cho wordpress sử dụng bootstrap + thư viện walker_nav_menu . Các bạn hãy làm theo các bước dưới đây :
Bước 1 : Trước tiên mình tạo menu trong quản trị website wordpress
Bạn chỉ việc khởi tạo menu và đưa vào quản trị dễ dàng. Chỉ cần copy đoạn code dưới đây cho vào file function.php của themes mà bạn đang dùng là oke .
|
1 2 3 4 5 6 7 8 9 |
add_theme_support( 'menus' ); add_action( 'init', 'register_my_menus' ); function register_my_menus() { register_nav_menus( array( 'main-nav' => 'Main Navigation' )); } |
Save lại và vào quản trị f5 lại trình duyệt bạn vào phần quản lý menu ở mục Giao diện > Menu bạn sẽ thấy hiện ra menu Main Navigation mà bạn vừa tạo ra.
Tiếp tục bạn cần tạo ra một mục menu và chon trình đơn cho menu đó. vậy là mục quản trị đã xong . Việc tiếp theo ta cần gọi menu đó ra hiển thị nơi mà mình muốn .
Bước 2 : Ghép code html vào hàm wp_nav_menu và gọi menu hiển thị ra ngoài
Bây giờ bạn tìm tới nơi mà mình muốn hiện menu và chúng ta sẽ sử dụng hàm wp_nav_menu() bằng cách copy toàn bộ code dưới đây và đặt vào vị trí mà bạn muốn . Đây là đoạn html của mình ban đầu trước khi cho vào code.
|
1 2 3 4 5 6 7 |
<div class="col-md-6 col-sm-6 vn4u-lienket"> <ul> <li><a href="#">Tin tức</a></li> <li><a href="#">Quy Trình</a></li> <li><a href="#">Thanh Toán</a></li> </ul> </div> |
Sau đó mình sẽ cho vào hàm wp_nav_menu() code sẽ thành
|
1 2 3 4 5 6 7 8 9 10 11 |
<div class="col-md-6 col-sm-6 vn4u-lienket"> <?php $wp_bootstrap_navwalker = new wp_bootstrap_navwalker; wp_nav_menu(array( 'theme_location' => 'main-nav', 'items_wrap' => '<ul>%3$s</ul>', 'walker' => $wp_bootstrap_navwalker ) ); ?> </div> |
Các bạn chú ý nhé. theme_location phải là tên mà chúng ta đã đăng ký ở register_menu bên trên nhé. Và trong đoạn code trên mình có đề cập tới wp_bootstrap_navwalker thì các bạn click vào đây để tải và nhớ include nó ở đầu file function nhé
|
1 |
require_once dirname( __FILE__ ) .'/walker.php'; |
Kết quả :
Thế là xong rồi đó các bạn ! Các bạn chỉ việc lưu lại và ra ngoài trình duyệt F5 lại để tận hưởng kết quả . Nếu trong quá trình lập trình wordpress các bạn gặp bất cứ khó khăn gì thì hãy nhắn tin và comment bên dưới nhé, Mình sẽ làm và giải thích rõ cho các bạn.
Chúc các bạn thành công !
Hỗ trợ trực tuyến
- Hỗ trợ khách hàng
- 0941 254 937 Gia Khang
- Email chăm sóc khách hàng
- support@thietkewebsite500k.net
