Cara Menambahkan Remah Roti ke Situs WordPress Anda

Diterbitkan: 2023-02-12

Navigasi adalah bagian penting dari situs web mana pun, dan ada lebih dari satu cara untuk menyediakannya. Menu utama di situs web Anda adalah alat navigasi utama yang membawa pengguna ke konten yang mereka inginkan. Namun, itu tidak memberi tahu pelanggan Anda di mana mereka saat ini berada di situs web Anda.

Menu remah roti adalah sistem navigasi sekunder yang memberi tahu pelanggan Anda di mana mereka berada terkait dengan beranda Anda. Ini membantu mereka menavigasi halaman situs web Anda dengan mudah, dan menghindari tersesat.

Pada artikel ini, kita akan melihat apa itu remah roti dan bagaimana manfaatnya bagi situs web Anda. Kami kemudian akan menunjukkan cara menambahkan remah roti ke situs web WordPress Anda. Mari kita mulai!

Daftar isi
1. Apa itu Breadcrumbs di WordPress?
2. Manfaat Menambahkan Remah Roti
3. Cara Menambahkan Remah Roti di WordPress
3.1. Metode 1: Menggunakan Plugin
3.1.1. Langkah 1: Unduh Plugin Yoast SEO
3.1.2. Langkah 2: Tambahkan Fungsi ke File header.php Anda
3.1.3. Langkah 3: Aktifkan Dukungan Breadcrumb
3.2. Metode 2: Mengode Remah Roti Anda Sendiri
3.2.1. Langkah 1: Buat Fungsi Kerangka
3.2.2. Langkah 2: Tambahkan Aturan Dasar
3.2.3. Langkah 3: Tambahkan Pernyataan 'jika lain'
3.2.4. Langkah 4: Tambahkan Fungsi ke Header Tema
4. Sesuaikan Situs Anda Dengan Mesin WP

Apa itu Breadcrumbs di WordPress?

Remah roti adalah istilah yang digunakan untuk menggambarkan menu navigasi hierarkis. Jenis menu ini melibatkan jejak tautan, tidak berbeda dengan jejak remah roti yang ditinggalkan oleh Hansel dan Gretel:

Karena banyak pengguna tidak masuk ke situs WordPress Anda melalui beranda, navigasi remah roti membantu mereka memahami di mana mereka telah mendarat. Mesin pencari juga menggunakan remah roti untuk lebih memahami hierarki halaman web Anda.

Manfaat Menambahkan Remah Roti

Menambahkan menu remah roti WordPress ke situs web Anda menawarkan beberapa manfaat. Google menyukai remah roti, misalnya, sehingga fitur ini dapat meningkatkan Search Engine Optimization (SEO) Anda dan mendatangkan lebih banyak pengunjung ke situs Anda.

Menu Breadcrumb juga dapat mengurangi rasio pentalan, karena meningkatkan Pengalaman Pengguna (UX) situs Anda. Ketika pengguna dapat menavigasi situs web Anda dengan mudah, mereka cenderung menghabiskan waktu di sana.

Cara Menambahkan Remah Roti di WordPress

Anda dapat menambahkan remah roti ke situs web WordPress Anda dengan dua cara. Metode termudah adalah dengan menggunakan plugin WordPress, tetapi Anda juga dapat membuat kode remah roti ke dalam file header.php situs Anda. Sebelum Anda menggunakan metode mana pun, Anda harus membuat cadangan situs web Anda untuk berjaga-jaga jika terjadi kesalahan.

Metode 1: Menggunakan Plugin

Cara termudah untuk menambahkan remah roti ke WordPress adalah dengan plugin remah roti. Ada banyak plugin yang bisa Anda gunakan, antara lain Breadcrumb NavXT dan Yoast SEO:

Yoast SEO seringkali merupakan pilihan terbaik, karena kemungkinan plugin tersebut sudah digunakan oleh situs web Anda.

Langkah 1: Unduh Plugin Yoast SEO

Karena Yoast adalah plugin SEO, ia menawarkan berbagai fungsi. Itu termasuk pembuatan dan gaya navigasi remah roti.

Untuk menggunakan plugin ini, Anda harus mengunduhnya dari Direktori Plugin WordPress. Anda cukup menuju ke halaman Plugins situs Anda, mencari "Yoast SEO", dan menginstal dan mengaktifkan plugin seperti yang lainnya.

Langkah 2: Tambahkan Fungsi ke File header.php Anda

Setelah plugin diaktifkan, Anda harus menambahkan fungsi ke file header.php situs Anda. Untuk mengakses file ini, buka Appearance > Theme Editor dan pilih file untuk membukanya.

Kemudian, tambahkan kode berikut di mana pun Anda ingin menu pengaturan remah roti muncul:

<?php
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb( '</p><p>','</p><p>' );
}
?>

