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.

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

<nav class="navbar navbar-default" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display --> 
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
        </ul> 
      </li> 
    </ul>
  </div>
</nav>

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:

<div class="collapse navbar-collapse navbar-ex1-collapse"> 
    <ul class="nav navbar-nav"> 
      <li class="active"><a href="#">Link</a></li> 
      <li><a href="#">Link</a></li> 
      <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
          <li><a href="#">Action</a></li> 
          <li><a href="#">Another action</a></li> 
          <li><a href="#">Something else here</a></li> 
          <li><a href="#">Separated link</a></li> 
          <li><a href="#">One more separated link</a></li> 
        </ul> 
      </li> 
    </ul>
  </div>

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é)

require_once('wp_bootstrap_navwalker.php');

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

<nav class="navbar navbar-default" role="navigation"> 
<!-- Brand and toggle get grouped for better mobile display --> 
  <div class="navbar-header"> 
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> 
      <span class="sr-only">Toggle navigation</span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
      <span class="icon-bar"></span> 
    </button> 
    <a class="navbar-brand" href="#">Brand</a> 
  </div> 
  <!-- Collect the nav links, forms, and other content for toggling --> 
  <?php /* Primary navigation */
     wp_nav_menu( array(
       'theme_location' => 'main-menu', //Menu location của bạn
       'depth' => 2, //Số cấp menu đa cấp
       'container' => 'div', //Thẻ bao quanh cặp thẻ ul
       'container_class'=>'collapse navbar-collapse navbar-ex1-collapse', //class của thẻ bao quanh cặp thẻ ul
       'menu_class' => 'nav navbar-nav', //class của thẻ ul
       'walker' => new wp_bootstrap_navwalker()) //Cái này để nguyên, không thay đổi
);
?>
</nav>

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.