Cách nào để thêm Breadcrumb điều hướng vào WordPress [Không yêu cầu code]

Bạn có muốn tạo Breadcrumb cho WordPress của mình?

Thực tế hiện nay mình thấy có một số bạn quan tâm cách để thêm một liên kết điều hướng trước tiêu đề bài viết (gọi là Breadcrumb) nhưng lại không biết cách thực hiện thế nào cho đúng.

Breadcrumb này thường được sử dụng với mục đích giúp khách truy cập dễ dàng nhận biết vị trí cuả họ trên Website của bạn và quan trọng hơn nó cũng rất tốt cho SEO.

Trong bài viết này mình sẽ hướng dẫn bạn cách tạo Breadcrumb cho WordPress một cách hoàn chỉnh và đơn giản nhất mà không yêu cần kiến thức về code.

Breadcrumb là một thuật ngữ dùng để chỉ các liên kết được hiển thị dưới dạng phân cấp trên Website.

Để dễ hiểu hơn hãy lấy ví dụ đây là cấu trúc breadcrumb của bài viết này:

Home » Blog » Cách nào để thêm breadcrumb điều hướng vào WordPress [Không yêu cầu code]

Trong đó cấp lớn nhất là trang chủ, sau đó tới trang lưu trữ bài viết và cuối cùng là tiêu đề trang hiện tại.

Về cơ bản Breadcrumb có tác dụng giúp cho người dùng định vị được vị trí của họ trên Website của bạn. 

Tuy nhiên breadcrumb có một chức năng quan trọng hơn mà khiến nhiều bạn đặc biệt quan tâm. Đó là nó giúp các các công cụ tìm kiếm hiểu rõ cấu trúc Website của bạn.

Sau đó hiển thị trên SERPs và có tác dụng giúp tăng tỉ lệ nhấp vào Website của bạn.

Điều này rất có ý nghĩa cho SEO cũng như xếp hạng của bạn trên kết quả tìm kiếm.

phan-cap-tren-serps
  • Save

Được rồi, nếu như bạn thấy được tầm quan trọng của Breadcrumb thì bây giờ đã tới lúc thực hành tạo Breadcrumb cho Website của bạn.

4 cách tạo Breadcrumb cho WordPress

Có khá nhiều cách giúp bạn tạo Breadcrumb cho WordPress nên mình không chắc cách nào phù hợp với bạn, vì vậy mình sẽ hướng dẫn bạn 4 cách khác nhau để bạn dễ dàng lựa chọn.

Cách 1: Dùng một Theme WordPress có tích hợp Breadcrumb

Cách tạo Breadcrumb đơn giản nhất là tận dụng những tính năng có sẵn trên các theme WordPress.

Các nhà phát triển Theme rất nhạy bén và lắng nghe người dùng của họ, vì vậy một tính năng hay ho như breadcrumb khả năng cao sẽ được cách chuyên gia tích hợp ngay trong theme.

Với một số theme thì Breadcrumb đã được hiển thị cố định nên hầu như bạn không phải làm gì khác.

Tuy nhiên với một số theme thì bạn có thể bật tắt trong mục customize của WordPress hoặc bảng tùy chỉnh riêng của nó.

Nếu bạn cần một vài gợi ý theme tốt nhất có hỗ trợ breadcrumb thì có thể tham khảo danh sách dưới đây. Mình cũng đã phân loại theo những nhà cung cấp theme tốt nhất.

  • Mythemeshop: Schema, Ad-sense, SteadyIncome, SociallyViral 
  • ThemeForest: Newspaper, Soledad, Rehub, Voice. 
  • Theme-junkie: True Review, Review pro, Insido, Beginner.  
  • StudioPress: Hầu hết theme tại đây đều có tùy chỉnh bật breadcrumb. 
breadcrumb-mythemeshop
  • Save

Ngoài ra còn rất nhiều theme khác tích hợp sẵn Breadcrumb, bạn chỉ có thể tự xem demo để nhận biết chứ mình mà liệt kê thì không biết khi nào mới hết.

Trường hợp theme bạn đang dùng không hỗ trợ thì hãy dùng cách sau.

Cách 2: Tạo Breadcrumb bằng Yoast SEO

Yoast SEO được biết đến là một trong những plugin SEO tốt nhất trên thị trường vì vậy thật may mắn khi nó cũng hỗ trợ tạo breadcrumb một cách dễ dàng trên WordPress của bạn.

Điều trước tiên cần làm hãy chắc chắn bạn đã cài đặt và cấu hình Yoast SEO

Bây giờ bạn hãy thực hiện SEO » Search Appearance » Breadcrumbs.

Sau đó bạn sẽ thấy một số tùy chỉnh cho Breadcrumb, bạn có thể giữ nguyên hoặc với site tiếng việt thì có thể việt hóa các từ ngữ. Cá nhân mình rất lười biếng nên dù có làm site nào thì cũng giữ nguyên như vậy.

ca-hinh-hien-thi-yoast-seo
  • Save

Đừng quên kéo xuống lưu lại những thay đổi vừa rồi.

Tiếp đó trên giao diện quản trị WordPress chọn Appearance -> Customize và chọn mục tùy chỉnh Beardcrumb.

Hãy chọn vị trí hiển thị phù hợp trên WordPress, mình khuyên bạn nên chọn After header để hiển thị ngay dưới vị trí của phần đầu trang.

hien-thi-yoast-seo-wp
  • Save

