Hướng dẫn tạo Child Theme WordPress căn bản

Child Theme WordPress dịch đúng nghĩa của nó là giao diện con trong WordPress. Như vậy, có giao diện con thì buộc phải có giao diện mẹ (Parent Theme). Và vì vậy, một child theme sẽ được thừa hưởng toàn bộ thiết lập và thuộc tính của theme mẹ. Bất cứ loại theme nào cũng có thể tạo ra child theme và dĩ nhiên theme nào cũng có thể làm parent theme.

Child Theme WordPress cho phép bạn thay đổi các chức năng, thuộc tính của các Themes mà không cần phải chỉnh sửa Theme gốc/Parent Theme template file. Nếu bạn cần phải sửa đổi bất kỳ tập tin nào trong theme wordpress, tôi khuyên bạn nên tạo một Child Theme thay vì chỉnh sửa các file Theme gốc. Khi tạo và thay đổi trong Child Theme, bạn sẽ không cần phải làm lại những thay đổi đó khi bạn nâng cấp các theme gốc.

Tại sao nên dùng Child Theme WordPress?

Khi sử dụng các theme, chúng ta có xu hướng tiến hành chỉnh sửa trực tiếp lên theme như thay đổi CSS, thay đổi code bên trong các file *.php. Điều này vô cùng nguy hiểm nếu sau này bạn cập nhật theme đó lên phiên bản mới nhất vì các thay đổi sẽ bị mất đi do các file phiên bản mới chép đè lên.

Do đó, việc sử dụng Child Theme sẽ giúp bạn thoải mái tùy chỉnh code và CSS mà không sợ bị mất khi update phiên bản mới vì bạn chỉ cần update theme mẹ, còn child theme thì vẫn giữ nguyên.

Làm thế nào để tạo Child Theme

Về cơ bản khi child theme được kích hoạt, WordPress sẽ tìm các templates file trong thư mục Child theme trước tiên. Nếu tập tin không tồn tại trong child theme, nó tìm đến tập tin đó trong theme mẹ. Nói cách khác, nếu có một “header.php” trong child theme, WordPress sẽ ưu tiên sử dụng “header.php” của child theme và bỏ qua việc load “header.php” của theme mẹ.

Tạo một Child Theme

Để bắt đầu với một child theme,  bạn tạo ra một thư mục theme mới (ví dụ: “genesis-first-child”) trong thư mục “wp-content/themes”. Tạo một tập tin CSS mới trong thư mục child theme và đặt tên là style.css. Dán đoạn code comment mẫu dưới đây trong file style.css.

  • Theme Name  (bắt buộc) : (Khuyên dùng) Sử dụng tên Parent theme + Child để làm cho nó dễ dàng để xác định (ví dụ. “Genesis First Child”)
  • Description  (tùy chọn) : Bạn có thể nhập bất kỳ văn bản mô tả về child theme ở đây
  • Author  (tùy chọn) : Tác giả (có thể tên hoặc nick của bạn)
  • Author URI: Đường dẫn đến website, blog của bạn
  • Template  (bắt buộc) : tên của thư mục theme gốc, parent theme (trong trường hợp này là “genesis”)
  • Version: Phiên bản của child theme
  • Sau đó, bạn có thể bổ sung thêm bất kỳ CSS tùy chỉnh như bạn muốn

Tạo file ảnh cho child theme có tên screenshot.png để hiển thị ảnh screenshot của child theme trong trang quản trị. Và cuối cùng, để chắc chắn website sẽ chạy với đúng mẫu của parent theme, chúng ta cần phải tiến hành load file style.css của parent theme. Có 2 cách để load file css của parent theme.

Cách 1: Sử dụng lệnh import trong file style.css của child theme.

Cách 2: Tạo một tập tin có tên functions.php trong thư mục child theme, chỉnh sửa nó và dán vào đoạn code sau đây:

Overriding Parent Theme Template Files

Để ghi đè lên các tập tin mẫu trong Parent Theme, copy tập tin cần ghi đè của Parent theme vào trong Child theme.

Chú ý:

  • Tập tin dùng để ghi đè trong child theme phải có tên trùng với tên của tập tin cần ghi đè trong Parent theme
  • Đường dẫn từ thư mục Child theme đến tập tin dùng để ghi đè phải giống với đường dẫn từ thư mục Parent theme đến tập tin cần ghi đè

Ví dụ:

  • Bạn muốn chỉnh sửa tập tin content.php trong Parent theme, và nó được lưu trong thư mục parent-theme/templates/content.php
  • Copy tập tin content.php nói trên và tạo một bản sao lưu trong thư mục child theme: child-theme/templates/content.php
  • chỉnh sửa và lưu nội dung file content.php cần ghi đè trong child theme: child-theme/templates/content.php

Dưới đây là một số mẫu tập tin mà bạn có thể ghi đè lên (có thể có nhiều hơn tùy từng theme):

  • header.php
  • footer.php
  • index.php
  • single.php
  • page.php
  • sidebar.php
  • folder-template/loop.php
  • folder-template/slider.php

Kích hoạt Child Theme

Cuối cùng, để có thể sử dụng child theme, bạn có thể vào kích hoạt tại Appearance Themes.

Quy tắc sử dụng Child Theme cần nên nhớ

  • Không được xóa thư mục theme mẹ.
  • Muốn tùy biến file .php nào, hãy copy nó từ thư mục theme mẹ sang child theme và sửa ở child theme.
  • Khi viết CSS, luôn viết dưới dòng @import ở child theme.
  • Trường hợp bạn cần tuỳ biến các file PHP mà không thuộc template của theme thì hãy require nó vào file functions.php như bên theme mẹ đã làm. Bạn xem file functions.php của theme mẹ để xem nó require bằng cách nào rồi làm y vậy.

Bài viết liên quan

Thông tin tác giả

Thêm bình luận