Chèn Breadcrumbs cho website WordPress sử dụng plugin Yoast Seo

Hướng dẫn cấu hình Breadcrumbs cho WordPress bằng Yoast SEO

Breadcrumbs (đường dẫn điều hướng) là thành phần quan trọng giúp tối ưu trải nghiệm người dùng (UX) và hỗ trợ Google hiểu cấu trúc website tốt hơn. Tại STAR WAR Digital Solutions, chúng tôi khuyến nghị sử dụng plugin Yoast SEO để quản lý breadcrumbs nhờ tính ổn định và khả năng tùy biến cao. Bài viết này sẽ hướng dẫn bạn cách kích hoạt và tích hợp breadcrumbs vào theme WordPress (lấy ví dụ trên theme Flatsome).

Bước 1: Kích hoạt tính năng Breadcrumbs trong Yoast SEO

Trước tiên, hãy đảm bảo bạn đã cài đặt và kích hoạt plugin Yoast SEO trên website. Sau đó, thực hiện theo các bước sau:

• Truy cập vào SEO > Search Appearance (Giao diện tìm kiếm).
• Chọn tab Breadcrumbs.
• Tại mục Enable Breadcrumbs, chuyển trạng thái sang Enabled.
• Nhấn Save changes để lưu thiết lập.

Lưu ý: Sau khi kích hoạt, hệ thống đã sẵn sàng nhưng chưa hiển thị trên giao diện người dùng. Bạn cần chèn một đoạn code PHP vào file giao diện của theme để breadcrumbs xuất hiện tại vị trí mong muốn.

Bước 2: Chèn code hiển thị Breadcrumbs vào Theme

Để hiển thị breadcrumbs, bạn cần chèn đoạn code sau vào vị trí thích hợp trong các file template của theme (ví dụ: page.php hoặc single.php):

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

Triển khai trên theme Flatsome

Đối với theme Flatsome, bạn nên ưu tiên chèn tại các trang có sidebar để đảm bảo tính thẩm mỹ.

• Trang đơn (Page): Truy cập wp-content/themes/flatsome/page-right-sidebar.php (hoặc file tương ứng với layout bạn đang dùng). Chèn đoạn code trên vào sau thẻ <div class="page-inner">.
• Bài viết (Single Post): Để áp dụng cho toàn bộ bài viết, hãy truy cập wp-content/themes/flatsome/template-parts/posts/partials/entry-header.php và chèn code ngay sau <header class="entry-header">.

Bước 3: Tùy chỉnh CSS

Để breadcrumbs hiển thị chuyên nghiệp và đồng bộ với nhận diện thương hiệu, hãy thêm đoạn CSS sau vào Giao diện > Tùy chỉnh > CSS bổ sung:

.breadcrumbs {
    text-transform: uppercase;
    color: #222;
    font-weight: 700;
    padding: 0;
}
#breadcrumbs {
    margin-bottom: 10px;
    font-size: 14px;
    color: gray;
    text-transform: none;
}
.breadcrumbs a {
    color: #fba646;
    margin-left: 0 !important;
    font-weight: 400;
}

Kết luận

Việc triển khai breadcrumbs không chỉ cải thiện cấu trúc điều hướng mà còn là điểm cộng trong mắt các công cụ tìm kiếm. Nếu bạn gặp khó khăn trong việc tùy chỉnh giao diện hoặc cần tối ưu hóa cấu trúc website chuyên sâu hơn, đội ngũ kỹ thuật tại STAR WAR Digital Solutions luôn sẵn sàng hỗ trợ bạn. Hãy liên hệ với chúng tôi để được tư vấn các giải pháp tối ưu hóa website hiệu quả nhất.