aLdy PutRa

Blog informasi seputar Sulap, Magic & Magician, Games, Programming, Gadget, Smartphone, Tips dan Trik.


Membuat Breadcrumb di WordPress Tanpa Menggunakan Plugin


By on July 9th, 2018 in Wordpress

Banyak yang bertanya-tanya,apa itu breadcrumbs? Bagaimana cara membuat breadcrumb di wordpress tanpa plugin? Banyak juga yang sudah menggunakan plugin yoast, tapi masih bingung bagaimana cara memasang breadcrumbs yoast ini sendiri? Nah, karena permasalahan itu lah ahirnya gue coba sharing sama kalian gimana membuat breadcrumb tanpa harus menggunakan plugin.

Membuat Breadcrumb di WordPress

Definisi Breadcrumb

Breadcrumbs biasanya muncul horizontal di bagian atas halaman web, sering di bawah bar judul atau header. Mereka menyediakan link kembali ke halaman sebelumnya setiap pengguna navigasikan melalui untuk sampai ke halaman saat ini atau di situs-hirarkis struktur-halaman induk yang sekarang.

Sudah jelas kan breadcrumb merupakan sebuah navigasi yang tedapat pada halaman situs memiliki fungsi untuk melacak setiap halaman dan postingan sehingga memudahkan pembaca untuk menjelajahi situs berdasarkan kategori yang ada, serta pengunjung tidak akan bingung ketika ingin mencari data yang terdapat pada sebuah situs karena ia bisa memilih topik dengan mudah juga bisa kembali ke halaman utama

Fungsi Breadcrumb Pada Situs dan Search Engine

Template wordpress sendiri secara default tidak memiliki fasilitas breadcrumb artinya kita sendiri yang harus memasangnya. Fungsi breadcrumb pada search engine akan memudahkan mesin pencari untuk merayapi setiap hasil postingan sebuah situs untuk disesuaikan dengan pencarian yang ada sehingga memudahkan para pencari informasi menemukan sumber referensi secara akurat karena dalam hasil pencarian situs akan ditampilkan snipet.

Baca Juga  Ini Dia 3 Cara Mudah Merubah Username Wordpress Kamu!

Bagaimana Cara Membuat Breadcrumb Tanpa Plugin?

Langkah pertama, silahkan copy kode di bawah ini dan simpan di file functions.php

//breadcrumbs
if ( ! function_exists( 'breadcrumbs' ) ) :
function breadcrumbs() {
$delimiter = '<i class="fa fa-angle-right"></i>';
$tagicon = '<i class="fa fa-tag"></i>';
$home = 'Home';

echo '<div itemscope="itemscope" itemtype="http://data-vocabulary.org/Breadcrumb">';
global $post;
echo ' <i class="fa fa-home"></i> <a itemprop="url" title="Home" href="'.home_url( '/' ).'"><span itemprop="title">'.$home.'</span></a> ';
$cats = get_the_category();
if ($cats) {
foreach($cats as $cat) {
echo $tagicon . "<span itemscope=\"itemscope\" itemtype=\"http://data-vocabulary.org/Breadcrumb\">
<a itemprop=\"url\" title=\"$cat->name\" href=\"".get_category_link($cat->term_id)."\" ><span itemprop=\"title\">$cat->name</span></a>
</span>"; }
}
echo $delimiter . the_title(' <span>', '</span>', false);
echo '</div>';
}
endif;

Langkah kedua, silahkan copy kode di bawah ini dan simpan di filesingle.phpdi atas kode title post.

Baca Juga  Cara Membuat Tombol Share Dengan Plugin Wordpress
<div id="breadcrumbs">
<?php breadcrumbs(); ?>
</div>

Langkah ketiga,mengatur tampilan breadcrumbs dengan CSS, gue sendiri menggunakan CSS sederhana seperti di bawah ini, kalian bisa mengatur tampilannya sesuai selera kalian dengan CSS. Silahkan simpan di filestyle.css

#breadcrumbs{font-weight:bold}
#breadcrumbs a{font-weight:normal}

Sebenarnya, cara ini sudah pernah gue tuliskan beberapa tahun yang lalu. Mulai dariMembuat Breadcrumb di WordPress dengan plugin. Nah, tahun ini sepertinya sudah banyak berubah dan akihrnya gue memutuskan untuk menuliskannya kembali dengan cara saat ini. Apakah kalian sudah membuat breadcrumb di wordpress?

Baca Juga  Cara Membuat Breadcrumb di WordPress

Leave a Reply

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