Theme wordpress gratisan yang dibagikan dengan General Public License (GPL) sering tidak memiliki fitur breadcrumb. Padahal fitur ini sangat berguna bagi website yang memiliki banyak konten dan banyak visitor. Breadcrumb akan sangat membantu UI/UX dari suatu website. Dia akan menjadi navigasi atau petunjuk jalan bagi visitor dan robot crawl google yang sedang mengunjungi website kita.

Saya ambil contoh theme wordpress generatepress dan astra. Kedua theme wordpress ini ringan, loading cepat namun tidak memiliki fitur breadcrumb. Anda dapat mengatasi kekurangan tersebut dengan breadcrumb dari plugin seo by yoast. Tapi, bagaimana cara setting breadcrumb yoast pada theme wordpress?

Cara setting breadcrumb yoast 2019 pada theme wordpress sangat mudah. Anda hanya perlu mengaktifkan fitur breadcrumb dari plugin seo by yoast. Kemudian Anda perlu memasang kode yang telah dibuat tim yoast pada theme wordpress Anda. Ingat, cara peletakan kode harus sesuai dengan aturan penempatan breadcrumb. Setelah itu simpan perubahan pada kode theme. Lalu, coba tes dengan membuka halaman post yang Anda jadikan target breadcrumb.

Saya akan menjelaskan cara setting breadcrumb yoast 2019 secara lebih detail melalui studi kasus pada theme wordpress generatepress.

Kenapa memilih theme generatepress?

Ya, karena saya menyukai theme wordpress ini. Jika Anda menggunakan theme yang lain, nanti saya akan memberikan catatan agar bisa Anda praktekkan di theme wordpress Anda sendiri.

Pada studi kasus ini saya menggunakan:

1. Plugin SEO by Yoast 2019
2. Theme GeneratePress
3. WordPress 5.2.1

Cara Aktivasi Fitur Breadcrumb Yoast 2019

Tahap #1: Login ke dashboard admin wordpress

Untuk dapat melakukan aktivasi fitur breadcrumb plugin seo by yoast Anda perlu masuk ke dashboard admin di wordpress Anda. Saya menggunakan wordpress versi 5.2.1.

Tahap #2: Masuk ke halaman pengaturan breadcrumb plugin seo by yoast

Setelah Anda login, cari tombol menu SEO di bagian kiri bawah dashboard admin wordpress. Disana akan ada lambang icon huruf Y yang menunjukan ciri dari plugin Yoast. Klik menu SEO >> klik search appearance.

Anda perlu masuk ke dashboard admin di wordpress Anda. Saya menggunakan wordpress versi 5.2.1. Setelah Anda login, cari tombol menu SEO di bagian kiri bawah dashboard admin wordpress. Disana akan ada lambang icon huruf Y yang menunjukan ciri dari plugin Yoast. Klik menu SEO >> klik search appearance.

Anda akan diarahkan ke halaman Search Appearance – Yoast SEO. Pada halaman itu cari dan klik menu breadcrumb. Pada kotak dialog dibawah tulisan ” Enable Breadcrumbs “, klik enable. Setelah breadcrumb di aktifkan (enable), akan muncul halaman pengaturan breadcrumb. Langkah selanjutnya adalah klik save changes di halaman paling bawah pengaturan bradcrumb.

5 Tips pengaturan breadcrumb yoast 2019 bagi pemula:

Pertama, Apabila website Anda berbahasa indonesia, ganti tulisan “home” pada kolom Anchor text for the Homepage dengan kata beranda agar visitor Anda lebih mudah memahami. Apabila website Anda fokus menjaring visitor dari negara lain, sesuaikan saja dengan arti kata homepage dengan bahasa negara target Anda.

Kedua, Tampilkan link hierarki homepage>>nama kategori>>judul post dengan mengubah settingan “Taxonomy to show in breadcrumbs for content types“. Isi kotak dialog dibawahnya dengan memilih category.

Ketiga, Apabila theme wordpress yang Anda pakai tidak memiliki warna untuk membedakan artikel yang mengandung tautan (link), Anda dapat mengaktifkan pengaturan “Bold the last page”. Saat pengaturan ini aktif, halaman terakhir dari struktur link breadcrumb akan memiliki ditulis tebal, sebagai tanda pembeda dari breadcrumb induknya.

Keempat, jika Anda tidak mengetahui secara detail fungsi dari setiap pengaturan yang ada di halaman pengaturan breadcrumb yoast, sebaiknya Anda biarkan sesuai settingan bawaan saya, itu juga sudah powerfull.

Kelima, bagi Anda yang paham dengan alur penjelasan dalam tutorial ini, saya akan membagikan cara setting Breadcrumb Yoast 2019 yang saya pakai. Anda dapat menirunya atau memodifikasinya sesuai kebutuhan Anda.

Saya hanya mengubah pengaturan di tiga tempat tersebut. Selebihnya saya membiarkan pengaturan breadcrumb seperti standart bawaan plugin seo by yoast. Anda penasaran dengan hasil setingan ini? berikut ini saya tampilkan hasilnya.

Tahap #3: Simpan pengaturan breadcrumb yoast Anda.

Setelah Anda selesai mengaktifkan fitur enable breadcrumb yoast dan telah melakukan pengaturan breadcrumb yoast sesuai keinginan Anda, langkah sejanjutnya adalah menyimpan semua pengaturan tersebut agar pengaturan yang Anda pilih dapat dijalankan oleh sistem breadcrumb yoast. Cari dan klik tombol “save changes” di halaman paling bawah pengaturan breadcrumb. Selesai, semua pengaturan Anda akan segera diaplikasikan oleh sistem.

Cara Setting Breadcrumb Yoast 2019

Saya ucapkan selamat bagi Anda yang sudah sukses mengaktifkan fitur breadcrumb yoast dan telah melakukan pengaturan sesuai keinginan Anda. Namun, perlu saya beri tahu, breadcrumb theme wordpress Anda tidak akan muncul sampai Anda melakukan pemasangan code “breadcrumb yoast” pada halaman single.php.

Tapi, saya tidak bisa bahasa pemrograman? Saya tidak bisa membaca kode theme wordpress?

Tenang, saya akan membimbing Anda secara bertahap agar Anda paham cara kerjanya.

Langkah #1: Temukan kode pemanggilan fungsi breadcrumb yoast.

Anda harus memiliki kode pemanggilan pengaturan breadcrumb yoast. Kode ini saya ambil dari halaman resmi website yoast. Kode ini sangat aman untuk website Anda karena resmi dikeluarkan oleh pihak pengembang breadcrumb yoast.

Ada dua jenis kode pemanggilan breadcrumb yoast:

1. Kode untuk bisa memunculkan breadcrumb yoast secara otomatis di seluruh halaman post di website kita. Kelebihan menggunakan kode breadcrumb otomatis ini adalah:

• Anda hanya perlu memasangkan kode sekali saja pada halaman single.php atau content-single.php atau header.php.
• Semua pembuatan breadcrumb akan berjalan otomatis dan dikelola dengan baik oleh sistem manajemen breadcrumb yoast.
• Hemat waktu dan mudah dikerjakan.

Kode pemanggilannya seperti dibawah ini:

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

2. Kode untuk bisa memunculkan breadcrumb yoast hanya pada halaman atau post tertentu dan dilakukan secara manual. Kelebihan menggunakan kode breadcrumb manual ini adalah:

• Anda dapat melakukan pemasangan secara manual dan secara langsung di post atau page artikel Anda.
• Anda tidak memerlukan pemahaman tentang cara pemasangan kode di badan theme wordpress.
• Lebih mudah dilakukan, namun akan memerlukan banyak waktu jika jumlah post di website Anda sangat banyak.

Kode pemanggilannya seperti dibawah ini:

Letakkan kode diatas pada halaman post atau page secara manual. Hasilnya akan seperti link breadcrumb dibawah ini:

[wpseo_breadcrumb]

Setiap kode pemanggilan mempunyai fungsi dan cara peletakan masing-masing.

Langkah #2: Tempelkan kode pemanggilan ke theme wordpress

Dari kedua kode diatas, saya lebih suka menggunakan kode #1, atau kita sebut saja kode breadcrumb yoast otomatis. Baik, lanjut ke tahap pemasangan.

Anda perlu mencari halaman editor pada badan theme wordpress Anda untuk memasang kode breadcrumb yoast. Catatan: Beda theme kadang memiliki struktur penulisan kode berbeda, tempat peletakan kodenya juga berbeda.

Kode breadcrumb yoast disarankan diletakkan di salah satu di halaman theme wordpress berikut ini:

1. single.php
2. content-single.php
3. header.php

Studi Kasus Pemasangan Kode Breadcrumb Yoast Pada Theme GeneratePress.

Untuk lebih jelasnya, saya akan mempraktekannya secara langsung pada theme GeneratePress.

Tahap #1: Pastikan Anda sudah menginstall theme GeneratePress di wordpress Anda.

Pada studi kasus ini saya menggunakan wordpress versi 5.2.1 dengan theme GeneratePress gratisan dengan lisensi GPL. Theme GeneratePress yang saya gunakan versi 2.2.2 di buat oleh Tom Usborne.

Tahap #2: Masuk ke halaman theme editor GeneratePress.

Bagi Anda yang masih pemula, silakan perhatikan tutorial ini dengan lebih teliti dan bertahap agar tidak kehilangan detail saat pemasangan kode. Untuk masuk ke theme editor GeneratePress, Anda dapat melakukan dengan cara berikut ini:

Klik Appearance >> Klik Theme Editor

Kemudian cari halaman single.php atau content-single.php atau header.php di sidebar theme file.

Anda hanya perlu memilih salah satu saja dari ketiga halaman tersebut. Namun, saya akan memberitahu lebih awal, setiap halaman itu akan memunculkan breadcrumb di tempat yang berbeda-beda. Jadi, pilihlah posisi breadcrumb yang sesuai dengan kebutuhan Anda.

Oia, beda theme kadang beda struktur kodenya, jadi setelah menemukan salah satu dari ketiga jenis file tersebut Anda harus mencobanya satu per satu untuk menemukan posisi yang bagus.

Tahap #3: Letakkan kode pemanggilan fitur breadcrumb yoast di badan theme.

Kode pemanggilan fitur breadcrumb yoast:

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

a. Cara meletakkan kode breadcrumb yoast di single.php

Klik single.php >>salin kode breadcrumb yoast>>tempelkan di bawah kode “get_header(); ?>“.

Setelah Anda menempelkan kode tepat dibawah get_header, jangan lupa klik update file untuk menyimpan penambahan kode. Hasil dari pemasangan kode tersebut seperti ini:

Posisi breadcrumb yoast berada diatas judul artikel dan posisinya agak menjorok ke kiri. Untuk merapikan posisi ini Anda dapat melakukan sedikit kustomisasi CSS (Cascading Style Sheet).

b. Cara meletakkan kode breadcrumb yoast di content-single.php

Klik content-single.php >>salin kode breadcrumb yoast>>tempelkan di atas kode <header class=”entry-header”>

Setelah Anda menempelkan kode tepat di atas entry-header, jangan lupa klik update file untuk menyimpan penambahan kode. Hasil dari pemasangan kode tersebut seperti ini:

Posisi bredcrumb yoast masuk kedalam kontainer konten website, tepat diatas judul artikel dan sejajar dengan search bar. Posisi peletakannya juga rapi dan rata kiri dengan judul artikel, jadi Anda tidak perlu untuk melakukan kustomisasi dengan CSS (Cascading Style Sheet).

c. Cara meletakkan kode breadcrumb yoast di header.php

Klik header.php >>salin kode breadcrumb yoast>>tempelkan di bawah kode <head>

Setelah Anda menempelkan kode tepat di bawah head, jangan lupa klik update file untuk menyimpan penambahan kode. Hasil dari pemasangan kode tersebut seperti ini:

Posisi bredcrumb yoast tepat berada di pojok kanan atas dari halaman website. Menurut saya posisi ini unuk dan sangat mencolok namun kurang simetris. Untuk merapikan posisi ini Anda dapat melakukan sedikit kustomisasi CSS (Cascading Style Sheet).

Menurut Anda, dari ketiga posisi pemasangan tersebut, mana yang paling Anda suka?

Saya lebih menyukai pemasangan breadcrumb yoast pada content-single.php, atau posisi peletakan kedua. Karena hasil breadcrumbnya rapi dan kita tidak perlu melakukan kustomisasi tambahan dengan CSS (Cascading Style Sheet).

Tahap #4: Evaluasi, editing dan penyimpanan

Setelah Anda selesai memasang kode breadcrumb yoast sesuai posisi yang Anda inginkan, Anda perlu melakukan evaluasi atau pengecekan tampilan breadcrumb di berbagai tampilan layar, misal: dekstop, mobile, tablet.

Cara pengecekannya sangat simple:

1.. Buka post yang ingin Anda evaluasi.

2. Klik tombol F12 pada keyboard Anda untuk memunculkan jendela inspect element.

3. Pilih jenis tampilan yang ingin Anda uji.

Pastikan breadcrumb yoast dapat tampil secara baik dan responsif diberbagai ukuran layar. Jika Anda menemukan ada keanehan atau tampilan breadcrumb error, segera lakukan proses editing. Setelah semua proses evaluasi dan editing selesai, langkah terakhir adalah menyimpan perubahan dengan cara klik tombol update file di halaman theme editor.

Kesimpulan

Theme wordpress yang tidak memiliki breadcrumb dapat dengan mudah ditambahi fitur breadcrumb dengan menggunakan plugin seo by yoast. Anda hanya perlu mengaktifkan fitur breadcrumb pada plugin seo by yoast, kemudian tempelkan kode pemanggilan fitur breadcrumb yoast di theme Anda.

Jika pemasangan benar, maka website Anda sekarang dapat menampilkan breadcrumb. Apabila Anda menggunakan theme GeneratePress sama seperti saya, saya merekomendasikan untuk memasang breadcrumb di content-single.php.