Child Theme WordPress là gì ? Tại sao phải tạo Child Theme ?

bởi Nguyễn Quốc Tuấn
1 bình luận

Child Theme là một tính năng tuyệt vời của WordPress. Nó cho phép bạn thêm – sửa – xóa đoạn code trong các file của giao diện Parent Theme trong WordPress mà không bị mất đi khi chúng ta update giao diện.

Sau khi đã nắm rõ những kiến thức trong hướng dẫn WordPress cơ bản thì điều tiếp theo bạn muốn cá nhân hóa là Giao diện đúng không nào ? Nhưng mỗi lần update giao diện thì phần custom đó lại mất đi.

Thế là bạn phải làm lại từ đầu. Khá là cực đúng không ?

Nhưng đó là một cách tốt để WordPress bảo vệ bạn khỏi bị Hack đấy. Thông thường Hacker sẽ chèn vào những đoạn code Malware vào các file giao diện khiến bạn khó mò ra nếu không có kinh nghiệm bảo mật WordPress.

Vì vậy mỗi khi update version theme mới thì WordPress sẽ xóa tất cả dữ liệu cũ đi và thay thế dữ liệu mới vào. Đồng nghĩa với việc những đoạn code Malware cũng sẽ bị loại bỏ.

Vậy làm sao để vừa tùy chỉnh được giao diện vừa đảm bảo được tính bảo mật ?

Đó là lí do bạn cần đến Child Theme.

How to Create Child Themes in WordPress

How to Create Child Themes in WordPress

Child Theme là gì ?

Child Theme (CT) là một clone của Parent Theme (Theme bạn đang kích hoạt). Child Theme kế thừa toàn bộ từ tính năng đến giao diện của Parent Theme.

Như vậy thì có ích gì ? Nếu clone ra thêm 1 theme nữa không phải sẽ làm Hosting tốn thêm nhiều tài nguyên hơn hay sao ?

Trả lời: Child Theme chỉ thừa hưởng tính năng và giao diện của Parent Theme. Còn tất cả những folder, file đều là của Parent Theme hết. Như thế bạn sẽ dễ dàng tùy chỉnh Child Theme theo ý của mình, không phải lo lắng về nguy cơ mất những thay đổi mỗi khi update version theme.

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

Khi bạn kích hoạt CT cho Theme hiện hành, WordPress sẽ hiểu là Parent Theme đang có CT. Nó sẽ ưu tiên truy cập vào Child Theme để tìm xem có những thay đổi gì tại CT hay không. Nếu có các tùy chỉnh thì WordPress sẽ hiển thị lên trước, sau đó sẽ load những phần còn lại từ Parent Theme.

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

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

Ví dụ:

Website của Cuồng Team sử dụng Theme GeneratePress, mình đã cá nhân hóa nó bằng cách:

  • Thêm mã Google Analytics vào file header.php.
  • Thêm code tùy chỉnh phân trang vào file single.php.
  • Thêm tính năng hiển thị bài viết liên quan vào file single.php.
  • ……..

Nếu đã kích hoạt CT thì WordPress sẽ truy cập vào những file mà mình đã tùy chỉnh trước như: header.php, footer.php, single.php, …. ở Child Theme sau đó thì truy cập vào những file còn lại ở Parent Theme.

Vậy làm sao để WordPress hiểu là những file đã tùy chỉnh ấy của CT hay là của Parent Theme ?

Hướng dẫn tạo Child Theme

Đối với các theme hiện đại như Flatsome, Avada, Be Theme, … thì họ đã thêm sẵn vào đó tính năng tạo CT. Bạn chỉ việc click vài cái là done !

Còn những theme được tối ưu nhẹ nhất có thể để làm trang Blog thì thường sẽ không có tính năng này.

Tạo Child Theme bằng plugin

Nếu lười thì bạn tải plugin này về cho lẹ nhé: Child Theme Configurator

Sau khi kích hoạt lên thì bạn vào Công cụ -> Child Themes để tiến hành cài đặt.

Chọn CREATE a new Child Theme ở Step 1 và chọn theme muốn làm Child Theme ở Step 2. Sau đó click Analyze

Cài đặt plugin

Cài đặt plugin

