Breadcrumbs là gì? Làm breadcrumbs Wordpress, Css, Bootstrap?

» Wordpress » Breadcrumbs là gì? Làm breadcrumbs wordpress bằng Yoast Seo

14

December

Posted by tungbui, In Wordpress, Comments , Views 0

Breadcrumbs là gì? Làm breadcrumbs wordpress bằng Yoast Seo

Breadcrumbs là gì? Theo định nghĩa breadcrumb là tập hợp các đường link phân cấp giúp khách truy cập biết mình đang ở vị trí nào của website, chuyên mục nào từ đó có thể di chuyển thuận lợi từ trang này trang khác trong 1 website. Nhằm giúp điều hướng tốt bọ tìm kiếm, cũng như giúp người dùng hiểu mình đang ở vị trí nào trên website.

Breadcrumbs là gì?
Breadcrumbs là gì?

Breadcrumbs là gì? có bao nhiêu cách làm Breadcrumbs

Hiện nay có rất nhiều cách làm Breadcrumbs, tuỳ theo từng mã code mà đối tượng lập trình, hay người thiết kế website sử dụng cho riêng mình. Thông thường đối với những phiên bản website làm bằng code PHP, ASP.NET thông thường hay sử dụng code để làm Breadcrumbs và sau đó dùng Breadcrumbs CSS sao cho đẹp mắt nhất.

Hoặc người thiết kế website kết hợp giữa việc sử dụng breadcrumb bootstrap kết hợp với css 3 và kết hợp với code động để tạo cho mình một breadcrumb đẹp mắt. Còn đối với những bạn chuyên dùng wordpress thì việc tạo breadcrumb thường làm theo 2 cách, 1 là dùng code, hay là tận dụng chức năng có sẵn breadcrumb Yoast Seo.

Hướng dẫn sử dụng 2 cách tạo Breadcrumbs wordpress thông dụng nhất

Cách 1: sử dụng code chèn vào file function.php

Đầu tiên nếu bạn biết chút ít về code wordpress thì sử dụng cách này nhé. Đầu tiên bạn mở file funciton.php lên sau đó copy đoạn code này paste vào:

 

function dimox_breadcrumbs(){
/* === OPTIONS === */
$text[‘home’] = ‘<i class=”fa fa-home”></i>’; // text for the ‘Home’ link
$text[‘category’] = ‘Tin tức từ thể loại “%s”‘; // text for a category page
$text[‘tax’] = ‘Lưu trữ về “%s”‘; // text for a taxonomy page
$text[‘search’] = ‘Kết quả từ khóa “%s”‘; // text for a search results page
$text[‘tag’] = ‘Từ khóa “%s”‘; // text for a tag page
$text[‘author’] = ‘Bài viết của tác giả %s’; // text for an author page
$text[‘404’] = ‘Lỗi 404’; // text for the 404 page
$showCurrent = 1; // 1 – show current post/page title in breadcrumbs, 0 – don’t show
$showOnHome = 0; // 1 – show breadcrumbs on the homepage, 0 – don’t show
$delimiter = ‘ &raquo; ‘; // delimiter between crumbs
$before = ‘<span class=”current”>’; // tag before the current crumb
$after = ‘</span>’; // tag after the current crumb
/* === END OF OPTIONS === */

global $post;
$homeLink = get_bloginfo(‘url’) . ‘/’;
$linkBefore = ‘<span typeof=”v:Breadcrumb”>’;
$linkAfter = ‘</span>’;
$linkAttr = ”;
$link = $linkBefore . ‘<a’ . $linkAttr . ‘ href=”%1$s”>%2$s</a>’ . $linkAfter;
if (is_home() || is_front_page()) {
if ($showOnHome == 1) echo ‘<div id=”crumbs”><a href=”‘ . $homeLink . ‘”>’ . $text[‘home’] . ‘</a></div>’;
} else {
echo ‘<div id=”crumbs”>’ . sprintf($link, $homeLink, $text[‘home’]) . $delimiter;
if ( is_category() ) {
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
}
echo $before . sprintf($text[‘category’], single_cat_title(”, false)) . $after;
} elseif( is_tax() ){
$thisCat = get_category(get_query_var(‘cat’), false);
if ($thisCat->parent != 0) {
$cats = get_category_parents($thisCat->parent, TRUE, $delimiter);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
}
echo $before . sprintf($text[‘tax’], single_cat_title(”, false)) . $after;
}elseif ( is_search() ) {
echo $before . sprintf($text[‘search’], get_search_query()) . $after;
} elseif ( is_day() ) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $delimiter;
echo sprintf($link, get_month_link(get_the_time(‘Y’),get_the_time(‘m’)), get_the_time(‘F’)) . $delimiter;
echo $before . get_the_time(‘d’) . $after;
} elseif ( is_month() ) {
echo sprintf($link, get_year_link(get_the_time(‘Y’)), get_the_time(‘Y’)) . $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;
printf($link, $homeLink . ‘/’ . $slug[‘slug’] . ‘/’, $post_type->labels->singular_name);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} else {
$cat = get_the_category(); $cat = $cat[0];
$cats = get_category_parents($cat, TRUE, $delimiter);
if ($showCurrent == 0) $cats = preg_replace(“#^(.+)$delimiter$#”, “$1″, $cats);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
if ($showCurrent == 1) 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];
$cats = get_category_parents($cat, TRUE, $delimiter);
$cats = str_replace(‘<a’, $linkBefore . ‘<a’ . $linkAttr, $cats);
$cats = str_replace(‘</a>’, ‘</a>’ . $linkAfter, $cats);
echo $cats;
printf($link, get_permalink($parent), $parent->post_title);
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} elseif ( is_page() && !$post->post_parent ) {
if ($showCurrent == 1) 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[] = 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 $delimiter;
}
if ($showCurrent == 1) echo $delimiter . $before . get_the_title() . $after;
} elseif ( is_tag() ) {
echo $before . sprintf($text[‘tag’], single_tag_title(”, false)) . $after;
} elseif ( is_author() ) {
global $author;
$userdata = get_userdata($author);
echo $before . sprintf($text[‘author’], $userdata->display_name) . $after;
} elseif ( is_404() ) {
echo $before . $text[‘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 ‘</div>’;

}

} // end dimox_breadcrumbs()

