Tạo Breadcrumbs cho WordPress không cần Plugin hỗ trợ SEO cực chuẩn

Hướng dẫn cách tạo Breadcrumbs cho WordPress không cần Plugin hỗ trợ SEO cực tốt. Hướng dẫn tạo breadcrumbs cho WordPress, Tạo Breadcrumbs cho wordpress không cần dùng plugin

Breadcrumbs là một tính năng giúp người dùng dễ dàng điều hướng đến trang mà họ muốn, và nó cũng rất hữu ích cho việc SEO trang web. Có rất nhiều plugin giúp chúng ta tạo breadcrumb cho trang WordPress. Tuy nhiên vì tính chất đơn giản của nó, mà mình khuyên các bạn nên tự tay tạo breadcrumb cho trang web của mình.

Breadcrumbs là dạng menu chỉ cho người dùng biết họ đang ở đâu trên một trang web. Với những trang web có chiều sâu trong Categories thì Breadcrumbs rất hữu dụng khi người dùng đi sâu vào cấu trúc phức tạp bên trong của trang web. Trong bài viết này, mình sẽ hướng dẫn cách tạo Breadcrumbs cho website của bạn.

Và hiện nay, đa số các theme chuẩn SEO thì đều được tích hợp sẵn chức năng này. Tuy nhiên vẫn có một số theme chưa được tích hợp. Vậy làm sao để có được một thanh Breadcrumb trong trang web? Các bạn hãy làm theo hai bước đơn giản sau đây nhé!

Tính năng chính của Breadcrumbs không cần Plugin

  • Hiển thị đầy đủ vị trí link hiện tại. Ví vụ như bài viết có 2 cấp bật chuyên mục sẽ như thế này:

Trang chủ » Chuyên mục chính » Chuyên mục con » Tiêu đề bài viết

  • Breadcumb sẽ được hiển thị tại các khu vực sau trong wordpress:
    • paged navigation (dạng như kenh76.vn/page/2/);
    • category archive;
    • tag archive;
    • daily archive;
    • monthly archive;
    • yearly archive;
    • author archive;
    • custom post type;
    • single post page;
    • single page;
    • attachment page;
    • search results;
    • 404 error page.
  • Thêm số trang (nếu archive page đang là 2 hoặc hơn 2)
  • Tùy chỉnh ký tự phân cách
  • Tùy chỉnh chữ cho “Home”
  • Tùy chỉnh style cho breadcumb.
  • Tương thích với microdata của Schema.org.

Tạo Breadcrumbs cho WordPress không cần dùng Plugin

Bước 1: Đầu tiên bạn mở file functions.php và copy vào đoạn code sau:

