Cara Mudah Buat Breadcrumbs Snippets di Wordpress Tanpa Plugin

Cara Mudah Buat Breadcrumbs Snippets di Wordpress Tanpa Plugin. Sebuah breadcrumb navigasi memungkinkan pengguna untuk mengetahui di mana mereka berada dalam struktur hirarki dan menavigasi kembali ke tingkat yang lebih tinggi dalam hirarki halaman. Selain itu, breadcrumbs dapat mengurangi jumlah tindakan pengguna untuk menavigasi kembali.

Simple saja, jika Anda memiliki sebuah website dengan banyak halaman dan sub-tingkat, dalam rangka meningkatkan kegunaan , Anda perlu menggunakan breadcrumbs snippet. Lebih jelasnya silahkan Anda akan belajar cara membuat sendiri CSS3 breadcrumbs berikut ini.

PHP
Contoh PHP navigasi herarki sederhananya adalah sebagai berikut :

<strong><blink>Anda ada di >> </blink></strong>  
<?php if(is_home()) 		{ ?> 
		Frontpage of <div xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://indotrading.biz">Indotrading Online Media</a></span></div> - Internet marketing and Freelance site
<?php }	if(is_category())	{ ?>
		<div xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://licensesoftware.info">Home</a></span> &raquo;
		<?php
			$catname = single_cat_title("", false);
			// Get the ID of a given category
			$category_id = get_cat_ID( $catname );
			// Get the URL of this category
			$category_link = get_category_link( $category_id );
		?>
		Archive for the &quot; <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="<?php $category_link; ?>"><?php single_cat_title(); ?></a></span> &quot; Category</div>
<?php }	if(is_single()) 	{ ?> 
		<div xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://indotrading.biz">Home</a></span> &raquo;
		<?php
		$category = get_the_category();
		if($category[0]){ echo '<span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="'.get_category_link($category[0]->term_id ).'">'.$category[0]->cat_name.'</a></span>';}
		if($category[1]){ echo ', <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="'.get_category_link($category[1]->term_id ).'">'.$category[1]->cat_name.'</a></span>';}
		if($category[2]){ echo ', <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="'.get_category_link($category[2]->term_id ).'">'.$category[2]->cat_name.'</a></span>';}
		?>		
		&raquo; <strong><?php the_title(); ?></strong></div>
<?php }	if(is_page()) 		{ ?> 
		<div xmlns:v="http://rdf.data-vocabulary.org/#"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="http://sakpasimak.indotrading.biz">Home</a></span> &raquo; <span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" href="<?php the_permalink() ?>"><?php the_title(); ?></a></span></div>'s page
<?php }	if(is_search()) 	{ ?> Search results for keyword &quot;<?php echo $_GET['s']; ?>&quot;
<?php }	if(is_author()) 	{ ?> List of Author's posts
<?php }	if(is_tag()) 		{ ?> Posts Tagged &#8216;<?php single_tag_title(); ?>&#8217;
<?php }	if(is_month()) 		{ ?> Archive for <?php the_time('F, Y'); ?>
<?php }	if(is_year()) 		{ ?> Archive for <?php the_time('Y'); ?>
<?php }	if(is_404())        { ?> 404 Page: Page not found
<?php } ?>

CSS3

Kode script css3 untuk breadcrumbs ini adalah sebagai berikut :

Contoh 1 :

Gambar tampilan breadcrumbs nya :

Kode css3nya :

#breadcrumbs-one{
  background: #eee;
  border-width: 1px;
  border-style: solid;
  border-color: #f5f5f5 #e5e5e5 #ccc;
  border-radius: 5px;
  box-shadow: 0 0 2px rgba(0,0,0,.2);
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-one li{
  float: left;
}

#breadcrumbs-one a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  position: relative;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  background-color: #ddd;
  background-image: linear-gradient(to right, #f5f5f5, #ddd);  
}

#breadcrumbs-one li:first-child a{
  padding-left: 1em;
  border-radius: 5px 0 0 5px;
}

