bir eksik dışında wordpress'e ekleme şöyle oluyor:
header.php dosyasına ekleyin:
<script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.1.3.js" type="text/javascript" language="JavaScript"></script>
<script src="<?php bloginfo('template_directory'); ?>/js/jquery.jBreadCrumb.1.1.js" type="text/javascript" language="JavaScript"></script>
<script type="text/javascript">
jQuery(document).ready(function()
{
jQuery("#breadCrumb3").jBreadCrumb();
})
</script>style.css dosyanıza ekleyin:
.module:after
{
clear: both;
content: ".";
display: block;
height: 0;
visibility: hidden;
}
/* float clearing for IE6 */
* html .module
{
height: 1%;
overflow: visible;
}
/* float clearing for IE7 */
* + html .module
{
min-height: 1%;
}
.breadCrumb
{
margin: 0;
padding: 0;
float: left;
display: block;
height: 21px;
overflow: hidden;
width: 990px;
padding:5px;
border:solid 1px #dedede;
background:#fff;
}
.breadCrumb ul
{
margin: 0;
padding: 0;
height: 21px;
display: block;
}
.breadCrumb ul li
{
display: block;
float: left;
position: relative;
height: 21px;
overflow: hidden;
line-height: 21px;
margin: 0px 6px 0px 0;
padding: 0px 10px 0px 0;
font-size: .9167em;
background: url(images/Chevron.gif) no-repeat 100% 0;
}
.breadCrumb ul li div.chevronOverlay
{
position: absolute;
right: 0;
top: 0;
z-index: 2;
}
.breadCrumb ul li span
{
display: block;
overflow: hidden;
}
.breadCrumb ul li a
{
display: block;
position: relative;
height: 21px;
line-height: 21px;
overflow: hidden;
float: left;
}
.breadCrumb ul li.first a
{
height: 16px !important;
text-indent:-1000em;
width:16px;
padding: 0;
margin-top: 2px;
overflow: hidden;
background:url(images/IconHome.gif) no-repeat 0 0;
}
.breadCrumb ul li.first a:hover
{
background-position: 0 -16px;
}
.breadCrumb ul li.last
{
background: none;
margin-right: 0;
padding-right: 0;
}
.chevronOverlay
{
display: none;
background: url(images/ChevronOverlay.png) no-repeat 100% 0;
width: 13px;
height: 20px;
}
son olarak bunu göstereceğiniz (index.php, single.php vb.) dosyaya ekleyin: <!-- Bread Crumb Code - Be sure to include the chevronOverlay element so we can load the semi transparend png -->
<div class="breadCrumbHolder module">
<div id="breadCrumb3" class="breadCrumb module">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
Mutation Generation System™
</li>
</ul>
</div>
</div>
<!-- End Bread Crumb Code -->şu
dosyaları da indirip, temanızın içine atın.
Görünümü: http://img710.imageshack.us/img710/9710/breadcrum.png -----------------------------------------------------------
gelelim en başta bahsettiğim eksiğe...
uygun bir breadcrumb kodu bulamadım.
daha doğrusu mevcut olan php kodlar üzerinde düzenleme yapamadım.
o düzenlemede gösterilecek bağlantıların ve son gelinen yerin
<li></li> elementleri arasında olması lazım. ki dikkat edilirse, son kısımda verdiğim ve uygun bir yere yerleştirin dediğim kodda tüm linkler şöyle;
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Biocompare Home</a>
</li>
<li>
Mutation Generation System™
</li>
bunun dışında yapılacak işlemler yukarıdakilerden ibaret. sadece breadcrumb kodunun uygun şekilde düzenlenmesi yeterli olacak.
ben yarın (yani bugün) yine deneme yapacağım. ama dilerseniz php bilen arkadaşlardan yardım alabilirsiniz.
şimdilik benden bu kadar.