Modifikasi Menu Wordpress untuk Bootstrap Themes

Artikel ini dibuat sebagai catatan ketika saya membuat theme wordpress menggunakan Bootstrap Framework. 

Bagi yang sudah terbiasa membuat theme wordpress, maka pasti sering menggunakan fungsi wp_nav_menu(); Fungsi tersebut berfungsi untuk menampilkan menu pada frontend wordpress itu sendiri.
Ketika saya mencoba menggunakannya pada Bootstrap Framework, saya mengalami kesulitan dalam mengatur tampilan menu tersebut. Hal ini dikarenakan fungsi wp_nav_menu akan menampilkan div container lengkap dengan format class, ul dan li, sementara format tersebut tidak sesuai dengan konfigurasi css pada bootstrap.
Untuk mengatasi masalah ini, maka saya mengunakan fungsi walker_nav_menu. Berikut adalah tutorialnya.

Tambahkan code berikut ini pada berkas functions.php

class CB_Walker_Nav_Menu extends Walker_Nav_Menu {
 
   function start_lvl(&$output, $depth = 0, $args = array()) {
      $output .= '
';
   }
 
   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( '', ' ', $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);
    }
}

Tambahkan juga pada berkas style.css code berikut :

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu>.dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: 0;
    margin-left: -1px;
    -webkit-border-radius: 0 6px 6px 6px;
    -moz-border-radius: 0 6px 6px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover>.dropdown-menu {
    display: block;
}
.dropdown-submenu>a:after {
    display: block;
    content: " ";
    float: right;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
    border-width: 5px 0 5px 5px;
    border-left-color: #ccc;
    margin-top: 5px;
    margin-right: -10px;
}
.dropdown-submenu:hover>a:after {
    border-left-color: #fff;
}

Selanjutnya pada tambahkan kode berikut untuk menampilkan menu.

wp_nav_menu(array(
    'container_class' => 'navbar-collapse collapse',
    'theme_location'  => 'primary_nav', // bagian ini didefenisi pada register_nav_menus()
    'menu_class'      => 'nav navbar-nav menu',
    'walker'          => new CB_Walker_Nav_Menu,
));

Sedangkan bila pada menu terdapat bagian kiri dan kanan makan gunakan code berikut :

wp_nav_menu(array(
    'container_class' => 'navbar-collapse collapse',
    'theme_location'  => 'primary_nav', // bagian ini didefenisi pada register_nav_menus()
    'menu_class'      => 'nav navbar-nav menu',
    'walker'          => new CB_Walker_Nav_Menu,
));

Demikian cara modifikasi menu wordpress untuk diimplementasi pada Bootstrap Themes

sumber :
http://bootsnipp.com/snippets/featured/multi-level-dropdown-menu-bs3
http://wordpress.stackexchange.com/questions/88604/bootstrap-drop-down-menu-with-wp-nav-menu