Tại bước 4, plugin cho phép chúng ta đặt tên cho CT theo ý muốn của mình, theo Cuồng Team thì cấu trúc chung vẫn là: [Tên Theme + Child]

Đặt tên mới cho Child Theme

Đặt tên mới cho Child Theme

Tiếp theo tại bước 7, chúng ta có thể chỉnh sửa các thuộc tính như name, author, description, tags, verison theo ý của mình. Nếu không thích thì có thể giữ nguyên.

Chỉnh sửa name, description, author, tag, version, ...

Chỉnh sửa name, description, author, tag, version, …

Bước 8: đây là bước QUAN TRỌNG.

Đây là bước copy toàn bộ Menu, widget và các customizer của Parent Theme sang Child Theme. Khuyến khích các bạn chỉ nên tích vào 1 lần duy nhất. Mọi tùy chỉnh sau này sẽ làm tại CT luôn. Không cần tích vào nữa.

Copy toàn bộ Menu, widget và các customizer của Parent Theme

Copy toàn bộ Menu, widget và các customizer của Parent Theme

Cuối cùng thì Create New Child Theme thôi !

Cuối cùng thì click to run thôi

Khi đã Create xong bạn chuyển qua tab File nhé. Đây là bước copy những file cần chỉnh sửa từ Parent Theme sang Child Theme

Copy file từ Theme Mẹ

Copy file từ Theme Mẹ

* Lưu ý:

  • Riêng file Functions.php đã được khởi tạo tự động nên bạn không cần phải copy qua nữa.
  • Để tùy chỉnh CSS thì bạn vào Tab Child Styles nhé hoặc xem tiếp ở Step cuối cùng.

Step cuối cùng

Vào Giao diệnSửa giao diện.

Tại đây bạn chọn giao diện Child Theme mà mình đã đặt tên. Sau đó chỉ cần tìm file cần chỉnh sửa thôi.

Như mình đã nói ở trên. WordPress sẽ ưu tiên hiển thị những file ở CT trước. Sau đó sẽ hiển thị những file còn lại ở Parent Theme.

Chỉnh sửa file đã copy từ Parent Theme

Chỉnh sửa file đã copy từ Parent Theme

Tạo Child Theme bằng tay không

Nếu bạn không thích dụng plugin vì gây chậm website hay đã có nhiều plugin rồi thì bạn làm theo cách này nhé.

Bước 1: Vào thư mục public_html / wp-content / themes / 

Tạo 1 folder và đặt tên cho nó. Ví dụ: Flatsome-Child

Bước 2: Vào folder vừa tạo để tạo thêm 1 file CSS Style đặt tên là: style.css

Bước 3: Mở file Style.css và thêm đoạn này vô:

  • Lưu ý:
    • Bạn phải nhập đúng tên Parent Theme tại mục Template nhé. Nhập sai là nó không nhận đâu !!!

Bước 4: Tạo thêm 1 file function.php và thêm tiếp đoạn code này nữa. Đây là đoạn code dùng để import file CSS từ Parent Theme sang.

Bước 5: Saved lại và hãy vào Giao diện / Giao diện và bạn sẽ thấy Child Theme của mình trong đó. Bạn cần nhấp vào nút kích hoạt để bắt đầu sử dụng CT trên trang web của mình.

Vì chưa thay đổi bất kỳ điều gì trong CT của mình nên trang web của bạn sẽ sử dụng tất cả các chức năng và giao diện của theme gốc.

Kết luận

Child Theme rất có ích cho việc tùy chỉnh giao diện của website. Đây là một tính năng không-thể-thiếu đối với 1 website nào.

Hy vọng bài viết chia sẻ của Cuồng Team đã giúp bạn hiểu được vì sao phải tạo CT và cách tạo CT.

Nếu trong quá trình làm gặp phải trục trặc hay thắc mắc gì các bạn hãy comment bên dưới nhé. Đội ngũ của Cuồng Team sẽ support nhiệt tình.

Xem thêm: 12 Cách Bảo Mật Cho Website WordPress Tránh Bị Hack

(Visited 187 times, 1 visits today)
0 0 vote
Article Rating
Subscribe
Notify of
guest
1 Comment
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Quang
Quang
2 months ago

Bài viết hướng dẫn rất chi tiết em cảm ơn nhé, em làm được rồi …>>>

1
0
Would love your thoughts, please comment.x
()
x