Membuat Breadcrumb di WordPress

Wahyu Raja Butar-Butar Reply 07:08
Pada tulisan ini kita akan mencoba membuat breadcrumb di wordpress, sebelum nya sudahkah anda mengetahui apa yang dimaksud dengan breadcrumb?
Jika anda belum mengetahui silahkan baca penjelasannya berikut ini dari website wikipedia.

Jika anda seorang wordpress theme developer / theme maker pastinya harus memikirkan untuk menyertakan breadcrumb pada template yang anda buat. Karena ini merupakan elemen yang penting dalam sebuah website, sangat penting juga untuk SEO.
Breadcrumbs biasanya muncul secara horizontal di bagian atas suatu halaman web, sering di bawah title bar atau header. Yang berguna untuk memudahkan pengunjung website dalam hal navigasi ketika sebuah website memiliki kedalaman sub menu yang sangat banyak. Dengan adanya breadcrumb user tidak akan bingung menu apa saja yang sudah dia buka sebelum dia sampai disuatu halaman, sehingga dia bisa dengan mudah kembali ke halaman-halaman sebelumnya.
Breadcrumbs use a single line of text to show a page’s location in the site hierarchy. While secondary, this navigation technique is increasingly beneficial to users – Jacob Nielsen.
Contohnya Bentuk Breadcrumb:
Home page > Section page > Subsection page > Sub Subsection page
Atau
Home page : Section page : Subsection page : Sub Subsection page
Bentuk pemisah silahkan disesuaikan dengan design website anda, tapi umum nya pemisah yang digunakan berbentuk panah >
Website apple.com sangat terkenal dengan breadcrumb nya, sering dijadikan acuan
Apple Breadcrumb
Apple Breadcrumb


Breadcrumb di WordPress

Nah kali ini kita akan coba membuat breadcrumb di wordpress, function ini sangat bagus dan gampang untuk di edit-edit.
Pertama buat function breadcrumb() di file functions.php di folder template kamu. Isinya adalah sebagai berikut:

function breadcrumbs() {
 
  $delimiter = '»';
  $name = 'Home'; //text for the 'Home' link
  $currentBefore = '<span class="current">';
  $currentAfter = '</span>';
 
  if ( !is_home() && !is_front_page() || is_paged() ) {
 
    echo '<div id="crumbs">';
 
    global $post;
    $home = get_bloginfo('url');
    echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';
 
    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      echo $currentBefore . 'Archive by category &#39;';
      single_cat_title();
      echo '&#39;' . $currentAfter;
 
    } elseif ( is_day() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('d') . $currentAfter;
 
    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo $currentBefore . get_the_time('F') . $currentAfter;
 
    } elseif ( is_year() ) {
      echo $currentBefore . get_the_time('Y') . $currentAfter;
 
    } elseif ( is_single() ) {
      $cat = get_the_category(); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_page() && !$post->post_parent ) {
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_page() && $post->post_parent ) {
      $parent_id  = $post->post_parent;
      $breadcrumbs = array();
      while ($parent_id) {
        $page = get_page($parent_id);
        $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
        $parent_id  = $page->post_parent;
      }
      $breadcrumbs = array_reverse($breadcrumbs);
      foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
      echo $currentBefore;
      the_title();
      echo $currentAfter;
 
    } elseif ( is_search() ) {
      echo $currentBefore . 'Search results for &#39;' . get_search_query() . '&#39;' . $currentAfter;
 
    } elseif ( is_tag() ) {
      echo $currentBefore . 'Posts tagged &#39;';
      single_tag_title();
      echo '&#39;' . $currentAfter;
 
    } elseif ( is_author() ) {
       global $author;
      $userdata = get_userdata($author);
      echo $currentBefore . 'Articles posted by ' . $userdata->display_name . $currentAfter;
 
    } elseif ( is_404() ) {
      echo $currentBefore . 'Error 404' . $currentAfter;
    }
 
    if ( get_query_var('paged') ) {
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
      echo __('Page') . ' ' . get_query_var('paged');
      if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
    }
 
    echo '</div>';
 
  }
}


Untuk menampilkan nya di post atau page tinggal memanggil function breadcrumbs() yang sudah dibuat.
<?php breadcrumbs();?>

Kira-kira hasilnya seperti berikut ini, diambil dari project yang penulis buat untuk sebuah website distributor pertamina.
Contoh Hasil Breadcrumb di WordPress
Contoh Hasil Breadcrumb di WordPress
Oke, sekian artikel kali ini, semoga ini bisa memperkaya pengetahuan anda tentang elemen-elemen yang ada diwebisite, perlu anda ketahui, penggunaan breadcrumb diwebsite anda termasuk salah satu teknik SEO yang cukup berguna.


Source : http://www.tutorial-webdesign.com/membuat-breadcrumb-di-wordpress/

Related Posts

Wordpress 7711657573378689291
Comments
0 Comments
Facebook Comments by Media Blogger

Post a Comment

Search

Google+ Followers

Popular Posts

Translate