Hướng dẫn Tùy biến Breadcrumbs cho Genesis

Hướng dẫn Tùy biến Breadcrumbs cho Genesis

Breadcrumbs hoặc  breadcrumb trail tạm hiểu là một thanh điều hướng của website, nó phân cấp theo dạng cây thư mục giúp cho người đọc hình dung mình đang ở vị trí nào của website, đặc biệt với những website có nhiều tầng chuyên mục thì Breadcrumbs trở nên rất hữu dụng.

Mặc định trong Genesis Breadcrumbs hiển thị ở trên thẻ tiêu đề bài viết với ngôn ngữ tiếng anh, trong bài này mình sẽ hướng dẫn các bạn thay đổi vị trí Breadcrumbs và tùy biến hiển thị của Breadcrumbs. Các code dưới đây các bạn thêm vào file functions.php của Genesis child theme.

1. Thay đổi link trang chủ của breadcrumbs

1
2
3
4
5
6
7
8
9
10
11
12
13
add_filter ( 'genesis_home_crumb', 'child_amend_home_breadcrumb_link' ); // Genesis >= 1.5
add_filter ( 'genesis_breadcrumb_homelink', 'child_amend_home_breadcrumb_link' ); // Genesis =< 1.4.1
/**
 * Amend Home breadcrumb link.
 * 
 * @author Gary Jones
 *
 * @param string $crumb HTML markup for Home breadcrumb
 * @return string HTML markup 
 */
function child_amend_home_breadcrumb_link( $crumb ) {
    return preg_replace('/href="[^"]*"/', 'href="http://example.com/home"', $crumb);
}

2. Đổi vị trí breadcrumbs lên trên header, dưới thanh menu.

1
2
3
/** Reposition the breadcrumbs */
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_after_header', 'genesis_do_breadcrumbs' );

3.  Tùy chỉnh các chỉ dẫn trước breadcrumbs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
add_filter( 'genesis_breadcrumb_args', 'child_breadcrumb_args' );
/**
 * Amend breadcrumb arguments.
 * 
 * @author Gary Jones
 *
 * @param array $args Default breadcrumb arguments
 * @return array Amended breadcrumb arguments
 */
function child_breadcrumb_args( $args ) {
    $args['home']                    = 'Trang chủ';
    $args['sep']                     = ' / ';
    $args['list_sep']                = ', '; // Genesis 1.5 and later
    $args['prefix']                  = '<div class="breadcrumb">';
    $args['suffix']                  = '</div>';
    $args['heirarchial_attachments'] = true; // Genesis 1.5 and later
    $args['heirarchial_categories']  = true; // Genesis 1.5 and later
    $args['display']                 = true;
    $args['labels']['prefix']        = 'Bạn đang ở: ';
    $args['labels']['author']        = 'Lưu trữ cho ';
    $args['labels']['category']      = 'Lưu trữ cho '; // Genesis 1.6 and later
    $args['labels']['tag']           = 'Lưu trữ cho ';
    $args['labels']['date']          = 'Lưu trữ cho ';
    $args['labels']['search']        = 'Tìm kiếm cho ';
    $args['labels']['tax']           = 'Lưu trữ cho ';
    $args['labels']['post_type']     = 'Lưu trữ cho ';
    $args['labels']['404']           = 'Không tìm thấy: '; // Genesis 1.5 and later
    return $args;
}

Ngoài lề một chút, Breadcrumbs tạm dịch là “mẫu bánh mì”. Tại sao lại có tên như vậy, nó xuất phát từ một câu chuyện cổ tích kể rằng một gia đình vì quá nghèo không thể nuôi được con phải đưa con đến một nơi rất xa rồi bỏ con ở lại và một cậu bé thông minh đã dùng những mẩu bánh mỳ rải dọc đường để tìm đường về. Những link giống như những mẩu bánh mỳ đánh dấu giúp bạn định vị được mình ở đâu trong website. Rất lãng mạn các bạn nhỉ

Trả lời

Thư điện tử 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 *