Theo mặc định thì Breadcrumb sẽ hiển thị trên tất cả các loại trang của Website, tuy nhiên thực tế thì điều này không cần thiết. Bạn chỉ cần cho phép breadcrumb có mặt trên các bài viết là đủ.

Vì vậy mình khuyên bạn nên chọn Disable tất cả và để lại mục Blog/Posts page & Single Post.

Cuối cùng nhấn Publish để lưu lại.

Giờ thì hãy tìm đến một bài viết bất kỳ và kiểm tra vị trí breadcrumb hiển thị.

Trong một số trường hợp WordPress của bạn không hiển thị như ý muốn hãy dùng đoạn mã sau dán vào cuối tệp header.php của theme bạn đang dùng.

<?php

if ( function_exists('yoast_breadcrumb') ) {

 yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );

}

?>

Cách 3: Tạo Breadcrumb bằng plugin breadcrumb NavXT

Trong trường hợp bạn không dùng Yoast SEO hoặc muốn có nhiều tùy chỉnh hơn thì cách này rất hữu ích cho bạn.

Đầu tiên bạn cần đi đến Directory của WordPress sau đó nhập vào ô tìm kiếm từ khóa "Breadcrumb NavXT".

cai-dat-breadcrumb-navxt
  • Save

Sau khi kích hoạt hãy đi đến phần cấu hình cho plugin này bằng cách chọn Settings -> Breadcrumb NavXT.

Bạn sẽ thấy khá nhiều tùy chọn mà không thể tìm thấy ở Yoast SEO.

Nếu lướt qua một chút bạn sẽ thấy các liên kết sử dụng tham số schema.org chiếm phần lớn không gian cấu hình - thứ vốn rất quan trọng trong hiển thị nội dung kết quả tìm kiếm của Google.

cau-inh-breadcrumb-navXT-plugin
  • Save

Về cơ bản bạn chỉ cần giữ nguyên tất cả, hoặc nếu có thời gian bạn có thể vọc vạch cách tùy chọn để hiểu rõ hơn về cách hiển thị, nhưng tốt nhất bạn đừng chạm đến khu vực mã schema.

Khi thực hiện bất kỳ thay đổi nào bạn hãy nhớ lưu lại.

Giờ thì hãy chọn Appreance -> Customize -> Breadcrumb.

hien-thi-breadcrumb-navxt
  • Save

Tiếp đó hãy chọn vị trí hiển thị After header chọn nguồn Breadcrumb NavXT. Giờ thì nó sẽ hiện thị trên hầu hết các trang của bạn. Nếu như bạn muốn tắt Breadcrumb ở những trang đặc biệt thì có thể tick chọn disable vào vị trí tương ứng.

Cuối cùng nhấn Publish và thưởng thức Breadcrumb WordPress mới của bạn.

Cách 4: Sử dụng Breadcrumb của trình tạo chủ đề WordPress

Trình tạo chủ đề là những con quá vật về mặt thiết kế, chính vì vậy một tính năng như breadcrumb cũng không có gì khó khăn với nó.

Nếu bạn sử dụng các Theme Builder như Elementor Pro, Divi Theme Builder, Beaver Builder, Thrive Theme Builder thì chúng sẽ có một modules với tên "Breadcrumb" cho phép bạn thêm vào WordPress một cách dễ dàng.

Ví dụ Thrive Theme Builder có một element cho phép bạn thêm breadcrumb chỉ bằng thao tác kéo thả đơn giản.

breadcrumb-thrive-theme-builder
  • Save

Riêng Elementor Pro thì widget breadcrumb chỉ hiện khi bạn cài đặt Yoast SEO và bật nó trong tùy chọn cấu hình.

Lời kết

Hy vọng qua hướng dẫn này bạn đã viết cách tạo Breadcrumb cho WordPress của mình. 

Mặc dù Breadcrumb khá đơn giản nhưng mình tin nó cũng có thể tăng đáng kể trải nghiệm người dùng của bạn. Hơn nữa đây cũng là một yếu tố ảnh hưởng đến SEO của bạn.

Mặc dù đây chỉ là một chi tiết nhỏ đôi khi cũng sẽ dẫn đến một sự thay đổi lớn vì vậy mình khuyên bạn đừng nên bỏ qua nó.

Ngoài ra nếu như bạn muốn biết nhiều hơn về SEO thì có thể xem hướng dẫn SEO cho người mới của mình để có một nền tảng SEO tốt nhất.

Trong quá trình thực hành tạo breadcrumb nếu như gặp khó khăn hoăc thắc mắc nào thì hãy để lại comment bên dưới, mình sẽ phản hồi sớm nhất cho bạn.

Nếu như bạn cảm thấy bài viết này hữu ích thì đừng quên chia sẻ nó cho bạn bè của bạn để tăng thêm giá trị nhé!

  • Save
Đôi chút về Nam Nguyen

Nam là một Blogger & giáo viên WordPress. Cậu ấy giúp mọi người bắt đầu & phát triển Website một cách dễ dàng & chuyên nghiệp mà không yêu cầu kiến thức lập trình. Theo dõi cậu ấy trên Facebook, Twitter, Linkedin.

Nhận nội dung tốt nhất từ mình

Bao gồm các hướng dẫn WordPress, mẹo, công cụ & ưu đãi tốt nhất để phát triển doanh nghiệp trực tuyến của bạn.

>

Hướng dẫn miễn phí

Bạn có muốn?

Học cách phát triển doanh nghiệp từ WordPress như một chuyên gia hàng đầu.

123 Shares
Share via
Copy link