Membuat Menu Nav Walker Wordpress

Membuat Menu responsive wordpress dengan metode Nav Walker

Baik para sahabat Blogger sekalian dengan adanya beberapa permintaan dari beberapa temen yang sering kontak dengan saya, saya mendapatkan permintaan bagaimana caranya membuat Navigasi dengan Nav Walker khususnya dengan memakai Framework Bootstrap.

Rasanya tidak asing langi bagi temen - temen yang sudah sering terjun di dunia perwebsitan bahwa bootstrap sangat banyak sekali digunakan diberbagai platform guna mempercepat kinerja dan memudahkan kita dalam merancang website, 

termasuk diantara beberapa website ternama yang memakai bootstrap adalah exspedisi, JNE dan Tiki serta lainnya, Juga beberapa Instansi pemerintahan DLL.

baik kita akan langsung ke materi pembahasan bahwa untuk memakai theme wordpress dengan navigasi menu framework Bootstrap adalah dengan menggunakan Nav Walker yakni fungsi yang mendefinisikan menu navigasi yang kita punya untuk mengatur dropdown dan lain - lainnya

jika para sahabat belum mengetahui bootstrap itu apa, silahkan langsung mengunjungi web resminya di www.getbootstrap.com disitu lengkap dengan keterangan dan cara penggunaannya,

yang perlu diperhatikan sebelum membuat navigasi menu wordpress dengan bootstrap adalah menyertakan style css bootstrap.css ke theme kita serta bootstrap.js / bootstrap.min.js

Boleh memaki CDN atau mengunduh berkasnya dari web resminya. saya tidak akan membahas cara menaruh css dan js bootstrap. karena saya anggap temen2 sudah tahu semuanya oke. sekarang kita lansung pada materi, dan silahkan temen2 buka file dalam folder theme temen2 masing2 namanya adalah functions.php

salin kode berikut dan tambahkan di file functions.php theme temen2 sekalian.

// nav menu wallker
class CB_Walker_Nav_Menu extends Walker_Nav_Menu {

   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= '<ul class="dropdown-menu">';
   }

   function start_el(&$output, $item, $depth = 0, $args = array(), $id = 0) {
       $item_html = '';
       parent::start_el($item_html, $item, $depth, $args);

       if ( $item->is_dropdown && $depth === 0 ) {
           $item_html = str_replace( '<a', '<a class="dropdown-toggle" data-toggle="dropdown"', $item_html );
           $item_html = str_replace( '</a>', ' <b class="caret"></b></a>', $item_html );
       }

       $output .= $item_html;
    }

    function display_element($element, &$children_elements, $max_depth, $depth = 0, $args, &$output) {
        if ( $element->current )
          $element->classes[] = 'active';

        $element->is_dropdown = !empty( $children_elements[$element->ID] );

        if ( $element->is_dropdown ) {
            if ( $depth === 0 ) {
                $element->classes[] = 'dropdown';
            } elseif ( $depth >= 1 ) {
                $element->classes[] = 'dropdown-submenu';
            }
        }

      parent::display_element($element, $children_elements, $max_depth, $depth, $args, $output);
    }
}

jika sudah selesai di salin dan ditambahkan di functions maka di save. kita lanjutkan ke file dimana biasanya navigasi menu ditambahkan oleh developer, ada pada file header.php atau silahkan cari di theme temen2 karena setiap developer berbeda beda dalam meletakkan theme ini oke.

ini adalah kode yang haru kita salain atau kita ganti dengan menambahkan fungsi nav walker yang sudah kita buat diatas

<div id="custom-bootstrap-menu" class="navbar navbar-default" role="navigation"> 
 <div class="navbar-header">
 <a class="navbar-brand" href="<?php echo home_url(); ?>">
 <span class="glyphicon glyphicon-home"></span>
 </a>

 <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-menubuilder">
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
 </button>
 </div>

 <div class="collapse navbar-collapse navbar-menubuilder">
  <?php wp_nav_menu( 
   array( 
   'theme_location'  => 'main-menu',
       'items_wrap'     => '<ul class="nav navbar-nav navbar-left">%3$s</ul>',
       'walker'          => new CB_Walker_Nav_Menu,
     )
  ); ?>
 </div>
</div>

yang perlu kita perhatikan adalah kede berikut :

<div class="collapse navbar-collapse navbar-menubuilder">
<?php wp_nav_menu(
array(
'theme_location' => 'main-menu',
    'items_wrap'     => '<ul class="nav navbar-nav navbar-left">%3$s</ul>',
    'walker'          => new CB_Walker_Nav_Menu,
)
); ?>
</div>

pada tulisan yang berwarna kuning saya jelaskan bahwa fungsi yang kita tuliskan harus sama dengan yang ada di file funstions.php

Tidak ada kata tidak bisa dalam membuat website semua pasti ada jalan keluarnya, dengan adanya kemauan pasti ada jalan boss..

oke silahkan anda langsung praktekkan saja, jika ada kode yang tidak valid silahkan langsung menghubungi saya atau Komentar di Blog Bimbel Wordpress ini

Terimakasih

GOOG LUCK