Membuat Breadcrumb di GeneratePress Tanpa Plugin

Bagikan

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.

Membuat Breadcrumb di GeneratePress
Breadcrumb WordPres

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).

Beli GeneratePress Premium

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).
Membuat Breadcrumb di GeneratePress
Aktifkan Modul Elements GeneratePress

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.
Membuat Breadcrumb di GeneratePress
Kode Breadcrumb Rank Math

Sesuaikan pengaturan seperti berikut:

Settings

  1. Hook > generate_before_content.
  2. Aktifkan Execute PHP

Display Rules

  • Location > All Singular.
Membuat Breadcrumb di GeneratePress
Display Rules 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.

Membuat Breadcrumb di GeneratePress
Modifikasi tampilan breadcrumb GeneratePress

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.

Baca juga: Menggunakan Google Fonts Local di GeneratePress

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.
Membuat Breadcrumb di GeneratePress
Breadcrumbs GeneratePress Yoast

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.
Membuat Breadcrumb di GeneratePress
Elements GeneratePress Yoast

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 PHP: √.
  • Display Rules -> Location: All Singular.
  • Terbitkan.
Membuat Breadcrumb di GeneratePress
GeneratePress breadcrumbs dengan Slim SEO

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;
}

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.

Tinggalkan komentar