Một kịch bản lặp đi lặp lại trong nghề: khách nhờ sửa màu nút, đổi chữ ở chân trang, thêm một đoạn mã theo dõi. Người làm mở trình sửa tệp, chỉnh thẳng vào style.css hoặc footer.php của giao diện. Ba tháng sau giao diện có bản cập nhật, khách bấm cập nhật, và mọi thay đổi biến mất. Tệp của giao diện bị thay bằng bản mới từ nhà phát triển, không còn dấu vết nào của những gì đã sửa.
Giao diện con (child theme) sinh ra để giải quyết đúng chuyện đó. Nhưng nó không phải đáp án cho mọi thay đổi. Bài này chia rõ: thay đổi nào đặt ở đâu.
Giao diện con hoạt động thế nào
Giao diện con là một thư mục giao diện riêng, khai báo rằng nó dựa trên một giao diện cha. Khi giao diện con được kích hoạt:
- WordPress tìm tệp mẫu (template) trong giao diện con trước. Có thì dùng, không có thì lấy của giao diện cha.
- Tệp functions.php của giao diện con được nạp trước tệp của giao diện cha, và cả hai đều chạy — không thay thế nhau.
- Giao diện cha vẫn cập nhật bình thường; mọi thứ trong thư mục con không bị đụng tới.
Tối thiểu, giao diện con chỉ cần một thư mục và một tệp style.css có phần đầu khai báo tên giao diện và dòng Template ghi đúng tên thư mục của giao diện cha. Với giao diện cổ điển, thêm một tệp functions.php để nạp tệp CSS của giao diện cha bằng hàm wp_enqueue_style. Cách dùng lệnh @import trong CSS để nạp giao diện cha là cách cũ, làm trình duyệt tải tuần tự, không nên dùng nữa.
Bốn chỗ đặt thay đổi, mỗi chỗ một việc
| Loại thay đổi | Đặt ở đâu | Vì sao |
|---|---|---|
| Vài chục dòng CSS chỉnh màu, khoảng cách | CSS bổ sung trong Tuỳ biến, hoặc Kiểu dáng toàn cục với giao diện khối | Lưu trong cơ sở dữ liệu, không mất khi cập nhật, không cần tạo tệp |
| Sửa cấu trúc HTML của tệp mẫu: đầu trang, trang bài viết, trang lưu trữ | Giao diện con | Chỉ ghi đè đúng tệp cần sửa |
| Chức năng gắn với website: loại nội dung riêng, mã ngắn, đoạn mã theo dõi, chỉnh hành vi WordPress | Tiện ích riêng của website hoặc thư mục mu-plugins | Đổi giao diện không làm mất chức năng |
| Chỉnh nhỏ cách hiển thị của giao diện qua móc (hook) của nó | functions.php của giao diện con | Gắn với giao diện, đổi giao diện thì không còn cần |
Dòng thứ ba là chỗ hay sai nhất. Rất nhiều hướng dẫn trên mạng bảo “dán đoạn mã này vào functions.php”. Nếu đoạn mã đó đăng ký loại nội dung Dự án, ba năm sau khách đổi giao diện, toàn bộ dự án biến mất khỏi trang quản trị — dữ liệu vẫn trong cơ sở dữ liệu nhưng không có gì hiển thị. Quy tắc: nếu đổi giao diện mà vẫn muốn giữ, thì đó không phải việc của giao diện.
Ghi đè tệp mẫu đúng cách
Khi cần sửa một tệp mẫu, chép đúng tệp đó từ giao diện cha sang giao diện con, giữ nguyên đường dẫn thư mục tương đối, rồi sửa bản trong giao diện con. Ví dụ muốn sửa phần hiển thị bài viết đơn trong tệp template-parts/content-single.php, bạn tạo đúng thư mục template-parts trong giao diện con và đặt tệp vào đó.
Ba thói quen giúp đỡ khổ về sau:
- Chỉ chép tệp thật sự sửa. Chép cả thư mục cho chắc là tự khoá mình vào phiên bản cũ của mọi tệp: giao diện cha sửa lỗi bảo mật hay lỗi hiển thị trong những tệp đó, bạn không nhận được.
- Ghi chú ở đầu tệp: chép từ phiên bản nào của giao diện cha, ngày nào, sửa đoạn nào, vì sao.
- Ưu tiên móc thay vì ghi đè. Nhiều giao diện tốt cung cấp móc hành động và bộ lọc để chèn hoặc đổi nội dung ở những vị trí phổ biến. Dùng móc trong functions.php của giao diện con thì không phải chép tệp nào.
Sau mỗi lần giao diện cha có bản cập nhật lớn, so sánh tệp bạn đã ghi đè với bản mới của tệp gốc. Công cụ so sánh văn bản bất kỳ đều làm được. Nếu tệp gốc thay đổi đáng kể, chép lại bản mới rồi áp lại phần sửa của bạn.
Với giao diện khối thì sao
Giao diện khối (block theme) dùng tệp HTML cho mẫu trang và tệp theme.json cho màu, chữ, khoảng cách. Khi bạn sửa mẫu trong trình chỉnh sửa website (Giao diện → Trình chỉnh sửa), bản sửa được lưu vào cơ sở dữ liệu, không đụng vào tệp của giao diện. Vì vậy với thay đổi thông thường, giao diện khối không cần giao diện con mà vẫn không mất khi cập nhật.
Đổi lại, có hai chuyện cần biết:
- Bản sửa trong cơ sở dữ liệu sẽ che bản mẫu mới từ giao diện cha. Giao diện cha cải tiến mẫu đầu trang, bạn không thấy, vì website đang dùng bản bạn đã sửa. Trình chỉnh sửa có nút đặt lại mẫu về mặc định để so sánh.
- Muốn đưa thay đổi vào quản lý mã nguồn, chép sang website khác hoặc giao cho người khác, bạn vẫn cần giao diện con: xuất các mẫu đã sửa thành tệp và đặt vào thư mục con. Theme.json của giao diện con được trộn với theme.json của giao diện cha, chỉ cần khai báo phần khác biệt.
Khi nào KHÔNG cần giao diện con
Giao diện con không phải nghi thức bắt buộc. Không cần khi:
- Bạn chỉ chỉnh CSS vài chục dòng — CSS bổ sung là đủ.
- Bạn dùng trình dựng trang lưu mọi thứ trong cơ sở dữ liệu và không sửa tệp mẫu nào.
- Giao diện là của chính bạn viết riêng cho khách, không có nhà phát triển nào phát hành bản cập nhật. Khi đó cứ sửa thẳng và quản lý bằng hệ thống phiên bản.
Ngược lại, gần như luôn cần giao diện con khi bạn dùng một giao diện phổ biến nhận cập nhật định kỳ và phải sửa bố cục ở mức tệp mẫu.
Những lỗi gặp khi chuyển sang giao diện con
- Mất cài đặt Tuỳ biến. Nhiều tuỳ chọn của giao diện cổ điển lưu riêng theo từng giao diện. Kích hoạt giao diện con, logo, màu, menu có thể về mặc định. Ghi lại hoặc xuất cài đặt trước khi đổi; một số giao diện có công cụ nhập xuất tuỳ chọn.
- Vị trí menu và khối tiện ích trống. Gán lại trong Giao diện → Menu và Tiện ích sau khi kích hoạt.
- Dòng Template ghi sai — ghi tên hiển thị thay vì tên thư mục, hoặc sai chữ hoa chữ thường. WordPress báo giao diện bị hỏng.
- Nạp CSS hai lần vì vừa enqueue vừa @import, hoặc nạp style.css của giao diện con khi giao diện cha đã tự nạp nó.
- Hàm trùng tên giữa functions.php con và cha gây lỗi nghiêm trọng. Giao diện cha viết cẩn thận bọc hàm trong điều kiện kiểm tra hàm đã tồn tại chưa, cho phép giao diện con định nghĩa trước để thay thế. Nếu không có điều kiện đó, đặt tên hàm có tiền tố riêng.
Một quy trình gọn cho người làm nghề
Với mỗi website khách, giữ ba thứ trong kho mã: thư mục giao diện con, thư mục tiện ích riêng của website, và một tệp ghi chú những gì đã chỉnh trong cơ sở dữ liệu (CSS bổ sung, mẫu đã sửa trong trình chỉnh sửa website). Thử cập nhật giao diện cha trên bản sao thử nghiệm trước, kiểm các trang dùng tệp đã ghi đè, rồi mới cập nhật trên website thật. Làm vậy, cập nhật giao diện trở thành việc mười phút thay vì việc đáng sợ mà ai cũng né.
Tiện ích riêng của website: dựng trong năm phút
Chỗ đặt chức năng không phụ thuộc giao diện nghe có vẻ phức tạp, nhưng thực ra chỉ là một thư mục trong wp-content/plugins chứa một tệp PHP có phần đầu khai báo tên tiện ích. Kích hoạt nó như mọi tiện ích khác, rồi dán các đoạn mã chức năng vào đó thay vì vào functions.php.
Nếu không muốn ai lỡ tay tắt nó, đặt tệp vào thư mục wp-content/mu-plugins (tự tạo nếu chưa có). Tiện ích ở đây luôn được nạp, không hiện nút tắt trong bảng quản trị và không cần kích hoạt. Đổi lại, WordPress chỉ nạp các tệp PHP nằm ngay trong thư mục đó, không tự tìm vào thư mục con, và không có cơ chế cập nhật tự động — phù hợp với mã do chính bạn viết.
Chia mã theo việc: một tệp cho loại nội dung riêng, một tệp cho mã theo dõi, một tệp cho các chỉnh nhỏ về quản trị. Khi có lỗi, bạn đổi tên đúng một tệp để tắt nó và khoanh vùng nhanh hơn nhiều so với một tệp functions.php dài năm trăm dòng.
Câu hỏi thường gặp
Giao diện khối có cần giao diện con không?
Với chỉnh sửa thông thường thì không, vì bản sửa trong trình chỉnh sửa website được lưu vào cơ sở dữ liệu. Giao diện con chỉ cần khi muốn quản lý thay đổi bằng tệp hoặc chép sang website khác.
Dán đoạn mã vào functions.php của giao diện con có ổn không?
Ổn nếu đoạn mã chỉ liên quan tới hiển thị của giao diện đó. Chức năng cần giữ khi đổi giao diện, như loại nội dung riêng hay mã theo dõi, nên đặt trong một tiện ích riêng.
Kích hoạt giao diện con có mất cài đặt cũ không?
Có thể mất một phần, vì nhiều giao diện lưu tuỳ chọn riêng theo tên giao diện. Ghi lại hoặc xuất cài đặt trước và gán lại menu, khối tiện ích sau khi kích hoạt.
Có nên chép toàn bộ tệp của giao diện cha sang giao diện con?
Không. Chỉ chép tệp thật sự sửa; chép tất cả khiến bạn không nhận được các bản vá lỗi và cải tiến của giao diện cha trong những tệp đó.
Chỉ đổi màu và cỡ chữ thì dùng gì?
Dùng CSS bổ sung trong Tuỳ biến hoặc Kiểu dáng toàn cục trong trình chỉnh sửa website. Không cần tạo giao diện con cho việc này.
