Cara Pasang Breadcrumb pada Wordpress

Rabu, 15 Desember 2010

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 :


breadcrumb image

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 :


breadcrumb image

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

4 komentar:

putri mengatakan...

Informasinya sungguh sangat menarik sekali...
Banyak pelajaran yang saya dapatkan...
Makasihnya... Semoga sukses...


23 Agustus 2013 09.10
ami mengatakan...

luar biasa sekali sangatbermanfaat informasinya... terimakasih banyak atas informasinya... semoga suksesnya....


23 Agustus 2013 13.01
Kata Bijak Albert Einstein mengatakan...

Pelajaran wp nih gan. ane nyimak aja dah.
nitip link yah,
Informasi Komputer Terkini


31 Agustus 2013 22.51
Kata Bijak Ariel NOAH mengatakan...

Info yg bagus gan,.
Download Software Terupdate


31 Agustus 2013 22.52

Posting Komentar

 

Info

Pengikut

Earn Money ($$$)

© 2010 Tutorial Blog Gratis | Wordpress | Blogger All Rights Reserved Thesis WordPress Theme by Hack Tutors.info