English
日本語
Là một đơn vị từng nhiều năm phát triển website Joomla và dotnetnuke trước đây. Có một vấn đề chúng tôi nhận thấy khá khó chịu là việc chỉnh sửa giao diện của website, nhất là với các mẫu giao diện website mua từ một nhà cung cấp thứ 3.
Vấn đề ở đây là khi tiến hành chỉnh sửa giao diện theo yêu cầu của khách hàng, chúng ta tiến hành chỉnh sửa css và code trực tiếp trên giao diện đó. Về kĩ thuật đây là việc hoàn toàn bình thường và không có gì sai cả. Tuy nhiên vấn đề sẽ phát sinh khi chúng ta nâng cấp giao diện lên phiên bản mới hơn thì các phần chỉnh sửa của chúng ta sẽ bị ghi đè lên và mất đi. Để khắc phục điều đó chúng ta có một vài cách nhưng nó làm cho khối lượng công việc để xử lý của chúng ta nhiều thêm và độ rủi ro cũng cao hơn.
Và khi tiếp cận với WordPress, chúng tôi nhận thấy CMS này đã cung cấp một tính năng rất hữu ích để khắc phục vấn đề này, đó chính là Child Theme ( Giao diện con)
Về cơ bản Child Theme là một theme con và nó sẽ kế thừa toàn bộ đặc điểm của theme mẹ (Parent Theme). Mục đích sử dụng của Child Theme là hỗ trợ tùy biến theme mẹ mà không cần trực tiếp thay đổi trong theme mẹ.
Vì sao lại chọn Child Theme?
Như đã phân tích ở trên, việc sử dụng Child Theme sẽ giúp chúng ta 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ì chúng ta chỉ cần update theme mẹ, còn child theme thì vẫn giữ nguyên. Do đó sau khi nâng cấp theme mẹ thì child theme của chúng ta không bị mất dữ liệu gì.
Cách hoạt động của Child Theme?
Khi chúng ta tạo một child theme, thì nếu chúng ta copy một file nào đó ở thư mục theme mẹ qua bên thư mục của child theme thì nó sẽ tiến hành thực thi file đó ở thư mục child theme, nếu thư mục child theme thiếu file nào thì nó sẽ thực thi file bên thư mục theme mẹ.
Ví dụ, thư mục child theme của mình chỉ có mỗi file style.css, thì lúc đó ngoại trừ file style.css, các file khác đều thực thi từ thư mục theme mẹ. Nếu copy file single.php từ thư mục theme mẹ sang child theme thì nó sẽ ưu tiên thực thi file single.php ở thư mục child theme, còn các file khác nó vẫn thực thi ở thư mục theme mẹ.
Riêng file functions.php của theme mẹ mẹ sẽ không bị thay đổi dù chúng ta có khai báo thêm file functions.php trong thư mục child theme, mà các code bên trong file functions.php của child theme sẽ tiến hành load thêm song hành với các code bên trong file functions.php của theme mẹ.
Do đó chúng ta có thể hiểu rằng, khi sử dụng child theme mà muốn tùy biến file nào thì chỉ cần copy file đó qua thư mục child theme và tiến hành chỉnh sửa nó, không cần đụng chạm gì tới theme mẹ.
Các bước tạo child theme
Hãy 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 mình khuyến khích chúng ta nên đặt tên giống với thư mục theme mẹ và thêm chữ -child ở đằng sau, như ảnh:
Sau đó tạo một file style.css với nội dung giống như bên dưới:
|
01
02
03
04
05
06
07
08
09
|
/*Theme Name: Startbox Child ThemeTheme URI: http: //oneday.comDescription: Child theme cua StartboxAuthor:Author URI: http://oneday.comTemplate: startboxVersion: 0.1*/ |
chúng ta có thể đổi các thông tin thành của chúng ta, nhưng lưu ý ở phần Template, ở đó là chúng ta ghi tên thư mục của theme mẹ để nó hiểu đâu là mẹ của nó, như trong ảnh thì là mình có thư mục startbox là theme mẹ.
Kế tiếp, chúng ta chèn thêm đoạn này vào ngay bên dưới */
|
01
|
@import url("../startbox/style.css"); |
chúng ta thay startbox thành tên thư mục theme mẹ, mục đích là để nó sử dụng các CSS từ theme mẹ, cũng như có thể tiến hành ghi đè CSS mà chúng ta tùy chỉnh lên CSS có sẵn.
Như vậy bây giờ mình có file style.css ở thư mục theme con như sau:
|
01
02
03
04
05
06
07
08
09
10
|
/*Theme Name: Startbox Child ThemeTheme URI: http: //oneday.comDescription: Day la child theme cua StartboxAuthor:Author URI: http://oneday.comTemplate: startboxVersion: 0.1*/@import url("../startbox/style.css"); |
Việc còn lại là chỉ việc vào Appearance -> Themes và kích hoạt child theme lên mà thôi.
Các lưu ý khi sử dụng Child Theme cầ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 chúng ta 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. chúng ta xem file functions.php của theme mẹ để xem nó require bằng cách nào rồi làm y vậy.
Trên đây là bài giới thiệu cách chúng ta sử dụng child theme, hi vọng chia sẻ này có thể giúp chúng ta rõ hơn về Child Theme và áp dụng nó cho riêng mình để tùy biến theme, tránh việc bị mất bản tùy biến khi nâng cấp theme.
