lawang code

lawang Code


Tanyakan kode disini

Memodifikasi fungsi list kategori wordpress sesuai dengan yang kita inginkan

oleh handita okviyanto 5 tahun yang lalu

Seorang developer wordpress pastinya sudah tak asing lagi dengan fungsi ini :

<?php wp_list_categories( $args ); ?> 

dimana $args adalah

<?php $args = array(
'show_option_all'    => '',
'orderby'            => 'name',
'order'              => 'ASC',
'style'              => 'list',
'show_count'         => 0,
'hide_empty'         => 1,
'use_desc_for_title' => 1,
'child_of'           => 0,
'feed'               => '',
'feed_type'          => '',
'feed_image'         => '',
'exclude'            => '',
'exclude_tree'       => '',
'include'            => '',
'hierarchical'       => 1,
'title_li'           => __( 'Categories' ),
'show_option_none'   => __('No categories'),
'number'             => null,
'echo'               => 1,
'depth'              => 0,
'current_category'   => 0,
'pad_counts'         => 0,
'taxonomy'           => 'category',
'walker'             => null
); ?>

Nah fungsi ini banyak sekali argumen dimana kita dapat membuat list kategori sesuai dengan yang kita inginkan. Tetapi class dan id dari tiap menu tersebut masih menggunakan hasil generate dari list kategori yaitu :

<li class="categories">Categories
<ul>    
    <li class="cat-item cat-item-1">
        <a href="http://localhost:88/wordpress/category/internet/" title="internet version">Internet</a>
    </li>
    <li class="cat-item cat-item-4">
        <a href="http://localhost:88/wordpress/category/mobile/" title="View all posts filed under Mobile">Mobile</a>
        <ul class="children">
            <li class="cat-item cat-item-5">
                <a href="http://localhost:88/wordpress/category/mobile/android/" title="View all posts filed under Android">Android</a>
            </li>
            <li class="cat-item cat-item-6">
                <a href="http://localhost:88/wordpress/category/mobile/ios/" title="View all posts filed under iOS">iOS</a>
            </li>
        </ul>
    </li>
</ul>

Nah jika anda ingin membuat id dan class sendiri untuk masing masing ul dan li anda dapat memanfaatkan sebuah argumen dalam fungsi tersebut. Di sana ada sebuah argumen walker. Nah kelas ini lah nantinya yang akan kita modifikasi.

langsung aja bagaimana cara memodifikasinya :

class Walker_Custom extends Walker_Category {  

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

  function end_lvl(&$output, $depth=0, $args=array()) {  
    $output .= "</ul>\n";  
  }  

  function start_el(&$output, $item, $depth=0, $args=array()) { 
      //jumlah child
    $cats = get_categories('child_of='.$item->cat_ID);
      // print_r($cats);

    $cat_name = esc_attr( $item->name );
    if($item->parent==0){
      $output .= "<li class=\"dropdown\">";
        //jika jumlah child lebih besar dari 0
      if(count($cats)>0)
        $link = '<a class="dropdown-toggle" data-toggle="dropdown" href="#" >' . $cat_name . '<b class="caret"></b></a>';
      else
          // $link = '<a class="dropdown-toggle" data-toggle="dropdown" href="#" >' . $cat_name . '</a>';
        $link = '<a class="dropdown-toggle" data-toggle="dropdown" href="' . esc_url( get_term_link($item) ) . '" >' . $cat_name . '</a>';
    }
    else{
      $output .= "<li>";
      $link = '<a  href="' . esc_url( get_term_link($item) ) . '" >' . $cat_name . '</a>';
    }
    $output.=$link;
  }  

  function end_el(&$output, $item, $depth=0, $args=array()) {  
    $output .= "</li>\n";  
  }  
}  
function lawangcode_header_news(){
  echo '<ul class="nav nav-pills">';
  wp_list_categories(array('title_li'=> false,'walker'=> new Walker_Custom));
  echo '</ul>';
}

nah di dalam tiap tiap fungsi tersebut kita memakai sebuah kelas Walker_Custom dimana di sana didefinisikan bagaimana kita men-generate kategori dengan custom code yang telah kita ubah..

Anda dapat melihat bagaimana ane menambahkan berbagai tambahan class seperti nav, nav-pills, dropdown,dropdown-toggle dan yang lainnya.

Semoga bermanfaat ..

wordpress
Anda harus login terlebih dahulu untuk memberikan komentar

Recent Tag

X 5
X 6
X 1
X 21
X 2
X 3
X 1
X 255
X 1

Bantuan

Help

Feedback

Help