Hướng dẫn tạo breadcrumbs trong WordPress không cần dùng Plugin

Cập nhật lần cuối: 28 Tháng Tám 2018

WordPress

2,981 Lượt xem

Breadcrumbs hay còn gọi là link phân cấp là một trong những thành phần rất hữu ích trên website. Nó giúp hiển thị rõ cấu trúc nội dung website của bạn, đồng thời đánh dấu và giúp google biết được các đường dẫn trong website.

Trong kết quả tìm kiếm, breadcrumbs sẽ giúp bạn hiển thị các tên danh mục thay vì hiển thị liên kết thông thường, điều này còn được đánh giá là thân thiện hơn với SEO và cũng là một trong những thành phần không thể thiếu của các SEOer.

breadcrumbs giúp hiển thị đường dẫn thư mục bằng tên thay vì link thô như trước

Đối với người dùng, breadcrumbs có thể giúp họ truy cập nhanh hơn thay vì phải mò vào menu.

Sự tường minh của breadcrumbs giúp người dùng dễ dàng truy cập hơn

Tạo breadcrumbs trong WordPress

Để tạo breadcrumbs trong WordPress có rất nhiều cách, đơn giản nhất là sử dụng Plugin. Nhưng thông thường khi tạo ra một website với wordpress mình thường tối ưu nhất có thể, tức là hạn chế dùng Plugin nhiều nhất có thể. Các Plugin có thể có thêm nhiều chức năng không cần thiết khiến website của bạn trở nên nặng hơn và có thể bị xung đột với nhiều plugin khác. Website của mình chỉ có duy nhất 1 plugin để tạo sitemap còn lại mình sẽ tự viết hàm để sử dụng.

Bạn hãy mở file fuctions.php trong theme của bạn và thêm đoạn dưới và file.

function dimox_breadcrumbs() {

$delimiter = '/';

$home = 'Trang chủ'; // Thay cho 'Home' link

$before = '<span>'; // trước mỗi link và $after = '</span>'; // sau mỗi link

if ( !is_home() && !is_front_page() || is_paged() ) {

echo '<ul class="clearfix">';

global $post;

$homeLink = get_bloginfo('url');

echo '<li><a href="' . $homeLink . '">' . $home . '</a></li> ' . $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 . 'Danh m?c "' . single_cat_title('', false) . '"' . $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 get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');

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 = get_post($post->post_parent);

$cat = get_the_category($parent->ID); $cat = $cat[0];

echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');

echo '<li><a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a></li> ' . $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_search() ) {

echo $before . 'T?m ki?m cho "' . get_search_query() . '"' . $after;

} elseif ( is_tag() ) {

echo $before . 'Th? Tag "' . single_tag_title('', false) . '"' . $after;

} elseif ( is_author() ) {

global $author;

$userdata = get_userdata($author);

echo $before . 'Ðãng b?i ' . $userdata->display_name . $after;

} elseif ( is_404() ) {

echo $before . 'L?i 404' . $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 '

</ul>';

}

} // end dimox_breadcrumbs()

Bạn có thể custome lại cho phù hợp với themes của bạn trong các phần comment của mình bên cạnh dòng code nhé.

Như vậy là bạn đã có 1 breadcrumbs tự tạo rồi đấy. Bây giờ thì nó sẽ được sử dụng trong theme như thế nào. Hàm bên dưới sẽ dùng để hiển thị ra breadcrumbs đã tạo.

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

Tích hợp cấu trúc Schema cho Breadcrumbs để hiển thị trên Google

Hoàn thành cách trên, bạn chỉ mới có thể lấy ra được breadcrumbs. Để hiển thị nó chính xác trên Google bạn cần khai báo cấu trúc của nó nữa.

Bạn hãy thay đoạn code trên thành đoạn code dưới đây nhé

