Toàn tập Child Theme là gì? Vì sao phải dùng Child theme?

Child-theme-la-gi? Vì sao phải dùng Child theme?

Child Theme là gì? Vì sao phải dùng Child theme? Một ngày đẹp trời nọ, khi bạn đang vui mừng vì vừa update xong phiên bản mới cho Theme để cải thiện tốt hơn cho website của mình thì…Chuyện gì đang xảy ra vậy? Tại sao tất cả các thay đổi trực tiếp trong Theme như CSS và Code đều đã biến mất hoàn toàn. Và bạn tự đặt ra câu hỏi là Đã xảy ra lỗi gì đó khi update cho Theme chăng? Nhưng sau khi kiểm tra lại thì câu trả lời nhận được là mọi thứ đều ổn. Nguyên nhân ở đây là do khi bạn cập nhật Theme đang dùng lên phiên bản mới nhất thì các thay đổi trực tiếp trong Theme sẽ bị mất đi do các file của Theme phiên bản mới chép đè lên các file cũ. Và không còn cách nào khác là bạn phải mất thời gian chỉnh sửa và thay đổi lại tất cả các CSS và Code như ban đầu (trước khi update Theme). Điều này rất mất thời gian cũng như rất bất tiện mỗi khi chúng ta update Theme lên phiên bản mới. Nhưng từ giờ, các bạn không cần phải lo lắng nữa vì bài viết này chiasegiatot.com sẽ giúp bạn giải quyết vấn đề trên một cách đơn giản nhất.

1. Child Theme là gì? Tại sao phải dùng Child Theme?

WordPress developers đã thêm khả năng tạo Child theme (tạm gọi là theme con) dựa trên tính chất của Parent theme (tạm gọi là theme mẹ). Tính chất của Child theme là thừa hưởng tất cả các đặc điểm, chức năng và thuộc tính từ một Parent theme. WordPress hoàn toàn hỗ trợ Child theme, vì vậy, tất cả các theme trong WordPress đều có thể tạo được Child theme.

Child theme không khác gì một theme thông thường, nó có thể chứa file ảnh, JavaScript, CSS, template… . Điểm khác biệt là Child theme làm việc phụ thuộc vào Parent theme của nó. Nếu không có Parent theme thì Child theme sẽ không thể làm việc và không thể active (do đó, tuyệt đối không được xóa theme mẹ khi đang sử dụng theme con). Bạn có thể thoải mái điều chỉnh các thông số, code, CSS, hoặc JavaScript… mà không cần tác động tới Code trong theme mẹ. Bất cứ thay đổi nào bạn tạo ra trong Child theme cũng sẽ không bị mất đi khi bạn update theme mẹ.

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ó một vấn đề là sau này bạn cập nhật theme đó lên phiên bản mới nhất thì các thay đổi trước đó sẽ bị mất đi do các file phiên bản mới chép đè lên file cũ. Để giải quyết vấn đề này thì bắt buộc chúng ta phải dùng đến Child theme để giữ lại được các thay đổi trước đó mà không phải mất thời gian tùy biến lại sau khi update theme lên phiên bản mới.

Như vậy, mục đích sử dụng của Child theme là hỗ trợ tùy biến theme mẹ mà không cần thay đổi trực tiếp Code trong theme mẹ. 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 mỗi khi update phiên bản mới vì chúng ta chỉ cần update theme mẹ lên phiên bản mới, còn theme con thì vẫn giữ nguyên như cũ.

2. Cách hoạt động của Child Theme như thế nào?

Khi có khách truy cập vào website của bạn, các file sẽ được thực thi trong quá trình tải theme. Lúc này, WordPress sẽ tiến hành kiểm tra các file đó trong Child theme trước. Nếu file nào có mặt trong Child theme thì nội dung của nó sẽ được thực thi. Trường hợp nếu file nào không có trong Child theme thì WordPress sẽ sử dụng file đó từ Parent theme (theme mẹ). Ngoại trừ duy nhất 1 file không hoạt động giống nguyên tắc đó là file functions.php. Riêng file functions.php của Parent theme sẽ không bị thay đổi dù bạn 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 và Parent theme sẽ tiến hành load song song với nhau.

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

Khi bạn sử dụng Child theme, trường hợp nếu bạn copy một file nào đó ở thư mục Parent theme qua bên thư mục của Child theme (để thay đổi, chỉnh sửa..) thì nó sẽ tiến hành thực thi file đó ở thư mục Child theme trước, nếu thư mục Child theme thiếu file nào thì nó sẽ thực thi file bên thư mục Parent theme.

Ví dụ, nếu trong thư mục Child theme của mình chỉ có 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 mình copy file header.php từ thư mục theme mẹ sang Child theme thì lúc này WordPress sẽ ưu tiên thực thi file header.php ở thư mục Child theme, còn các file khác nó vẫn thực thi ở thư mục theme mẹ.

Tóm lại, khi bạn sử dụng Child theme, WordPress sẽ tải theme con trước, và sau đó sẽ lấy những styles và functions từ theme mẹ. Kết quả là, phần lớn mã nguồn vẫn được dùng từ thư mục gốc, nhưng được chỉnh sửa dựa trên các biến của theme con trước khi nội dung được hiển thị trên trang web.

