Home » Internet » Wordpress » Kode Breadcrumbs WordPress Tanpa Plugin

Kode Breadcrumbs WordPress Tanpa Plugin

Cara manual membuat menu breadcrumbs WordPress tanpa plugin. Navigasi breadcrumbs pada blog merupakan suatu petunjuk bagi pengunjung untuk mengetahui posisinya dalam menelusuri konten situs. Sehingga menjadi komponen penting bagi blog, khususnya yang mempunyai konten dan sub kategori/page yang banyak.

Memasang breadcrumbs pada blog WordPress bisa menggunakan plugin. Akan tetapi saya termasuk orang yang berusaha menggunakan sedikit mungkin plugin yang terpasang, lebih suka memasang kode langsung pada theme WordPress. Tujuannya agar loading blog cepat, tidak terbebani aneka ragam plugin saat diakses.

Yang perlu diperhatikan, untuk mencoba pasang suatu kode, baik php atau js dll sebaiknya coba dulu secara offline atau server local (localhost). Sehingga kekurangan dan kelebihannya sudah kita ketahui.

Gambar breadcrumbs WordPress

Dan jangan lupa untuk backup file maupun theme terlebih dahulu, untuk berjaga-jaga jika ada error yang tidak terduga. Berikut kode breadcrumbs WordPress yang sudah terpasang dalam blog ini.

Buka file function.php pada theme yang dipakai. Atau jika melalui dashboard WordPress, pilih AppearanceEditor, kemudian pilih Theme Function (function.php).

Copy kode di bawah ini

function dimox_breadcrumbs() {

  $showOnHome = 0; // 1 - show breadcrumbs on the homepage, 0 - don't show
  $delimiter = '»'; // delimiter between crumbs
  $home = 'Home'; // text for the 'Home' link
  $showCurrent = 1; // 1 - show current post/page title in breadcrumbs, 0 - don't show
  $before = '<span>'; // tag before the current crumb
  $after = '</span>'; // tag after the current crumb

  global $post;
  $homeLink = get_bloginfo('url');

  if (is_home() || is_front_page()) {

    if ($showOnHome == 1) echo '<div id="crumbs"><a href="' . $homeLink . '">' . $home . '</a></div>';

  } else {

    echo '<div id="crumbs"><a href="' . $homeLink . '">' . $home . '</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 $before . 'Archive by category "' . single_cat_title('', false) . '"' . $after;

    } elseif ( is_search() ) {
      echo $before . 'Search results for "' . get_search_query() . '"' . $after;

    } 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 $before . get_the_time('d') . $after;

    } elseif ( is_month() ) {
      echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
      echo $before . get_the_time('F') . $after;

    } elseif ( is_year() ) {
      echo $before . get_the_time('Y') . $after;

    } elseif ( is_single() && !is_attachment() ) {
      if ( get_post_type() != 'post' ) {
        $post_type = get_post_type_object(get_post_type());
        $slug = $post_type->rewrite;
        echo '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
        if ($showCurrent == 1) echo $before . get_the_title() . $after;
      } else {
        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        if ($showCurrent == 1) echo $before . get_the_title() . $after;
      }

    } elseif ( !is_single() && !is_page() && get_post_type() != 'post' && !is_404() ) {
      $post_type = get_post_type_object(get_post_type());
      echo $before . $post_type->labels->singular_name . $after;

    } elseif ( is_attachment() ) {
      $parent = get_post($post->post_parent);
      $cat = get_the_category($parent->ID); $cat = $cat[0];
      echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
      echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $delimiter . ' ';
      if ($showCurrent == 1) echo $before . get_the_title() . $after;

    } elseif ( is_page() && !$post->post_parent ) {
      if ($showCurrent == 1) echo $before . get_the_title() . $after;

    } 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 . ' ';
      if ($showCurrent == 1) echo $before . get_the_title() . $after;

    } elseif ( is_tag() ) {
      echo $before . 'Posts tagged "' . single_tag_title('', false) . '"' . $after;

    } elseif ( is_author() ) {
      global $author;
      $userdata = get_userdata($author);
      echo $before . 'Articles posted by ' . $userdata->display_name . $after;

    } elseif ( is_404() ) {
      echo $before . 'Error 404' . $after;
    }

    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>';

  }
} // end dimox_breadcrumbs()

