مدرن اسکین

آموزش ساخت Breadcrumb بدون افزونه

breadcrumb

سلام خدمت تمامی مدرن اسکینی های عزیز و گرامی ، در امروز میخوایم به شما آموزش ساخت Breadcrumb رو بهتون بدیم که به شما کمک میکنه تا موقعیت کنونی کاربر در وبسایت رو بهش نشان بدید . یعنی وقتی وارد یه دسته بندی میشید و در اون دسته بندی وارد یه مطلبی میشید در بالای اون پست موقعیت شما نمایش داده میشه که بهش میگن breadcrumb و به صورت مثلا ( خانه » نام دسته بندی » نام پست ).

وجود breadcrumb در هر سایتی میتواند تاثیر خوبی بگذارد و همچنین موجود بودن breadcrumb میتواند در سئوی سایت شما هم تاثیر داشته باشد و میتواند مسیر کاربر رو به صورت ساده نشان بدهد و همچنین موجب میشه موتور های جستجو براحتی به مطالب سایت برسن و به راحتی مطالب سایت شما رو ایندکس کنن و موجب میشه موتور های جستجو مسیر هارا سریع تر پیدا کنند .

خب حالا شروع کنیم به آموزش …

برای اضافه کردن این منوی breadcrumb لازمه تا فایل های functions.php، header.php و style.css را ویرایش کنیم. ابتدا فایل functions.php پوسته مورد نظرتان را باز کنید و کدهای زیر را به آن اضافه کنید:

[php]function breadcrumb_navigation() {
$delimiter = ‘ ’;
$home = ‘صفحه نخست’;
$before = ‘<li><span>’;
$after = ‘</span></li>’;
echo ‘<div class="crumbs"><ul>’;
global $post;
$homeLink = get_bloginfo(‘url’);
if (!is_home() && !is_front_page()) {
echo ‘<li><a href="’ . $homeLink . ‘">’ . $home . ‘</a></li>’;
if ( is_category() ) {
global $wp_query;
$cat_obj = $wp_query->get_queried_object();
$thisCat = $cat_obj->term_id;
$thisCat = get_category($thisCat);
$parentCat = get_category($thisCat->parent);
if ($thisCat->parent != 0) echo(‘<li>’.get_category_parents($parentCat, TRUE, ‘</li><li>’).'</li>’);
echo $before . single_cat_title(”, false) . $after;
} elseif ( is_search() ) {
echo $before . ‘نتیاج جستجو برای "’ . esc_attr(get_search_query()) . ‘"’ . $after;
} elseif ( is_day() ) {
echo ‘<li><a href="’ . get_year_link(get_the_time(‘Y’)) . ‘">’ . get_the_time(‘Y’) . ‘</a></li> ‘ . $delimiter . ‘ ‘;
echo ‘<li><a href="’ . get_month_link(get_the_time(‘Y’),get_the_time(‘m’)) . ‘">’ . get_the_time(‘F’) . ‘</a></li> ‘ . $delimiter . ‘ ‘;
echo $before . ‘بایگانی روزانه "’ . get_the_time(‘d’) . ‘"’ . $after;
} elseif ( is_month() ) {
echo ‘<li><a href="’ . get_year_link(get_the_time(‘Y’)) . ‘">’ . get_the_time(‘Y’) . ‘</a></li> ‘ . $delimiter . ‘ ‘;
echo $before . ‘بایگانی ماهانه "’ . get_the_time(‘F’) . ‘"’ . $after;
} elseif ( is_year() ) {
echo $before . ‘بایگانی سالانه "’ . get_the_time(‘Y’) . ‘"’ . $after;
} elseif ( is_single() && !is_attachment() ) {
if ( get_post_type() != ‘post’ ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
echo ‘<li><a href="’ . $homeLink . ‘/’ . $slug[‘slug’] . ‘/">’ . $post_type->labels->singular_name . ‘</a></li>’ . $delimiter . ‘ ‘;
echo $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
echo ‘<li>’ . get_category_parents($cat, TRUE, ‘</li><li>’) . ‘</li>’;
echo $before . get_the_title() . $after;
}
} elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
} elseif ( is_attachment() ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = ‘<li><a href="’ . get_permalink($page->ID) . ‘">’ . get_the_title($page->ID) . ‘</a></li>’;
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo ‘ ‘ . $crumb . ‘ ‘ . $delimiter . ‘ ‘;
echo $before . get_the_title() . $after;
} elseif ( is_page() && !$post->post_parent ) {
echo $before . get_the_title() . $after;
} elseif ( is_page() && $post->post_parent ) {
$parent_id = $post->post_parent;
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
$breadcrumbs[] = ‘<li><a href="’ . get_permalink($page->ID) . ‘">’ . get_the_title($page->ID) . ‘</a></li>’;
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo ‘ ‘ . $crumb . ‘ ‘ . $delimiter . ‘ ‘;
echo $before . get_the_title() . $after;
} elseif ( is_tag() ) {
echo $before . ‘بایگانی بر اساس تگ "’ . single_tag_title(”, false) . ‘"’ . $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . ‘نوشته های ارسالی توسط "’ . $userdata->display_name . ‘"’ . $after;
} elseif ( is_404() ) {
echo $before . ‘خطای ۴۰۴: صفحه مورد نظر پیدا نشد.’ . $after;
}
if ( get_query_var(‘paged’) ) {
echo $before . get_query_var(‘paged’) . $after;
}
}
echo ‘</ul></div><br style="clear:both;" />’;
}[/php]

بعد از اینکه کد بالا را به فایل functions.php اضافه کردید، کد زیر را کپی کرده و در محل مورد نظرتان در فایل header.php پیست کنید.

[php]<?php if (function_exists(‘breadcrumb_navigation’)) breadcrumb_navigation(); ?>[/php]

راحت ترین راه اینه که کد بالا را در محل مناسبی از فایل header.php پیست کنید، ولی اگر به هر دلیلی نمی خواهید کد در header.php قرار گرفته بشه، مجبورید کد را در چندین فایل مثل single.php، archive.php، search.php، page.php و دیگر فایل های وابسته به پوسته ی خودتون پیست کنید.
همچنین برای استایل دهی css و زیباتر کردن آن میتوانید کد زیر را در انتهای فایل style.css قالب خود اضافه کنید :
[code].crumbs {
background: #fff;
line-height: 1.9em;
}

.crumbs ul {
list-style: none;
}

.crumbs li {
display: inline;
}

.crumbs li a, .crumbs li span {
background: #0076c1;
color: #fff;
float: right;
padding: 5px 25px 5px 15px;
margin: 0 0 0 2px;
line-height: 30px;
position: relative;
}

.crumbs li span {
color: #000;
}

.crumbs li a:after {
content: "";
border-right: 10px solid #0076c1;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
top:0;
left: -10px;
z-index: 100;
}

.crumbs li a:before, .crumbs li span:before {
content: "";
border-right: 10px solid #fff;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
position: absolute;
top:0;
right: 0;
z-index: 1;
}

.crumbs li:first-child a {
border-radius: 0 25px 25px 0;
-moz-border-radius: 0 25px 25px 0;
-webkit-border-radius: 0 25px 25px 0;
}

.crumbs li:first-child a:before {
border: none;
}

.crumbs li:last-child a, .crumbs li span {
border-radius: 25px 0 0 25px;
-moz-border-radius: 25px 0 0 25px;
-webkit-border-radius: 25px 0 0 25px;
}

.crumbs li:last-child a:after {
border: none;
}

.crumbs li a:hover {
background: #00c1a8;
}

.crumbs li a:hover:after {
border-right-color: #00c1a8;
}[/code]

خب آموزش امروز تموم شد و الان شما یک breadcrumb دارید و میتوانید ازش استفاده کنید .

لذت ببرید فقط نظر فراموش نشه

🙂

به اشتراک بگذارید



ما را در گوگل حمایت کنید!