Thêm Breadcrumbs vào Website WordPress sử dụng Plugin Yoast SEO

Trong bài viết này, chúng tôi sẽ hướng dẫn trên theme Flatsome. Do đó, trong quá trình hướng dẫn, có thể một số thao tác sẽ khác đối với các theme khác. Tuy nhiên, cơ bản là bạn chỉ cần tìm file .php của trang mà bạn muốn hiển thị breadcrumbs trên theme của mình.

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

Có thể bạn đã cài đặt plugin Yoast SEO hoặc nếu chưa, bạn có thể tải và cài đặt nó.

Sau khi cài đặt xong, bạn vào Quản trị > SEO > Advanced và kích hoạt Enable Breadcrumbs (đối với phiên bản 5.7.1).

Đối với phiên bản Yoast SEO 7.9 trở lên, cài đặt Breadcrumbs có một số thay đổi như sau:

Từ bây giờ, trang web của bạn đã sẵn sàng hiển thị breadcrumbs.

Tuy nhiên, chỉ việc kích hoạt Enable thì chưa đủ, quan trọng là bạn phải chèn một đoạn mã PHP vào vị trí thích hợp trong theme. Hãy tiếp tục với bước 2:

Bước 2: Chèn mã để hiển thị Breadcrumbs trong theme

Bây giờ, bạn chỉ cần chèn đoạn mã PHP sau vào bất kỳ vị trí nào trong theme mà bạn muốn hiển thị breadcrumbs.

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

Tuy nhiên, theo thói quen của người dùng, bạn nên chỉ chèn breadcrumbs vào trang đơn (page.php) và trang bài viết (single.php). Chúng tôi sẽ hướng dẫn cụ thể từng bước trên theme Flatsome:

Thêm Breadcrumbs vào trang đơn

Trong theme Flatsome, trang đơn có nhiều kiểu style (template-page) khác nhau. Vì vậy, chúng tôi đề xuất chỉ nên thêm breadcrumbs vào trang đơn có cột bên trái hoặc bên phải, vì nó sẽ hiển thị tương tự như trong bài viết, giúp trang trở nên đẹp và hữu ích hơn. Không nên thêm breadcrumbs vào các kiểu trang khác, đặc biệt là kiểu full-width.

Hãy mở File Manager trong hosting của bạn, truy cập vào thư mục wp-content > themes > flatsome > page-right-sidebar.php hoặc page-left-sidebar.php.

Bây giờ, chúng ta sẽ thêm breadcrumbs vào trang đơn có cột bên phải. Hãy mở file page-right-sidebar.php và chèn đoạn mã ở trên vào ngay sau <div class=”page-inner”> và ngay trước đoạn <?php if(get_theme_mod(‘default_title’, 0)){ ?>. Hãy tham khảo hình ảnh để copy và paste chính xác!

Sau đó, bạn có thể copy đoạn mã CSS bên dưới và thêm vào phần tùy chỉnh CSS của theme: Giao diện – Tùy chỉnh – Tùy chỉnh CSS.

.breadcrumbs {
text-transform: uppercase;
color: #222;
font-weight: 700;
letter-spacing: 0;
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;
}

Sau khi bạn đã chèn mã vào đúng vị trí và cập nhật CSS, hãy lưu lại để thay đổi có hiệu lực. Đây chính là kết quả mà bạn sẽ nhận được:

Thêm Breadcrumbs vào bài viết

Thêm breadcrumbs vào bài viết cũng tương tự như thêm vào trang đơn.

Hãy truy cập đường dẫn wp-content > themes > flatsome > template-parts > posts. Trong theme Flatsome, bài viết có thể có sidebar bên trái hoặc bên phải, tương ứng với 2 file layout-left-sidebar.php và layout-right-sidebar.php. Bạn có thể thêm code hiển thị breadcrumbs vào cả hai file này.

Tuy nhiên, trong theme Flatsome, có một file entry-header.php áp dụng cho cả 2 kiểu layout trên. Vì vậy, chúng ta sẽ thêm code hiển thị breadcrumbs vào file này. Bạn cần truy cập vào wp-content > themes > flatsome > template-parts > posts > partials > entry-header.php.

Sau đó, hãy chèn đoạn mã hiển thị breadcrumbs bên trên vào ngay sau <header class=”entry-header”> như hình ảnh. Sau khi thêm, lưu lại và bạn sẽ thấy kết quả.