Cara Membuat Breadcrumb Terbaru di WordPress Tanpa Plugin

52 views

Kangbedol.com – Sesuai dengan judul diatas Cara Membuat Breadcrumb Terbaru di WordPress Tanpa Plugin, mengapa saya buat tanpa plugin, ya mungkin sebagian dari anda yang berkecimpung di dunia blogger sudah pada tahu bahwa membuat blog di Wordpreess sangat edentik sekali dengan yang namanya plugin, sangat beda sekali jika dibandingkan dengan blogspot yang semuanya serba manual. Namun disini saya tidak akan membahas apa itu Plugin WordPress.

Artikel ini saya buat bedasarkan pengalaman saya dalam membuat sebuah blog di WordPress Self Hosting, dimana waktu itu saya sangat minim sekali pengatahuan tentang membuat blog di WordPress self hosting. Namun dengan alasan ingin memiliki sebuah blog pribadi dengan template yang bagus, saya pun terus mencari tahu tentang cara- cara mempercantik sebuah themes/template di WordPress.

Salah satu yang ingin saya pasang pada template saya adalah sebuah Breadcrumb. Apa itu breadcrumb? saya sendiri juga kurang paham tentang apa itu breadcrum, namun yang pasti Breadcrum adalah sebuah Link Navigasi yang digunakan untuk menampilkan link serta sub link yang menuju ke sebuah halaman blog. Untuk lebih jelasnya coba anda perhatikan Struktur Breadcrumb yang ada pada website Bedolblog pada gambar yang sudah saya tandai dengan kolom merah dibawah ini.

Cara Membuat Breadcrumb Terbaru di WordPress Tanpa Plugin
Breadcrumb Tanpa Plugin di WordPress

Dari gambar diatas terlihat jelas struktur breadcrumb yang menunjukan Home Bedol Blog (Halaman Utama) => Tutorial (Kategori Artikel) => Cara Baru Setting CCTV Online di HP Android (Judul Artikel). Dengan demikian pengunjung tahu bahwa artikel yang anda buat merupakan jenis kategori tutorial, sehingga jika ada pengunjung ingin mengetahui lebih banyak lagi tentang tutorial yang anda buat tinggal meng-klik kata tutorial maka secara otomatis akan menampilkan semua jenis postingan yang berhubungan dengan tutorial diblog anda.

Banyak sekali ke untungan memasang breadcrumb di template blog/website, salah satunya pengunjung akan sagat mudah untuk menjelajahi halaman blog yang kita miliki, sebab pengunjung bisa mengetahui dari tampilan yang muncul dari link navigasi breadcrumb, sudah sedalam apa mereka menjelajahi blog/wibsite anda. Selain itu ada yang mengatakan bisa menjadikan artikel yang anda posting cepat terindex oleh google (seo).

Cara Memasang Breadcrumb di WordPress Tanpa Plugin

Untuk memasang atau menampilkan sebuah breadcrumb di wordpress sebenarnya ada banyak cara yang bisa anda lakukan, termasuk salah satunya cara manual yang akan saya jelaskan ini, atau menggunakan sebuah plugin breadcrumb yang tersedia kusus untuk wordpress.

Jika anda tertarik untuk memasang breadcrumb di wordpress secara manual atau tanpa plugin, seperti yang sudah saya lakukan, anda dapat mengikuti langkah-langkah yang akan saya jelaskan dibawah ini.

Pertama, membuat sebuah perintah get_breadcrumb(), dimana perintah ini nantinya harus anda tambahkan pada file functions.php yang ada pada themes/template yang anda gunakan. Dengan Cara Klik Appearance => Themes => Edit, lalu cari Theme Function (function.php). Tambahkan kode breadcrumb dibawah ini kedalam file function.php sesudah kode <?php, kemudian klik Update File, untuk menyimpan perubahan.

/*————————————————————*/
/* Breadcrumb WordPress
/*————————————————————*/
function the_breadcrumb() {
if (!is_home()) {
echo ‘<a href=”‘;
echo get_option(‘home’);
echo ‘”>’;
bloginfo(‘name’);
echo “</a> » “;
if (is_category() || is_single()) {
the_category(‘, ‘);
if (is_single()) {
echo ” » “;
the_title();
}
} elseif (is_page()) {
echo the_title();
}
}
}

Selanjutnya untuk memanggil kode Breadcrumb diatas tadi, anda harus menambahkan kode dibawah ini pada file Single.php di bawah <header> atau sebelum <?php the_title(); ?> anda bisa mencoba-coba dimana menempatkan breadcrumb pada posisi yang tepat, jangan lupa untuk klik Update File.

<div id=”breadcrumb”>
<?php the_breadcrumb(); ?>
</div>

Terakhir, anda ingin membuat agar tempilan Breadcrumb sedikit berbeda dan menarik, atur pada file stlye css sesuai dengan kebutuhan yang anda inginkan. Contoh kode style css yang saya gunakan diblog ini :

/*-[ Breadcrumb ]——————-*/
#breadcrumb{ background:#fff;
margin-bottom: 5px;
display:block;
color: #777;
font-weight: normal;
border-left: 3px solid #b11c42;
padding-left: 55px;
}

Sekali lagi jangan lupa untuk menyimpan semua perubahan yang sudah anda lakukan pada theme yang anda pakai dengan meng-klik Update File, selanjutnya lihat hasilnya apakah anda sudah berhasil membuat breadcrumb, jika tidak ada masalah yang berarti, pasti anda berhasil.

Itulah sedikit cara yang saya lakukan untuk memasang breadcrumb di blog saya ini, namun demikian jika anda tidak ingin menggunakan cara manual ini, anda bisa menggunakan plugin breadcrumb di wordpress.


Baca Artikel Lainnya:

Leave a Reply

Your email address will not be published. Required fields are marked *