3. Hướng dẫn cách tạo Child Theme?

3.1. Tạo thư mục Child theme.

Đầu tiên, các bạn phải truy cập vào thư mục wp-content/themes. Để làm được điều này bạn có thể sử dụng phần mềm FileZilla FTP client hoặc đăng nhập trực tiếp vào cPanel (khuyến khích các bạn dùng cách này), sau đó các bạn tìm chọn vào mục File Manager => puclic_html (thư mục cài WordPress) => wp-content => themes như hình bên dưới.

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

Tiếp theo, một cửa sổ đặt tên cho Child Theme hiện ra. Nhiệm vụ của các bạn rất đơn giản là đặt một cái tên cho Child theme là được. Tuy nhiên, để thuận tiện cho việc quản lý theme thì mình khuyên các bạn đặt tên với nguyên tắc như sau đây nhé:

  • Xác định Parent theme: các bạn phải xác định Child theme muốn tạo từ Parent theme (them mẹ) nào. Vì trong website các bạn đang cài đặt rất nhiều theme để sử dụng. Sau khi đã xác định được theme mẹ mà bạn ưng ý để tạo Child theme rồi thì các bạn sẽ qua bước đặt tên cho Child theme.
  • Đặt tên cho Child theme: Tên Child theme = nguyên tên theme mẹ + cụm từ “-child

Ví dụ, trong hướng dẫn này mình chọn Parent theme (thêm mẹ) là soledad. Vì vậy, tên Child theme của mình đặt sẽ là soledad-child như hình bên dưới nhé.

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

Kết quả là bạn đã tạo được thư mục Child theme như ý. Nhưng lúc này thư mục Child theme của bạn chỉ là thư mục trống chưa có bất kỳ nội dung gì bên trong nên chưa thể hoạt động được.

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

Sau này, nếu các bạn có nhiều Child theme thì chỉ cần nhìn tên là biết được Child theme đó tạo từ theme mẹ nào. Rất tiện cho việc quản lý theme đúng không nào. Nhưng nếu các bạn có ý tưởng đặt tên nào hay hơn thì cứ bỏ qua lời khuyên này của mình nhé, vì chúng ta có quyền được sáng tạo mà đúng không nào.

3.2. Tạo file style.css và functions.php cho Child theme hoạt động.

  • Tạo file style.css

Trong thư mục Child theme, các bạn tạo một file style.css với nội dung tương tự như bên dưới (bởi vì, Child theme bắt buộc chúng ta phải có đoạn mô tả như vậy):

/*
Theme Name: soledad Child Theme
Theme URI: https://chiasegiatot.com
Description: soledad Child Theme
Author: Chia Se Gia Tot
Author URI: https://chiasegiatot.com
Template: soledad
Version: 1.0.0
*/

Các bạn hãy thay đổi các thông tin bên trên thành của thông tin website của các bạn. Tuy nhiên, có một phần các bạn phải lưu ý và cung cấp thông tin thật chính xác đó là ở phần Template. Ở phần này, các bạn bắt buộc phải ghi tên chính xác của theme mẹ vào đây (ở ví dụ của mình là soledad). Nguyên nhân là để cho nó hiểu được đâu là mẹ của nó trong quá trình thực thi lệnh.

Sau đó, các bạn lưu lại file style.css vừa được thay đổi trên.

*Sau đây là hướng dẫn chi tiết cách tạo file style.css bằng hình ảnh cho các bạn tiện thực hiện:

Bước 1: Tạo file style.css nằm trong thư mục Child theme.

Trong thư mục Child theme => Click vào File => đặt tên file là style.css

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

Sau đó, các bạn đặt tên file là style.css và click vào nút Create New File để tạo file.

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

Bước 2: Chỉnh sửa nội dung cho file style.css vừa được tạo.

File style.css vừa được tạo chỉ là file rỗng, chưa có bất kỳ tác dụng gì. Vì vậy, ta cần thêm nội dung cho nó (chính là đoạn code mình đã nói ở trên) để nó có thể hoạt động được.

Trong thư mục Child theme => Chọn vào file style.css => Click vào Edit => dán đoạn code ở trên vào rồi lưu lại.

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

Sẽ có 1 thông báo hiện ra, các bạn chọn định dạng utf-8 và click vào Edit như hình nhé.

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

Sau đó, copy và dán đoạn code vào như hình bên dưới. Nhớ đổi hết các thông tin thành của bạn nhé!

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

Cuối cùng, các bạn lưu file style.css vừa được chỉnh sửa và đóng lại.

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

Vậy là chúng ta đã hoàn thành xong bước tạo file style.css cho Child them. Tiếp theo, chúng ta cùng tạo tiếp một file khác có tên là functions.php nhé.

  • Tạo file functions.php

Thêm file functions.php trong cùng một thư mục Child theme, nhưng chúng ta không copy và dán đoạn code từ theme mẹ sang. Vì file functions.php cần hoạt động độc lập với bất kỳ thay đổi nào được thực hiện cho theme con. Thay vào đó, chúng ta tạo một file trống có tên là functions.php và thêm code cần thiết vào file cho theme con của bạn.

Cũng giống như tạo file style.css, trong thư mục Child theme, các bạn tạo một file functions.php rồi sau đó copy và dán đoạn code (màu xanh) dưới đây vào file này.

<?php
add_action( ‘wp_enqueue_scripts’, ‘my_enqueue_assets’ );
function my_enqueue_assets()
{
wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );
}
?>

Sau đó, các bạn lưu lại file functions.php vừa được thay đổi trên. Đoạn code này sẽ giúp tải toàn bộ CSS từ theme mẹ sang.

*Sau đây là hướng dẫn chi tiết cách tạo file functions.php bằng hình ảnh cho các bạn tiện thực hiện:

Bước 1: Tạo file functions.php nằm trong thư mục Child theme.

Trong thư mục Child theme => Click vào File => đặt tên file là functions.php

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

Sau đó, các bạn đặt tên file là functions.php và click vào nút Create New File để tạo file.

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

Bước 2: Chỉnh sửa nội dung cho file functions.php vừa được tạo.

File functions.php vừa được tạo chỉ là file rỗng, chưa có bất kỳ tác dụng gì. Vì vậy, ta cần thêm nội dung cho nó (chính là đoạn code mình đã nói ở trên) để nó có thể hoạt động được.

Trong thư mục Child theme => Chọn vào file functions.php => Click vào Edit => dán đoạn code ở trên vào rồi lưu lại.

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

Sẽ có 1 thông báo hiện ra, các bạn vẫn chọn định dạng utf-8 và click vào Edit như hình nhé.

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

Sau đó, copy và dán đoạn code vào như hình bên dưới.

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

Cuối cùng, các bạn lưu file functions.php vừa được chỉnh sửa và đóng lại.

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

Vậy là chúng ta đã hoàn thành xong bước tạo file functions.php cho Child them.

3.3. Kích hoạt cho Child theme hoạt động.

Nếu như các bạn muốn sử dụng child theme ngay thì sau khi đã tạo nội dung (thêm code) cho 2 file style.cssfunctions.php thì các bạn chỉ việc vào Appearance (giao diện) => Themes (giao diện) và kích hoạt Child theme vừa tạo lên mà thôi.

Child theme là gì? Cách kích hoạt Child theme
Child theme là gì? Cách kích hoạt Child theme

*Ngoài cách tạo child theme thủ công như trên, các bạn cũng có thể tìm hiểu thêm một số plugin để tạo child theme như:

Cách này sẽ giúp ích cho các bạn mới làm quen với WordPress để tiết kiệm thời gian. Cách tạo child theme bằng plugin khá đơn giản nên các bạn tư tìm hiểu nhé. Tuy nhiên, mình khuyên các bạn nên sử dụng cách thủ công để tạo Child theme. Mục đích là để các bạn hiểu rõ hơn về cách thức hoạt động của Child theme và luyện thêm kỹ năng cho bản thân.

4. Hướng dẫn cách sử dụng Child Theme?

Khi sử dụng Child theme, các bạn cần tuân thủ các nguyên tắc sau đây:

  1. Tuyệt đối không được xóa thư mục theme mẹ (parent theme), vì nếu không có theme mẹ thì Child theme sẽ không thể hoạt động được.
  2. Khi bạn muốn tùy biến bất kỳ một file .php nào đó, luôn ghi nhớ rằng hãy copy file đó từ thư mục theme mẹ sang Child theme và chỉ sửa ở Child theme.
  3. Hãy nhớ luôn tạo cấu trúc đường dẫn thư mục và file tương tự như ở Parent Theme. Dựa trên cấu trúc đường dẫn đó, khi bạn sử dụng Child theme thì các file trong thư mục Child theme sẽ được ưu tiên thực thi. Nếu trong thư mục Child theme không có file đó thì file bên parent theme sẽ được thực thi.

5. Lời kết.

Bài viết “Toàn tập Child Theme là gì? Vì sao phải dùng Child theme?” này sẽ giúp các bạn phần nào hiểu được những lợi ích của việc sử dụng Child theme. Đồng thời có thể tự mình tạo ra và sử dụng được bất kỳ một Child theme nào mà mình muốn.

Child theme là cách tốt nhất giúp bạn giữ được các tùy chỉnh trong theme khi cần cập nhật theme lên phiên bản mới. Việc tạo child theme cũng khá dễ và đơn giản, bạn chỉ cần theo dõi bài viết này là sẽ có được những kiến thức cơ bản về cách tạo và sử dụng child theme.

Chúc Các Bạn Thành Công !

>>Xem thêm bài viết: 

Cách tạo website cực kỳ dễ trong 5 phút với WordPress.

Hướng dẫn cài đặt WordPress trên hosting có cPanel – cài đặt TỰ ĐỘNG.

2 Cách cài đặt Theme cho website WordPress dễ nhất.

 

 

Có 2 Bình luận về bài viết này.</lowercase>

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *