Tích Hợp NavBar Bootstrap Vào WordPress Menu

Tích hợp navbar bootstrap vào wordpress menu

Twitter Bootstrap là 1 Frontend Framework đang được sử dụng rất rộng rãi bởi tính tiện dụng, dễ sử dụng, thiết kế đẹp của nó. Chính vì vậy, việc tích hợp Bootstrap vào Theme WordPress được nhiều Developer thực hiện. Nhưng trong quá trình thực hiện bạn sẽ gặp 1 số vấn đề liên quan đến cấu trúc HTML của Bootstrap điển hình là việc tích hợp NavBar Bootstrap vào WordPress Menu.

Không có gì đáng nói việc tích hợp NavBar vào WordPress Menu khi menu của bạn chỉ là 1 cấp. Nhưng nếu menu của bạn là menu đa cấp thì nó sẽ bị lỗi vì cấu trúc HTML của Navbar Bootstrap khác cấu trúc HTML Menu của WordPress.

Tích hợp navbar bootstrap vào wordpress menu

Trong bài viết này, tôi sẽ hướng dẫn các bạn tích hợp Navbar Bootstrap vào WordPress Menu sử dụng class wp bootstrap navwalker

Cấu trúc HTML của Navbar Bootstrap

Đầu tiên, chúng ta cùng nghiên cứu cấu trúc HTML của Navbar Bootstrap

Nhìn vào code trên, các bạn chỉ cần quan tâm đến đoạn code sau để tích hợp vào WordPress Menu, còn những cái còn lại ta để nguyên:

Chúng ta đã nhìn thấy menu dropdown có sự khác biệt. Đó là có class=”dropdown” và <ul class=”dropdown-menu”> trong khi menu mặc định WordPress chỉ có đoạn <ul class=”sub-menu”>

Sử dụng class wp bootstrap navwalker để gọi menu ra

Đầu tiên, bạn hãy download class wp bootstrap navwalker, và bỏ file wp_bootstrap_navwalker.php vào thư mục theme bạn đang sử dụng 

Tiếp theo, bạn thêm code sau vào đầu file functions.php (Nhớ sau <?php nhé)

Nếu file wp_bootstrap_navwalker.php đặt ở trong thư mục khác thì nhớ gọi đúng đường dẫn nhé.

Tiếp theo, bạn mở file header.php của bạn lên và thêm code sau vào nơi mà bạn muốn hiển thị menu

Các bạn đừng quên lưu lại và chạy thử nhé!

Kết luận

Trên đây, tôi hướng dẫn các bạn tích hợp Navbar Bootstrap vào WordPress Menu sử dụng class wp bootstrap navwalker, nếu xảy ra bất kỳ lỗi gì hoặc không hoạt động được hãy comment dưới bài viết này hoặc gửi email cho tôi.

[Total: 2    Average: 4/5]

1 phản hồi

  1. Cảm ơn bạn đã hướng dẫn. Mình đã hiển thị ra menu nhưng khi click vào Dropdown menu thì lại không sổ xuống. 🙁

    Reply

Leave a Comment.