grid ساخت Breadcrumb در وردپرس

wordpress breadcrumbs

Breadcrumb نوعی نقشه برای راهنمایی کاربران است تا آنها بتوانند مسیر درست و دلخواه خود را سریعتر در سایت پیدا کنند.

example breadcrumbs

ساخت Breadcrumb در وردپرس بدون افزونه

همانطور که گفتیم Breadcrumb نوعی نقشه برای راهنمایی کاربران است در نتیجه استفاده از آن باعث بهبود UX (User experience – تجربه کاربری) سایت میشود. برای فعال کردن Breadcrumb در وردپرس کافیست کد زیر را در فایل functions.php اضافه کنید.

<?php
	function wpt_breadcrumbs(){
		$delimiter = '<span class="delimiter">«</span>';
		$name = 'خانه';
		$currentBefore = '<span class="current">';
		$currentAfter = '</span>';
		if (!is_home() && !is_front_page() || is_paged()){
			echo '<div class="wpt_breadcrumbs">';
			global $post;
			$home = get_bloginfo('url');
			echo '<a href="' . $home . '">' . $name . '</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 $currentBefore . 'بایگانی بر اساس &#39;';
				single_cat_title();
				echo '&#39;' . $currentAfter;
			}
			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 $currentBefore . get_the_time('d') . $currentAfter;
			}
			elseif (is_month()){
				echo '<a href="' . get_year_link(get_the_time('Y')) . '">' . get_the_time('Y') . '</a> ' . $delimiter . ' ';
				echo $currentBefore . get_the_time('F') . $currentAfter;
			}
			elseif (is_year()){
				echo $currentBefore . get_the_time('Y') . $currentAfter;
			}
			elseif (is_single() && !is_attachment()){
				$cat = get_the_category();
				$cat = $cat[0];
				echo get_category_parents($cat, true, ' ' . $delimiter . ' ');
				echo $currentBefore;
				the_title();
				echo $currentAfter;
			}
			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 $currentBefore;
				the_title();
				echo $currentAfter;
			}
			elseif (is_page() && !$post->post_parent){
				echo $currentBefore;
				the_title();
				echo $currentAfter;
			}
			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 $currentBefore;
				the_title();
				echo $currentAfter;
			}
			elseif (is_search()){
				echo $currentBefore . 'نتایج جستجو برای &#39;' . get_search_query() . '&#39;' . $currentAfter;
			}
			elseif (is_tag()){
				echo $currentBefore . 'مطالب با تگ &#39;';
				single_tag_title();
				echo '&#39;' . $currentAfter;
			}
			elseif (is_author()){
				global $author;
				$userdata = get_userdata($author);
				echo $currentBefore . 'مقالات ارسال شده توسط ' . $userdata->display_name . $currentAfter;
			}
			elseif (is_404()){
				echo $currentBefore . 'صفحه مورد نظر یافت نشد: 404' . $currentAfter;
			}
			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>';
		}
	}
?>

پس از فعال سازی میبایست کد زیر را در قالب خود اضافه کنید تا در قالب نمایش داده شود:

<?php
	if(function_exists('wpt_breadcrumbs')){
		wpt_breadcrumbs();
	}
?>

استایل دهی به Breadcrumb

.wpt_breadcrumbs {
    margin-bottom: 20px;
    background: #fff;
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 4px #ccc;
}

با اضافه کردن کد بالا به فایلstyle.css  ظاهر Breadcrumb مانند تصویر زیر میشود.

breadcrumbs with style

امیدوارم این مطلب براتون مفید بوده باشه، اگر سوالی داشتید در بخش دیدگاه ها منتظرتون هستم.

author

سید علی طلوع

سید علی طلوع هستم، طراح توسعه دهنده و برنامه نویس وب، از لینک رو به رو میتونید رزومه بنده رو ببینید: مشاهده وب سایت

مطالب تصادفی

نظر شما برایمان با ارزش هست

نام و ایمیلمو ذخیره کن

0 دیدگاه

اولین نفری باش که نظر میدی!