Cara Integrasi Menu Navigasi Bootstrap ke Theme WordPress

Bootstrap sebagai framework front-end open source sering digunakan developer dalam membangun sebuah tampilan website guna mempercepat prosesnya.

Namun ketika ingin membuat tema (theme) di WordPress akan terdapat beberapa permasalahan lantaran tentunya bootstrap memiliki class CSS sendiri.

Bagi yang paham bootstrap dan membuat tema menggunakan framework berbasis HTML dan CSS ini mengetahui salah satu unsur penting yaitu menu navigasi bootstrap.

Tanpa panjang lebar langsung saja mengintegrasikan navigasi bootstrap 4.3 dengan tema WordPress. Jika ada pertanyaan, langsung saja tulis pada kolom komentar.

Om ambil contoh navigasi dari bootstrap seperti ini:

<header>
  <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
    <a class="navbar-brand" href="#">Carousel</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" placeholder="Search" aria-label="Search">
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

Download wp-bootstrap-navwalker di Github. Tempatkan file tersebut di folder tema Anda, misalnya Om taruh di folder utama tema. Kemudian buka file functions.php dan paste code berikut:

require get_template_directory() . '/class_wp_bootstrap_navwalker.php';

Buka file header.php tema dan ganti bagian tersebut seperti ini:

<header>
  <nav class="navbar navbar-expand-md navbar-light fixed-top bg-light">
    <a class="navbar-brand" href="#">Carousel</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-controls="bs-example-navbar-collapse-1" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
    <?php if ( has_nav_menu( 'primary' ) ) : 
		        
		wp_nav_menu(
			array(
				'theme_location'  => 'primary',
				'depth'           => 2,
				'container_class' => 'collapse navbar-collapse',
				'container_id'    => 'bs-example-navbar-collapse-1',
				'menu_class'      => 'navbar-nav mr-auto',
				'fallback_cb'     => 'WP_Bootstrap_Navwalker::fallback',
				'walker'          => new wp_bootstrap_navwalker()
			)
		);
		      
	endif; ?>

	  <?php 
 	        if(isset($_GET['s'])) :
	    	   $search_terms = htmlspecialchars( $_GET["s"] ); 
		else :
		   $search_terms = '';
		endif;
		?>
      <form class="form-inline mt-2 mt-md-0">
        <input class="form-control mr-sm-2" type="text" name="s" placeholder="Search" aria-label="Search"<?php if ( $search_terms !== '' ) { echo ' value="' . $search_terms . '"'; } ?>>
        <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
      </form>
    </div>
  </nav>
</header>

Ganti primary sesuai nama nav menu yang telah diregistrasi di tema Anda di fungsi register_nav_menus().

Selain list menu dan dropdown, skrip di atas sekaligus mengintegrasikan dengan tampilan search (pencarian) bootstrap ke WordPress. Dapat dilihat pada form terdapat tambahan skrip php.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *