Hiển thị thanh menu breadcrumb trong trang web WordPress

Thanh menu breadcrumbs có vai trò như một bản chỉ đường, giúp nhắc nhở người dùng họ đang ở vị trí nào trên website.

Thêm Menu Breadcrumbs bằng cách sử dụng Plugin Breadcrumb NavXT

Đầu tiên, download và cài đặt plugin Breadcrumb NavXT. Lưu ý plugin tạo thêm 1 phiên bản để Migration nếu cần, bạn không được xóa nó đi đâu nhé.

Sau khi kích hoạt plugin, chúng ta thêm đoạn code sau vào bất kỳ template nào bạn muốn hiển thị breadcrumbs. Thường chèn sau menu ngang trong header.php

<div class="breadcrumbs">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Bạn có thể đổi ký tự breadcrumb trail, thêm chuỗi HTML làm đẹp breadcrumbs, giới hạn tiêu đề hay cho phép breadcrumbs hoạt động trên một số template page. Để làm điều này chúng ta truy cập vào trang cấu hình của breadcrumb NavXT tại settings->Breadcrumb NavXT.

Nếu cài nhiều sites trên một hệ thống wordpress thì sẽ gặp bước này, nhấn vào liên kết Migrate now đó là plugin thứ hai của breadcrumb NavXT mình vừa nhắc ở trên.

Cài đặt Breadcrumb NavXT

Cài đặt mặc định sẽ hoạt động đối với hầu hết các trang web. Tuy nhiên, bạn muốn thực hiện các thay đổi để tùy chỉnh cài đặt nếu cần.

Bạn có thể sửa lại thông tin như:

  • Breadcrumb Separator: Đổi ký ngăn cách trong mỗi breadcrumb.
  • Giới hạn tiêu đề hiển thị:  mặc định plugin không giới hạn checkbox vô “Limit the length of the breadcrumb title” điền tối đa số ký tự ở ô dưới.

Một số Biến tag sử dụng trong dữ liệu hiển thị breadcrumbs:

  • %title%: tiêu đề của page, post..có lọc bởi esc_attr giống hàm the_title_attribute, dùng thiết lập giá trị cho thuộc tính thẻ html.
  • %htitle%: Nội dung tiêu đề hiển thị trên breadcrumb.
  • %link%: URL đến post/page trên breadcrumb.
  • %type%: chuỗi cho biết breadcrumb đang hoạt động trên template nào, dựa vào thông tin này chúng ta sẽ thêm vào css class để tô điểm breadcrumb ở các trang thích hợp. Ví dụ URL trỏ về category/taxonomy template thì %type%=”taxonomy category”.

Hiển thị breadcrumb

Bạn cần thêm mã này vào tệp header.php trong chủ đề của bạn nơi bạn muốn hiển thị điều hướng đường dẫn.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="http://schema.org/">
    <?php if(function_exists('bcn_display'))
    {
        bcn_display();
    }?>
</div>

Mình hy vọng bài viết này sẽ giúp bạn dễ dàng hiểu được Menu Breadcrumbs trong WordPress. Chúc các bạn thành công! Chào thân ái và quyết thắng.

Leave a Reply

Your email address will not be published. Required fields are marked *

arrow