Cara Menambahkan Breadcrumb di WordPrees

Teknotes.id – Breadcrumb adalah fitur yang membantu pengguna untuk menavigasi situs Anda, sehingga pengguna memahami lokasi mereka di situs web.

Dengan bantuan Breadcrumb ini, Google, Bing, Yandex, dan mesin pencari lainnya juga dapat memahami hierarki tautan di halaman web.

Dalam tutorial ini kami akan menjelaskan semua yang perlu Anda ketahui untuk mulai menggunakan Breadcrumb di WordPress.

Dalam panduan ini, kami akan menunjukan Cara Menambahkan Breadcrumb di WordPrees menggunakan plugin dan tanpa menggunakan plugin.

Daftar Isi

Apa itu Breadcrumb?

Breadcrumb adalah tautan navigasi yang digunakan untuk menampilkan semua tautan halaman yang mengarah dari beranda.

Tautan navigasi yang terhubung untuk menunjukkan dengan tepat ke mana Anda telah menavigasi atau dimana posisi Anda sekarang di situs web.

Berikut adalah contoh sederhana Breadcrumb dari situs dokumentasi kamiL

Manfaat Breadcrumb

Sebagian situs web memilih untuk menggunakan Breadcrumb karena beberapa alasan:

  1. Breadcrumb dapat meningkatkan SEO situs web Anda.
  2. Breadcrumb dapat membantu pengguna untuk menavigasi situs web Anda.
  3. Breadcrumb membantu pengguna untuk menavigasi situs web Anda.
  4. Mesin pencari membaca Breadcrumb dan mendaftarkannya di halaman hasil mesin pencari.

Metode Untuk Menambahkan Breadcrumb di WordPress

Terdapat tiga metode untuk menambahkan fitur Breadcrumb di WordPress:

  1. Menggunakan Plugin Yoast SEO
  2. Menggunakan Plugin Rank Math
  3. Menggunakan Cara Manual

1. Menggunaakan Plugin Yoast SEO

Plugin Yoast SEO adalah tool yang memiliki fitur untuk menambahkan Breadcrumb ke situs WordPress Anda.

Jika Anda sudah memiliki plugin Yoast SEO di WordPress Anda, maka Anda dapat melewati langkah 1 dan dapat melanjutkan ke langkah berikutnya.

1.1 Langkah #1

Klik menu Plugins » Add New, di kotak pencarian cari plugin bernama Yoast SEO. Silahkan instal dan aktifkan plugin tersebut.

Cara Menambahkan Breadcrumb di WordPrees

1.2 Langkah #2

Di halaman dashboard WordPress, buka SEO » Search Appearance » Breadcrumbs » Enabled. Lakukan perubahan yang Anda butuhkan, lalu tekan Save Changes.

Cara Menambahkan Breadcrumb di WordPrees

1.3 Langkah #3

Anda perlu menambahkan fungsi di bawah ini, silahkan kunjungi Appearance » Theme Editor » header.php, letakkan dibagian paling akhir. Kemudian tekan Update File untuk menyimpan perubahan.

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>
Cara Menambahkan Breadcrumb di WordPrees

Catatan

Perlu juga diperhatikan bahwa dalam beberapa tema mungkin tidak memerlukan <? php dan ?> dari kode ini.

2. Menggunakan Plugin Rank Math

2.1 Langkah #1

Klik menu Plugins » Add New, di kotak pencarian cari plugin bernama Rank Math. Silahkan instal dan aktifkan plugin tersebut.

Cara Menambahkan Breadcrumb di WordPrees

2.2 Langkah #2

Di halaman dashboard, silahkan klik menu Rank Math » General Settings » Breadcrumbs » Enable breadcrumbs function

Cara Menambahkan Breadcrumb di WordPrees

2.3 Langkah #3

Sekarang, masuk ke dashboard admin WordPress. Silahkan klik menu Appearance » Theme Editor » functions.php dan tambahkan kode berikut di bagian akhir. Klik tombol Update File untuk menyimpan perubahan.

