TwitterFacebookRSS
You are here: Home » Wordpress » Plugins » Hiển thị Breadcrumb trong WordPress

Hiển thị Breadcrumb trong WordPress

By: trongnguyen on May. 12, 2011 with 11 Comments

là một thanh menu giúp người đọc biết chính xác vị trí họ đang ở hoặc Website của bạn và giúp chuyển nhanh tới Category chứa bài viết hoặc trang chủ từ bất kỳ bài viết nào . VD hình ảnh về 1 Breadcrumbs trong blog siteground193.com/~nguyenh4 như sau:

Thanh Breadcrumbs trong blog siteground193.com/~nguyenh4

Trong bài viết này tôi sẽ cùng các bạn thêm Breadcrumbs cho Blog với Plugin

Thông tin về Yoast Breadcrumbs

Yoast Breadcrumbs – Thêm Breadcrumb cho Blog WordPress
Tên Plugin Yoast Breadcrumbs
Link download http://wordpress.org/extend/plugins/breadcrumbs/
Số lần download 109,627
Tác giả Joost de Valk
Vị trí trên Dashboard Dashboard | Settings | Breadcrumbs

Sử dụng Yoast Breadcrumbs cho Blog WordPress

Sau khi cài đặt trực tiếp Plugin với từ khóa Yoast Breadcrumbs bạn truy cập vào Dashboard | Settings | Breadcrumbs để cấu hình cho Plugin này.

image

Phần lớn các thiết lập ở đây bạn đều có thể để như mặc định, bạn chú ý 2 thông số sau:

  • Show category in post breadcrumbs? Nếu bỏ chọn mục này thì Yoast Breadcrumbs sẽ không hiển thị tên của Category trên thanh Breadcrumbs.
  • Bold the last page in the breadcrumbs: Chọn mục này nếu bạn muốn tên của bài Post | Page được tô đạm trên thanh Breadcrumbs.

Cấu hình cho Plugin Yoast Breadcrumbs

Sau đó bạn nhấn Save Breadcrumbs Setting để lưu các thông số vừa thiết lập và quay lại trang chủ để kiểm tra, khi bạn mở một bài Post bất kỳ bạn sẽ thấy có thanh Breadcrumbs hiển thị phía trên Blog như hình dưới:

Thanh Breadcrumbs được tạo mặc định với Plugin Yoast Breadcrumbs

Yoast Breadcrumbs cũng cung cấp một tính năng khá tiện dụng đó là mã short code giúp bạn tùy biến hiển thị vị trí, style cho thanh Breadcrumbs. VD: khi bạn vào xem bài viết 10 video được xem nhiều nhất trên Youtube trên Blog siteground193.com/~nguyenh4 bạn sẽ thấy thanh Breadcrumb được tùy biến hiển thị như sau:

Thanh Breadcrumbs trong blog siteground193.com/~nguyenh4

Để thực hiện việc này bạn vào phần chỉnh sửa giao diện của Blog (Dashboard | Appearance | Editor) sau đó chọn tới file Template hiển thị bài Post (VD: với giao diện của tôi là file single.php). Bạn copy đoạn mã sau vào vị trí thích hợp trong bài post, thông thường vị trí của Breadcrumbs được đặt ở phía trên bài Post nên bạn có thể copy short code này vào trước phần hiển thị dòng Post title trong trang single.php:

<?php if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<span class="breadcrumbs">','</span>');
} ?>

Bạn dùng đoạn CSS sau để tùy biến hiển thị cho thẻ span của Breadcrumbs.

.breadcrumbs{
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    clear: none;
    color: #000000;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin: 4px 2px 0px 25px;
    padding: 3px 7px;
}
.breadcrumbs a{
border: none;
outline: none;
color: #17667A;
text-decoration: underline;
}
.breadcrumbs:hover {
    background-color: #FFFF00;
    cursor: pointer;
}

Sau khi thực hiện việc thêm short code của Yoast Breadcrumbs vào trang single.php và tùy biến CSS ở trên Blog của bạn sẽ có 1 thanh Breadcrumbs giúp người đọc nhanh chóng xác định vị trí bài viết họ đang xem trong Blog của bạn và chuyển nhanh tới Category chứa bài viết đó, hoặc quay về trang chủ. Việc trang bị Breadcrumbs sẽ tăng thêm tính tiện dụng & thân thiện đối với người đọc blog của bạn.


Tags:

Chào mừng bạn tới Blog của tôi, nơi chúng ta sẽ cùng sẻ chia những kinh nghiệm về việc xây dựng và phát triển website với Wordpress, kiến thức về Online marketing và ký sự sau mỗi chuyến đi khám phá những miền đất mới lạ.

Bài viết liên quan:

Did you like this article? Share it below!


11 Comments to “Hiển thị Breadcrumb trong WordPress”

  • August 2, 2011 at 09:09
    phzeloiron says:

    WoW thanks anh nhiều lắm, em đang cần cái này nè, có search được plugin, nhưng mà k có css, em khoái cái css của trang anh rồi nha. Bên em có nhiều phim lắm, có rãnh anh qua xem và chỉ giáo em vài ngón đòn nha!

    Reply
    • August 2, 2011 at 10:37
      trongnguyen says:

      Cảm ơn em nhiều lắm :) , anh vừa qua http://openvn.net/ trang em làm đẹp lắm, anh dùng iPhone 4 ko biết trên trang em có nhiều film cho máy này ko, cảm ơn em nhiều :)

      Reply
  • August 2, 2011 at 16:15
    phzeloiron says:

    Khi em vô setting việt hóa thì nó bể font tiếng việt hết trơn, nhưng mà ra ngoài single thì k có gì, k biết cái Breadcrumbs này nó có ảnh hưởng tới Seo google k nữa. em post được khoảng 100 bài rồi, phải dùng “all-in-one-seo-pack” thì phải sửa mệt lắm, vậy có cách nào không dùng nó mà seo tốt không anh!

    Reply
    • August 3, 2011 at 07:48
      trongnguyen says:

      Cái này hỗ trợ SEO tốt đó em ah (em xem thêm thông tin ở đây nha: http://yoast.com/wordpress-breadcrumbs/). Anh hiện cũng đang dùng All In One SEO pack và cảm thấy khá hiệu quả em ah, vậy em cứ tiếp tục dùng 2 tool này đi nha :)

      Reply
  • September 29, 2011 at 18:01
    Đầm công sở says:

    Cảm ơn anh thực sự cái Breadcrum này hiệu quả cho SEO thật, nhờ anh mà em sử dụng nó cho site em và được google nhận xét là đẹp trai hơn hihi

    Reply
    • October 3, 2011 at 08:17
      trongnguyen says:

      Cảm ơn lời động viên của em, anh chúc website em sẽ có kết quả SEO thật tốt và luôn được các Search Engine đánh giá cao.

      Reply
  • October 16, 2011 at 18:39
    baolong says:

    anh cho em hỏi chút, cái đoạn code:
    .breadcrumbs{
    background-color: #FFFFFF;
    border: 1px solid #999999;
    border-radius: 5px 5px 5px 5px;
    clear: none;
    color: #000000;
    display: block;
    float: left;
    font-size: 13px;
    font-weight: bold;
    margin: 4px 2px 0px 25px;
    padding: 3px 7px;
    }
    .breadcrumbs a{
    border: none;
    outline: none;
    color: #17667A;
    text-decoration: underline;
    }
    .breadcrumbs:hover {
    background-color: #FFFF00;
    cursor: pointer;
    }
    là để chèn vào đâu hả anh, em mới làm quen wp :D , mong ảnh chỉ giáo

    Reply
    • October 17, 2011 at 11:57
      trongnguyen says:

      Chào em!

      Đoạn code đó là chèn vào file .css trong theme của em, thông thường file .css sẽ nằm tại thư mục ngoài cùng của theme, VD: /public_html/wp-content/themes/design/style.css (tên theme của anh là Design)

      Chúc em thành công

      Reply
  • October 28, 2011 at 22:56
    cuongnguyen208 says:

    http://a.imageshack.us/img8/2748/chiplovebiz281020116914.png
    Xin hỏi bác cái plugin này tên là gì vậy có thể share được không
    cảm ơn

    Reply
    • October 29, 2011 at 08:16
      trongnguyen says:

      Cái này tui code bác ah, bác gửi email rùi tui share code vì comment ko cho add code :)

      Reply
  • October 29, 2011 at 08:22
    cuongnguyen208 says:

    Email của mình cuongnguyen208@gmail.com cảm ơn trước nhé

    Reply

Post comment