Hiển thị thanh menu định hướng breadcrumbs cho website wordpress

Quảng cáo
Ads_ngang
Website dinhthuanit.com có bài Hiển thị thanh menu định hướng breadcrumbs cho website wordpress

Breadcrumb NavXT là wordpress plugin tạo thanh định hướng thông dụng nhất cho website. 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. Vì breadcrumbs liên quan đến việc hiện trên cỗ máy kiếm tìm google, bing..nên nếu bạn đang sử dụng plugin SEO yoast thì cũng nên sử dụng luôn tính năng breadcrumbs của nó.

Sau một khoảng thời gian sử dụng Breadcrumb NavXT và các plugin tạo breadcrumb khác của wordpress website của bạn sẽ xuất hiện địa điểm định hướng trên trang tìm kiếm google như thế này.
thanh định hướng wordpress breadcrumb

Quick Start

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é.
wordpress breadcrumbs Migration

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 mong muốn hiển thị breadcrumbs. Thường chèn sau menu ngang trong header.php

  

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 cấp 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ứ 2 của breadcrumb NavXT mình vừa nhắc ở trên.

Cài đặt Breadcrumb NavXT

Giao diện cài đặt trong admin:
breadcrumb-navxt-wordpress-settings
Bạn có thể sửa lại tin tức 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.
Ngoài ra thiết lập các thông số khác, tùy bạn nhưng mình khuyên không thay đổi cấu trúc markup html breadcrumb vì này là html5 đúng cho SEO. Ví dụ breadcrumb hiển thị ở trang home.

   %htitle%    

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 thấy breadcrumb đang hoạt động trên template nào, dựa vào tin tức này chúng ta sẽ thêm vô 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”.
    wordpress-breadcrumb2

Hiển thị breadcrumb

Hàm phổ biến hiển thị breadcrumb NavXT là bcn_display , có cấu trúc:

 bcn_display($return = false, $linked = true, $reverse = false)  

Sử dụng hàm này trong template sẽ tạo breadcrumb ở trang hiện tại.
Tham số:
$return=true : trả về giá trị thay vì echo.
– Nếu $link=false người sử 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:
breadcrumb-navxt-reverse

Ngoài ra, để hiển thị breadcrumb plugin có thêm hàm bcn_display_list() , lấy tham số tương tự với hàm bcn_display. Điểm khác biệt giữa 2 hàm hiển thị breadcrumb navxt đây là ký tự “trail”.
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ụ:

  
  • wp2 Sites
  • thevistaanphu
  • php
  • Why bloggers are RAVING about this… FREE video!
  • Bên cạnh đó Plugin còn cung cấp action hooks giúp bạn thỏa sức tùy biến breadcrumb cho website, đoch thêm tài liệu tại đây.
    Chúc bạn thành công.

    Để nhận được bài viết mới vui lòng đăng ký kênh kiến thức WordPress từ A-Z ở Form bên dưới. Bạn cũng có thể thu được sự trợ giúp trên Twitter và Facebook

    Bài viết Hiển thị thanh menu định hướng breadcrumbs cho website wordpress được tổng hợp và biên tập bởi: dinhthuanit.com. Mọi ý kiến đóng góp và phản hồi vui lòng gửi Liên Hệ cho dinhthuanit.com để điều chỉnh. dinhthuanit.com xin cảm ơn.

    Bài Viết Liên Quan


    Bài Viết Khác


    Quảng cáo
    Ads_ngang