Cara membuat breadcrumb terbaru di wordpress

Masih banyak teman kita yang menanyakan tentang bagaimana cara membuatan breadcrumb di wordpress secara manual. Bagi yang menggunakan plugin yoast seo sebenarnya cara ini tidak perlu dilakukan, kamu tinggal mengupdate nya saja.

Kali ini saya akan ajak anda belajar sedikit mengenai bagaiamana cara membuat breadcrumbs di wordpress secara manual tentunya dengan schema markup yang baru. Karena yang versi lama sudah tidak bisa digunakan lagi.

Baca juga:

1. Mengatasi breadcrumbs deprecated di blogger
2. Belajar Membuat Breadcrumbs

Oke kita mulai, sebelumnya sebaiknya kamu memahami terlebih dahulu mengenai susunan struktur breadcrumb yang baru ini. Karena sempat ada perubahan beberapa hari yang lalu begitupun cara penulisanya, silalakan perhatikan susunan kode HTML ini. Tapi buat kamu yang mau langsung copas silakan skip ke tahapan kedua:

<!-- Bagian Div adalah element yang mengikat semua Link Breadcrumb -->
<div itemscope='itemscope' itemtype='https://schema.org/BreadCrumbList'>


<!-- Satu Item link dibungkus dalam elemen ini -->
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

<!-- Bagian ini adalah angka urutan letak link breadcrumb -->
<meta content='1' itemprop='position'/>

<!-- Bagian Link kita susun seperti ini -->
     <a href='#' title='Home' itemprop='item'>
        <span itemprop='name'>Home</span></a> 
            </span> &raquo;


<!-- Satu Item link dibungkus dalam elemen ini -->
<span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'>

<!-- Bagian ini adalah angka urutan letak link breadcrumb -->
<meta content='2' itemprop='position'/>

<!-- Bagian Link kita susun seperti ini -->
     <a href='#' title='Home' itemprop='item'>
        <span itemprop='name'>Category</span></a> 
            </span> »



<!-- Kamu bisa menambahkan item lainya disini -->


        </div>

Nah kode diatas adalah bagian dari penyusun breadcrumb, kamu bisa membuat banyak link dengan menerapkan kode item diatas. Satu item diikat oleh ItemListElement yang merupalan komponen penanda suatu link pada breadcrumb.

Lalu bagaimana kalau kita ingin membuatnya di wordpress secara manual. Dalam hal ini kita akan mengedit file function.php dan file single.php atau content.php sesuai dengan file yang ada pada template kamu. Mari kita pelajari dibawah ini, perhatikan komentar saya dalam script berikut.

/*
 * Langkah pertama kita buat fungsi baru, sesuai dengan keinginan kita. Tetapi agar lebih akurat kita menggunakan nama breadcrumb untuk mama fungsi yang akan kita buat.
*/
// Cegah error jika ada fungsi dengan nama yang sama
if ( ! function_exists( 'breadcrumbs' ) ) {


function breadcrumbs() {
// Parameter konfigurasi yang akan kita gunakan
$HomePage = 'https://'. $_SERVER['HTTP_HOST'];
// Karakter Pemisah
$Pisahin = '»';

// Kita bentuk div bagian pengikat semua komponen breadcrumb
echo '<div itemscope="itemscope" itemtype="https://schema.org/BreadCrumbList">';

// Membuat sebuah Item untuk satu link Home  atau beranda
echo '<span itemprop="itemListElement" itemscope="itemscope" itemtype="https://schema.org/ListItem">';

echo '<meta content="1" itemprop="position"/>
     <a href="'.$HomePage.'" title="Home" itemprop="item">
        <span itemprop="name">Home</span></a> 
            </span> '. $Pisahin;


// Sekarang kita ambil semua data kategory yang digunakan
// Serta menampilkanya secara ber urutan
$cats = get_the_category();

$angka = 1;
if ($cats) {
foreach($cats as $cat) {
 
$nomor_item = $angka + 1;
echo '<meta content="'.$nomor_item.'" itemprop="position"/>
     <a href="'. get_category_link($cat->term_id) .'" title="Home" itemprop="item">
    <span itemprop="'. $cat->name .'">'.  $cat->name  .'</span></a> 
            </span> '.  $Pisahin;

 } 
         }


// Terakhir kita sertakan judul artikel
echo the_title(' <span>', '</span>', false);
// Tutup Div penyusun breadcrumb
echo '</div>';
}
}

Semoga kode diatas dengan komentarnya bisa kamu pahami dengan baik, silakan salin semua kode itu kemudian buka dashboard wp mu masuk ke menu Appearance => Editor, pada bagian editor pilih saja file functions.php
Edit file tersebut pastekan kode yang sudah kamu upload dibarisan paling bawah, lalu simpan.

Tahapan berikutnya kita tinggal menjalankan fungsi yang sudah kita buat. Untuk menjalankanya kamu harus mengedit file single.php, atau sejenisnya. Lihat pada template yang kamu gunakan pada folder wp-content/themes

Silakan cari kode berikut ini pada file single.php

 <?php

   /* Start the Loop */
   while ( have_posts() ) :
    the_post();

Kalau nggak ketemu kamu sesuain aja, cari file yang hampir sama seperti diatas. Kalau udah ketemu kamu salin dan pastekan kode ini dibawahnya untuk memanggil fungsi yang sudah kita buat tadi.

echo breadcrumbs();

Saat meletakan kode pastikan kamu berada didalam tag penanda <?php, jika tidak kamu harus menambahkan sendiri secara manual teg tersebut pada setiap kode PHP yang kamu masukan. Seperti ini:

<?php

# Kode PHP kamu

?>

Selanjutnya silakan simpan file yang kamu edit, dan coba jalankan saya pastikan tidak ada error. Karena kodenya sudah saya coba sendiri, untuk memformat tampilan dari breadcrumb diatas silakan kamu buat css sendiri dan tambahkan nama kelas kelasnya pada komponen penyusun breadcrumb.

Breadcrumbs dari data-vocabulary.org deprecated alias sudah tidak digunakan lagi. Kode diatas kita menggunakan schema.org dengan susunan struktur data yang valid. Bila ada masalah lain silakan tanya dikomentar, selang 1 bln komen akan saya tutup takut ada yang bully 😅