Seo açısından önemli bir yere sahip olan Breadcrumb türkçe navigasyon sözcüğü ile eşleşmektedir. Bu uygulamayı arama motorlarının gözdesi olan Dmoz’da kullanmaktadır.Breadcrumb site içerisinde tek bir satır halinde sıralayarak ister sitenin altında ister sitenin üstünde rahatlıkla gösterilebilirsiniz. Breadcrumb sayesinde bulunduğunuz sayfadan bir öncekisine rahatlıkla geçebilirsiniz. Size hem Seo açısından, hemde zaman açısından fayda sağlamaktadır. Arama motoru örümcekleri bu navigasyon sayesinde sitenizi daha crawl ederek sitenizi rahat bir şekilde arama motorlarında üst sıralara çıkarabilmektedir.

WordPress eklenti arşivinde bir çok alternatifi bulunmasına karşılık ben eklenti değil kodlarla işimi hallettim. Adım adım işlemlerimizi gerçekleştiriyoruz. Ben Konu içerisinde başlığın üstüne ekledim siz nereye layık görüyorsanız oraya ekleyin.

1. Adım

Admin panel > Editör > Tekil Yazı (single.php) açıyoruz. Karşımıza gelen kodcuklardan şunu buluyoruz



Hemen altına ekliyoruz.

if (is_page() && !is_front_page() || is_single() || is_category()) {
echo '
    ';
    echo '
  • '.get_bloginfo('name').'
    • ';

    if (is_page()) {
    $ancestors = get_post_ancestors($post);

    if ($ancestors) {
    $ancestors = array_reverse($ancestors);

    foreach ($ancestors as $crumb) {
    echo '
  • '.get_the_title($crumb).'
    • ';
    }
    }
    }

    if (is_single()) {
    $category = get_the_category();
    echo '
  • '.$category[0]->cat_name.'
    • ';
    }

    if (is_category()) {
    $category = get_the_category();
    echo '
  • '.$category[0]->cat_name.'
    • ';
    }

    // Current page
    if (is_page() || is_single()) {
    echo '
  • '.get_the_title().'
    • ';
    }
    echo '
';
} elseif (is_front_page()) {
// Front page
echo '';
}
?>


Sayfamızı kaydediyoruz ve 2. adıma geçiyoruz.

2.Adım

Admin panel > Editör > Stil Sayfası (style.css)

Sayfanın en altına inelim ve gerekli css kodlarımızı ekleyelim.

.breadcrumbs li {
list-style-type: none;

float: left;
margin: 0 0.5em 0 0;
}

.breadcrumbs li:before {
content: "» ";
}

.breadcrumbs .front_page:before {
content: none;
text-top: 10px;
}


Sayfamızı kaydettikten sonra aşağıdaki gibi bir görüntü elde edeceksiniz.