نحوه ساخت Breadcrumb در وردپرس

من محمد مرادی تو این آموزش وردپرس می خوام بهتون یاد بدم که چطوری قابلیت breadcrumb برای سایت وردپرسی تون رو فعال کنین.

کار خیلی راحته، فقط چند کد هست که باید در فایلهای functions.php، header.php و style.css قالب وردپرس سایت قرار بدین. این کدها تمامی صفحات سایت وردپرس شما رو پشتیبانی می کنن پس اصلاً نگرانی وجود نداره.

راستی اگه موافق باشین و یکم حوصله کنین می خوام در چند جمله خیلی کوتاه و مختصر و مفید بهتون بگم که اصلاً breadcrumb چیه و اگه ازش استفاده کنیم چه تاثیری می تونیه روی سایتمون داشته باشه؟

breadcrumbs چیست؟

breadcrumbs یا همان بردکرامب با ایجاد یک فهرست ناوبری سلسه مراتب یه قابلیتی به سایت ایجاد می کنه برای نمایش بهتر موقعیت مکان کنونی کاربران در سایت.

این شکلی تو سایت نمایش داده می شه: خانه –> آموزش سئو –>الگوریتم جدید گوگل

breadcrumbs چه تاثیری روی سایت داره؟

بردکرامب که مسیر راهنمای سایت شناخته می شه باعث می شه که کاربران در سایت شما گم نشن و بدونن که الان دقیقاً در کدوم بخش یا مسیر از سایت قرار دارند. از طرفی هم چون یجورایی یه نوع لینک بیلدینگ تو اون انجام می شه بخاطر همین تو سئو سایت تاثیر مثبت داره.

خب دیگه حالا بریم سراغ ادامه آموزش و انجام کار

نمایش breadcrumb در وردپرس بدون افزونه تنها در ۳ مرحله

مرحله اول: ابتدا فایل functions.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;" />';
}

مرحله دوم: حالا نوبت به فایل header.php قالب می رسه که باید کد زیر رو برداریم و در محل موردنظرمون که دوست داریم breadcrumbs نمایش بده قرار بدیم.

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

نکته: اگر هم به هر دلیلی مایل نیستین که این کد رو در فایل header.php قرار بدین، اونوقت مجبورین کد را در چندین فایل پوسته خودتون مثل single.php، archive.php، search.php، page.php و دیگر فایل‌های وابسته به پوسته خودتون قرار بدین.

مرحله سوم: حالا نوبت به استایل دهی breadcrumbs با css می رسه.

فقط کافیه کدهای زیر رو در انتهای فایل style.css پوسته خودتون قرار بدین و تمام.

.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;
}

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

یک پاسخ به “نحوه ساخت Breadcrumb در وردپرس”

دیدگاهتان را بنویسید

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>