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

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

Cập nhật lần cuối:

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

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

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

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 !

Đoàn Tuấn

Tác giả: ĐOÀN CÔNG TUẤN

Với niềm đam mê về khoa học công nghệ thông tin, đặc biệt là lập trình. Tôi đã thành lập blog Tuandc.com để lưu trữ và chia sẻ những kiến thức thực tế có được trong quá trình làm việc. Với kinh nghiệm gần 10 năm làm việc trong lĩnh vực, những kiến thức tôi chia sẻ hy vọng sẽ giúp được phần nào đó.

Tags
Bài liên quan
Tạo tính năng sao chép bài viết trong WordPress không cần Plugin 314 Lượt xem Tạo tính năng sao chép bài viết trong WordPress không cần Plugin
Truy vấn SQL trong WordPress thông qua WPDB 197 Lượt xem Truy vấn SQL trong WordPress thông qua WPDB
Giới hạn của WordPress tới đâu cho trang web thương mại điện tử? 852 Lượt xem Giới hạn của WordPress tới đâu cho trang web thương mại điện tử?
Tạo form reset mật khẩu WordPress Ngoài Front-end không cần Plugin 881 Lượt xem Tạo form reset mật khẩu WordPress Ngoài Front-end không cần Plugin
Khắc phục lỗi 404 khi cập nhật bài viết trong WordPress khi dùng Cpanel 770 Lượt xem Khắc phục lỗi 404 khi cập nhật bài viết trong WordPress khi dùng Cpanel
WordPress 5.0 đã chính thức được cập nhật 1,324 Lượt xem WordPress 5.0 đã chính thức được cập nhật
Vô hiệu hóa tự động update plugin trong WordPress 1,565 Lượt xem Vô hiệu hóa tự động update plugin trong WordPress
Sử dụng tham số để truy vấn với WP_Query trong WordPress 1,142 Lượt xem Sử dụng tham số để truy vấn với WP_Query trong WordPress
Tích hợp tiện ích nhắn tin Facebook vào WordPress đơn giản 1,697 Lượt xem Tích hợp tiện ích nhắn tin Facebook vào WordPress đơn giản