Thêm breadcrumbs vào WooCommerce cho người mới

7 giờ ago, Hướng dẫn WordPress, Views
Thêm breadcrumbs vào WooCommerce cho người mới

Thêm Breadcrumbs vào WooCommerce cho Người Mới

Breadcrumbs, hay còn gọi là “vụn bánh mì”, là một thanh điều hướng nhỏ thường nằm ở phía trên cùng của trang web, giúp người dùng biết được vị trí của họ trên trang web và dễ dàng quay lại các trang trước đó. Trong WooCommerce, breadcrumbs đóng vai trò quan trọng trong việc cải thiện trải nghiệm người dùng, điều hướng website và thậm chí cả SEO.

Tại Sao Breadcrumbs Quan Trọng trong WooCommerce?

Việc sử dụng breadcrumbs mang lại nhiều lợi ích cho cửa hàng WooCommerce của bạn:

  • Cải thiện trải nghiệm người dùng (UX): Khách hàng dễ dàng tìm thấy đường đi và điều hướng trên trang web của bạn.
  • Tăng cường SEO: Breadcrumbs giúp các công cụ tìm kiếm hiểu rõ cấu trúc trang web của bạn, từ đó cải thiện thứ hạng tìm kiếm.
  • Giảm tỷ lệ thoát trang (Bounce Rate): Người dùng dễ dàng quay lại các trang trước đó, giảm khả năng họ rời khỏi trang web của bạn.
  • Tăng thời gian trên trang (Time on Site): Khi người dùng dễ dàng điều hướng, họ có xu hướng ở lại trang web của bạn lâu hơn.

Các Phương Pháp Thêm Breadcrumbs vào WooCommerce

Có nhiều cách để thêm breadcrumbs vào cửa hàng WooCommerce của bạn. Dưới đây là một số phương pháp phổ biến nhất:

Sử Dụng Chức Năng Tích Hợp Sẵn của WooCommerce

Một số theme WooCommerce đã tích hợp sẵn chức năng breadcrumbs. Nếu theme của bạn có chức năng này, bạn chỉ cần kích hoạt nó trong cài đặt theme.

  1. Truy cập vào trang quản trị WordPress của bạn.
  2. Tìm đến phần “Appearance” (Giao diện) -> “Customize” (Tùy chỉnh).
  3. Tìm kiếm các tùy chọn liên quan đến “Breadcrumbs” hoặc “Navigation” (Điều hướng).
  4. Kích hoạt chức năng breadcrumbs và tùy chỉnh theo ý muốn (nếu có).
  5. Nhấn “Publish” (Đăng) để lưu thay đổi.

Nếu theme của bạn không có chức năng này, bạn có thể sử dụng các phương pháp sau.

Sử Dụng Plugin WooCommerce Breadcrumbs

Đây là cách phổ biến và đơn giản nhất để thêm breadcrumbs. Có rất nhiều plugin miễn phí và trả phí có sẵn trên thị trường. Một số plugin phổ biến bao gồm:

  • Yoast SEO: Không chỉ là plugin SEO, Yoast SEO còn cung cấp chức năng breadcrumbs mạnh mẽ.
  • Breadcrumb NavXT: Một plugin chuyên dụng về breadcrumbs, cung cấp nhiều tùy chọn tùy chỉnh.
  • WooCommerce Breadcrumbs: Một plugin đơn giản, dễ sử dụng, tập trung vào việc thêm breadcrumbs cho WooCommerce.

Hướng dẫn sử dụng Yoast SEO để thêm Breadcrumbs:

  1. Cài đặt và kích hoạt plugin Yoast SEO.
  2. Truy cập “SEO” -> “Search Appearance” (Hiển thị Tìm kiếm) -> “Breadcrumbs”.
  3. Đảm bảo rằng tùy chọn “Enable breadcrumbs” (Kích hoạt breadcrumbs) được bật.
  4. Tùy chỉnh các thiết lập breadcrumbs theo ý muốn (ví dụ: separator, homepage label).
  5. Thêm đoạn code sau vào theme của bạn, nơi bạn muốn hiển thị breadcrumbs:
    <?php if ( function_exists('yoast_breadcrumb') ) { yoast_breadcrumb( '<p id="breadcrumbs">','</p>' ); } ?>

Bạn có thể thêm đoạn code này vào file single.php (cho trang sản phẩm), archive.php (cho trang danh mục sản phẩm), hoặc page.php (cho các trang tĩnh).

Hướng dẫn sử dụng Breadcrumb NavXT:

  1. Cài đặt và kích hoạt plugin Breadcrumb NavXT.
  2. Truy cập “Settings” (Cài đặt) -> “Breadcrumb NavXT”.
  3. Tùy chỉnh các thiết lập breadcrumbs (ví dụ: separator, homepage label, template).
  4. Thêm đoạn code sau vào theme của bạn, nơi bạn muốn hiển thị breadcrumbs:
    <?php if ( function_exists('bcn_display') ) { bcn_display(); } ?>

Tương tự như Yoast SEO, bạn có thể thêm đoạn code này vào các file theme tương ứng.

Thêm Breadcrumbs Thủ Công Bằng Code

Nếu bạn là một nhà phát triển web hoặc muốn kiểm soát hoàn toàn breadcrumbs của mình, bạn có thể thêm chúng thủ công bằng code. Phương pháp này đòi hỏi kiến thức về PHP và cấu trúc theme WordPress.

Dưới đây là một ví dụ đơn giản về cách thêm breadcrumbs thủ công:


  <?php
  function custom_breadcrumbs() {
    global $post;
    echo '<a href="' . home_url() . '">Home</a> > ';

    if (is_category() || is_single()) {
      the_category(' > ');
      if (is_single()) {
        echo " > ";
        the_title();
      }
    } elseif (is_page()) {
      if($post->post_parent){
        $parent_id  = $post->post_parent;
        $breadcrumbs = array();
        while ($parent_id) {
          $page = get_page($parent_id);
          $breadcrumbs[] = '<a href="' . get_permalink($page->ID) . '">' . get_the_title($page->ID) . '</a>';
          $parent_id  = $page->post_parent;
        }
        $breadcrumbs = array_reverse($breadcrumbs);
        foreach ($breadcrumbs as $crumb) echo $crumb . ' > ';
      }
      echo the_title();
    } elseif (is_search()) {
      echo"Kết quả tìm kiếm cho... ". esc_html($_GET['s']);
    }
  }
  ?>

  <?php custom_breadcrumbs(); ?>

Để sử dụng code này, bạn cần:

  • Sao chép đoạn code trên.
  • Thêm nó vào file functions.php của theme (khuyến cáo sử dụng child theme để tránh mất code khi cập nhật theme).
  • Gọi hàm custom_breadcrumbs() trong các file theme (ví dụ: single.php, archive.php, page.php) nơi bạn muốn hiển thị breadcrumbs.

Tùy Chỉnh Breadcrumbs

Sau khi đã thêm breadcrumbs, bạn có thể tùy chỉnh chúng để phù hợp với thiết kế và thương hiệu của bạn. Dưới đây là một số tùy chọn tùy chỉnh phổ biến:

  • Thay đổi separator: Thay đổi ký tự phân tách giữa các thành phần breadcrumb (ví dụ: “>”, “/”, “|”).
  • Thay đổi nhãn trang chủ: Thay đổi văn bản hiển thị cho trang chủ (ví dụ: “Home”, “Trang chủ”, “Cửa hàng”).
  • Tùy chỉnh template: Thay đổi cấu trúc và định dạng của breadcrumbs (ví dụ: thêm class CSS, thêm icon).
  • Ẩn breadcrumbs trên một số trang: Bạn có thể ẩn breadcrumbs trên một số trang nhất định (ví dụ: trang chủ, trang thanh toán).

Các plugin breadcrumbs thường cung cấp các tùy chọn tùy chỉnh này trong phần cài đặt của chúng. Nếu bạn sử dụng phương pháp thủ công, bạn cần chỉnh sửa code để thực hiện các tùy chỉnh này.

Lời Khuyên Khi Sử Dụng Breadcrumbs

Dưới đây là một số lời khuyên để sử dụng breadcrumbs hiệu quả:

  • Đặt breadcrumbs ở vị trí dễ thấy: Thường là ở phía trên cùng của trang web, ngay dưới thanh điều hướng chính.
  • Sử dụng separator rõ ràng: Đảm bảo separator dễ nhìn thấy và phân biệt giữa các thành phần breadcrumb.
  • Sử dụng văn bản ngắn gọn và dễ hiểu: Tránh sử dụng văn bản quá dài hoặc khó hiểu.
  • Đảm bảo breadcrumbs chính xác: Kiểm tra kỹ xem breadcrumbs có hiển thị đúng đường dẫn và vị trí của trang hiện tại hay không.
  • Kiểm tra khả năng tương thích: Đảm bảo breadcrumbs hoạt động tốt trên tất cả các thiết bị và trình duyệt.

Kết Luận

Việc thêm breadcrumbs vào cửa hàng WooCommerce của bạn là một việc làm đơn giản nhưng mang lại nhiều lợi ích to lớn. Nó không chỉ cải thiện trải nghiệm người dùng mà còn tăng cường SEO và giảm tỷ lệ thoát trang. Hãy lựa chọn phương pháp phù hợp với trình độ kỹ thuật và nhu cầu của bạn, và đừng quên tùy chỉnh breadcrumbs để phù hợp với thiết kế và thương hiệu của bạn.

, , , ,

..