Chào các bạn! Đây là bài viết đầu tiên của mình tại Hutruc cũng là bài viết đầu tiên về thủ thuật wordpress. Nếu có gì chưa hoàn chỉnh mong các bạn hãy đóng góp ý kiến để mình rút kinh nghiệm trong các bài viết sau!

Trong bài này, mình sẽ hướng dẫn các bạn cách tạo thanh điều hướng cho blog wordpress. Demo các bạn có thể xem ở phía trên bài viết này tại Hutruc.com

Ảnh Minh Họa: Thanh điều hướng của Hư Trúc Blog title="Ảnh Minh Họa: Thanh điều hướng của Hư Trúc Blog" >Ảnh Minh Họa: Thanh điều hướng của Hư Trúc Blog

Cách 1: Không dùng plugin:

Tạo tập tin mới có tên breadcrumbs.php với nội dung là đoạn code sau:

<div class="breadcrumbs">
<?php
function breadcrumbs() {
    $theFullUrl = $_SERVER["REQUEST_URI"];
    $urlArray=explode("/",$theFullUrl);
    echo 'You Are Here: <a href="/">Home</a>';
    while (list($j,$text) = each($urlArray)) {
        $dir='';
        if ($j > 1) {
            $i=1;
            while ($i < $j) {
                $dir .= '/' . $urlArray[$i];
                $text = $urlArray[$i];
                $i++;
            }
            if($j < count($urlArray)-1) echo ' &raquo; <a href="'.$dir.'">' . str_replace("-", " ", $text) . '</a>';
        }
    }
    echo wp_title();
}
breadcrumbs();
?>
</div>

Sau đó chèn đoạn code sau vào nơi bạn muốn hiển thị thanh điều hướng:

<?php include  ( TEMPLATEPATH . '/breadcrumbs.php'); ?>

Để trang trí cho thanh điều hướng, bạn chỉ cần thêm class “breadcrumbs” vào file css!

Cách 2: Sử dụng plugin:

Breadcrumb NavXT – Download tại đây.

Sau khi cài plugin chèn đoạn code sau vào nơi muốn hiển thị thanh điều hướng:

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

Yoast Breadcrumbs – Download tại đây.

Sau khi kích hoạt plugin, chèn đoạn code sau vào nơi bạn muốn hiển thị thanh điều hướng.

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

Trên đây là 2 cách tạo thanh điều hướng mà mình biết, hy vọng bài viết sẽ có ích với các bạn!