Hướng dẫn chèn bài viết liên quan cực đẹp cho website

Trong bài viết này, các bạn chỉ việc copy paste sẽ tạo ra được 3 khối hữu ích sau:

  1. Bài viết mới nhất (xem thêm)
  2. Hiển thị danh  mục và tags của bài viết
  3. Khối tin những bài viết cùng chuyên mục.

Code chèn bài viết liên quan cực đẹp

Bài viết này sẽ đụng chạm vào code php của theme. Do đó, các bạn lưu ý nên backup web trước khi thực hiện, tránh trường hợp làm hỏng có thể gây nguy hại cho website.

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

Chuyển file từ core theme sang child theme để sửa

Mình sẽ sửa trong file content-single.php của theme. Do đó, mình sẽ thực hiện chuyển file từ Core theme sang Child theme để chỉnh sửa.

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

Bước 2: Các bạn copy toàn bộ thư mục Template-part của theme Flatsome sang Child theme nha

Các bạn vào thư mục theme Flatsome, tìm tới thư mục Template-part và chọn Copy nhé
Các bạn vào thư mục theme Flatsome, tìm tới thư mục Template-part và chọn Copy nhé
Sau khi chọn Copy thì tìm tới thư mục Child theme để paste vào nha!
Sau khi chọn Copy thì tìm tới thư mục Child theme để paste vào nha!

Ngay lúc này thì tại thư mục Child theme sẽ có thêm một folder mới với tên là “Template-part” nhé!

Thư mục Template-part được copy sang child theme, bên cạnh là các file mặc định của child theme
Thư mục Template-part được copy sang child theme, bên cạnh là các file mặc định của child theme

Chèn code hiển thị các bài viết liên quan vào website

Bước 1: Copy toàn bộ code ở dưới đây

Bước 2: Truy cập Child theme/Template-parts/posts/content-single.php

Bước 3: Xóa toàn bộ nội dung file Content-single.php và thay bằng đoạn code mình show trên bước 1

Bước 4: Thay sửa thông tin cần thiết

Các bạn có thể xem hình dưới đây để biết các thông tin có thể chỉnh sửa theo ý các bạn:

Thay sửa tiêu đề chữ Xem thêm và số bài viết hiển thị trong mục xem thêm
Thay sửa tiêu đề chữ Xem thêm và số bài viết hiển thị trong mục xem thêm
Thay sửa tiêu đề “Bài viết cùng chủ đề” và thay sửa số bài viết liên quan cùng chuyên mục
Thay sửa tiêu đề “Bài viết cùng chủ đề” và thay sửa số bài viết liên quan cùng chuyên mục

Thêm CSS để làm đẹp cho phần hiển thị

Việc copy-paste code sang child theme mới giải quyết được việc hiển thị thôi, còn để nó đẹp theo ý mình thì phải set thêm CSS cho nó nữa.

Thêm CSS  để hiển thị đẹp trên PC

Bước 1: Copy toàn bộ đoạn CSS sau

Bước 2: Paste toàn bộ đoạn code CSS trên vào Giao diện – Tùy biến – Style – Custom CSS – Custom CSS

Bước 3: Lưu lại và hưởng thành quả trên PC

Thêm CSS để làm đẹp trên Mobile

Bước 1: Copy toàn bộ đoạn code CSS sau:

Bước 2: Paste toàn bộ đoạn code CSS trên vào Giao diện – Tùy biến – Style – Custom CSS – Custom CSS Mobile

Bước 3: Lưu lại và hưởng thành quả trên Mobile

Nguồn: https://giuseart.com/ (Bài viết copy mang tính chất lưu lại về làm kinh nghiệm mà không có ý gì thêm)

THÔNG TIN LIÊN HỆ

CÔNG TY TNHH VINAYES – Thiết kế web Đà Nẵng

  • Địa chỉ: K200 Ông Ích Đường, Q. Cẩm Lệ, TP. Đà Nẵng
  • Điện thoại: 0981.823.238
  • Email: vinayesco@gmail.com
  • Website: vinayes.com
Đăng ký
Thông báo
guest
0 Bình luận
Inline Feedbacks
Xem tất cả bình luận

0981.823.238