Fungsi dan Cara Membuat Breadcrumb di WordPress

Fungsi dan Cara Membuat Breadcrumb di WordPress – Artikel ini menjelaskan apa itu breadcrumb dan bagaimana cara membuat breadcrumb di wordpress. Yang pertama saya jelaskan tentu pengertian breadcrumb itu sendiri.

Apa Itu Breadcrumb?

Breadcrumb adalah alat bantu navigasi yang memungkinkan pengunjung untuk memahami lokasi mereka saat ini dalam konteks sebuah website. Dengan kata lain, breadcrumb merupakan sebuah petunjuk sederhana terhadap sebuah artikel yang berkaitan dengan kategori dan halaman situs sebuah artikel yang terdapat di dalam sebuah blog.

Moove VPN

Nikmati konten di seluruh dunia tanpa batas, tanpa blokir, dan 100% gratis dengan Moove VPN.

Download

Download

Mungkin Anda sudah sering melihat wujud Breadcrumb ini sendiri, namun mungkin belum tahu apa sebutannya. Banyak sekali website di luar sana yang menggunakan breadcrumb, sehingga menemukannya pun tidaklah sulit.

Masih belum tahu/ingat bagaimana rupa breadcrumb? Gambar di bawah ini merupakan contoh nyata breadcrumb yang saya terapkan di Seni Berpikir:

Dari gambar di atas, struktur navigasi di atas judul yang ditandai dengan garis warna merah itulah apa yang disebut dengan breadcrumb. Semacam navigasi yang diberikan di setiap artikel/halaman di dalam sebuah blog/website. Breadcrumb menunjukkan navigasi sederhana dari panel Home ke kategori tulisan hingga menuju judul tulisan.

Fungsi Breadcrumb di WordPress

Lalu apa fungsi breadcrumb ini? Breadcrumb merupakan teknik SEO lama yang dianjurkan oleh Google dalam sebuah buku panduan yang terbit tahun 2010.

Berhubung karena mesin pencari seperti Google menganjurkan untuk membuat navigasi yang jelas untuk setiap website agar robot Google lebih mudah meng-crawl isi situs kita sehingga lebih mudah pula terindeks di mesin pencari.

Sebagai salah satu hal yang berfungsi sebagai penunjuk navigasi sebuah artikel di blog tertentu, maka breadcrumb berfungsi untuk membantu artikel dan blog kita lebih SEO friendly serta lebih mudah terindeks di mesin pencari.

Di hasil pencarian Google misalnya, jika breadcrumb diimplementasikan dengan tepat, akan muncul di hasil pencarian Google seperti gambar berikut:

Tertarik untuk mencoba Breadcrumb ini? Mari ikuti panduannya di bawah ini untuk membuat breadcrumb di WordPress.

Cara Membuat Breadcrumb di WordPress

**Note: Sebelum menyentuh file functions.php, disarankan untuk membuat WordPress Child Theme terlebih dahulu.

1. Akses ke File Functions.php Theme WordPress Anda dan Copy-Paste Kode yang Sudah Disediakan

Membuat breadcrumb di WordPress tidaklah susah. Hal pertama yang harus Anda lakukan, masuklah ke Dashboard WordPress Anda, klik Appearance => Editor. Di bagian Editor, silahkan klik functions.php. Silahkan copy kode di bawah ini dan letakkan di bagian paling bawah functions.php.

//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;

2. Akses Content-Single.php atau Single.php atau Content.php atau Theme File Sejenisnya

Setelah Anda meng-copy kode tersebut di bagian paling bawah functions.php Anda, maka silahkan buka single.php atau theme file sejenis lalu paste-kan kode di bawah ini di bawah kode <?php if (have_posts()) : while (have_posts()) : the_post(); ?> atau sejenisnya.

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

3. Klik Save Changes dan Lihat Hasilnya

Setelah semua kode sudah di-copy-paste ke bagian masing-masing, silahkan Klik Update File lalu lihat hasilnya. Buka saja salah satu artikel Anda dan periksa apakah breadcrumb yang sudah dibuat sudah muncul seperti gambar yang saya sediakan di atas? Begitulah cara simpel membuat breadcrumb di wordpress.

Itulah fungsi dan cara membuat breadcrumb di wordpress oleh Seni Berpikir. Anda bisa lebih mudah membuatnya tanpa menggunakan plugin dan tidak ribet sama sekali. Selamat mencoba dan semoga sukses 😀

Catatan:

**Beberapa plugin SEO seperti WordPress SEO by Yoast sudah memfasilitasi breadcrumb untuk wordpress Anda. Jika Anda sudah menggunakan plugin tersebut, cara memasangnya tinggal masuk saja ke area Dashboard lalu pilih menu SEO di bagian bawah. Setelah itu pilih menu SEO => Advanced => Breadcrumb lalu tetapkan bagaimana tampilan breadcrumb yang Anda inginkan.

**Tips tersebut penting untuk Anda. Karena breadcrumb juga penting untuk kepentingan SEO, maka membuat breadcrumb di wordpress menjadi salah satu hal yang harus Anda terapkan.

**Namun jika sudah menggunakan plugin Yoast SEO, sebaiknya gunakan saja kode breadcrumb yang diberikan oleh plugin tersebut.

Silahkan membuat breadcrumb di wordpress dengan salah satu panduan atau metode yang ada di dalam tulisan ini. Selamat mencoba 😀