Hướng dẫn tạo child theme thủ công

Child Theme là gì?

Child Theme chúng ta 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).

Tại sao nên dùng Child Theme?

Trong quá trình xây dưng, phát triển website chúng ta thường xuyên cần thay đổi code, css bên trong theme. Đ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.

Cách thức hoạt động của child theme

nếu thư mục child theme thiếu file nào so với parent theme thì nó sẽ thực thi file đó bên thư mục parent theme.Nếu đã có file tương ứng với bên parent theme sẽ thực thi file đó. Nói chung là nếu có file tương ứng thì thực thi theo file, nếu không có thì thực thi theo file của parent theme.

Riêng file functions.php của theme mẹ 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. 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 parrent theme .

Cách 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 mình khuyến khích bạn nên đặt tên giống với thư mục theme mẹ và thêm chữ -child ở đằng sau, như ảnh:

Sau đó tạo một file style.css với nội dung giống như sau:

</p>
<p>/*<br />
Theme Name: Blog Way Child<br />
Description: This is a child theme for Blog-Way-Child <br />
Author: lbk.vn<br />
Template: blog-way<br />
Version: 1.0<br />
*/</p>
<p>@import url("../blog-way/style.css")</p>
<p>

*Lưu ý: luôn code css dưới @import url(“../blog-way/style.css”)

Đối với theme khác Blog Way, đổi giá trị Template thành tên folder parent theme, tương tự với việc import css

Để set ảnh đại diện cho childtheme, chuẩn bị ảnh đại diện, đổi tên thành screenshot định dang png rồi pate vào  theme.

Chúc các bạn thành công.

 

Tags:

Bình luận

0 bình luận

  • Hãy là người đầu tiên để lại bình luận cho bài viết này!