Wordpress Advanced 03

Link tài nguyên

Công cụ: Adobe XD

1. Dựng môi trường cục bộ

Sử dụng LocalWP hoặc XAMPP để tạo môi trường phát triển với tên project là sugoo-wheelchair.

2. Phân tích cấu trúc giao diện

3. Tách các thành phần lặp lại

Các thành phần lặp lại (ví dụ: danh sách sản phẩm) cần được tách thành các file trong thư mục template-parts.

4. Tạo và cấu hình các template page

Thiết lập các file template phù hợp, trang web chỉ sử dụng trang chủ và các popup:
- front-page.php
- 404.php

5. Tạo Custom Post Types

Vui lòng đọc kỹ file Sugoo_車椅子365.pdf và tạo các Custom Post Type theo đúng yêu cầu của dự án.
Trainee cần có kỹ năng xác định được nội dung nào nên tạo Custom Post Type.

6. Cấu hình Advanced Custom Fields (ACF)

Thiết lập các custom field phù hợp với thiết kế, đảm bảo tất cả nội dung động đều có thể nhập liệu trực tiếp từ giao diện quản trị.
Sắp xếp và tạo custom field theo đúng thứ tự xuất hiện của từng trường dữ liệu trên bản thiết kế (từ trên xuống dưới) để thuận tiện cho việc nhập liệu và kiểm soát dữ liệu.
Chủ động trao đổi với Leader khi gặp khó khăn hoặc chưa rõ về bất kỳ phần nào trong quá trình cấu hình custom field.

7. Tạo form liên hệ 3 bước

Trainee có thể sử dụng plugin hỗ trợ (ví dụ: Contact Form 7 với add-on xác nhận) hoặc tự code bằng PHP và sử dụng hàm wp_mail() để gửi email.
Xem file yêu cầu validate required trong tài nguyên đính kèm.
3 bước bao gồm:
- Form (nhập thông tin)
- Confirm (xác nhận)
- Thanks (cảm ơn)

8. Chức năng tính phí (*)

Công thức tính phí vui lòng kiểm tra file: note.txt
Bảng giá và thông tin chi tiết: 商品ラインナップ.xlsx
Phí ship theo tỉnh, thành phố: 送料）エリア別一覧表_車椅子365（202503）.xlsx
Chuyển đổi dữ liệu từ các file Excel sang định dạng JSON hoặc nhập vào hệ thống CMS để dễ dàng quản lý và truy xuất.
Sử dụng các phương thức như fetch, async/await để tương tác với API, đảm bảo đồng bộ dữ liệu giữa giao diện và hệ thống quản trị.
Phát triển chức năng tính phí bằng JavaScript, ưu tiên sử dụng theo mô hình lập trình hướng đối tượng (class) hoặc theo (function) để đảm bảo mã nguồn rõ ràng, dễ bảo trì và mở rộng.

Khuyến khích Trainee sử dụng các công cụ AI để hỗ trợ chuyển đổi dữ liệu sang định dạng JSON nhằm tăng hiệu quả công việc.
Tuy nhiên, cần hạn chế việc sử dụng AI để viết code thay cho quá trình tự phát triển và tư duy giải quyết vấn đề.

Tạo Custom Post Types (CPT): Nhận biết được tính năng nào cần tạo CPT. Thiết lập các loại bài viết tùy chỉnh phù hợp với yêu cầu dự án.
Xây dựng Custom Field (ACF + Flexible Content): Sử dụng Advanced Custom Fields để tạo các trường dữ liệu linh hoạt cho từng loại nội dung.
Xử lý Form liên hệ nhiều bước: Thiết kế và triển khai form liên hệ gồm nhiều bước xác nhận, đảm bảo trải nghiệm người dùng mượt mà.
Xây dựng được cấu trúc source dễ quản lý: Phân chia giao diện thành các template và template-parts để dễ dàng quản lý, tái sử dụng.
Hiểu cấu trúc theme WordPress và khả năng dynamic hóa giao diện: Nắm vững cấu trúc theme, biết cách xây dựng giao diện động dựa trên dữ liệu quản trị.
Tư duy xây dựng dự án theo chức năng: Phân tích, xác định và triển khai các chức năng chính của dự án một cách hệ thống, đảm bảo mỗi thành phần đều phục vụ mục tiêu tổng thể và có thể mở rộng, bảo trì dễ dàng.