[Chia sẻ] Kết hợp Elementor và Advanced Custom Fields

Nghệ thuật kết hợp Elementor + Advanced Custom Fields
Bài toán: xây dựng 1 dạng bài viết có cấu trúc phức tạp như link bài viết sau: https://vietreview.vn/danh-gia/chuot-gaming sử dụng Elementor – làm sao dễ nhất cho người không biết code.
[ Part 1 – Tư duy & Hiểu chính xác từng bước cần làm – Ý nghĩa của từng bước ]
Không được 200 share với Nghìn like thì chắc sau này không viết nữa. Bài này làm mất 1 tháng luôn.
Còn 1 vài bug nhỏ nhưng sẽ được giải quyết ở Part 2 nhé.
Link down load tài nguyên để tự bạn test:
Trong folder download có 1 file json – các bạn import vào Advance Custom Filed. Còn 1 file txt: import vào Custom post type UI nhé.
Do bài toán này cần sử dụng tương đối nhiều kiến thức và nhiều bước phức tạp, có tính logic cao, thế nên mình chia ra làm 2 part.
Trong part 1 này, chúng ta sẽ:
  1. Xác định được bài toán một cách chi tiết, hiểu rõ từng bước phải làm, ý nghĩa của nó là gì.
  2. Các plugin cần sử dụng, mục đích của từng plugin.
  3. Xây dựng từng bước theo logic
  4. Quan trọng nhất, đó là mình muốn các bạn hiểu được tư duy giải quyết 1 vấn đề trên website. Đây là 1 case cụ thể, nếu bạn ngâm cứu kỹ, mình tin bạn có thể tăng level của mình lên 1-2 trình.
 
Okay, bắt đầu thôi các bạn ơi.
1. XÁC ĐỊNH BÀI TOÁN.
Vào link web vietreview và lướt từ trên xuống dưới, thử các nút action để xem nó sẽ có kết quả là gì? Cụ thể là: link đi đâu, bật popup hay anchor link ….
Có 2 thứ chúng ta cần phải xác định ở đây:
  • Kiểu dữ liệu
  • Cấu trúc dữ liệu.
 
Kiểu dữ liệu là gì? Xác định đây là post mặc định hay không phải. Quan sát nhanh thì có thể thấy đây không thể là post được, nó có rất nhiều dữ liệu thêm vào. Như vậy đây sẽ là custom post type.
Cấu trúc dữ liệu là gì? Hãy nhớ bản chất của tất cả các thành phần trên website đơn giản chỉ là inputoutput. Những gì hiển thị là output, và để có được nó bạn sẽ cần 1 nơi để nhập liệu trong admin.
Nhưng như thế chưa đủ. Output lại có 2 loại :
  • – Dữ liệu tĩnh: Là dữ liệu không thể tự nó thay đổi ( danh sách 1 bài viết tĩnh, bạn fix bằng html chẳng hạn ), bạn phải vào trực tiếp nơi nhập liệu để thay đổi. Không thể tự động hiển thị đồng thời ở nhiều nơi.
  • – Dữ liệu động: Là dữ liệu quản lý theo dạng 1 đối tượng trên website, bạn có thể sử dụng đồng thời ở nhiều nơi, thay đổi ở 1 nơi nhưng tất cả các nơi output đều sẽ được cập nhật theo. ( cũng là 1 danh sách bài viết, nhưng nó lấy dữ liệu từ post, hoặc 1 custom post type để show)
 
Hiểu đơn giản là như thế, đấy là theo định nghĩa của mình, chứ chẳng có định nghĩa chuẩn :v
 
Rồi, quay trở lại cái link mẫu ở viewreview, sau khi thinking 1 tý, mình kết luận:

Đây là 1 custom post type về review. Nó sẽ có rất nhiều loại review, ko chỉ là review về chuột, mà có thể về nhiều loại sản phẩm khác. Như vậy có nghĩa là: 1 bài viết review sẽ có nhiều loại của 1 sản phẩm ( cụ thể ở đây là chuột chơi game ).

Để ý tiếp, chúng ta thấy nó có 1 phần content table, có 5 phần bao gồm:
  • Top 10 chuột gaming
  • Những kinh nghiệm
  • Bảng so sánh
  • Nên lựa chọn chuột
  • Câu hỏi thường gặp.
Mình có xem thử 1 vài bài khác và thấy cấu trúc giống nhau. Như vậy có nghĩa là 1 bài viết dạng review này sẽ có 5 section tương ứng, chỉ khác về tên gọi thôi, còn về mặt vị trí và thành phần là đầy đủ 5 cái.
Nhưng để ý kỹ bạn sẽ thấy là thực ra là 6. Có 1 cái List Slider sản phẩm ở trên đầu nữa nhé.
 
