Membuat Breadcrumbs Valid Html5 Tanpa Plugin Di Wordpress

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

Namun sesudah aku cek validasi HTML5, ternyata breadcrumbs ini tidak valid HTML5 dan juga tidak mempunyai title tag pada link-nya. Karena ini dari plugin, maka otomatis kita tidak dapat membetulkannya. Maka dari itu aku tetapkan untuk mecoba memakai breadcrumbs tanpa plugin.

Tidak sulit untuk mencari cara menciptakan 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 kesannya sama ibarat breadcrumbs yang sebelumnya aku pakai ialah tidak valid HTML5 dan juga tidak mempunyai title tag pada link-nya. Nah dari situlah lalu aku mencoba memodifikasinya dan alhamdulillah dapat valid HTML5 juga mempunyai title tag pada link-nya.

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

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

Langkah Pertama

Silahkan copy arahan 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="Membuat Breadcrumbs Valid HTML5 Tanpa Plugin Di Wordpress" 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 memakai font Awesome untuk ikonnya, jadi pastikan dulu Anda sudah memasanf font Awesome di blog Anda.

Langkah Kedua

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

 <div id="breadcrumbs">
 <?php breadcrumbs(); ?>
 </div>

Kalau di template aku menjadi ibarat 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, aku memakai CSS sederhana ibarat di bawah ini, Anda dapat mengatur tampilannya sesuai selera Anda dengan CSS. Dan silahkan simpan di file style.css

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

Dan kesannya ibarat pada gambar di bawah ini


Selesai... kini silahkan lihat penampakannya di salah satu postingan Anda. Selamat mencoba.
Sumber https://www.kompiajaib.com/

Share this post