Masih banyak sobat kita yang menanyakan wacana bagaimana cara membuatan breadcrumb di wordpress secara manual. Bagi yang memakai plugin yoast seo bekerjsama cara ini tidak perlu dilakukan, kau tinggal mengupdate nya saja.
Kali ini saya akan ajak anda berguru sedikit mengenai bagaiamana cara menciptakan breadcrumbs di wordpress secara manual tentunya dengan schema markup yang baru. Karena yang versi usang sudah tidak dapat dipakai lagi.
Baca juga:
Oke kita mulai, sebelumnya sebaiknya kau memahami terlebih dahulu mengenai susunan struktur breadcrumb yang gres ini. Karena sempat ada perubahan beberapa hari yang kemudian begitupun cara penulisanya, silalakan perhatikan susunan instruksi HTML ini. Tapi buat kau yang mau eksklusif copas silakan skip ke tahapan kedua:
<!-- Bagian Div yaitu 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 yaitu angka urutan letak link breadcrumb --> <meta content='1' itemprop='position'/> <!-- Bagian Link kita susun ibarat ini --> <a href='#' title='Home' itemprop='item'> <span itemprop='name'>Home</span></a> </span> » <!-- Satu Item link dibungkus dalam elemen ini --> <span itemprop='itemListElement' itemscope='itemscope' itemtype='https://schema.org/ListItem'> <!-- Bagian ini yaitu angka urutan letak link breadcrumb --> <meta content='2' itemprop='position'/> <!-- Bagian Link kita susun ibarat ini --> <a href='#' title='Home' itemprop='item'> <span itemprop='name'>Category</span></a> </span> » <!-- Kamu dapat menambahkan item lainya disini --> </div>Nah instruksi diatas yaitu bab dari penyusun breadcrumb, kau dapat menciptakan banyak link dengan menerapkan instruksi 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 impian kita. Tetapi semoga lebih akurat kita memakai nama breadcrumb untuk mama fungsi yang akan kita buat. */ // Cegah error jikalau 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 bab 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 dipakai // 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 instruksi diatas dengan komentarnya dapat kau pahami dengan baik, silakan salin semua instruksi itu kemudian buka dashboard wp mu masuk ke sajian Appearance => Editor, pada bab editor pilih saja file functions.php
Edit file tersebut pastekan instruksi yang sudah kau upload dibarisan paling bawah, kemudian simpan.
Tahapan berikutnya kita tinggal menjalankan fungsi yang sudah kita buat. Untuk menjalankanya kau harus mengedit file single.php, atau sejenisnya. Lihat pada template yang kau gunakan pada folder wp-content/themes
Silakan cari instruksi berikut ini pada file single.php
<?php /* Start the Loop */ while ( have_posts() ) : the_post();Kalau nggak ketemu kau sesuain aja, cari file yang hampir sama ibarat diatas. Kalau udah ketemu kau salin dan pastekan instruksi ini dibawahnya untuk memanggil fungsi yang sudah kita buat tadi.
echo breadcrumbs();Saat meletakan instruksi pastikan kau berada didalam tag penanda <?php, jikalau tidak kau harus menambahkan sendiri secara manual teg tersebut pada setiap instruksi PHP yang kau masukan. Seperti ini:
<?php # Kode PHP kau ?>Selanjutnya silakan simpan file yang kau edit, dan coba jalankan saya pastikan tidak ada error. Karena kodenya sudah saya coba sendiri, untuk memformat tampilan dari breadcrumb diatas silakan kau buat css sendiri dan tambahkan nama kelas kelasnya pada komponen penyusun breadcrumb.
Breadcrumbs dari data-vocabulary.org deprecated alias sudah tidak dipakai lagi. Kode diatas kita memakai schema.org dengan susunan struktur data yang valid. Bila ada duduk kasus lain silakan tanya dikomentar, selang 1 bln komen akan saya tutup takut ada yang bully 😅
