Child theme là gì? Và cách tạo child theme làm sao?

Bài này là bài nằm trong loạt giới thiệu vài cái hay ho của Woocommerce, bài này nói chung là dễ hiểu lắm vì mình viết khá là chi tiết đấy nhé.

Child Theme (giao diện) có thể hiểu một cách rất đơn giản là một giao diện con và nó sẽ kế thừa toàn bộ đặc điểm của giao diện mẹ.

Trên thực tế thì tất cả các giao diện đều có thể tạo giao diện con (child theme). Mục đích chính của việc sử dụng giao diện con là để hỗ trợ, tùy biến theo ý muốn của bạn mà không cần trực tiếp thay đổi các file gốc của giao diện mẹ.

Tại sao nên sử dụng child theme nhỉ?

Khi bạn sử dụng các giao diện, hầu hết chúng ta đều tiến hành chỉnh sửa trực tiếp lên giao diện các hành động như thay đổi css, thay đổi code. Điều này là tiện nhưng nếu bạn cập nhật giao diện lên phiên bản mới hơn thì các thay đổi của bạn sẽ bị mất đi vì các thư mục của phiên bản giao diện mới sẽ bị chép đè lên.

Do đó việc sử dụng child theme sẽ giúp bạn thoải mái tùy biến css, code mà không sợ bị mất hiệu lực khi cập nhật phiên bản mới.

Cách tạo child theme ra sao?

Nói chung là khá dễ thôi, bạn hãy truy cập 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 bạn nên đặt tên giống với thư mục giao diện mẹ và có thêm chữ -child ở đằng sau cho dễ quản lý ý mà, ví dụ như ảnh dưới:

Sau đó các bạn tạo 1 file có tên functions.php và thêm nội dung bên dưới vào nhé:

/*
Theme Name: Flatsome Child  Theme //các bạn có thể thay tên khác ở đây. Nên ghi tên của giao diện Mẹ cho dễ quản lý
Theme URI: http://store.dung3d.blog //ghi tên website áp dụng child theme hoặc ghi gì tùy bạn =]]]
Description: Day la child theme cua Flatsome //các bạn ghi như này đi, diễn giải ý mà :D
Author: D3D //tác giả viết cái file này :D
Author URI: https://dung3d.blog //website / blog của tác giả
Template: flatsome //tên giao diện mẹ
Version: 0.1 //phiên bản
*/

Mục đích của việc tạo file functions.php là để các bạn có thể thêm các tùy chọn của mình vào đó mà không sợ mất đi khi cập nhật giao diện mẹ lên phiên bản mới hơn. Và cũng là điều chủ yếu mình sẽ hướng dẫn trong các bài Woocommerce tới đây :D.

Tiếp theo chúng ta tạo tiếp 1 file nữa có tên là style.css và thêm nội dung ở dưới vào nhé:

/*
Theme Name: Flatsome Child  Theme //các bạn có thể thay tên khác ở đây. Nên ghi tên của giao diện Mẹ cho dễ quản lý
Theme URI: http://store.dung3d.blog //ghi tên website áp dụng child theme hoặc ghi gì tùy bạn =]]]
Description: Day la child theme cua Flatsome //các bạn ghi như này đi, diễn giải ý mà :D
Author: D3D //tác giả viết cái file này :D
Author URI: https://dung3d.blog //website / blog của tác giả
Template: flatsome //tên giao diện mẹ
Version: 0.1 //phiên bản
*/
@import url("../flatsome/style.css");

Mục đích tạo file style.css là để nó sử dụng các CSS từ giao diện mẹ, cũng như có thể ghi đè css của bạn lên file css có sẵn của giao diện mẹ.

Việc tiếp theo của bạn là vào Appearance -> Themes và kích hoạt child theme bạn vừa tạo lên mà thôi, ảnh dưới là mình kích hoạt sẵn rồi nhé :D.

Chú ý khi sử dụng Child Theme cần phải nhớ

  • Không được xóa thư mục giao diện mẹ dưới bất cứ hình thức nào.
  • Muốn tùy biến hay chỉnh sửa file php nào thì một là copy thẳng file đó từ giao diện mẹ qua thư mục child theme và sửa ở đấy hoặc tự tạo ra như mình tạo cái file functions.php ở trên.
  • Khi viết CSS, luôn luôn viết dưới dòng @import ở child theme.

Hy vọng với một số chia sẻ ngắn này có thể giúp bạn hình dung rõ hơn về Child theme và cách áp dụng nó cho riêng mình.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  Subscribe  
Notify of