Child theme là gì? Cách tạo Child theme trong WordPress

Trong bài viết trước mình đã hướng dẫn các bạn cài đặt giao diện WordPress. Cho dù giao diện wordpress bạn cài đặt là miễn phí hay có phí, nó sẽ thường xuyên được nhà phát triển phát hành bản cập nhật để vá lỗi, thêm tính năng hoặc nhằm tăng cường bảo mật,… Thường khi cài đặt các bản nâng cấp này, nó sẽ làm thay một số file trong giao diện. Trong quá trình cài đặt và chỉnh giao diện WordPress, có thể bạn sẽ phải chỉnh sửa một số chỗ trong code của giao diện gốc. Do đó, khi giao diện được cập nhật mới, rất có thể những nội dung bạn chỉnh sửa có thể bị thay thế bằng một file khác, dẫn tới các thay đổi của bạn sẽ mất hết và trở về mặc định của giao diện gốc.

Chắc hẳn việc này sẽ gây ra nhiều phiền toái cho bạn khi đá mất công chỉnh sửa trước đó giờ phải mày mò làm lại từ đầu. Vì thế để tránh tình trạng này, WordPress đưa ra tính năng gọi là Child theme. Đa số giao diện có phí bạn mua đều có sẵn bản Child theme đi cùng theme chính. Tuy nhiên với các theme miễn phí đặc biệt khi cài trực tiếp từ kho giao diện WordPress thì sẽ không có Child theme. Trong bài viết này, chúng ta sẽ cùng tìm hiểu Child theme là gì, cũng như cách tạo Child theme trong WordPress nhé!

Child theme là gì?

Child theme là gì?

Child theme trong WordPress là khái niệm ám chỉ một giao diện con được đi kèm với một giao diện gốc, hay gọi là theme cha. Child theme thường sẽ không chứa toàn bộ code trong giao diện, mà hầu hết nó lấy nội dung từ giao diện cha. Nghĩa là khi bạn kích hoạt Child theme, Website sẽ hiển thị như khi bạn kích hoạt theme cha. Nhưng khi có một thay đổi nào đó trên Child theme, thì nó sẽ hiển thị theo Child theme ở đoạn được thay đổi.

Chẳng hạn khi bạn muốn sửa nội dung trong file header.php của giao diện cha, bạn có thể chép file đó qua Child theme rồi chỉnh sửa. Giao diện bên trang web sẽ được thay đổi theo cách bạn sửa file header.php trong Child theme.

Điều này cho phép bạn dễ dàng cập nhật theme gốc mà không phải lo lắng về nguy cơ mất những thay đổi trong code theme đã làm trước đó.

Khi kích hoạt child theme, WordPress sẽ load những file trong Child theme trước, nếu không có file nó sẽ load trong theme cha. Do đó, cấu trúc trong thư mục Child theme phải giống như trong theme gốc thì các thay đổi mới có tác dụng.

Tại sao bạn nên sử dụng Child Theme?

Dựa trên những khái niệm trên chắc bạn cũng đã hiểu qua vì sao bạn cần sử dụng Child theme. Sử dụng Child theme để chỉnh sửa code giao diện là cách tốt nhất và an toàn nhất, mà ai sử dụng WordPress đều cần thực hiện.

Những thay đổi trên child theme sẽ không bị xóa khi update wordpress theme. Một lợi ích to lớn khác là, nếu có bất kỳ lỗi gì khi thay đổi giao diện child theme, bạn hoàn toàn có thể xóa nó mà không ảnh hưởng đến theme gốc.

Child theme là gì?

Cách tạo Child theme

Ví dụ bạn đang có một theme chính là Buggy, bạn muốn tạo Child theme cho Buggy.

  • Bước 1: Bạn tạo một thư mục ngang hàng thư mục Buggy và đặt tên Buggy-child (Tên theme gốc và “-child”)
  • Bước 2: Trong thư mục Buggy-child, tạo một file Text document, đặt tên là style.css
  • Bước 3: Dùng notepad, hoặc notepad ++ mở file style.css lên và dán đoạn code sau vào:

/*
Theme Name: Buggy Child
Theme URI: https://thietkewebchuan.com
Description: Child theme for the Buggy Theme
Author: Ken Than
Author URI: https://thietkewebchuan.com
Template: buggy
Version: 0.1.0
*/ Custom CSS goes after this line

Trong đó, bạn cần lưu ý: Theme Name là tên Child theme, bạn nên để tên Theme gốc cùng với Child để dễ nhận biết. Template: tên Theme name của giao diện gốc được khai báo trong file style.css của theme gốc. Bạn cần khai báo chính xác thì Child theme mới nhận diện được theme gốc là theme nào. Bạn lưu file này lại.

  • Bước 4: Tiếp tục tạo một text document, đặt tên là function.php và để trống.

<?php

// code will goes here


?>

  • Bước 5: tải thử mục Buggy-child lên host ngang hàng với thư mục Buggy. Vào phần cài đặt giao diện trên WordPress và kích hoạt Buggy Child. Sau này khi muốn thay đổi code của file bất kỳ trong giao diện, hãy copy nó từ Buggy qua Buggy-child để chỉnh sửa.

Cách tạo Child theme WordPress

No Responses