Cara Menambahkan Breadcrumb ke Situs WordPress Anda

Istilah "remah roti" mengacu pada alat navigasi situs web yang efisien (Seperti yang diajarkan Hansel dan Gretel kepada kami) dimaksudkan untuk membantu melacak langkah seseorang kembali ke "rumah" situs web (atau beranda). Mereka memungkinkan pengguna untuk melihat bagaimana halaman saat ini cocok dengan seluruh struktur situs dengan menyediakan trek inline dari tautan (atau label) yang mengarah kembali ke beranda.

Halaman Produk Home Depot dengan Breadcrumbs

Breadcrumbs sebenarnya lebih penting untuk Situs WordPress Anda daripada yang Anda kira. Mereka tidak hanya meningkatkan pengalaman pengguna, tetapi mereka juga dapat meningkatkan peringkat situs Anda di peringkat pencarian. Google menyukai elemen struktural ini di situs web, dan pengunjung akan memiliki bantuan navigasi penting ketika menemukan salah satu halaman Anda secara organik (menurunkan rasio pentalan Anda).

Anda akan berpikir bahwa menambahkan sistem nativation terintegrasi seperti itu ke situs web Anda akan sulit, tetapi sebenarnya cukup sederhana dengan menggunakan plugin. Faktanya, jika Anda menggunakan plugin Yoast SEO, Anda memiliki langkah awal karena fungsionalitas breadcrumb sudah ada di dalam Yoast! Dan, menambahkan remah roti melalui Yoast jelas merupakan salah satu metode yang disukai di luar sana. Selain Yoast SEO, Plugin Breadcrumb NavXT adalah opsi hebat lainnya yang sangat dapat disesuaikan dan juga berfungsi dengan baik dengan Tema Divi kami sendiri.

Berlangganan Saluran Youtube Kami

Cara Menambahkan Breadcrumbs ke Situs WordPress Anda Menggunakan Yoast

Untuk menambahkan remah roti ke Situs WordPress Anda menggunakan Yoast SEO, Anda perlu melakukan tiga langkah sederhana:

• Instal dan Aktifkan Plugin Yoast SEO
• Menambahkan cuplikan kode Breadcrumbs ke Tema WordPress Anda
• Aktifkan / konfigurasikan Breadcrumbs the Yoast Breadcrumbs di pengaturan plugin

Instal dan Aktifkan Plugin Yoast SEO

Untuk menginstal plugin Yoast SEO, buka Dashboard WordPress Anda dan arahkan ke Plugins > Add New. Kemudian cari repositori WordPress untuk "yoast". Saat Anda melihat plugin Yoast SEO, klik untuk menginstal dan mengaktifkan plugin.

Tambahkan Cuplikan Kode Breadcrumbs ke Tema Anak WordPress Anda

Selanjutnya kita perlu menambahkan potongan kode singkat ke file tema WordPress Anda. Jadi, jika Anda belum melakukannya, ada baiknya Anda membuat tema anak. Untuk contoh ini, saya akan menunjukkan cara menambahkan potongan kode remah roti ke Tema WordPress TwentyNineteen default. Anda dapat menambahkan kode ke file tema/templat apa pun, tetapi sebagian besar, Anda ingin menambahkannya ke file single.php Anda (untuk muncul di semua posting), file page.php (untuk muncul di semua halaman ), atau ke file header.php Anda (untuk ditampilkan di seluruh situs).

Untuk contoh ini, saya akan menambahkan kode remah roti ke file header.php dari tema anak saya. Setelah Anda menyalin file header.php dari tema induk, buka untuk mengedit file dalam editor kode pilihan Anda.

Kemudian di bagian paling bawah file header.php, tambahkan cuplikan php berikut yang disediakan oleh Yoast untuk mengaktifkan fungsionalitas Breadcrumbs:

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

Ini akan menampilkan remah roti langsung di bawah tajuk semua halaman, penempatan umum untuk remah roti.

Aktifkan dan Konfigurasikan Yoast Breadcrumbs di pengaturan plugin

Setelah cuplikan kode ditambahkan ke tema Anak WordPress Anda, yang tersisa untuk dilakukan adalah mengaktifkan Breadcrumbs di pengaturan plugin Yoast SEO. Untuk melakukan ini, buka Dasbor WordPress Anda dan arahkan ke SEO > Tampilan Pencarian dan kemudian klik tab Breadcrumbs. Di bawah pengaturan Breadcrumbs, pastikan untuk mengaktifkan remah roti dengan mengaktifkan opsi ke "diaktifkan". Kemudian Anda dapat mengkonfigurasi pengaturan remah roti sesuai dengan kebutuhan Anda. Anda mungkin juga ingin memilih taksonomi untuk ditampilkan di remah roti untuk posting Anda. Untuk contoh ini, saya akan mengatur posting saya untuk menampilkan kategori di remah roti.

Sekarang mari kita lanjutkan dan lihat seperti apa remah roti di salah satu posting yang saya buat di tema TwentyNineteen.

