Hướng dẫn chèn Breadcrumbs cho website WordPress sử dụng plugin Yoast Seo

Chào các bạn, trên blog Web Demo mình cũng đã chia sẻ một bài viết tạo breadcrumbs không sử dụng plugin rồi phải không? Hôm nay, mình sẽ hướng dẫn các bạn thêm một cách nữa để chèn Breadcrumbs cho website WordPress sử dụng plugin Yoast SEO nhé!

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

Bước 1: Mở tính năng Breadcrumbs trong Yoast SEO

Có thể bạn đã cài plugin Yoast SEO trước đó rồi hoặc nếu chưa cài thì tải plugin về và cài đặt tại đây: Free (seo 1 keyword) Fremium (seo nhiều keywords).

Sau khi cài đặt xong, các bạn vào Quản trị > SEO > Advanced và mở Enable Breadcrumbs (phiên bản 5.7.1)

Giuseart.com---Chèn-breadcrumbs-vào-website-sử-dụng-plugin-Duplicator
Đối với phiên bản Yoast SEO 5.7.1. Cài đặt Breadcrumbs nằm trong SEO > Advanced > Breadcrumbs

Đối với phiên bản Yoast SEO 7.9 trở lên, cài đặt Breadcrumbs sẽ hơi khác một chút như sau:

Giuseart.com---Chèn-Breadcrumbs-vào-wordpress-sử-dụng-plugin-Yoast-Seo
Đối với các phiên bản Yoast SEO 7.9 trở lên, cài đặt mở Breadcrumbs sẽ hơi khác một chút. SEO > Search Appearance > Breadcrumbs

Ngay từ bây giờ website của bạn đã sẵn sàng tính năng hiển thị Breadcrumbs rồi nhé.

Tuy nhiên, không phải chỉ ấn Enable là nó hiện luôn, mà việc quan trọng nhất là mình phải chèn một đoạn code PHP bỏ vào đúng vị trí cho nó hiển thị trong theme nữa. Mời bạn tiếp tục bước 2:

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

Bây giờ chỉ cần chèn đoạn code PHP bên dưới vào bất kỳ vị trí nào trong theme để nó hiển thị.

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

Tuy nhiên, theo thói quen điều hướng của người dùng, chúng ta chỉ nên chèn breadcrumbs vào đầu các trang đơn (page.php) + trang bài viết (single.php). Mình sẽ hướng dẫn các bạn thực hiện lần lượt từng trang một trong theme Flatsome nhé!

Chèn Breadcrumbs vào trang đơn

Trang đơn của theme Flatsome có nhiều kiểu style (template-page) khác nhau. Do đó, theo ý kiến cá nhân của mình thì chỉ nên chèn Breadcrumbs vào trang đơn có bố cục sidebar trái hoặc sidebar phải, vì nó hiển thị tương đương như trong bài viết nên sẽ đẹp và hữu dụng hơn. Các bạn không nên chèn Breadcrumbs vào các kiểu trang khác, đặc biệt là kiểu full-width.

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

Giuseart.com-Chèn-breadcrumbs-vào-website-sử-dụng-yoast-seo
Trong File Manager, các bạn tìm tới thư mục wp-content/themes/flatsome sẽ có các file template của trang đơn. Chỉ nên chèn Breadcrumbs vào trang đơn có sidebar trái hoặc phải.

Bây giờ mình sẽ thực hiện chèn Breadcrumbs vào trang đơn có sidebar bên phải nhé! Mở file page-right-sidebar.php.

Giuseart.com-Chèn-breadcrumbs-vào-trang-đơn-trong-theme-Flatsome
Chèn Breadcrumb vào giữa đoạn <div class=”page-inner”><?php if(get_theme_mod(‘default_title’, 0)){?>

Chèn đoạn code mình gửi bên trên đó vào ngay sau <div class=”page-inner”> và ngay trên đoạn <?php if(get_theme_mod(‘default_title’, 0)){ ?>. Các bạn xem kỹ hình trên để copy – paste vào cho chuẩn nhé!

Sau đó, các bạn copy đoạn CSS này bỏ vào phần tùy chọn CSS của theme nhé! Giao diệnTùy chỉnhTù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 dán đoạn code vào đúng vị trí và update CSS cho nó, các bạn lưu lại để nó có hiệu lực nhé, và đây là kết quả.

Giuseart.com-Chèn-breadcrumbs-vào-website-sử-dụng-plugin-yoast-seo
Kết quả chèn Breadcrumbs vào trang đơn trong theme Flatsome

Chèn Breadcrumbs vào bài viết

Chèn breadcrumbs vào bài viết cũng gần tương đương như chèn vào trang đơn.

Các bạn truy cập thư mục sau trong File manager: wp-content > themes > flatsome > template-parts > posts.

Đối với theme Flatsome, bài viết có thể tùy chỉnh sidebar trái hoặc sidebar phải, tương ứng với 2 file layout-left-sidebar.phplayout-right-sidebar.php. Các bạn có thể chèn code hiển thị Breadcrumbs vào 2 file đó.

Tuy nhiên, trong theme Flatsome có một file entry-header.php sẽ áp dụng phần đầu trang cho cả 2 layout trên. Do đó, chúng ta sẽ chèn code hiển thị Breadcrumbs tại file này. Bạn cần truy cập đường dẫn sau: wp-content > themes > flatsome > template-parts > posts > partials > entry-header.php

Giuseart.com-Chèn-breadcrumbs-vao-bai-viet
Chèn code hiển thị Breadcrumbs vào ngay sau <header class=”entry-header”>

Bạn copy đoạn code hiển thị Breadcrumbs bên trên rồi chèn vào ngay sau <header class=”entry-header”> như hình trên nhé! Sau đó, lưu lại và hưởng thành quả:

Giuseart.com-Code-chen-breadcrumbs-vao-website-wordpress-su-dung-yoast-seo
Kết quả hiển thị Breadcrumbs trong bài viết

Lời kết

Các bạn thực hiện tuần tự theo các bước mình hướng dẫn nhé! Chúc các bạn làm tốt và có những trải nghiệm thú vị tại website Web Demo

Cám ơn các bạn đã quan tâm theo dõi và ủng hộ blog GiuseArt trong suốt thời gian qua. Mọi nhu cầu thiết kế – in ấn sáng tạo và thiết kế website, vui lòng liên hệ trực tiếp Admin để được tư vấn và hỗ trợ:

+ Liên hệ: Tống Lê Hùng
+ Phone: 0972939xxx
+ Email: webdemo@gmail.com
+ Website: www.webdemo.com
+ Flickr: www.flickr.com/photos/77493237@N07/albums
+ Behance: https://www.behance.net/giuselethien
+ Pintesest: https://www.pinterest.com/giuselethien/pins/

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *