Membuat Breadcrumbs Valid HTML5 Tanpa Plugin Di Wordpress

Membuat Breadcrumbs Valid HTML5 Tanpa Plugin Di Wordpress

Bola Hero Gawai

Membuat Breadcrumbs Valid HTML5 Tanpa Plugin Di Wordpress

Membuat Breadcrumbs Valid HTML5 Tanpa Plugin Di Wordpress
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

breadcrumbs

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×