Hướng dẫn thêm bài viết liên quan cho Flatsome

Bài viết liên quan (related post) bên dưới mỗi bài viết không chỉ có chức năng điều hướng và tăng trải nghiệm website của khách hàng mà một phần khác nó giúp cho website của bạn trông chuyên nghiệp hơn rất nhiều. Ở bài viết này, mình sẽ hướng dẫn bạn 2 cách thêm bài viết liên quan cho theme Flatsome.

Có lẽ bạn nào đang dùng theme flatsome đều khá khó chịu vì giao diện này không có phần tùy biến bài viết liên quan bên dưới mỗi bài viết. Điều này làm giảm đi sự trải nghiệm của người dùng và giảm mức độ tương tác, giữ chân khách hàng ở lại.

Mình cũng là người thường xuyên sử dụng flatsome để tạo website cho khách và mình cũng thấu hiểu điều đó. Dưới đây là 2 hướng dẫn thêm phần related post cho flatsome mà mình tổng hợp được. Xin chia sẻ lại với các bạn.

Cách 1: Thêm bài viết liên quan bằng code

Trong bài viết này, chỉ cần sao chép và dán sẽ tạo ra 3 khối hữu ích sau:

  • Bài viết mới nhất (xem thêm)
  • Hiển thị danh mục và thẻ của bài đăng
  • Khối các tin bài cùng chuyên mục.
Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 1

Để thực hiện thêm bài viết liên quan cho flatsome bạn cần chỉnh sửa trong source của giao diện. Vì vậy, các bạn lưu ý nên sao lưu website trước khi thực hiện, tránh trường hợp hư hỏng có thể gây hại cho website.

Một lưu ý nữa là khi sử dụng theme Flatsome chúng ta nên copy các file đã chỉnh sửa sang child theme để các bản cập nhật sau này không bị mất.

Chuyển file từ chủ đề chính sang chủ đề con để chỉnh sửa

Tôi sẽ chỉnh sửa trong tệp content-single.php của chủ đề. Do đó, tôi sẽ chuyển các tập tin từ Core theme sang Child theme để chỉnh sửa.

Bước 1: Vào phần quản trị Hosting, tìm và truy cập vào File manager. Sau đó, bạn vào thư mục Wp-content / themes / flatsome /

Bước 2: Sao chép toàn bộ thư mục Template-part sang child theme.

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 2
Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 3

Ngay bây giờ, trong thư mục Child theme sẽ có thêm một thư mục mới có tên là “Template-part”.

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 4

Chèn code để hiển thị các bài viết liên quan trên trang web

Bước 1: Sao chép toàn bộ mã bên dưới

Bước 2: Vào child theme / Template-Parts / posts / content-single.php

Bước 3: Xóa toàn bộ nội dung của tệp Content-single.php và thay thế bằng đoạn code bên trên.

Bước 4: Thay đổi và chỉnh sửa các thông tin cần thiết

Bạn có thể xem hình ảnh bên dưới để biết thông tin có thể chỉnh sửa theo ý thích của mình:

Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 5
Hướng dẫn thêm bài viết liên quan cho Flatsome - ảnh 6

Thêm CSS để làm đẹp

Copy-paste code vào child theme chỉ giải quyết được phần hiển thị, nhưng để nó đẹp thì bạn phải thiết lập thêm CSS cho nó.

Thêm CSS để hiển thị đẹp trên giao diện máy tính

Bước 1: Sao chép đoạn CSS sau

Bước 2: Dán toàn bộ mã CSS trên vào Giao diện –> Tùy biến –> Style –> Custom CSS (phần tùy biến).

Bước 3: Lưu và tận hưởng kết quả trên PC.

Thêm CSS để làm đẹp trên thiết bị di động

Bước 1: Sao chép mã CSS sau:

Bước 2: Dán toàn bộ mã CSS ở trên vào Giao diện –> Tùy biến –> Style –> Custom CSS –> Custom CSS Mobile.

Bước 3: Lưu và tận hưởng kết quả trên Di động.

Cách 2: Thêm bài viết liên quan bằng function

Cách này đơn giản hơn rất nhiều, bằng cách tận dụng khả năng custom của theme flatsome.

Bước 1: Bạn chèn đoạn code dưới đây vào function của child theme.

Nhớ lưu lại nhé.

Bước 2: Vào phần Tùy biến -> Blog -> Blog Single Post -> và chèn đoạn code dưới đây vào phần HTML after blog posts.

Thêm bài viết liên quan cho flatsome đơn giản 1

Như vậy là đã xong rồi đấy. Rất dễ phải không nào.

Tổng kết

Như vậy bài viết Hướng dẫn thêm bài viết liên quan cho Flatsome này mình đã hướng dẫn các bạn 2 bước thêm phần related post cho giao diện flatsome nhanh chóng và dễ làm. Chúc các bạn thành công. Nếu có bất kỳ thắc mắc nào hãy để lại ở phần bình luận nhé!!

Review dịch vụ hosting/vps azdigi 1

Viết một bình luận