Cara Pasang Breadcrumb pada Wordpress

Membuat navigasi breadcrumb pada blog memang sangat bermanfaat karena yang paling utama adalah kita dapat mengetahui dimana jejak kita berada pada situs tertentu. Sebelumnya sudah dijelaskan tentang cara pasang breadcrumb pada blogger, dan sekarang bagi pengguna wodpress.org yang ingin memasang breadcrumb, ikuti langkah dibawah ini dengan cermat.

Berikut ada 2 cara membuat breadcrumb, yang membedakan kedua cara ini adalah output tampilanya anda dapat memilih tampilan yang mana yang anda inginkan.

Cara Pertama diambil dari Banhawi.com :

1. Buat sebuah file dengan nama breadcrumbs.php isi dengan kode dibawah ini:

<?php
/*
    Wordpress Breadcrumbs code by Banhawi.com
    
*/

    if ( is_home() ){}

    else {

        echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";

        echo "<li><a href=\" ".get_settings('home')." \">";
        echo  bloginfo('name')."</a></li>";

        if ( is_category() ) {
            $cate = single_cat_title("",false);
            $cat = get_cat_ID($cate);
            echo "<li>".(get_category_parents($cat, TRUE," &raquo; "))."</li>";
        }
        elseif ( is_archive() && !is_category() ) {
            echo "<li>Archives</li>";
        }
        elseif ( is_search() ) {
            echo "<li>Search Results</li>";
        }
        elseif ( is_404() ) {
            echo "<li>404 Not Found</li>";
        }
        elseif ( is_single() ) {
            $category = get_the_category();
            $category_id = get_cat_ID($category[0]->cat_name);
            $cat_link = get_category_link( $category_id );
            echo "<li><a href=\" ". $cat_link ." \">" . $category[0]->cat_name."</a></li>";
            echo "<li>";
            echo the_title()."</li>";
        }
        elseif ( is_page() ) {

            if ($post->post_parent) {

                $children = $post->post_title;

                $parent = get_page($post->post_parent);

                echo "<li>".$parent->post_title."</li>"."<li>".$children."</li>";
            }
            elseif ( $post->post_parent == 0 ) {

                echo "<li>";

                echo the_title()."</li>";

            }
        }

        echo "</ul></div>";
    }
?>

2. Upload file breadcrumbs.php yang dibuat diatas ke dalam folder theme anda (contoh:/public_html/wp-content/themes/twentyten)
3. Buka file css pada theme anda biasanya style.css dan tambahkan kode dibawah ini:

ul.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    float: left;
}
ul.breadcrumbs li {
    float: left;
    margin: 0 5px 0 0;
    padding: 0;
}
ul.breadcrumbs li:before {
    content: "\00BB \0020";
}

Anda tinggal menyesuaikan css diatas dengan theme yang anda gunakan.

4. Untuk menampilkan breadcrumb, masukan function pemanggilan breadcrumb dibawah ini dimanapun pada theme yang anda gunakan.

<?php include (TEMPLATEPATH . '/breadcrumbs.php'); ?>

Cara Kedua :

1. Buat sebuah file dengan nama breadcrumbs.php isi dengan kode dibawah ini:

<?php
/*
    Breadcrumbs code 

*/
    if ( is_home() ){}

    else {

        echo "<div class=\"breadcrumbs\"><ul class=\"breadcrumbs\"> ";

        echo "<li class=\"breadcrumb-item-1\"><a href=\" ".get_settings('home')." \">";
        echo ('Home')."</a></li>";

        if ( is_category() ) {
           $cate = single_cat_title("",false);
            $cat = get_cat_ID($cate);
          echo "<li class=\"breadcrumb-item-1\">".(get_category_parents($cat, TRUE," &raquo; "))."</li>";
        }
        elseif ( is_archive() && !is_category() ) {
            echo "<li class=\"breadcrumb-item-1\">Archives</li>";
        }
        elseif ( is_search() ) {
           echo "<li class=\"breadcrumb-item-1\">Search Results</li>";
        }
        elseif ( is_404() ) {
           echo "<li class=\"breadcrumb-item-1\">404 Not Found</li>";
        }
        elseif ( is_single() ) {
            $category = get_the_category();
           $category_id = get_cat_ID($category[0]->cat_name);
           $cat_link = get_category_link( $category_id );
            echo "<li class=\"breadcrumb-item-2\"><a href=\" ". $cat_link ." \">" . $category[0]->cat_name."</a></li>";
            echo "<li class=\"breadcrumb-item-3\">";
            echo the_title()."</li>";
        }
        elseif ( is_page() ) {

            if ($post->post_parent) {

                $children = $post->post_title;

               $parent = get_page($post->post_parent);

                echo "<li class=\"breadcrumb-item-1\">".$parent->post_title."</li>"."<li>".$children."</li>";
            }
            elseif ( $post->post_parent == 0 ) {

                echo "<li class=\"breadcrumb-item-2\">";

                echo the_title()."</li>";

            }
        }

        echo "</ul></div>";
    }
?>

2. Upload file breadcrumbs.php yang dibuat tadi ke dalam folder theme anda (contoh:/public_html/wp-content/themes/twentyten)

3. Download file berikut untuk dijadikan background dari item-item dari breadcrumb kemudian upload ke imagehosting seperti photobucket atau flickr atau bisa juga anda upload ke webhosting anda.

Download : Background Breadcrumb - 3kb

4. Buka file style.css dan tambahkan kode dibawah ini:

/* breadcrumbs styles */

ul.breadcrumbs {
  list-style: none;
  margin: 1px 0 0 0;
  padding: 0;
  background: #969594;
  float: left;width: 100%
}
ul.breadcrumbs li {
  float: left;
  padding: 5px 20px 5px 7px;
  height: 21px;
  color: #fff;
  font-size: 7pt 
}
ul.breadcrumbs li:before {
  content: "\00BB \0020"
}
ul.breadcrumbs li a{
  color: #fff;
  font-weight: bold;
  text-decoration:none;
}
.breadcrumb-item-1{background: #464544 url('../images/breadcrumb_1.gif') top right no-repeat;}
.breadcrumb-item-2{background: #666564 url('../images/breadcrumb_2.gif') top right no-repeat;}
.breadcrumb-item-3{background: #868584 url('../images/breadcrumb_3.gif') top right no-repeat;}
.breadcrumb-item-4{background: #969594 url('../images/breadcrumb_4.gif') top right no-repeat;}

Ganti url dari braeadcrumb-item-1,2,3,4 dengan url gambar yang sudah anda download diatas. Anda juga dapat menyesuaikan css dengan theme anda.

5. Dan untuk menampilkan breadcrumb, masukan function pemanggilan breadcrumb dibawah ini dimanapun pada theme yang anda gunakan.

<?php include (TEMPLATEPATH . '/breadcrumbs.php'); ?>

Jika ada yang belum jelas, silahkan poskan komentar dibawah ini.

Dapatkan update terbaru: * Cek email konfirmasi untuk berlangganan yang telah dikirimkan ke email anda