Cách hiển thị Breadcrumbs

• February 1, 2010
• 9 comments

Breadcrumbs là dạng menu chỉ cho người dùng biết họ đang ở đâu trên một trang web. Đặc biệt với những trang web có chiều sâu trong Categories thì Breadcrumbs trở nên rất hữu dụng khi người dùng đi sâu vào cấu trúc phức tạp bên trong của trang web. Trong bài này bạn sẽ học được cách tạo Breadcrumbs cho blog của bạn.

Tất nhiên cách đơn giản nhất bao giờ là bạn cũng sẽ nghĩ đến Plugin vì WordPress có rất rất nhiều plugin phù hợp với mọi nhu cầu của bạn. Bạn có thể download plugin này về và thử cài đặt và sử dụng xem như thế nào.

Tuy nhiên đôi khi người ta tránh sử dụng quá nhiều plugin vì nhiều lý do như sợ bị lỗi, dễ bị hack, tạo rác trong database v.v.. cho nên nếu có thể viết được code cho tác vụ mình cần, bạn cũng nên xem xét đến khía cạnh này. Dưới đây là đoạn code bạn dùng để tạo Breadcrumbs mà không cần sử dụng Plugin (code credited to Dimox

Trước tiên bạn hãy mở file functions.php và gõ vào đoạn code sau:

<?php
function breadcrumbs() {

  $delimiter = '<span>&raquo;</span>';
  $name = 'Home'; //text for the 'Home' link
  $currentBefore = '<span class="current">';
  $currentAfter = '</span>';

  if ( !is_home() || !is_front_page() || is_paged() ) {

    echo '<div id="crumbs">';

    global $post;
    $home = get_bloginfo('url');
    echo '<a href="' . $home . '">' . $name . '</a> ' . $delimiter . ' ';

    if ( is_category() ) {
      global $wp_query;
      $cat_obj = $wp_query->get_queried_object();
      $thisCat = $cat_obj->term_id;
      $thisCat = get_category($thisCat);
      $parentCat = get_category($thisCat->parent);
      if ($thisCat->parent != 0) echo(get_category_parents($parentCat, TRUE, ' ' . $delimiter . ' '));
      single_cat_title();

    }

    echo '</div>';

  }
}
?>

Đoạn code trên là tôi giản lược lại nhiều từ đoạn code gốc vì nhiều phần không cần thiết, nếu thích bạn có thể tham khảo ở bài gốc để biết thêm chi tiết. Đoạn code này khi được gõ vào file functions.php nó sẽ tạo ra một hàm tùy biến với tên là breadcrumbs(). Cả đoạn code bắt đầu với việc tạo một số biến để dùng sau này cho đoạn code. Sau đó phần logic chính của function này bắt đầu bằng một mệnh đề if, nó sử dụng conditional tags có sẵn trong WordPress để kiểm tra xem người dùng đang ở đâu. Nếu các điều kiện này thỏa mãn thì nó sẽ cho chạy đoạn code ở trong và bao gồm một số query để xác định vị trí hiện tại.

Cuối cùng để hiển thị breadcrumbs bạn mở file index.php lên và gọi hàm này ra ở chỗ phù hợp.

<?php if (function_exists('breadcrumbs')) breadcrumbs(); ?>

Bạn cũng có thể chỉ cần gọi trực tiếp hàm này ra mà không cần phải sử dụng mệnh đề if như trên. Nhưng nó cũng là một thói quen tốt trước khi sử dụng hàm, nên kiểm tra xem nó có tồn tại hay không. Nếu bạn gọi trực tiếp hàm mà nếu hàm đó chưa được tạo, nó sẽ báo lỗi và làm hỏng cả trang web. Cuối cùng thì bạn chỉ cần thêm chút CSS cho nó tươm tất hơn.