Breadcrumb - thanh định hướng
Breadcrumb: thanh định hướng nội dung website, giúp người dùng dễ dàng truy cập vào các thành phần của một website.
Cài đặt plugin breadcrumb NavXT: https://wordpress.org/plugins/breadcrumb-navxt/
Ngoài plugin Breadcrumb NavXT mình biết có plugin SEO của yoast cũng tạo tính năng này.
Trong tài liệu này mình sử dụng Breadcrumb NavXT làm mẫu.
Cài đặt
Trước 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é.
Cấu hình:
Sau khi kích hoạt plugin bạn vào Settings > Breadcrumb NavXT để tiến hành cấu hình.
Bạn có thể sửa lại thông tin như:
– Đổi ký tự trail là ký tự ngăn cách trong mỗi breadcrumb tại trường “Breadcrumb Separator”.
– 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...
%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ị:
bcn_display()
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>
|
Cú pháp:
|
bcn_display($return = false, $linked = true, $reverse = false)
|
– $return=true: trả về giá trị thay vì echo.
– Nếu $link=false người dùng chỉ xem bài viết/trang chứa trong category/taxonomy nào mà không trỏ đến liên kết đó.
– $reverse=true: cho pép đảo ngược breadcrumbs. Giống như sau:
bcn_display_list().
bcn_display_list() không sử dụng trail trong cài đặt của plugin mà sử dụng thẻ HTML list “li” bao mỗi breadcrumb. Ví dụ:
|
<div class="breadcrumbs">
<!-- Breadcrumb NavXT 5.1.1 -->
<li class="home"><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to wp2 Sites." href="http://localhost/wp2" class="main-home">wp2 Sites</a></span></li>
<li><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to thevistaanphu." href="http://localhost/wp2/thevistaanphu" class="home">thevistaanphu</a></span></li>
<li><span typeof="v:Breadcrumb"><a rel="v:url" property="v:title" title="Go to the php category archives." href="http://localhost/wp2/thevistaanphu/category/php/" class="taxonomy category">php</a></span></li>
<li class="current_item"><span typeof="v:Breadcrumb"><span property="v:title">Why bloggers are RAVING about this… FREE video!</span></span></li>
</div>
|
Tùy biến nâng cao.
- Xóa item hiện tại ở cuối chuỗi breadcrumb.
|
//Add in our action hook to run after the trail has been filled
add_action('bcn_after_fill', 'bcnext_remove_current_item');
/**
* We're going to pop off the paged breadcrumb and add in our own thing
*
* @param bcn_breadcrumb_trail $trail the breadcrumb_trail object after it has been filled
*/
function bcnext_remove_current_item($trail)
{
//Make sure we have a type
if(isset($trail->breadcrumbs[0]->type) && is_array($trail->breadcrumbs[0]->type) && isset($trail->breadcrumbs[0]->type[1]))
{
//Check if we have a current item
if(in_array('current-item', $trail->breadcrumbs[0]->type))
{
//Shift the current item off the front
array_shift($trail->breadcrumbs);
}
}
}
|
