klasa BootstrapNavMenuWalker

class BootstrapNavMenuWalker extends Walker_Nav_Menu {


  function start_lvl( &$output, $depth ) {

    $indent = str_repeat( "\t", $depth );
    $submenu = ($depth > 0) ? ' sub-menu' : '';
    $output    .= "\n$indent<ul class=\"dropdown-menu$submenu depth_$depth\">\n";

  }

  function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 ) {


    $indent = ( $depth ) ? str_repeat( "\t", $depth ) : '';

    $li_attributes = '';
    $class_names = $value = '';

    $classes = empty( $item->classes ) ? array() : (array) $item->classes;

    // managing divider: add divider class to an element to get a divider before it.
    $divider_class_position = array_search('divider', $classes);
    if($divider_class_position !== false){
      $output .= "<li class=\"divider\"></li>\n";
      unset($classes[$divider_class_position]);
    }

    $classes[] = ($args->has_children) ? 'dropdown' : '';
    $classes[] = ($item->current || $item->current_item_ancestor) ? 'active' : '';
    $classes[] = 'menu-item-' . $item->ID;
    if($depth && $args->has_children){
      $classes[] = 'dropdown-submenu';
    }


    $class_names = join( ' ', apply_filters( 'nav_menu_css_class', array_filter( $classes ), $item, $args ) );
    $class_names = ' class="' . esc_attr( $class_names ) . '"';

    $id = apply_filters( 'nav_menu_item_id', 'menu-item-'. $item->ID, $item, $args );
    $id = strlen( $id ) ? ' id="' . esc_attr( $id ) . '"' : '';

    $output .= $indent . '<li' . $id . $value . $class_names . $li_attributes . '>';

    $attributes  = ! empty( $item->attr_title ) ? ' title="'  . esc_attr( $item->attr_title ) .'"' : '';
    $attributes .= ! empty( $item->target )     ? ' target="' . esc_attr( $item->target     ) .'"' : '';
    $attributes .= ! empty( $item->xfn )        ? ' rel="'    . esc_attr( $item->xfn        ) .'"' : '';
    $attributes .= ! empty( $item->url )        ? ' href="'   . esc_attr( $item->url        ) .'"' : '';
    $attributes .= ($args->has_children)      ? ' class="dropdown-toggle" data-toggle="dropdown"' : '';

    $item_output = $args->before;
    $item_output .= '<a'. $attributes .'>';
    $item_output .= $args->link_before . apply_filters( 'the_title', $item->title, $item->ID ) . $args->link_after;
    $item_output .= ($depth == 0 && $args->has_children) ? ' <b class="caret"></b></a>' : '</a>';
    $item_output .= $args->after;


    $output .= apply_filters( 'walker_nav_menu_start_el', $item_output, $item, $depth, $args );
  }


  function display_element( $element, &$children_elements, $max_depth, $depth=0, $args, &$output ) {
    //v($element);
    if ( !$element )
      return;

    $id_field = $this->db_fields['id'];

    //display this element
    if ( is_array( $args[0] ) )
      $args[0]['has_children'] = ! empty( $children_elements[$element->$id_field] );
    else if ( is_object( $args[0] ) )
      $args[0]->has_children = ! empty( $children_elements[$element->$id_field] );
    $cb_args = array_merge( array(&$output, $element, $depth), $args);
    call_user_func_array(array(&$this, 'start_el'), $cb_args);

    $id = $element->$id_field;

    // descend only when the depth is right and there are childrens for this element
    if ( ($max_depth == 0 || $max_depth > $depth+1 ) && isset( $children_elements[$id]) ) {

      foreach( $children_elements[ $id ] as $child ){

        if ( !isset($newlevel) ) {
          $newlevel = true;
          //start the child delimiter
          $cb_args = array_merge( array(&$output, $depth), $args);
          call_user_func_array(array(&$this, 'start_lvl'), $cb_args);
        }
        $this->display_element( $child, $children_elements, $max_depth, $depth + 1, $args, $output );
      }
      unset( $children_elements[ $id ] );
    }

    if ( isset($newlevel) && $newlevel ){
      //end the child delimiter
      $cb_args = array_merge( array(&$output, $depth), $args);
      call_user_func_array(array(&$this, 'end_lvl'), $cb_args);
    }

    //end this element
    $cb_args = array_merge( array(&$output, $element, $depth), $args);
    call_user_func_array(array(&$this, 'end_el'), $cb_args);

  }

}