function dimox_breadcrumbs() {

$delimiter = '/';

$home = 'Trang chủ'; // ch? thay th? cho ph?n 'Home' link

$before = '<span property="itemListElement" typeof="ListItem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">'; // th? html ð?ng trý?c m?i link 
$after = '</span>'; // th? ð?ng sau m?i link

if ( !is_home() && !is_front_page() || is_paged() ) {

echo '<ul class="clearfix" typeof="BreadcrumbList" vocab="http://schema.org/">';

global $post;

$homeLink = get_bloginfo('url');

echo '<li property="itemListElement" typeof="ListItem" itemscope="" itemtype="http://data-vocabulary.org/Breadcrumb">
<a href="' . $homeLink . '" property="item" typeof="WebPage" title="TUẤN ĐC" href="' . $homeLink . '" itemprop="url">' . $home . '</a><meta property="position" content="1"></li> ' . $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 . 'Danh mục "' . single_cat_title('', false) . '"' . $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 $before. '<a property="item" typeof="WebPage" title="'.$cat->name.'" href="' . $homeLink . '/cat/'.$cat->slug.'" class="taxonomy category" itemprop="url">
<span itemprop="title" property="name">'.$cat->name.'</span> 
</a> <meta property="position" content="2">' . $after . ' / ' ;


echo $before. '<a property="item" typeof="WebPage" title="'.$cat->name.'" href="' . get_the_permalink() .'" class="taxonomy category" itemprop="url">
<span itemprop="title" property="name">'.get_the_title().'</span> 
</a> <meta property="position" content="3">' . $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 = get_post($post->post_parent);

$cat = get_the_category($parent->ID); $cat = $cat[0];

echo get_category_parents($cat, TRUE, ' ' . $delimiter . ' ');

echo '<li><a href="' . get_permalink($parent) . '">' . $parent->post_title . '</a></li> ' . $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_search() ) {

echo $before . 'T?m ki?m cho "' . get_search_query() . '"' . $after;

} elseif ( is_tag() ) {

echo $before . 'Th? Tag "' . single_tag_title('', false) . '"' . $after;

} elseif ( is_author() ) {

global $author;

$userdata = get_userdata($author);

echo $before . 'Ðãng b?i ' . $userdata->display_name . $after;

} elseif ( is_404() ) {

echo $before . 'L?i 404' . $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 '

</ul>';

}

} // end dimox_breadcrumbs()

Bạn lưu ý là trong code này mình chỉ chỉnh sửa cấu trúc schema cho mỗi trang single thôi nhé. Các trang khác bạn có thể chỉnh sửa lại.

Và đây là kết quả kiểm tra trên trình kiểm tra dữ liệu của google

Google nhận dạng ra cấu trúc của Breadcrumb

Bạn đừng quan tâm đến 9 lỗi kia. Đó là vì mình có sử dụng các thẻ meta của facebook, các thẻ này thì google không nhận dạng nên ra lỗi thôi.

Upadte hàm mới

if(!function_exists('custom_breadcrumb')): 
		function custom_breadcrumb() {
			global $post;
 
			if(!is_front_page()){
				echo '<li> <a href="'.home_url().'">Trang chủ</a></li>';
			}
 
			if(is_singular(array('post'))){
				$cats=get_the_category();
				$catName=$cats[0]->name;
				$catID=get_cat_ID( $catName );
				$catLink=get_category_link($catID);
				echo '<li> <a href="'.$catLink.'">'.$catName.'</a></li>';
				$curTitle=get_the_title(($post->ID),0,14);
				$curTitle=(strlen($curTitle) >14)?substr($curTitle,0,14).'...':$curTitle;
				echo '<li class="active">'.$curTitle.'</li>';
			}
			// Your custom post type - Portfolio here
			if(is_singular(array('portfolio'))){
				$pType= get_terms('portfolio_type'); 
				if(is_array($pType)&& count($pType)>0){
					$portLink="#";
					$portName=$pType[0]->name;
					echo '<li> <a href="'.$portLink.'">'.$portName.'</a></li>';
				}
			}
			if(is_page()){ 
				$postParents=get_post_ancestors($post->ID);
				if(is_array($postParents) && count(($postParents)>0)){
					foreach ($postParents as $key => $value) {
						$pageLink=get_permalink($value);
						$pageTitle=get_the_title($value);
						echo '<li> <a href="'.$pageLink.'">'.$pageTitle.'</a></li>';
					}
				}
				$curTitle=get_the_title(($post->ID),0,14);
				$curTitle=(strlen($curTitle) >14)?substr($curTitle,0,14).'...':$curTitle;
				echo '<li class="active">'.$curTitle.'</li>';
 
 
			}
			if(is_category()){ 
				$category = get_category(get_query_var('cat'));
				$cat_id = $category->cat_ID;
				$theCat=get_cat_name($cat_id);
				echo '<li class="active">'.$theCat.'</a></li>';
			}
			if(is_tag()){
				echo '<li class="active">'.get_query_var('tag').'</a></li>';
			}
			if(is_author()){ 		
				echo '<li class="active">'. get_the_author_meta('user_nicename').'</a></li>';
			}
						if(is_search()){ 		
				echo '<li class="active">'. get_search_query().'</a></li>';
			}
 
		}
		endif;

Chúc các bạn thành công !