Inilah tampilan postingan sebelum mengaktifkan remah roti.

Berikut tampilan postingan setelah mengaktifkan remah roti. Contoh posting khusus ini memiliki kategori ("WordPress") dan kategori induk ("Desain Web") untuk menunjukkan kepada Anda kategori taksonomi remah roti yang saya pilih di pengaturan remah roti.

Anda mungkin perlu menyesuaikan gaya remah roti Anda menggunakan beberapa CSS eksternal. Untuk melakukan itu, Anda dapat menggunakan "remah roti" ID CSS yang disertakan dalam kode php. Buka file style.css dari Tema Anak Anda (atau Anda dapat menambahkannya di Penyesuai Tema di bawah CSS Tambahan) dan tambahkan yang berikut ini:

#breadcrumbs {

/*Add breadcrumb styling here*/

}

Untuk tema TwentyNineteen, saya mungkin ingin mencocokkan margin teks header saya dengan menambahkan CSS khusus berikut:

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

Jika Anda ingin lebih mengontrol lokasi spesifik dari remah roti Anda, Anda dapat menggunakan kode pendek berikut untuk setiap posting atau halaman juga.

[wpseo_breadcrumb]

Menambahkan Breadcrumb ke Situs WordPress Anda Menggunakan Breadcrumb NavXT

Jika Anda tidak ingin menginstal Yoast SEO karena alasan tertentu atau jika Anda mencari opsi sederhana lainnya, plugin Breadcrumb NavXT adalah pilihan yang sangat baik.

Untuk menginstal plugin, buka Dashboard WordPress Anda dan arahkan ke Plugins > Add New. Kemudian cari repositori WordPress untuk "breadcrumb navxt". Setelah Anda melihat plugin, klik untuk menginstal dan mengaktifkannya.

Untuk memanggil remah roti agar ditampilkan di situs web Anda, Anda dapat menggunakan widget Breadcrumb NavXT bawaan yang disediakan di halaman widget. Ini akan memungkinkan Anda untuk menyeret widget ke berbagai area widget yang disediakan oleh tema Anda. Untuk melakukan ini, buka Dashboard WordPress Anda dan arahkan ke Appearance > Widgets. Kemudian seret widget ke area widget atau pilihan Anda dan perbarui pengaturan widget.

Untuk contoh ini, saya menggunakan tema Divi untuk menampilkan remah roti di bagian atas bilah sisi saya. Berikut tampilan pada sebuah postingan.

Mirip dengan contoh Yoast Breadcrumb, Anda juga dapat memanggil jejak breadcrumb ke situs Anda dengan menambahkan kode yang diperlukan ke tema anak Anda. Berikut adalah kode yang mereka berikan yang sesuai dengan skema.org breadcrumblist:

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

Karena saya menggunakan tema Divi untuk contoh ini, saya akan menambahkan kode ke file Single.php tema Anak Divi saya tepat di atas tag artikel. Ini akan menampilkan remah roti di bagian atas semua posting saya.

Berikut adalah tampilan postingan setelah menambahkan kode.

Mengkonfigurasi Breadcrumbs menggunakan pengaturan plugin

Plugin Breadcrumb NavXT memiliki beberapa opsi canggih untuk mengonfigurasi breadcrumb Anda. Anda dapat menyesuaikan seluruh template remah roti Anda untuk taksonomi yang berbeda dan banyak lagi. Anda bisa mendapatkan akses ke pengaturan ini dari Dasbor WordPress Anda dengan menavigasi ke Pengaturan > Breadcrumb NavXT.

Menata remah roti

Jika Anda ingin menata remah roti, Anda dapat menargetkan kelas yang disebut "remah roti" yang disertakan dalam kode.

Cukup tambahkan CSS berikut ke file style.css tema anak Anda atau ke CSS tambahan penyesuai tema:

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Jika Anda ingin menggunakan widget remah roti dengan tema Divi, Anda juga dapat menggunakan modul bilah sisi Divi untuk menambahkan gaya ke remah roti di dalam Divi Builder.

Pikiran Akhir

Breadcrumb adalah bagian penting dari sebuah situs web baik untuk kegunaan dan SEO. Jadi jika Anda mempertimbangkan untuk menambahkan remah roti ke situs WordPress Anda, saya sarankan Anda mulai dengan metode yang disediakan oleh plugin yang disebutkan dalam artikel ini (Yoast SEO dan Breadcrumb NavXT). Paling masuk akal untuk menggunakan remah roti Yoast jika Anda sudah memanfaatkan plugin SEO mereka karena sudah siap membantu Anda. Namun, Breadcrumb NavXT juga merupakan opsi yang sangat dapat disesuaikan. Tentu, Anda mungkin harus mengakses file tema Anda, tetapi secara keseluruhan, prosesnya sederhana. Jika ada, saya harap ini membantu meringankan rasa sakit karena mendapatkan remah roti di situs WordPress Anda sendiri.

Saya berharap untuk mendengar dari Anda di komentar.

Bersulang!