add_filter( 'the_content', function( $content ) {
if( function_exists( 'rank_math_get_breadcrumbs' ) ) {
$content = rank_math_get_breadcrumbs() . $content;
}
return $content;
});

Jika menurut Anda Langkah 3 terlalu rumit untuk dipahami, maka Anda dapat menggunakan shortcode sederhana untuk menampilkan Breadcrumb Rank Math di mana pun Anda mau.

Catatan:

Jangan lupa untuk menghapus spasi setelah tanda [ dan sebelum tanda ]

[ rank_math_breadcrumb ]

2.4 Langkah #4

Anda dapat menambahkan kode CSS berikut ini untuk mempercantik Breadcrumb dan kemudian simpan untuk menyimpan perubahan.

.rank-math-breadcrumb {
font-size: 18px;
border: 1px solid #00abf0; padding-left: 25px;
padding-top: 15px;
padding-right: 15px;
margin-bottom: 20px;
}

3. Menggunakan Cara Manual

Anda dapat menambahkan Breacrumbs secara manual, tetapi Anda memerlukan sedikit pengetahuan pengkodean.

3.1 Langkah #1

Yang harus Anda lakukan adalah cukup menambahkan kode ini ke file functions.php dengan cara membuka menu Appearance » Theme Editor » functions.php. Klik Update File untuk menyimpan perubahan.

/**
 * Generate breadcrumbs
 * @author CodexWorld
 * @authorURL www.codexworld.com
 */
function get_breadcrumb() {
    echo '<a href="'.home_url().'" rel="nofollow">Home</a>';
    if (is_category() || is_single()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        the_category(' &bull; ');
            if (is_single()) {
                echo " &nbsp;&nbsp;&#187;&nbsp;&nbsp; ";
                the_title();
            }
    } elseif (is_page()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;";
        echo the_title();
    } elseif (is_search()) {
        echo "&nbsp;&nbsp;&#187;&nbsp;&nbsp;Search Results for... ";
        echo '"<em>';
        echo the_search_query();
        echo '</em>"';
    }
}
Cara Menambahkan Breadcrumb di WordPrees

3.2 Langkah #2

Kemudian untuk memanggil kode Breadcrumb tersebut ke postingan Anda. Silahkan untuk menambahkan kode ini ke file single.php di tema Anda. Kemudian Update File.

<div class="breadcrumb"><?php get_breadcrumb(); ?></div>

3.3 Langkah #3

Untuk mempercantik tampilan Breadcumb, silahkan gunakan kode CSS ajaib dibawah ini. Kemudian simpan.

.breadcrumb {
    padding: 8px 15px;
    margin-bottom: 20px;
    list-style: none;
    background-color: #f5f5f5;
    border-radius: 4px;
}
.breadcrumb a {
    color: #428bca;
    text-decoration: none;
}

Catatan:

Gunakan kode ini dengan risiko Anda sendiri, jika situs WordPress Anda mengalami masalah silahkan untuk menghubungi kami.

Kesimpulan

Breadcrumb adalah fitur yang berguna dan menawarkan banyak manfaat. Fitur ini membuat situs Anda lebih mudah digunakan oleh pengguna.

Kami telah membahas di sini tiga metode untuk menerapkannya. Breadcrumb di WordPress dapat ditambahkan menggunakan plugin dan tanpa plugin.

Jika Anda seorang pemula tanpa pengalaman pengkodean, kami sarankan untuk menggunakan plugin Yoast SEO atau Rank Math.

Jika Anda mengalami masalah, jangan ragu untuk menghubungi kami di kolom komentar. Demikian artikel Cara Menambahkan Breadcrumb di WordPrees, terima kasih telah membaca dan semoga bermanfaat, tunggu konten kami selanjutnya ya.

by Mr M
Hi! I am Owner and Writer at Teknotes.id. I love WordPress, Graphic Designer, Technology, Blogging, and Programming. I will help you making some technically being easy to understand :)

Tinggalkan komentar