Child theme là gì? Hướng dẫn cài child theme chi tiết

  () cho phép bạn thay đổi các khía cạnh nhỏ của giao diện trang web nhưng vẫn giữ được giao diện và chức năng của chủ đề. Để hiểu về Child theme hoạt động như thế nào, điều quan trọng đầu tiên là phải hiểu mối quan hệ giữa chủ đề parent và Child theme . Vậy child theme là gì? Chúng ta cùng tìm hiểu qua bài viết bên dưới nhé.

Child theme là gì? Hướng dẫn cài child theme chi tiết
Child theme là gì? Hướng dẫn cài child theme chi tiết

Parent Theme là gì?

(Parent Theme) là một chủ đề hoàn chỉnh bao gồm tất cả các tệp và nội dung mẫu bắt buộc để chủ đề hoạt động. Tất cả các chủ đề – trừ chủ đề con – đều được coi là chủ đề mẹ.

Child theme là gì?

Như đã chỉ ra trong phần tổng quan, chủ đề con kế thừa giao diện của chủ đề mẹ và tất cả các chức năng của nó, nhưng có thể được sử dụng để sửa đổi bất kỳ phần nào của chủ đề. Bằng cách này, các tùy chỉnh được giữ riêng biệt với các tệp của chủ đề chính. Sử dụng chủ đề con cho phép bạn nâng cấp chủ đề mẹ mà không ảnh hưởng đến các tùy chỉnh bạn đã thực hiện cho trang web của mình.

Tính năng của Child theme:

  • Làm cho các sửa đổi của bạn có thể di động và có thể nhân rộng,
  • Giữ tùy chỉnh tách biệt với các chức năng chủ đề mẹ,
  • Cho phép các chủ đề mẹ được mà không phá hủy các sửa đổi của bạn,
  • Cho phép bạn tận dụng nỗ lực và thử nghiệm được đưa vào chủ đề mẹ,
  • Tiết kiệm thời gian phát triển vì bạn không tạo lại bánh xe,
  • Là một cách tuyệt vời để bắt đầu tìm hiểu về phát triển chủ đề.

Cách tạo Child theme

1. Tạo một thư mục chủ đề con

Đầu tiên, tạo một thư mục mới trong thư mục chủ đề của bạn, nằm tại wp-content/themes.

tạo thư mục child theme
tạo thư mục child theme

Thư mục cần có tên. Cách tốt nhất là đặt tên cho chủ đề con giống với chủ đề gốc nhưng có thêm -child vào cuối. Ví dụ: nếu bạn đang tạo một chủ đề con là twentytwenty, thì thư mục sẽ được đặt tên là twentytwenty-child.

2. Tạo 1 file stylesheet tên là style.css

Tiếp theo, bạn sẽ cần tạo tệp stylesheet (bảng định kiểu) có tên style.css, tệp này sẽ chứa tất cả các quy tắc và khai báo CSS kiểm soát giao diện chủ đề của bạn. Biểu định kiểu của bạn phải chứa chú thích tiêu đề bắt buộc bên dưới ở đầu tệp. Điều này cho WordPress biết thông tin cơ bản về chủ đề, bao gồm thực tế rằng nó là một chủ đề con với một chủ đề mẹ cụ thể.

Các thông tin sau là bắt buộc:

Tên chủ đề – cần phải là duy nhất cho chủ đề của bạn

Mẫu – tên của thư mục chủ đề mẹ. Chủ đề chính trong ví dụ của chủ đề Twenty Twenty, vì vậy Mẫu sẽ là twentytwenty. Bạn có thể đang làm việc với một chủ đề khác, vì vậy hãy điều chỉnh cho phù hợp.

Bước cuối cùng là xếp hàng các biểu định kiểu chủ đề mẹ và con, nếu cần.

Trước đây, phương pháp phổ biến là nhập biểu định kiểu chủ đề mẹ bằng cách sử dụng @import bên trong style.css. Đây không còn là phương pháp được khuyến nghị nữa, vì nó làm tăng thời gian tải các biểu định kiểu. Thêm vào đó, bảng định kiểu mẹ có thể được tải hai lần.

Thêm thông tin còn lại nếu có. Tệp chủ đề con được yêu cầu duy nhất là style.css, nhưng functions.php là cần thiết để sắp xếp các kiểu một cách chính xác (bên dưới).

Nếu chủ đề mẹ tải kiểu của nó bằng một hàm bắt đầu bằng get_stylesheet, chẳng hạn như get_stylesheet_directory() và get_stylesheet_directory_uri(), thì chủ đề con cần tải cả biểu định kiểu mẹ và con. Đảm bảo sử dụng cùng một tên xử lý giống như tên cha mẹ cho các kiểu cha mẹ.

3. Active child theme lên

Cuối cùng bạn chỉ việc vào Appearance -> Themes và kích hoạt twentytwenty Child  lên mà thôi.

Hy vọng qua bài viết này sẽ giúp ích cho các bạn hay tuỳ biến theme mà không lo sợ bị lỗi. Cám ơn các bạn xem bài viết này.

×Trong bài viết có thể sử dụng 1 số link rút gọn để duy trì kinh phí cho Web, các bạn chỉ bỏ ra 5s để bỏ qua quảng cáo. Mong các bạn thông cảm. Thanks!


Lưu ý:
→ Vui lòng bình luận bằng tiếng Việt có dấu.
→ Hãy dùng tên và email thật của bạn khi comment.
→ Không sử dụng keyword trong ô Name.
→ Nếu có ý định Spam link thì hãy quên đi nhé.
→ Tất cả bình luận đều được kiểm duyệt vì thế hãy cẩn thận trước khi comment.
Xin cám ơn!

Add Comment

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