3.4.1. Child theme là gì?
Child Theme được hiểu như là một theme con và nó sẽ kế thừa toàn bộ đặc điểm của theme mẹ (Parent Theme).
Khi sử dụng các theme, ta thường có xu hướng tiến hành chỉnh sửa trực tiếp lên theme như thay đổi CSS, thay đổi code bên trong. Điều này vô cùng nguy hiểm nếu sau này bạn cập nhật theme đó lên phiên bản mới nhất vì các thay đổi sẽ bị mất đi do các file phiên bản mới chép đè lên.
Do đó, việc sử dụng Child Theme sẽ giúp bạn thoải mái tùy chỉnh code và CSS mà không sợ bị mất khi update phiên bản mới vì bạn chỉ cần update theme mẹ, còn child theme thì vẫn giữ nguyên.
3.4.2. Cách child theme hoạt động
Khi bạn tạo một child theme, thì nếu bạn copy một file ở thư mục theme mẹ qua bên thư mục của child theme thì nó sẽ tiến hành thực thi file đó ở thư mục child theme, nếu thư mục child theme thiếu file nào thì nó sẽ thực thi file bên thư mục theme mẹ.
Ví dụ, thư mục child theme chỉ có mỗi file style.css, thì lúc đó ngoại trừ file style.css, các file khác đều thực thi từ thư mục theme mẹ. Nếu copy file single.php từ thư mục theme mẹ sang child theme thì nó sẽ ưu tiên thực thi file single.php ở thư mục child theme, còn các file khác nó vẫn thực thi ở thư mục theme mẹ.
Riêng file functions.php của theme mẹ sẽ không bị thay đổi dù bạn có khai báo thêm file functions.php trong thư mục child theme, mà các code bên trong file functions.php của child theme sẽ tiến hành load thêm song hành với các code bên trong file functions.php của theme mẹ.
32
Do đó bạn có thể hiểu rằng, khi sử dụng child theme mà muốn tùy biến file nào thì chỉ cần copy file đó qua thư mục child theme và tiến hành chỉnh sửa nó, không cần đụng chạm gì tới theme mẹ.
3.4.3. Tạo Child Theme
Hãy vào thư mục wp-content/themes tạo thêm một thư mục mới với tên bất kỳ, nhưng chúng ta nên đặt tên giống với thư mục theme mẹ và thêm chữ -child ở đằng sau, như ảnh ở đây chúng ta sẽ tạo 1 child theme cho theme mà chúng ta muốn sử dụng tên là twentyseventeen:
Hình ảnh 3.9: Thư mục mẹ và thư mục child theme
Sau đó tạo một file style.css với nội dung giống như bên dưới trong file twentyseventeen-child:
/*
Theme Name:Twenty Seventeen Child Description: Day la child theme Author: Hoang Nguyen
Template: twentyseventeen Version: 0.1
*/
@import url("../twentyseventeen /style.css");
33
Hình ảnh 3.10: Child theme hiển thị trong admin