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

Breadcrumbs là một phần quan trọng của website, giúp người dùng và công cụ tìm kiếm hiểu được cấu trúc và đường dẫn của trang web. Breadcrumbs cũng có thể giúp tăng tỷ lệ nhấp chuột (CTR) và giảm tỷ lệ thoát (bounce rate) của website. Trong bài viết này, Codengon sẽ hướng dẫn bạn cách chèn Breadcrumbs WordPress sử dụng plugin Yoast Seo, một trong những plugin SEO phổ biến nhất hiện nay.

Bài viết mình hướng dẫn thao tác trên theme Flatsome (flatsome breadcrumbs) 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!

Flatsome Breadcrumbs là gì?

Flatsome breadcrumbs hay breadcrumb flatsome là một tính năng của theme Flatsome, giúp hiển thị đường dẫn của trang web mà người dùng đang xem. Breadcrumbs có thể giúp người dùng dễ dàng quay lại trang trước hoặc trang chủ, cũng như nâng cao trải nghiệm người dùng và SEO.

Breadcrumbs được hiển thị ở phần đầu của nội dung trang, bao gồm tên trang hiện tại và các trang cha hoặc danh mục liên quan. Breadcrumbs có thể được tùy chỉnh theo ý muốn bằng cách sử dụng các tùy chọn trong Customizer hoặc sử dụng shortcode [ux_breadcrumbs].

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

Bước 1: Cài đặt và kích hoạt plugin Yoast Seo

Để cài đặt plugin Yoast Seo, bạn vào mục Plugins > Add New trên bảng điều khiển WordPress, sau đó gõ từ khóa “Yoast Seo” vào ô tìm kiếm. Khi plugin xuất hiện, bạn nhấn vào nút Install Now, rồi chờ cho plugin được cài đặt xong. Sau đó, bạn nhấn vào nút Activate để kích hoạt plugin.

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

Có thể bạn đã cài plugin Yoast SEO (https://yoast.com/wordpress/plugins/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) : https://vi.wordpress.org/plugins/wordpress-seo/
Fremium (seo nhiều keywords): https://drive.google.com/open?id=0B1la2u77mmNJcHZHR3pPTnRsekU

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)

Đố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:

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 3.

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

Bước 3: 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ị.

<?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.

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.

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ệ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 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ả.

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.php và layout-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

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.

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

Bước 5: Kiểm tra và tùy chỉnh giao diện của Breadcrumbs

Sau khi chèn mã shortcode hoặc mã PHP của Breadcrumbs vào website, bạn kiểm tra xem Breadcrumbs đã hiển thị đúng chưa. Nếu bạn muốn tùy chỉnh giao diện của Breadcrumbs, bạn có thể sử dụng CSS để thay đổi màu sắc, kích thước, font chữ, v.v. của Breadcrumbs.

Xem thêm: Thêm hiệu ứng ánh sáng khi hover vào ảnh bài viết trong theme Flatsome

Lời kết

Breadcrumbs là một phần không thể thiếu của website, giúp cải thiện trải nghiệm người dùng và SEO. Với plugin Yoast Seo, bạn có thể dễ dàng chèn Breadcrumbs WordPress vào website của mình mà không cần phải biết nhiều về lập trình. Hy vọng bài viết này đã giúp bạn hướng dẫn chèn Breadcrumbs WordPress sử dụng plugin Yoast Seo một cách chi tiết và dễ hiểu.