Vậy là template của loại sản phẩm review này có 6 section.
 
Trong 6 section này:
  • Section 1 – Dữ liệu động: slide sản phẩm: cái này sẽ tự động lấy dữ liệu sản phẩm của bài viết để hiển thị
  • Section 2 – Dữ liệu động: Top 10 sản phẩm: Cái này cũng là dữ liệu các sản phẩm thuộc bài viết, cũng tự động hiển thị nhưng theo 1 dạng layout khác. – Dữ liệu động
  • Section 3 – Dữ liệu tĩnh: Kinh nghiệm chọn chuột – Là dữ liệu tĩnh dạng nhập nội dung hình ảnh thôi.
  • Section 4 – Dữ liệu động: bảng so sánh: Cũng là lấy dữ liệu các sản phẩm tự động show ra nhưng cấu trúc phức tạp hơn rất nhiều, dạng table compare.
  • Section 5 – Dữ liệu động: Nên lựa chọn chuột nào ?: So sánh các dữ liệu, sẽ thấy cái chỗ này nó hiển thị sản phẩm có tiêu chí là ” Lựa chọn của BTV”. Có nghĩa là sản phẩm nào được tích là Lựa chọn thì nó sẽ show ra đây.
  • Section 6 – Dữ liệu động: hỏi đáp sẽ được tạo tùy theo từng sản phẩm review.

Định mệnh phân tích xong hết muốn làm luôn rồi các bạn, toàn dữ liệu động, đau đầu rồi đấy nhé.

2. CÁI NÀY THÌ BẮT BUỘC LÀ DỰA TRÊN KINH NGHIỆM RỒI, VỚI KINH NGHIỆM VKL CỦA MÌNH THÌ XÁC ĐỊNH CÁC PLUGIN CẦN SỬ DỤNG NHƯ SAU:
– Plugin Advanced Custom Fields bản Pro – để có thể sử dụng tính năng repeater ( sử dụng cho việc thêm sản phẩm động trong 1 bài viết, mỗi sản phẩm có nhiều trường thông tin)
– Plugin AnyWhere Elementor Pro : sử dụng cho việc làm cái layout dữ liệu khác nhau cho dữ liệu sản phẩm repeater trong 1 bài viết ( cái này đỉnh vkl, thề luôn)
– Plugin Custom Post Type UI : tạo custom post type ( thực ra thì biết code thì thêm code, nhưng phạm vi bài toán này ko dùng code nên là mình sẽ nói về plugin)
– Elementor Pro: Chắc chắn rồi, Free thì thôi dẹp mẹ đi :v, sử dụng cho việc builder template.
– Plugin Repeater item compare: cái này trước đây không có, cái này mình tự viết ra, vì là table compare cho repeater đố bạn tìm được. Plugin này có tác dụng trong phạm vi bài viết thôi nhé, các bạn có thể custom thêm nếu muốn.
3. SAU KHI PHÂN TÍCH LOẠI DỮ LIỆU RỒI CÁC THỂ LOẠI, XÁC ĐỊNH ĐƯỢC CÁC PLUGIN CẦN DÙNG. THÌ BẮT TAY VÀO LÀM THEO CÁC STEP:
  • Tạo Custom post type review
  • Tạo Custom field
  • Tạo các field Repeater sản phẩm, chỗ này tạo khá là nhiều
  • Tạo template cho việc hiển thị danh sách sản phẩm repeater trong bài review, sẽ phải tạo 2 template: một cái dùng cho list slide ở đầu bài, 1 cái dùng cho list sản phẩm ở section Top 10 sản phẩm.
  • Tạo single post template cho review, lúc này là kéo thả các thành phần và style thôi, easy nhất rồi.
4. VỀ CƠ BẢN CÁC BƯỚC SẼ LÀ NHƯ THẾ NHÉ CÁC BẠN. PART NÀY CẦN MỌI NGƯỜI HIỂU VỀ TƯ DUY CỦA MÌNH KHI GIẢI QUYẾT BÀI TOÁN CỤ THỂ NÀY. HÃY XÁC ĐỊNH MỌI THỨ THẬT RÕ RÀNG TRƯỚC KHI LÀM, SẼ TIẾT KIỆM THỜI GIAN VÀ CÓ KẾT QUẢ TỐT NHẤT.
Ở Part 2 sẽ có bài viết chỉ rõ từng bước thao tác nhỏ, và mô tả chi tiết hơn. Tạm thời hãy ngấm part 1 này đã.
Sau bài Facebook trong group, trong tuần này mình sẽ có 1 bài viết trên website để có thể viết chi tiết hơn, gồm hình ảnh step by step, có thể có cả video để mọi người nghiên cứu rõ hơn. Tạm thời thì viết trên Face nhé.
Love you all guys!

Leave a Reply