メインコンテンツまでスキップ

Wordpress Advanced 02

Dựa vào static site Advanced 05 - nest-house mà bạn đã tạo, vui lòng convert sang Wordpress.

👉 nest-house

Yêu cầu khi thao tác​

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à nest-house.

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

  • Xác định các phần tử sẽ chuyển đổi thành: Header, Footer, Sidebar, Main Content.

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 bài viết) 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:
    • front-page.php
    • page.php
    • single.php
    • archive.php
    • 404.php
    • (v.v.)

5. Tạo Custom Post Types

  • Tạo các Custom Post Type sau và thiết lập template hiển thị phù hợp cho từng loại:
    • works
    • voice
    • blog

6. Cấu hình ACF Flexible Content Field cho Single Work

  • Các thành phần yêu cầu:
    • 1 column: Nội dung toàn chiều ngang.
    • 2 column: Chia làm 2 cột.
    • Content: Đoạn văn bản mô tả gồm các thẻ h, p, ul, ol, li.
    • Video: Chèn video từ URL.
    • Gallery: Hiển thị bộ sưu tập ảnh.

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.
    • Form (nhập thông tin)
    • Confirm (xác nhận)
    • Thanks (cảm ơn)

Lưu ý​

  • Không được phép sử dụng AI để tạo code thay cho bản thân. Bài nộp sẽ được kiểm tra. Nếu phát hiện hơn 80% mã nguồn được tạo bằng AI, bài làm sẽ bị đánh giá không hợp lệ.

Kỹ năng cần đạt được​

  • Tạo Custom Post Types (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ị.