wordpress

Cách tạo Child Theme cho một theme bất kỳ trên WordPress

Trong quá trình sử dụng theme WordPress chúng ta thường có nhu cầu tùy biến code, css của theme. Tuy nhiên nếu không tạo Child Theme thì sau khi update phiên bản mới của theme các thay đổi đó sẽ mất hết. Bởi vậy bài viết này mình sẽ hướng dẫn các bạn cách tạo Child Theme cho một theme bất kỳ trên WordPress. Trước khi đi vào phần hướng dẫn thì các bạn cần nắm rõ được định nghĩa Child Theme là gì? Nếu ai chưa biết thì đọc tại đây: Định nghĩa Child Theme.

Child theme hoạt động như thế nào?

Khi các bạn copy một file nào đó từ theme mẹ qua child theme thì nó sẽ thực thi file ở child theme. Nếu child theme thiếu file nào đó thì nó sẽ thực thi file đó ở bên thư mục theme mẹ.

Ví dụ cụ thể cho các bạn dễ hiểu, giả sử thư mục child theme của bạn chỉ có một file style.css thì lúc đó ngoại trừ file style.css ra, các file khác đều được thực thi từ thư mục theme mẹ. Nếu bạn muốn chỉnh sửa nội dung trong file single.php thì bạn chỉ cần copy file single.php ở thư mục mẹ qua thư mục child theme và chỉnh sửa ở đây. Lúc này 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 lấy ở thư mục theme mẹ.

Trường hợp đặc biệt duy nhất là file functions.php của thư mục mẹ sẽ không bị thay đổi khi bạn khai báo thêm file functions.php ở thư mục child theme, mà các code bên trong file functions.php của child theme sẽ thực thi song hành với các code trong file functions.php của thư mục theme mẹ.

Hiểu một cách đơn giản nhất là khi bạn muốn tùy biến một file nào đó thì chỉ cần copy file đó từ thư mục theme mẹ qua thư mục child theme sau đó chỉnh sửa ở đó mà không cần động vào code của thư mục theme mẹ.

Cách tạo Child Theme

Trước tiên các bạn hãy truy cập vào thư mục  wp-content/themes và tạo thêm một thư mục mới với tên bất kỳ. Tuy nhiên, mình khuyên các bạn nên đặt tên thư mục giống với thư mục theme mẹ và thêm chữ -child ở sau như ảnh dưới.

cách tạo child theme

Sau đó tạo file style.css trong thư mục mới tạo ở trên với nội dung như sau.


/*
Theme Name: MyBlog Child Theme
Theme URI: https://truongken.net
Description: Day la child theme cua MyBlog
Author: Truong Ken
Author URI: https://truongken.net
Template: mts_myblog
Version: 0.1
*/
@import url("../mts_myblog/style.css");

Ở code trên bạn hãy thay đổi các thông tin thành thông tin của bạn. Tuy nhiên, bạn cần lưu ý ở phần Template bạn cần viết đúng tên thư mục theme mẹ để nó hiểu đâu là theme mẹ của nó. Như ở ảnh trên thì thư mục theme mẹ của mình là mts_myblog nên mình viết như vậy.

Ở dòng cuối cùng dưới */ bạn cũng phải thay đổi mts_myblog thành tên thư mục theme mẹ của bạn. Tác dụng của dòng code này là  để nó sử dụng các css từ theme mẹ cũng như có thể tiến hành ghi đè css mà bạn chỉnh sửa lên css có sẵn.

Bây giờ bạn chỉ cần vào AppearanceThemes hoặc Giao diện > Giao diện nếu sử dụng tiếng Việt để kích hoạt child theme lên.

cach-tao-child-theme

Các lưu ý khi sử dụng Child Theme

  • Không được xóa hay thay đổi tên thư mục theme gốc (theme mẹ)
  • Muốn tùy biến file nào thì chỉ cần copy file đó từ thư mục theme mẹ qua thư mục child theme và sửa ở child theme
  • Khi viết CSS luôn viết dưới dòng @import ở child theme
  • Nếu bạn muốn tùy biến file PHP nào đó mà không thuộc template của theme thì hãy require nó vào file functions.php như bên theme mẹ

Một số plugin hỗ trợ tạo Child Theme

Ngoài việc tự tạo Child Theme chúng ta có thể sử dụng plugin để tạo. Một số plugin hỗ trợ tạo child theme:

Không có Bình luận

Viết bình luận