Block theme trong WordPress 7: bắt đầu từ đâu?

Block theme là cách làm theme mới của WordPress: thay vì viết PHP template, bạn mô tả giao diện bằng HTML chứa các block và cấu hình toàn bộ màu sắc, font chữ trong một file theme.json. Bài này đi từ con số 0 đến một theme chạy được.

Cấu trúc thư mục tối thiểu

Một block theme chỉ cần hai file để WordPress nhận diện: style.css chứa thông tin theme và templates/index.html. Thực tế bạn sẽ cần thêm vài thư mục:

• templates/: các trang như index, single, archive, 404.
• parts/: header, footer dùng chung.
• patterns/: các khối giao diện tái sử dụng.
• theme.json: màu, font, khoảng cách và layout.

theme.json: trái tim của block theme

Mọi thiết lập giao diện nằm trong theme.json. WordPress tự sinh CSS variables từ file này, nên bạn hầu như không phải viết CSS cho màu và chữ.

{
  "version": 3,
  "settings": {
    "layout": { "contentSize": "720px", "wideSize": "1200px" },
    "color": {
      "palette": [
        { "slug": "accent", "name": "Accent", "color": "#2563eb" }
      ]
    }
  }
}

Hãy coi theme.json như design token của cả website: đổi một chỗ, cập nhật mọi nơi.

T11N Team

Template và template part

Template là cả trang, template part là phần dùng lại. Ví dụ header được nhúng vào mọi template bằng block template-part.

So sánh với classic theme

Các lỗi thường gặp

1. Pattern không hiện: WordPress cache danh sách pattern, hãy bật WP_DEVELOPMENT_MODE khi phát triển.
2. Sửa file template nhưng không thấy thay đổi: template đã được chỉnh trong Site Editor sẽ ưu tiên bản lưu trong database.
3. Quên khai báo templateParts trong theme.json nên header không có vùng riêng.

Nắm được ba khái niệm theme.json, template và pattern là bạn đã đủ để tự dựng một block theme hoàn chỉnh. Xem thêm bài tối ưu PageSpeed cho WordPress để theme vừa đẹp vừa nhanh.