Wstęp do omówienia kodu.
Aby dostosować i zintegrować menu WP z menu w stylu Bootstrap należy użyć wbudowanej klasy Walker_Nav_Menu.
Odpowiada ona za dostosowanie wyglądu i zachowania oraz ogólnej specyfikacji menu w WP. Realizacja tego zagadnienia może być podejmowana w różnoraki sposób, przedstawiany tutaj jest tylko jednym z nich. Aby podejrzeć strukture menu najlepiej posłużyć się firebugiem.
Linki
Poniżej umieszczam linki mogące pomóc w rozumieniu tego zagadnienia
link do castelaniego walker
link do polskiego kursu boostrap do walker
Omówienie kodu:
1-BootstrapNavMenuWalker jest zdefiniowanym rozszerzeniem klasy Walker_Nav_Menu (klasy WordPressa)
2- function start_lvl( &$output, $depth )- odpowiada za generowania tagu ul, przyjmuje parametry:referencje zmiennej output która będzie generować kod wyjściowy ( praca na oryginale obiektu a nie jego kopii) , depth – oznacza ilość zagnieżdżeń elementów ul (submenu)
6. indent ang. wcięcie – odpowiada za printowanie wcięć w strukturze drzewiastej menu i jest zależny od zagnieżdżeń submenu. str_repeat jako f., php bedzie powtarzała ilość wcięć za pomocą tabulatora.
7. Jeśli liczba zagnieżdżeń ( jeśli jest submenu) będzie większa od zera , należy przydzielić tagowi ul klasę submenu jeśli nie brak takiej klasy.
8. Printowanie kodu wyjściowego elementu ul.
12 function start_el( &$output, $item, $depth = 0, $args = array(), $id = 0 )
start_el – odpowiada za generowanie elementów li a span po elemencie ul. Parametry: output- kod wyjściowy, item-pozycja w menu, depth ilość zagnieżdżeń ( domyślnie zero) , args jako tablica odpowiada za nazewnictwo klas, id ktore bedzie wspołtworzylo nazy klas poszczególnych elementów
15-20 Określanie wcięć uzależnionych od liczby submenu,wstępne określanie nazw klas i atrybutów li na puste.
Przydzielenie aktualnej bieżącej nazwy klas.
23-27 Wyszukiwanie klasy divider , jesli istnieje przydzielanie jej do li oraz likwidacja odpowiedniego indexu w tablicy classes, przetrzymującej nazwy klas.
29-34 Jeśli dany element li będzie miał potomka to przydzielona mu zostanie klasa dropdown.
30 Jeśli zostanie wybrana dana bieżąca pozycja lub bieżąca pozycja ma przodka nadaj jej klase active.
31. Dynamiczne tworzenie nazwy klasy pozycji menu item nadajacej jej odpowidnią wartość id
32-33 Jeśli istnieja zagnieżdżenia (submenu) oraz li ma potomków to daja li klase drop down submenu.
37 Join- alias implode laczenie tablic, apram:1- znki za pomoca ktorych tablice beda laczone, 2- laczone tablice
apply_filters- wykonaj wczesniej zalaczonefiltry ( filtry zmieniaja wartosc zmiennych) param: nazwa filtra, 2- funkcja ktora ma sie wykonywac wraz z filtrem
array_filter PHP iteruje eleemnty tablicy i przesyla je do zmiany przez funkcje zwrotna , tutaj param: tablica do iteracji
WordPress nie zatwierdzi zmian w menu bez zmian przeprowadzonych przez system filtrów WP ;nav_menu_css_class – nazwa filtra odnoszacego się do menu WP.
40-58 Tutaj są kształtowane i printowane poszczególne wartości atrybów pozycji oraz klas pozycji. Generowane są również dynamiczne id pozycji współtworzące nazwy klas pozycji. Wszytsko to przy użyciu modyfikacji wbudowanych zmiennych WP za pomocą funkcjonalności filtrów WP (apply_filters)
62.display_element-printowanie eleemntów które mają eleemmnty potomne lub nie mają ich wcale.
Parametry-obiekt elementu,dzieci elementu,maksymalna głębokość zagnieżdżenia,poziom zagnieżdżenia danego bieżącego eleemntu,tablica argumentów, dane wyjściowe przesyłane przez referencje używane do załączania dodatkowej treści.
64. Jeśli nie ma żadnych eleemntów to przerwij działanie funkcji.
69-75. Wykryj czy element ma eleemnty potomne.I printuj je wywołując w tym funkcje start_el.
80-92 Printowanie elementów z ograniczeniem zagnieżdżeń.
95-107. Printowanie nowych poziomów.
Konkluzja.
Bardziej szczegółówy opis zamieszczę w nowszej wersji tutoriala. Wszystkie funkcje sa nadpisanymi funkcjami natywnej klasy walker nav menu. Pierwsze dwie przygotowywaly kod html do printowania. Ostatnia printowała go w wersji ostatecznej.

Share This

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *