Membuat Breadcrumb di GeneratePress Tanpa Plugin

Fitur breadcrumbs yang menghilang di GeneratePress tentu memiliki pertimbangan tertentu. Inilah cara membuat breadcrumb di generatepress tanpa plugin.

GeneratePress adalah theme WordPress yang ringkas dan ringan. Karena ringan, maka beberapa fitur memang hilang dari theme ini. Salah satunya adalah penggunaan breadcrumb. Bagaimana cara membuat breadcrumb di GeneratePress?

Breadcrumbs adalah salah satu navigasi dalam sebuah situs / website. Keberadaannya memberikan petunjuk penting terkait posisi halaman di dalam situs. Dan fitur ini sangat penting bagi SEO. Jadi sangat penting untuk menambahkan breadcrumb ini.

Kami akan membantu Anda membuat breadcrumb di GeneratePress tanpa bantuan plugin. Kenapa tanpa plugin? Jawabannya adalah meminimalisir sumber daya.

Sebagai informasi: cara ini hanya untuk pengguna GeneratePress premium karena akan menggunakan salah satu fitur premium yaitu elements. Anda bisa membeli theme GeneratePress premium dari kami dengan harga terjangkau (klik gambar dibawah ini).

Membuat Breadcrumb di GeneratePress

Rank Math

Yang dibutuhkan:

• Plugin SEO Rank Math.
• GeneratePress Premium (modul elements).
• Aktifkan modul elements GeneratePress di menu Tampilan > GeneratePress (lihat gambar berikut).

Atur Breadcrumb di Rank Math

1. Masuk ke Rank Math > Pengaturan Umum > Breadcrumb > Aktifkan fungsi breadcrumb.
2. Salin kode breadcrumb yang sudah disediakan Rank Math (salin yang berawalan <?php ….).

Membuat Elements

1. Masuk ke > Tampilan > Elements
2. Add New Element > Choose Element Type > pilih Hook.
3. Beri nama Hook bebas.
4. Paste / tempel kode breadcrumb yang tadi disalin dari Rank Math.

Atau salin kode berikut untuk Rank Math:

[rank_math_breadcrumb]

Atau kode ini:

<?php if (function_exists('rank_math_the_breadcrumbs')) rank_math_the_breadcrumbs(); ?>

Sesuaikan pengaturan seperti berikut:

Settings

1. Hook > generate_before_content.
2. Aktifkan Execute PHP.

Display Rules

• Location > All Singular.

Setelah itu klik terbitkan.

Sampai langkah ini membuat breadcrumbs di GeneratePress sudah berhasil.

Modifikasi Tampilan Breadcrumb

Langkah ini opsional. Jadi Anda boleh melakukannya dan boleh tidak. Langkah ini hanyalah mempercantik tampilan breadcrumb dengan memberikan efek bayangan (shadow) di sekitar kotak (box) kontainer.

Kita akan memasukkan kode CSS berikut ini. Salin kode CSS berikut:

.rank-math-breadcrumb p {
padding: 10px 10px 10px 35px;
margin-left: -30px;
background: #fafafa;
color: #5f5f5f;
font-size: 14px;
box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

Salin dan tempel (paste) kode tersebut di Tampilan > Sesuaikan > CSS Tambahan.

Yoast Breadcrumbs

Aktifkan Breadcrumbs Yoast

Bagi Anda pengguna plugin Yoast, bisa menggunakan cara berikut ini.

Buka menu:

• Tampilan Pencarian -> Breadcrumbs -> Enable Breadcrumbs: Aktifkan.
• Taksonomi -> Pos = Kategori.
• Yang lain biarkan kondisi standar.

Buat Element di GeneratePress

Selanjutnya membuat element untuk menampilkan breadcrumbs.

• Buka Tampilan -> Elements -> Add New Element -> Hook.
• Masukkan kode berikut.

<?php if ( function_exists('yoast_breadcrumb') ) { ?>
	<div class="grid-container grid-parent">
		<div class="page-header">
			<?php yoast_breadcrumb('<p id="breadcrumbs">','</p>'); ?>
	
		</div>
	</div>
<?php } ?>

• Settings -> Hook: generate_before_content.
• Execute PHP: √.
• Display Rules -> Location -> All Singular.

Modifikasi Tampilan Breadcrumb

Masukkan kode CSS berikut untuk mempercantik dan merapikan penampilan. Masukkan di Tampilan > Sesuaikan > CSS Tambahan.

#breadcrumbs {
    padding: 10px 10px 10px 35px;
    margin-left: -30px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px !important;
}

Slim SEO

Membuat breadcrumb di GeneratePress dengan fitur milik Slim SEO bisa menggunakan cara berikut.

Membuat Elements

• Tampilan -> Elements -> Add New Element -> Hook.
• Masukkan kode berikut.

[slim_seo_breadcrumbs]

• Settings -> Hook -> generate_before_entry_title.
• Execute Shortcodes: √.
• Display Rules -> Location: All Singular.
• Terbitkan.

Modifikasi Tampilan Breadcrumb

Baik mari kita percantik dan rapikan breadcrumbs ini dengan kode CSS berikut. Masukkan melalui Tampilan > Sesuaikan > CSS Tambahan.

.breadcrumbs {
    padding: 10px 10px 10px 35px;
    margin-bottom: 15px;
    background: #fafafa;
    color: #5f5f5f;
    font-size: 14px;
    box-shadow: rgba(23, 43, 99, .14) 0 7px 28px;
}

Baca juga: Membuat Author Box di GeneratePress Tanpa Plugin

Kesimpulan

Hilangnya fitur breadcrumb pada theme GeneratePress itu tentu memiliki pertimbangan tersendiri dari pihak developer. Namun hal ini bukanlah halangan bagi kita supaya bisa berkreasi dan sedikit melakukan modifikasi untuk menambahkan hal-hal yang menjadi kekurangannya.

Kami harap panduan singkat untuk membuat breadcrumb di GeneratePress ini bisa membantu Anda. Silahkan meninggalkan komentar jika menemukan kesulitan.