Hiển thị danh sách bài viết được chọn bằng ACF Pro trên Flatsome

4.5/5 – (192 bình chọn)

hien thi danh sach bai viet duoc chon bang acf pro 3855

Đôi khi, chúng ta muốn chọn thủ công một số bài viết để hiển thị ra ngoài Trang chủ, Sidebar hay ở mỗi bài viết để điều hướng người đọc lựa chọn xem những bài viết này. Có nhiều cách để thực hiện việc này, như dùng plugin chuyên dụng, dùng widget hay sử dụng element nào đó của Themes (Theme Flatsome có UX Blog). Trong khuôn khổ bài viết này, mình sẽ chia sẻ với các bạn các để hiển thị danh sách bài viết được chọn bằng cách sử dụng ACF Pro (chọn bài viết) và PHP/HTML/CSS (để hiển thị).

Chọn danh sách bài viết bằng ACF Pro (Advanced Custom Fields Pro)

Để thực hiện được việc này, tất nhiên là website của bạn phải được cài ACF Pro và đã có bài viết được đăng với đầy đủ thông tin: Tiêu đề, Ngày đăng, Ảnh Thumbnail, Nội dung chi tiết, . . .

Bước 1: Tạo Field Group

hien thi danh sach bai viet duoc chon bang acf pro 3855 1

 

  • Tạo một Filed Group với tên bất kỳ (Ví dụ: Chọn bài viết)
  • Rules: Vị trí hiển thị danh sách, có thể là Trang, Chi tiết bài viết, Danh mục bài viết, . . .

hien thi danh sach bai viet duoc chon bang acf pro 3855 2

Thêm một trường mới

  • Field Label: Nhãn của trường (Ví dụ: Bài viết xem nhiều)
  • Field Name: Tên của trường (Ví dụ: baiviet_xemnhieu) – Sử dụng khi code PHP
  • Field Type: Repeater – Lặp lại, để có thể chọn nhiều bài

hien thi danh sach bai viet duoc chon bang acf pro 3855 3

Thêm trường con (Sub Field)

  • Field Label: Nhãn của trường con (Ví dụ: Chọn bài viết)
  • Field Name: Tên của trường con (Ví dụ: chon_baiviet) – Sử dụng khi code PHP
  • Field Type: Post Object
  • Filter by Post Type: Bài viết (Posts)
  • Return Format: Post ID

Sau khi thực hiện xong thì bấm Đăng (Hoặc Public, Update – Cập nhật)

Bước 2: Chọn danh sách bài viết cần hiển thị

hien thi danh sach bai viet duoc chon bang acf pro 3855 4

Tùy cấu hình Field Group lúc đầu bạn muốn hiển thị danh sách này ở đâu thì bạn sẽ vào đó để Chọn danh sách bài viết (Bài viết, Trang, Danh mục bài viết, . . .)

Code để hiển thị danh sách bài viết được chọn

Một số Element của bài viết cần hiển thị

  • Tiêu đề: the_title();
  • Ảnh Thumbnail: the_post_thumbnail();
  • Nội dung ngắn: the_excerpt();
  • Link chi tiết: the_permalink();
  • Ngày đăng: get_the_date();
  • Tác giả: get_the_author();

Code để hiển thị