Secara umum, Anda ingin menempatkan kode ini di akhir file header.php Anda. Namun, Anda dapat bereksperimen dengan penempatan menu, memeriksa ujung depan situs Anda untuk melihat bagaimana hasilnya.

Anda bahkan dapat menambahkan fungsi di atas ke file single.php atau page.php tema Anda, jika Anda ingin mengaktifkan fungsi remah roti agar muncul di tempat lain di halaman. Pastikan Anda hanya menambahkannya di satu tempat.

Langkah 3: Aktifkan Dukungan Breadcrumb

Terakhir, Anda harus mengaktifkan dukungan remah roti. Di Yoast SEO, ini berarti menavigasi ke SEO > Search Appearance > Breadcrumbs :

Cukup alihkan sakelar ke "Diaktifkan", dan Anda siap melakukannya! Menu remah roti WordPress Anda akan disiapkan dan siap digunakan.

Metode 2: Mengode Remah Roti Anda Sendiri

Menambahkan remah roti situs web juga dapat dilakukan secara manual melalui pengkodean. Jika Anda tidak ingin menggunakan plugin remah roti, Anda dapat menambahkan remah roti tanpa itu. Sebelum Anda mencoba ini, Anda mungkin ingin membaca mikrodata, untuk memanfaatkan sepenuhnya potensi SEO remah roti WordPress.

Langkah 1: Buat Fungsi Kerangka

Untuk menambahkan remah roti ke WordPress secara manual, Anda harus membuat fungsi PHP. Langkah pertama dalam membuat fungsi ini adalah membuat kerangka. Fungsi kerangka Anda memerlukan nama yang unik, untuk menghindari konflik dengan fungsi lainnya.

function my_breadcrumbs() {
/* Breadcrumbs code will go here */
}

Fungsi di atas adalah kerangka, dan sisa kode remah roti akan ditempatkan di dalam kurung kurawal.

Langkah 2: Tambahkan Aturan Dasar

Setelah membuat kerangka, Anda harus menambahkan aturan ke fungsi. Aturan harus ditempatkan di bagian remah roti:

/* Change according to your needs */
$show_on_homepage = 0;
$show_current = 1;
$delimiter = '»';
$home_url = 'Home';
$before_wrap = '<span clas="current">';
$after_wrap = '</span>';

/* Don't change values below */
global $post;
$home_url = get_bloginfo( 'url' );

Aturan di atas umumnya menggunakan variabel, sehingga nantinya bisa diubah. Dua variabel pertama menggunakan boolean, di mana "0" salah dan "1" benar.

Langkah 3: Tambahkan Pernyataan ' if else '

Di bawah variabel, Anda perlu menambahkan pernyataan 'if else'. Pernyataan ini akan memeriksa apakah pengguna ada di beranda situs web Anda atau tidak. Berdasarkan informasi ini, pernyataan akan menentukan apakah remah roti ditampilkan atau tidak:

/* Check for homepage first! */
if ( is_home() || is_front_page() ) {
$on_homepage = 1;
}
if ( 0 === $show_on_homepage && 1 === $on_homepage ) return;

/* Proceed with showing the breadcrumbs */
$breadcrumbs = '<ol itemscope itemtype="http://schema.org/BreadcrumbList">';

$breadcrumbs .= '<li itemprop="itemListElement" itemtype="http://schema.org/ListItem"><a target="_blank" href="' . $home_url . '">' . $home_url . '</a></li>';

/* Build breadcrumbs here */

$breadcrumbs .= '</ol>';
echo $breadcrumbs;

Jika pernyataan ini tidak ditambahkan ke fungsi, pengaturan remah roti mungkin muncul atau tidak muncul saat Anda menginginkannya.

Langkah 4: Tambahkan Fungsi ke Header Tema

Setelah fungsi remah roti Anda selesai, Anda dapat menambahkannya ke file header.php situs web Anda. Arahkan ke Appearance > Theme Editor untuk membuka file, dan tambahkan fungsi sampai akhir.

Kemudian simpan perubahan Anda, dan periksa menu remah roti situs web baru Anda di ujung depan. Anda dapat terus men-tweak fungsi dan penempatannya hingga menu terlihat pas (atau nonaktifkan remah roti bila perlu).

Sesuaikan Situs Anda Dengan Mesin WP

Menu navigasi Breadcrumb membantu pengunjung situs Anda menemukan jalan mereka. Mereka juga mempermudah mesin telusur untuk memahami hierarki situs web Anda. Plugin seperti Yoast SEO adalah cara termudah untuk menambahkan remah roti ke situs web Anda, tetapi Anda juga dapat mengkodekannya secara manual.

Menggunakan host web yang tepat dapat membantu menjamin kinerja situs web Anda, memberi Anda waktu untuk fokus pada pengembangan dan UX. WP Engine dapat menawarkan kepada Anda paket hosting WordPress terkelola terbaik, dan sumber daya terbaik untuk menciptakan pengalaman situs web yang luar biasa!