/*
* WordPress Breadcrumbs
* author: Dimox – Edit Kenh76.vn
* version: 2017.25.02
* license: MIT
*/
function kenh76_breadcrumbs() {
/* === OPTIONS === */
$text[‘home’] = ‘Trang chủ’; // text for the ‘Home’ link
$text[‘category’] = ‘Bài của chuyên mục %s’; // text for a category page
$text[‘search’] = ‘Kết quả tìm kiếm %s’; // text for a search results page
$text[‘tag’] = ‘Từ khóa %s’; // text for a tag page
$text[‘author’] = ‘Tất cả bài viết của %s’; // text for an author page
$text[‘404’] = ‘Lỗi 404’; // text for the 404 page
$text[‘page’] = ‘Trang %s’; // text ‘Page N’
$text[‘cpage’] = ‘Trang bình luận %s’; // text ‘Comment Page N’
$wrap_before = ‘<div class=”breadcrumbs” itemscope itemtype=”http://schema.org/BreadcrumbList”>’; // the opening wrapper tag
$wrap_after = ‘</div>’; // the closing wrapper tag
$sep = ‘›’; // separator between crumbs
$sep_before = ‘<span class=”sep”>’; // tag before separator
$sep_after = ‘</span>’; // tag after separator
$show_home_link = 1; // 1 – show the ‘Home’ link, 0 – don’t show
$show_on_home = 0; // 1 – show breadcrumbs on the homepage, 0 – don’t show
$show_current = 1; // 1 – show current page title, 0 – don’t show
$before = ‘<span class=”current k75breadcrumbs”>’; // tag before the current crumb
$after = ‘</span>’; // tag after the current crumb
/* === END OF OPTIONS === */
global $post;
$home_url = home_url(‘/’);
$link_before = ‘<span itemprop=”itemListElement” itemscope itemtype=”http://schema.org/ListItem”>’;
$link_after = ‘</span>’;
$link_attr = ‘ itemprop=”item”‘;
$link_in_before = ‘<span itemprop=”name” class=”k75breadcrumbs”>’;
$link_in_after = ‘</span>’;
$link = $link_before . ‘<a href=”%1$s”‘ . $link_attr . ‘>’ . $link_in_before . ‘%2$s’ . $link_in_after . ‘</a>’ . $link_after;
$frontpage_id = get_option(‘page_on_front’);
$parent_id = ($post) ? $post->post_parent : ”;
$sep = ‘ ‘ . $sep_before . $sep . $sep_after . ‘ ‘;
$home_link = $link_before . ‘<a href=”‘ . $home_url . ‘”‘ . $link_attr . ‘ class=”home”>’ . $link_in_before . $text[‘home’] . $link_in_after . ‘</a>’ . $link_after;
if (is_home() || is_front_page()) {
if ($show_on_home) echo $wrap_before . $home_link . $wrap_after;
} else {
echo $wrap_before;
if ($show_home_link) echo $home_link;
if ( is_category() ) {
$cat = get_category(get_query_var(‘cat’), false);
if ($cat->parent != 0) {
$cats = get_category_parents($cat->parent, TRUE, $sep);
$cats = preg_replace(“#^(.+)$sep$#”, “$1”, $cats);
$cats = preg_replace(‘#<a([^>]+)>([^<]+)<\/a>#’, $link_before . ‘<a$1′ . $link_attr .’>’ . $link_in_before . ‘$2′ . $link_in_after .'</a>’ . $link_after, $cats);
if ($show_home_link) echo $sep;
echo $cats;
}
if ( get_query_var(‘paged’) ) {
$cat = $cat->cat_ID;
echo $sep . sprintf($link, get_category_link($cat), get_cat_name($cat)) . $sep . $before . sprintf($text[‘page’], get_query_var(‘paged’)) . $after;
} else {
if ($show_current) echo $sep . $before . sprintf($text[‘category’], single_cat_title(”, false)) . $after;
}
} elseif ( is_search() ) {
if (have_posts()) {
if ($show_home_link && $show_current) echo $sep;
if ($show_current) echo $before . sprintf($text[‘search’], get_search_query()) . $after;
} else {
if ($show_home_link) echo $sep;
echo $before . sprintf($text[‘search’], get_search_query()) . $after;
}
} elseif ( is_day() ) {
if ($show_home_link) echo $sep;
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $sep;
echo sprintf($link, get_month_link(get_the_time(‘Y’), get_the_time(‘m’)), get_the_time(‘F’));
if ($show_current) echo $sep . $before . get_the_time(‘d’) . $after;
} elseif ( is_month() ) {
if ($show_home_link) echo $sep;
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’));
if ($show_current) echo $sep . $before . get_the_time(‘F’) . $after;
} elseif ( is_year() ) {
if ($show_home_link && $show_current) echo $sep;
if ($show_current) echo $before . get_the_time(‘Y’) . $after;
} elseif ( is_single() && !is_attachment() ) {
if ($show_home_link) echo $sep;
if ( get_post_type() != ‘post’ ) {
$post_type = get_post_type_object(get_post_type());
$slug = $post_type->rewrite;
printf($link, $home_url . $slug[‘slug’] . ‘/’, $post_type->labels->singular_name);
if ($show_current) echo $sep . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $sep);
if (!$show_current || get_query_var(‘cpage’)) $cats = preg_replace(“#^(.+)$sep$#”, “$1”, $cats);
$cats = preg_replace(‘#<a([^>]+)>([^<]+)<\/a>#’, $link_before . ‘<a$1′ . $link_attr .’>’ . $link_in_before . ‘$2′ . $link_in_after .'</a>’ . $link_after, $cats);
echo $cats;
if ( get_query_var(‘cpage’) ) {
echo $sep . sprintf($link, get_permalink(), get_the_title()) . $sep . $before . sprintf($text[‘cpage’], get_query_var(‘cpage’)) . $after;
} else {
if ($show_current) echo $before . get_the_title() . $after;
}
}
// custom post type
} elseif ( !is_single() && !is_page() && get_post_type() != ‘post’ && !is_404() ) {
$post_type = get_post_type_object(get_post_type());
if ( get_query_var(‘paged’) ) {
echo $sep . sprintf($link, get_post_type_archive_link($post_type->name), $post_type->label) . $sep . $before . sprintf($text[‘page’], get_query_var(‘paged’)) . $after;
} else {
if ($show_current) echo $sep . $before . $post_type->label . $after;
}
} elseif ( is_attachment() ) {
if ($show_home_link) echo $sep;
$parent = get_post($parent_id);
$cat = get_the_category($parent->ID); $cat = $cat[0];
if ($cat) {
$cats = get_category_parents($cat, TRUE, $sep);
$cats = preg_replace(‘#<a([^>]+)>([^<]+)<\/a>#’, $link_before . ‘<a$1′ . $link_attr .’>’ . $link_in_before . ‘$2′ . $link_in_after .'</a>’ . $link_after, $cats);
echo $cats;
}
printf($link, get_permalink($parent), $parent->post_title);
if ($show_current) echo $sep . $before . get_the_title() . $after;
} elseif ( is_page() && !$parent_id ) {
if ($show_current) echo $sep . $before . get_the_title() . $after;
} elseif ( is_page() && $parent_id ) {
if ($show_home_link) echo $sep;
if ($parent_id != $frontpage_id) {
$breadcrumbs = array();
while ($parent_id) {
$page = get_page($parent_id);
if ($parent_id != $frontpage_id) {
$breadcrumbs[] = sprintf($link, get_permalink($page->ID), get_the_title($page->ID));
}
$parent_id = $page->post_parent;
}
$breadcrumbs = array_reverse($breadcrumbs);
for ($i = 0; $i < count($breadcrumbs); $i++) {
echo $breadcrumbs[$i];
if ($i != count($breadcrumbs)-1) echo $sep;
}
}
if ($show_current) echo $sep . $before . get_the_title() . $after;
} elseif ( is_tag() ) {
if ( get_query_var(‘paged’) ) {
$tag_id = get_queried_object_id();
$tag = get_tag($tag_id);
echo $sep . sprintf($link, get_tag_link($tag_id), $tag->name) . $sep . $before . sprintf($text[‘page’], get_query_var(‘paged’)) . $after;
} else {
if ($show_current) echo $sep . $before . sprintf($text[‘tag’], single_tag_title(”, false)) . $after;
}
} elseif ( is_author() ) {
global $author;
$author = get_userdata($author);
if ( get_query_var(‘paged’) ) {
if ($show_home_link) echo $sep;
echo sprintf($link, get_author_posts_url($author->ID), $author->display_name) . $sep . $before . sprintf($text[‘page’], get_query_var(‘paged’)) . $after;
} else {
if ($show_home_link && $show_current) echo $sep;
if ($show_current) echo $before . sprintf($text[‘author’], $author->display_name) . $after;
}
} elseif ( is_404() ) {
if ($show_home_link && $show_current) echo $sep;
if ($show_current) echo $before . $text[‘404’] . $after;
} elseif ( has_post_format() && !is_singular() ) {
if ($show_home_link) echo $sep;
echo get_post_format_string( get_post_format() );
}
echo $wrap_after;
}
} // end of kenh76_breadcrumbs()
view rawkenh76_breadcrumbs hosted with ❤ by GitHub

Bước 2: Sau đó, để hiển thị breadcrumbs trên wordpress của bạn, bạn mở file single.php lên và chèn hàm này vào chỗ nào phù hợp bạn muốn:

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

Thêm BreadCrumbs không cần plugin cho WordPress

Sau khi thêm kết quả web của bạn sẽ như sau:

Ads by AdAsia

Nếu muốn giống hoàn toàn thì bạn css lại chút nhé.

Kết quả là đây:

Plugin Breadcrumbs WordPress

Nếu các bạn không làm được hay ko rành code thì cách đơn giản nhất là dùng plugin Breadcrumb NavXT, bạn có thể download plugin này về, thử cài đặt và sử dụng. Tuy nhiên, không nên sử dụng quá nhiều plugin vì có thể bị lỗi, dễ bị hack, tạo rác trong database… Vì thế, nếu có thể thì bạn nên viết code cho tác vụ mình cần. Dưới đây là đoạn code dùng để tạo Breadcrumbs mà không cần sử dụng Plugin.

Trước đây thì có lẽ thuật ngữ Breadcrumb không mấy là phổ biến trong SEO và thiết kế web. Nhưng hiện nay thì nó lại đã trở thành một thuật ngữ khá thông dụng và phổ biến. Nó giúp cho chúng ta khá nhiều trong việc SEO một trang web nào đó. Chính vì vậy mà bây giờ Google đã thay đổi việc hiển thị đường link tới từng bài viết bằng cách hiển thị breadcrumb ngay trên kết quả tìm kiếm của mình.

Như vậy là đã xong rồi đấy. Các bạn hãy vào thử một bài hay một trang nào đó để xem kết quả nhé!

Nếu như các bạn không biết chỉnh sửa code thì các bạn cũng có thể dùng plugin để thay thế cho cách này.

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

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *