Memasang Breadcrumb pada WordPress Tanpa Plugin

Tulisan ini merupakan update dari tulisan Cara Membuat Breadcrumb WordPress Tanpa Plugin karena di tulisan tersebut di jelaskan membuat breadscrumbs, namun breadcrumb tersebut tidak tampil di google.
Breadcrumbs on Google

Pada postingan kali ini, saya akan memberikan tutorial cara memasang breadcrumb tanpa plugin khusus pengguna WordPress.

Pertama-tama, salin kode php berikut ini, kemudian tempel di function.php yang terletak pada folder themes anda.

//breadcrumbs
if ( ! function_exists( 'breadcrumbs' ) ) :
function breadcrumbs() {
$delimiter = '››';
$home = 'Home';
echo '<div xmlns:v="http://rdf.data-vocabulary.org/#">';
global $post;
echo ' <span typeof="v:Breadcrumb">
<a rel="v:url" property="v:title" href="'.home_url( '/' ).'">'.$home.'</a>
</span> ';
$cats = get_the_category();
if ($cats) {
foreach($cats as $cat) {
echo $delimiter . "<span typeof="v:Breadcrumb">
<a rel="v:url" property="v:title" href="".get_category_link($cat->term_id)."" >$cat->name</a>
</span>"; }
}
echo $delimiter . the_title(' <span>', '</span>', false);
echo '</div>';
}
endif;

Kemudian jangan lupa klik save.

Kemudian open single.php, kemudian tempelkan kode php berikut ini untuk memanggil fungsi dari breadcrumb.

<?php breadcrumbs(); ?>

Sampai tahap ini, sebenarnya breadcrumb sudah jadi, namun untuk mempercantik tampilan breadcrumb, kita tambahkan div dengan id breadcrumb, jadi seperti berikut.

<div id="breadcrumbs"><?php breadcrumbs(); ?></div>

Kemudian pada CSS, tambahkan kode css berikut.

#breadcrumbs{background:#F6F8F2;line-height:16px;margin-bottom:10px;border:1px solid #bbb;padding:5px;font-size:11px}

Kalau anda paham dengan CSS, anda dapat mempercantik tampilan breadcrumb sesuka hati anda.

Selamat Mencoba 😀


28 Comments

  • MasAndank

    June 12, 2013

    kalo saya udah ada di themes nya mas jadi nggak perlu repot ngeliat koding yang bikin mumet hehe

    Reply
  • Adhitya

    September 2, 2013

    Thanks infonya, Gan. Cuma tanya:
    Sudah terpasang, hanya saja posisi breadcrumbs nya kok tidak pas di atas judul ya mas? caplok field sidebar juga malahan. Ada solusi mas? Tidak paham php soalnya.

    Reply
  • shintafaridahasan

    December 18, 2013

    Berhasil mas, daripada pake plugin lebih enak pake cara ini.. thanks ya :mrgreen:

    Reply
  • Verticql Design ID

    May 6, 2014

    Sudah saya praktek kan mas dan berhasil, terimakasih banyak tutorial membuat breadcrumb di wordpress nya

    Reply
  • Firdausa

    May 14, 2014

    Cara Mengobati Radang Tenggorokan

    thanks gan.. udah saya terapkan di blog saya 🙂

    Reply
  • sarmanps

    July 11, 2014

    😈
    setuju mas, saya suka pakai BREADCUM

    Reply
  • Gatut Sukmono

    July 14, 2014

    Belajar wordpress dulu nih.. sambil kumpulin dana buat bikin blog wp self hosting, terima kasih info nya mas..

    Reply
    • dhimaskirana

      July 21, 2014

      yup. belajar pake domain dan server gratisan dulu aja mas. 😀

      Reply
  • deri

    October 23, 2014

    mas ane udah punya breadcrumb, tapi dalam pencarian google tidak terlihat, bagaimana yah cara menampilkannya?
    mohon jawabannya nanti saya balik lagi

    Reply
    • Dhimas Kirana

      November 1, 2014

      tunggu mas, supaya google mengindex kembali web anda.

      Reply
  • verdy

    November 23, 2014

    cari functions.php nya aja bingung ;v , baru belajar WP mas :v

    Reply
  • Mas Arif

    November 23, 2014

    dicoba dulu deh… heheeh
    makasih gan,,,

    Reply
  • pies

    January 11, 2015

    kalau bisa gan dengan cara meletakannya…., soalnya banyak yang newbe banget…, kaya ane gan 🙄
    soalnya pas ane praktekin, ada error…., kayanya cara meletakan kode-kode diatas deh yang salah…..,
    oh iya gan…, ane letakan kode-kode itu semuanya dipaling atas……

    Reply
    • Dhimas Kirana

      January 13, 2015

      oke oke, nanti saya koreksi tutorialnya gan. maaf hehe.. 🙂

      Reply
  • Jak Brom

    March 22, 2015

    terima kasih atas infpnya, salam kenal http://giribig.com/

    Reply
  • Cara Wp

    June 11, 2015

    Tambah error tampilanya kosong

    Reply
  • Santri Drajat

    March 5, 2016

    kalo pakai plugin ada gak mas?

    ribet mas ubek-ubek script

    Reply
    • Dhimas Kirana

      March 10, 2016

      banyak mas, googling ada banyak plugin mas. hehe..

      Reply
      • Santri Drajat

        March 20, 2016

        Gak nemu mas… tema saya gak bisa menampilkan breadcrumbs padalah sudah pakai yoast…

        Reply
        • Dhimas Kirana

          April 16, 2016

          plugin yoast sudah ada bawaan breadcrumbsnya mas, tinggal pake shortcodenya.

          Reply

Kebijakan Komentar (Mulai 16 Oktober 2015)

**Komentar akan ditampilkan setelah disetujui oleh admin.

**DILARANG MENGGUNAKAN FITUR KOMENTAR UNTUK PROMOSI. SEKALI PROMOSI AKAN LANGSUNG DIHAPUS.

**Mohon berkomentar yang bermutu sesuai dengan isi tulisan.

Leave a Reply