#breadcrumbs-one a:hover{
  background: #fff;
}

#breadcrumbs-one a::after,
#breadcrumbs-one a::before{
  content: "";
  position: absolute;
  top: 50%;
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid;
  right: -1em;
}

#breadcrumbs-one a::after{ 
  z-index: 2;
  border-left-color: #ddd;  
}

#breadcrumbs-one a::before{
  border-left-color: #ccc;  
  right: -1.1em;
  z-index: 1; 
}

#breadcrumbs-one a:hover::after{
  border-left-color: #fff;
}

#breadcrumbs-one .current,
#breadcrumbs-one .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-one .current::after,
#breadcrumbs-one .current::before{
  content: normal;  
}

Contoh 2

Tampilan untuk breadcrumbs contoh 2 ini seperti gambar di bawah ini.

Kode CSS3 nya :

#breadcrumbs-two{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-two li{
  float: left;
  margin: 0 .5em 0 1em;
}

#breadcrumbs-two a{
  background: #ddd;
  padding: .7em 1em;
  float: left;
  text-decoration: none;
  color: #444;
  text-shadow: 0 1px 0 rgba(255,255,255,.5); 
  position: relative;
}

#breadcrumbs-two a:hover{
  background: #99db76;
}

#breadcrumbs-two a::before{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-width: 1.5em 0 1.5em 1em;
  border-style: solid;
  border-color: #ddd #ddd #ddd transparent;
  left: -1em;
}

#breadcrumbs-two a:hover::before{
  border-color: #99db76 #99db76 #99db76 transparent;
}

#breadcrumbs-two a::after{
  content: "";
  position: absolute;
  top: 50%; 
  margin-top: -1.5em;   
  border-top: 1.5em solid transparent;
  border-bottom: 1.5em solid transparent;
  border-left: 1em solid #ddd;
  right: -1em;
}

#breadcrumbs-two a:hover::after{
  border-left-color: #99db76;
}

#breadcrumbs-two .current,
#breadcrumbs-two .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-two .current::after,
#breadcrumbs-two .current::before{
  content: normal;
}

Contoh 3

Dengan menggunakan  border-radius kita bisa mengubah kotaknya menjadi lengkung seperti gambar di bawah ini.

Kode script CSS3 nya :

#breadcrumbs-three{
  overflow: hidden;
  width: 100%;
}

#breadcrumbs-three li{
  float: left;
  margin: 0 2em 0 0;
}

#breadcrumbs-three a{
  padding: .7em 1em .7em 2em;
  float: left;
  text-decoration: none;
  color: #444;
  background: #ddd;  
  position: relative;
  z-index: 1;
  text-shadow: 0 1px 0 rgba(255,255,255,.5);
  border-radius: .4em 0 0 .4em;  
}

#breadcrumbs-three a:hover{
  background: #abe0ef;
}

#breadcrumbs-three a::after{
  background: #ddd;
  content: "";
  height: 2.5em;
  margin-top: -1.25em;
  position: absolute;
  right: -1em;
  top: 50%;
  width: 2.5em;
  z-index: -1; 
  transform: rotate(45deg);
  border-radius: .4em;
}

#breadcrumbs-three a:hover::after{
  background: #abe0ef;
}

#breadcrumbs-three .current,
#breadcrumbs-three .current:hover{
  font-weight: bold;
  background: none;
}

#breadcrumbs-three .current::after{
  content: normal;
}

Cara memasang breadcrumbs :

1. Buat file breadcrumbs.php dengan kode php di atas dan simpan di dalam themes anda yang aktif.

2. Pilih satu dari ketiga contoh CSS3 di atas kemudian copy masuk ke dalam file style.css themes aktif anda.

3. Tambahkan kode berikut :

<?php include (TEMPLATEPATH . '/bread.php'); ?>

setelah judul pada file single.php

Silahkan mencoba dan beri komentar di bawah ini.