Copy code cẩn thận nhé, kẻo bị sai sẽ ảnh hưởng, có khi site bạn không chạy nhé.

Nếu bạn muốn dùng breadcrumbs ở những vị trí nào thì dùng code sau:

<?php  dimox_breadcrumbs(); ?>

Cách 2: dùng breadcrumbs của Plugin Yoast Seo

Đầu tiên bạn cần cài đặt plugin yoast seo, Sau đó, vào Cài đặt SEO → Nâng cao → Breadcrumbs và cho phép các breadcrumbs.

1./Đăng nhập vào quản trị website đã thiết kế của bạn. Khi bạn đăng nhập, bạn sẽ ở trong ‘Bảng điều khiển’ của mình. Ở phía bên tay trái, bạn sẽ thấy một menu. Trong trình đơn đó, nhấp vào ‘SEO’.
2./Tiến hành cài đặt ‘SEO’ sẽ mở rộng cung cấp cho bạn các tùy chọn bổ sung. Nếu bạn không nhìn thấy cài đặt ‘Nâng cao’ trong trình đơn ‘SEO’ của mình, trước hết hãy bật cài đặt nâng cao của bạn .
yoast seo dashboard advanced disabled
yoast seo dashboard advanced disabled

Trình đơn với cài đặt nâng cao bị Vô hiệu hóa
tính năng nâng cao

3./ Nhấp vào ‘Nâng cao’. hoặc Advanced

yoast seo advanced
yoast seo advanced
4./Bật chức năng: Nhấp vào tab ‘Breadcrumbs’ và bật / tắt Breadcrumbsđể bật. Điều chỉnh cài đặt theo sở thích của bạn.

bật hoặc tắt breadcrumbs
bật hoặc tắt breadcrumbs
5.Sau đó  ‘Lưu Thay đổi’.

6. Hiển thị breadcrumbs, bạn thêm code sau vào ở vị trí cần hiển thị

<?php if ( function_exists(‘yoast_breadcrumb’) ) { yoast_breadcrumb(‘ <p id=”breadcrumbs”>’,‘</p> ‘); } ?>

Đây là 2 cách tạo breadcrumbs đơn giản nhất, bạn có thể lựa chọn 1 trong 2 cách trên để tạo cho site của mình? Việc tìm hiểu breadcrumbs là gì? cũng như việc tạo breadcrumbs là những việc làm hết cần thiết đối với thiết kế website chuẩn seo. Vì đây cũng là 1 tiêu chính đánh giá trong seo. Chúc các bạn thực hiện thành công!

Breadcrumbs là gì? Làm breadcrumbs wordpress bằng Yoast Seo
5 (100%) 12 votes
Chia sẻ bài viếtShare on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn

GIẢI PHÁP CÔNG NGHỆ SỐ TÙNG PHÁT

*********************************************

Khách Cần Thiết Kế Website Vui Lòng Liên Hệ

Phone: 0902 313 677

Văn Phòng: 809 Tân Kỳ Tân Quý, P. Bình Hưng Hòa A, Q. Bình Tân, Tp.HCM

Email: info.tungphat@gmail.com

Tư Vấn Qua Email