آموزش قرار دادن Breadcrumb در قالب + استایل جذاب

256 بازدید
سه شنبه ۱۶ شهریور ۱۳۹۵
آموزش قرار دادن Breadcrumb در قالب + استایل جذابReviewed by جواد نبوی on Sep 6Rating: 5.0

قرار دادن Breadcrumb یا سلسله نشانی در قالب

تجربه کاربری امری است که به بهبود تجربه یک کاربر از بازدید سایت می پردازد. نکات و کار های مختلفی وجود دارد تا این تجربه کاربری را برای سایتمان بهبود ببخشیم. اما یکی از مهمترین نکات، دسترسی آسان به بخش های مختلف سایت و رسیدن سریعتر به هدف است. Breadcrumb یا سلسله نشانی، قابلیتی است که این امر را محقق می کند. علاوه بر اینها بردکروم تا حد زیادی باعث بهبود سئوی سایت می شود. حتما بخش سلسله نشانی های افزونه Yoast SEO را دیده اید. این موضوع نشانگر آن است که برد کرام تا چه حد بر سئو تاثیرگذار است که در چنین افزونه ای یک بخش جداگانه برای آن در نظر گرفته شده است.

ساخت سلسله نشانی در وردپرس

بردکروم یا سلسله نشانی، چیزی است که محل فعلی کاربر را نشان می دهد. مثلا به این صورت: خانه » وردپرس » آموزش قرار دادن Breadcrumb در قالب.

این یعنی اینکه شما در مطلب آموزش قرار دادن Breadcrumb در قالب که در دسته وردپرس وجود دارد هستید. این سلسله نشانی ها میتوانند در صفحه ادامه مطلب، برگه ها، دسته ها و آرشیو قرار بگیرند. خب حالا که اهمیت سلسله نشانی ها را فهمیدیم باید ببینیم چطور میتوان از آنها در قالب سایت استفاده کرد. همچنین ما یک استایل بسیار جذاب و حرفه ای برای Breadcrumb شما آماده کرده ایم که توسط آن، یک بردکرام شیک و حرفه ای خواهید داشت.

استایل جذاب برای بردکرام وردپرس

قرار دادن Breadcrumb در قالب بدون نیاز به افزونه

ابتدا کد زیر را به انتهای فایل functions.php قالب خود اضافه کنید:

<?php
//--------------BREADCRUMB--------------------------
function dimox_breadcrumbs() {
 
$delimiter = '»';
$home = 'خانه'; // text for the 'Home' link
$before = '<span>'; // tag before the current crumb
$after = '</span>'; // tag after the current crumb
 
if ( !is_home() && !is_front_page() || is_paged() ) {
 
echo '<div class="breadcrumb">';
 
global $post;
$homeLink = get_bloginfo('url');
echo '<a href="' . $homeLink . '">' . $home . '</a> ' . $delimiter . ' ';
 
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(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
echo $before . '' . single_cat_title('', false) . '' . $after;
 
} elseif ( is_day() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
echo '<a href="' . get_month_link(get_the_time('Y'),get_the_time('m')) . '">' . get_the_time('F') . '</a> ' . $delimiter . ' ';
echo $before . get_the_time('d') . $after;
 
} elseif ( is_month() ) {
echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $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 '<a href="' . $homeLink . '/' . $slug['slug'] . '/">' . $post_type->labels->singular_name . '</a> ' . $delimiter . ' ';
echo $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo $before . get_the_title() . $after;
}
 
} elseif ( !is_single() && !is_page() && get_post_type() != 'post' ) {
$post_type = get_post_type_object(get_post_type());
echo $before . $post_type->labels->singular_name . $after;
 
} elseif ( is_attachment() ) {
$parent = get_post($post->post_parent);
$cat = get_the_category($parent->ID); $cat = $cat[0];
echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');
echo '<a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a> ' . $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[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
foreach ($breadcrumbs as $crumb) echo $crumb . ' ' . $delimiter . ' ';
echo $before . get_the_title() . $after;
 
} elseif ( is_search() ) {
echo $before . 'نتیجه جستجو برای "' . get_search_query() . '"' . $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') ) {
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ' (';
echo __('Page') . ' ' . get_query_var('paged');
if ( is_category() || is_day() || is_month() || is_year() || is_search() || is_tag() || is_author() ) echo ')';
}
 
echo '</div>';
 
}
}
?>

سپس کد زیر را به جایی که میخواهید بردکرام نمایش داده شود اضافه کنید. مثلا در قسمت بالای صفحه در فایل single.php میتوانید اضافه کنید (یا هر جایی که خودتان می خواهید):

<?php if (function_exists('dimox_breadcrumbs')) dimox_breadcrumbs(); ?>

توجه: کد بالا را باید به فایل های category.php – archive.php – page.php – author.php هم اضافه کنید.

برای ایجاد تغییرات در ظاهر سلسله نشانی خود، میتوانید کدی که به functions.php اضافه کردید را ویرایش کنید. مثلا متن ها را تغییر دهید یا علامت جداکننده را تغییر دهید. برای تغییر دادن علامت جدا کننده برد کرام، در بخش $delimiter یک عبارت » قرار دارد. آن را به علامت دلخواه خود تغییر دهید.

استایل جذاب برای Breadcrumb

همین الان بردکرام شما ساخته شده و میتوانید به راحتی از آن استفاده کنید. اما اگر ظاهر ساده آن را نمی پسندید و ترجیح میدهید بردکرام جذاب تری داشته باشید، ما یک استایل بسیار زیبا و حرفه ای برای شما آماده کرده ایم.حالا برای استایل دهی به بردکرام خود ابتدا عبارت » در ابتدای کدی که به فایل فانکشن خود اضافه کردید و ما با رنگ قرمز مشخص کردیم را حذف کنید. این عبارت همان علامت جداکننده بردکرام است و چون ما میخواهیم با استفاده از استایل CSS یک طرح جذاب بسازیم که خودش علامت جداکننده دارد، نیازی به این علامت ساده نخواهیم داشت. پس آن را حذف کنید.

حالا کد CSS زیر را به انتهای فایل استایل قالب خود (style.css) اضافه کنید:

/*-------- Breadcrumb by WEBTOASTER.IR ----------*/
.breadcrumb {
background: none !important;
font-size: 13px;
margin-bottom: 10px !important;
font-family: "IRANSans" , Tahoma;
float: right;
margin-top: 2px;
margin-bottom:10px;
}
.breadcrumb a {
color: #FFF;
display: block;
background: #3498db;
text-decoration: none;
position: relative;
float: right;
height: 40px;
line-height: 40px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
}
.breadcrumb a:before, .breadcrumb a:after {
content: "";
position: absolute;
top: 0;
border: 0 solid #3498db;
border-width: 20px 10px;
width: 0;
height: 0;
}
.breadcrumb a:before {
right: -20px;
border-right-color: transparent;
}
.breadcrumb a:after {
right: 100%;
border-color: transparent;
border-right-color: #3498db;
}
.breadcrumb span {
color: #FFF;
display: block;
background: #3498db;
text-decoration: none;
position: relative;
float: right;
height: 40px;
line-height: 40px;
padding: 0 10px 0 5px;
text-align: center;
margin-right: 23px;
}
.breadcrumb span:before, .breadcrumb span:after {
content: "";
position: absolute;
top: 0;
border: 0 solid #3498db;
border-width: 20px 10px;
width: 0;
height: 0;
}
.breadcrumb span:before {
right: -20px;
border-right-color: transparent;
}
.breadcrumb span:after {
right: 100%;
border-color: transparent;
border-right-color: #3498db;
}
.breadcrumb a:hover, .breadcrumb span:hover{
background-color: #1abc9c;
color:#fff !important;
}
.breadcrumb a:hover:before, .breadcrumb span:hover:before {
border-color: #1abc9c;
border-right-color: transparent;
}
.breadcrumb a:hover:after, .breadcrumb span:hover:after {
border-right-color: #1abc9c;
}

خب تمام شد. حالا فایل استایل خود را ذخیره کنید. بروید به یکی از مطالبتان و نتیجه را ببینید. خوب شد نه؟! امیدواریم از این آموزش هم لذت و هم استفاده برده باشید. پیش نمایش کار ما را هم در زیر میتوانید ببینید:

استایل جذاب برای Breadcrumb (بردکرام) وردپرس

تبلیغات

نویسنده (مدیر سایت)

جواد نبوی هستم. حدود 7 سالی میشه در زمینه طراحی وب و گرافیک کار می کنم و بعد از توپ دیزاین، این دومین سایت آموزش طراحی وب و گرافیک هستش که راه انداختم. امیدوارم بتونم برای همه ی شما مفید باشم.

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *