Trong bài viết trước, mình đã hướng dẫn cách hiển thị custom field ra front-end bằng cách tạo thêm Hooked Element và chèn vào bên dưới nội dung bài viết. Cách này tuy nhanh gọn nhưng chỉ áp dụng được khi hiển thị nội dung đơn giản.

Trong trường hợp muốn thiết kế giao diện cho custom post type hoàn toàn khác biệt so với giao diện mặc định của post / page, mình cần phải tạo một single template mới cho custom post type.

Cách tạo single template phổ biến trước đây là tạo thêm 1 file single-tên_post_type.php trong thư mục của theme đang sử dụng, ví dụ single-portfolio.php, rồi viết code trong file này để tùy biến giao diện.

Còn bây giờ, mình đã có thể tạo single template cho custom post type trực quan từ Dashboard của WordPress thông qua tính năng Hooked Elements của Kadence Pro. Các bạn có thể tham khảo hướng dẫn bên dưới

1. Yêu cầu chuẩn bị

2. Tạo Template Element

Tạo Hooked Element mới

Chọn TEMPLATE

Bấm vào biểu tượng Element Settings ở cạnh nút Publish để hiển thị mục cấu hình cho Hook Elements.

  1. Chọn Relace Single Post Content
  2. chọn Single Portfolios

3. Thiết kế giao diện

Đầu tiên, mình tạo 1 Row với 2 Columns.

a. Featured Image

Bên trái, thêm vào Image (Adv) block.

Bấm vào biểu tượng số 1, rồi kích hoạt tính năng Enable Dynamic Image

Sau đó chọn Featured Image trong mục Image, và Current Post trong mục Image Source.

b. Tiêu đề bài viết

Ở cột bên phải, mình thêm vào 1 block Dynamic HTML.

Ở phần cấu hình Dynamic HTML block, chọn Post Title ở mục POST

Cấu hình thêm:

  • Container HTML Tag: header
  • Use Inner Tag Wrap: h1

c. Nội dung bài viết

Thêm vào Dynamic HTML block tương tự như trên, nhưng lần này chọn thông số khác

  • HTML Content: Post Content
  • Container HTML Tag: main
  • Use Inner Tag Wrap: div

d. Nút bấm

Thêm vào nút bấm để liên kết đến custom field Wesbite URL. Thao tác đã chia sẻ trong bài viết [Phần 2].

e. Tạo Breadcrumb

Để chèn thêm breadcrumb, mình cài thêm plugin Breadcrumb Block, và chèn nó ở trên row nội dung vừa tạo ở các bước trên.

Bấm Save để lưu lại Template.

4. Hoàn thành

Đây là giao diện mặc định của trang Portfolio trước khi tạo Single Template.

Sau khi được tạo Single Template riêng, trang Portfolio giờ được cập nhật với giao diện 2 cột như bên dưới.

Lưu ý: Nếu bạn cần hỗ trợ kỹ thuật, vui lòng gửi câu hỏi trực tiếp ở phần Thảo luận bên dưới, mình sẽ trả lời sớm. Đừng vào hỏi trong fanpage Yêu Chạy Bộ, sẽ không có phản hồi đâu!

Để lại một bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *