Tạo chức năng breadcrumb cho website là điều tối thiểu phải có cho một website chuẩn SEO.
Nhờ thanh điều hướng breadcrumb mà khách hàng có thể biết được vị trí hiện tại của trang web, từ đó tăng trải nghiệm tốt và thân thiện với khách hàng sử dụng website.
Sao chép đoạn mã phù hợp bên dưới và dán vào functions.php.
Em có thêm css vào cho đẹp, có thể mã css sẽ không phù hợp với website của anh/chị. Hãy xóa đoạn mã css hoặc thay lại đoạn css khác. Nếu vẫn không làm được thì hãy bình luận vào bài viết để em hỗ trợ a/c.
1. Cơ bản – Breadcrumb without class: Flatsome
Điều hướng breadcrumb không chèn class css
// show breadcrumb
function breadcrum(){
flatsome_breadcrumb();
// Tùy chỉnh CSS - xóa đoạn dưới nếu không thấy phù hợp
?>
<style>
.page-wrapper {
padding-bottom: 30px;
padding-top: 0;
}
/* Breadcrumbs */
.breadcrumbs {
color: #222;
font-weight: bold;
letter-spacing: 0;
padding: 20px 20px 20px 15px;
background-color: #fff;
border: 0.5px solid #ececec;
width: 100%;
margin-bottom: 30px;
}
.breadcrumbs a:hover {
text-decoration: underline;
}
/* End Breadcrumbs === */
</style>
<?php
// Kết thúc Tùy chỉnh CSS
}
add_action('flatsome_before_blog','breadcrum');2. Nâng cao – Breadcrumb with class: Flatsom
Điều hướng breadcrumb có chèn class css
// show breadcrumb
function breadcrum(){
global $post;
if( is_single()){
echo '<div class="header-breadcrumb"><div class="row row-large">';
echo '<h2>'.$a.'</h2>';
echo flatsome_breadcrumb();
echo '</div></div>';
}
else{
echo '<div class="header-breadcrumb"><div class="row row-large">';
echo flatsome_breadcrumb();
echo '</div></div>';
}
// Tùy chỉnh CSS - xóa đoạn dưới nếu không thấy phù hợp
?>
<style>
/* css cho breacum */
.page-wrapper {
padding-top: 12px; }
.breadcrumbs {
box-shadow: 0 3px 5px 0 rgb(0 1 1 / 10%);
font-size: 12px;
color: #242c39;
background: #fff;
font-weight: 500;
letter-spacing: 0;
padding: 7px;
margin-bottom: 25.5px;
width: fit-content;
/* border-radius: 5px; */
}
.breadcrumbs a:hover {
text-decoration: underline;
}
</style>
<?php
// Kết thúc Tùy chỉnh CSS
}
add_action('flatsome_before_blog','breadcrum');3. Breadcrumb của plugin yoast seo
Truy cập vào:
Menu » Yoast SEO » Thiết lập » Nâng cao » Đường dẫn
Bật breadcrumbs for your theme như hình
Sao chép đoạn mã bên dưới vào dán vào functions.php.
// GACO CUSTOM Breadcrumbs
function breadcrum($content){
global $post;
if ( function_exists('yoast_breadcrumb') ) {
yoast_breadcrumb('<div class="breadcrum">' . '<div class="">' .'<p id="breadcrum">','</p>'. '</div>' . '</div>');
}
}
add_action( 'flatsome_before_blog','breadcrum');Chọn 1 trong 2,3 cách trên, cuối cùng là tận hưởng thôi nào.
Chúc anh chị thành công.
