Membuat Breadcrumbs Valid HTML5 Tanpa Plugin Di Wordpress

Ditulis oleh: Adhy Suryadi

Ditulis pada: 6/21/2015

Sebenarnya untuk membuat breadcrumbs di wordpress tidak harus repot-repot. Sudah banyak tersedia plugin untuk membuatnya, tinggal kita pilih sesuai selera. Seperti halnya saya sendiri, pada blog wordpress saya menggunakan fitur breadcrumbs dari plugin SEO Yoast.

Namun setelah saya cek validasi HTML5, ternyata breadcrumbs ini tidak valid HTML5 dan juga tidak memiliki title tag pada link-nya. Karena ini dari plugin, maka otomatis kita tidak bisa membetulkannya. Maka dari itu saya memutuskan untuk mecoba menggunakan breadcrumbs tanpa plugin.

Tidak sulit untuk mencari cara membuat breadcrumbs tanpa plugin di wordpress, sudah banyak tersebar di Google hehehe... coba aja ketik keyword-nya sendiri di Google.

Namun masalahnya, tutorial-tutorial tersebut ternyata hasilnya sama seperti breadcrumbs yang sebelumnya saya pakai yaitu tidak valid HTML5 dan juga tidak memiliki title tag pada link-nya. Nah dari situlah kemudian saya mencoba memodifikasinya dan alhamdulillah bisa valid HTML5 juga memiliki title tag pada link-nya.

Ini hasil validasi HTML5 blog Wordpress saya, silahkan cek di sini.

Bagaimana tertarik untuk membuat breadcrumbs valid HTML5 ini di blog wordpress Anda? Silahkan ikuti langkah-langkahnya di bawah ini.

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;

Perlu diingat! Breadcrumbs ini menggunakan font Awesome untuk ikonnya, jadi pastikan dulu Anda sudah memasanf font Awesome di blog Anda.

Langkah Kedua

Silahkan copy kode di bawah ini dan simpan di file single.php di atas kode title post.

<div id="breadcrumbs">

<?php breadcrumbs(); ?>

</div>

Kalau di template saya menjadi seperti berikut:

<article <?php post_class(); ?>>

<div id="breadcrumbs">

<?php breadcrumbs(); ?>

</div>

<h1 class="post-title pad entry-title"><?php the_title(); ?></h1>

Langkah Ketiga

Adalah mengatur tampilan breadcrumbs dengan CSS, saya menggunakan CSS sederhana seperti di bawah ini, Anda bisa mengatur tampilannya sesuai selera Anda dengan CSS. Dan silahkan simpan di file style.css

#breadcrumbs{font-weight:bold}

#breadcrumbs a{font-weight:normal}

Dan hasilnya seperti pada gambar di bawah ini


Selesai... sekarang silahkan lihat penampakannya di salah satu postingan Anda. Selamat mencoba.