Selanjutnya paste di bawah kode <?php pada file function.php kemudian Save untuk menyimpan perubahan tersebut. Langkah selanjutnya untuk menempatkan atau memanggil fungsi breadcrumb blog tersebut. Umumnya terletak di atas judul posting, silahkan buka file header.php
Copy kode di bawah :

<?php if(function_exists('dimox_breadcrumbs'))dimox_breadcrumbs();?>

Paste di sekitar area paling bawah file header.php, untuk disesuaikan dengan struktur theme.

Agar tampilan dapat disesuaikan dengan kebutuhan dan hajat hidup admin blog hehehe, tambahkan kode di bawah ke dalam file style.css (Stylesheet) theme

#crumbs{margin:5px 20px;padding:5px 0}
#crumbs .current{background:none;color:#777;border:none}

Dengan kode css ini desain breadcrumbs WordPress dapat disesuaikan, mulai warna teks, background, border, margin, efek shadow dll.
Kode breadcrumbs di atas artikel posting tidak berupa link. Jika ingin menjadi link ke artikel, maka cari kode seperti di bawah (yang saya warna hijau kode aslinya):

        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        if ($showCurrent == 1) echo $before . get_the_title() . $after;

ganti dengan kode di bawah ini

        $cat = get_the_category(); $cat = $cat[0];
        echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
        if ($showCurrent == 1) echo $before . '<a href="' . get_permalink($page->ID) . '"title="' . get_the_title() . '">' . get_the_title() . '</a>' . $after;

Perubahan sebenarnya hanya baris ke-tiga saja. Hasilnya seperti yang saya pakai sekarang. Dengan menggunakan breadcrumbs ini, maka kategori yang berada di bawah posting konten saya hapus, untuk meminimalkan permintaan ke server (http request). Agar loading blog cepat sesuai dengan tips SEO yang umum berlaku.

Terkadang orang mempunyai keinginan yang berbeda dalam mendesain blog. Misalnya navigasi breadcrumbs di atas menginginkan untuk home dan delimiter menggunakan gambar tertentu agar menarik dan tampil beda. Maka cukup mengganti kode home dan delimiter seperti di bawah:

    $delimiter = '&raquo;'; // delimiter between crumbs
    $home = 'Home'; // text for the 'Home' link

ganti dengan kode di bawah:

    $delimiter = '<img src="/path/to/divider.gif" alt="" />';  // delimiter between crumbs
    $home = '<img src="/path/to/home.jpg" alt="Home" />';  // text for the 'Home' link

Ganti path... dengan direktori atau URL image. Untuk mengatur tata letak image, tambahkan ke dalam style.css kode di bawah:

#crumbs img { vertical-align: middle; }

Dengan adanya breadcrumbs blog ini maka pengunjung dapat mengetahui kedalaman posisinya dalam menelusuri konten. Selain itu search engine juga turut bersuka-cita karena blog semakin ber-SEO ria sehingga tidak ragu untuk memberikan referensi kepada seseorang yang mengetikkan keyword di mesin pencariannya he..he..

Tidak hanya breadcrumbs blog, jika Anda juga berminat mengurangi plugin, silahkan copy kode-kodenya tentang membuat pagenavi blog, random post dan artikel terkait (related posts) tanpa plugin semua.

Demikian saja sharing kode php untuk membuat breadcrumb WordPress tanpa plugin. Artikel pertama setelah blog saya rombak total, mumpung banyak temennya akibat dari efek Google Panda update :) Maaf, terima kasih dan semoga bermanfaat.

Credit to : Dimox.net

Share to : Facebook | Twitter | Digg | Google | Technorati | Stumbleupon | Delicious | Reddit |

Artikel terkait :

Random Posts :

2 Comments.

  1. I know this if off topic but I’m looking into starting my own blog and was wondering what all is needed to get setup? I’m assuming having a blog like yours would cost a pretty penny?
    I’m not very internet savvy so I’m not 100% positive. Any recommendations or advice would be greatly appreciated. Kudos

  2. Terima kasih banyak pak, akan saya terapkan di web saya, sangat bermanfaat sekali pak. Kalau pakai plugin kan menguras disk

Leave a Comment