Xin chào các bạn, trong WordPress có một chức năng cực kì hay ho mà ít ai biết tới, đó là child theme, vậy child theme là gì ?

Một child theme – ảnh của WordPress.org
Chắc hẳn các bạn khi dùng các giao diện Framework Theme đều khá quen thuộc với cụm từ child theme, child theme thực tế là bản giao diện kế thừa toàn bộ chức năng của giao diện cha mẹ và chúng tự do chỉnh sửa giao diện mà không bị mất đi khi cập nhật giao diện cha mẹ !
Bạn có thể thoải mái điều chỉnh các thông số, hàm, chức năng, css hoặc Javascript mà không làm ảnh hưởng tới giao diện cha mẹ mà chúng kế thừa !
Bạn chỉ cần tạo một folder với tên của giao diện chính và thêm hậu tố “-child” vào là chúng sẽ nhận đó là child theme của giao diện nào, nhưng chưa hết, bạn còn có một vài lưu ý sau đây:
Child theme gồm các thành phần nào ?
Child theme bắt buộc phải có hai thành phần chính:
- File functions.php
- File style.css
Trong đó, file functions.php sẽ chạy trước khi Core của WordPress chạy file functions.php của giao diện cha mẹ, các bạn nên để ý tới vấn đề này !
Tiếp theo, các bạn nên để ý tới nội dung khai báo trong file style.css như sau:
/* Theme Name: Twenty Fifteen Child Theme URI: http://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: John Doe Author URI: http://example.com Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twenty-fifteen-child */
Trong đó nếu thiếu dòng “Template:” thì ngay lập tức giao diện của bạn sẽ không hoạt động được hoặc core của WordPress không nhận dạng được cha mẹ của chúng !
Những lưu ý khi dùng Child theme
Nếu bạn muốn lấy toàn bộ các style CSS của giao diện cha mẹ, bạn có thể thêm dòng code sau đây vào trong file functions.php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' ); function theme_enqueue_styles() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
Trường hợp bạn muốn sử dụng style CSS riêng trong giao diện, bạn có thể thay thế hàm get_template_directory_uri() bằng get_stylesheet_directory_uri() trong file Header.php của giao diện con !
Lưu ý sống còn đấy, hàm get_stylesheet_directory_uri() sẽ trả về đường dẫn tới Style của giao diện con thay vì của cha mẹ !
Lưu ý tiếp theo: Bạn có thể ghi đè bất kì file gì trong giao diện cha mẹ bằng một file với tên tương ứng trong giao diện con, ví dụ như file footer.php trong giao diện con sẽ ghi đè của cha mẹ chúng !
Và, không bao giờ được xóa giao diện cha mẹ, ngay lập tức chúng sẽ trở lên vô dụng hoặc gây ra lỗi khi trang đang chạy !
Tham khảo thêm các thủ thuật WordPress khác tại blog của Jam, rất nhiều thông tin thú vị !
Xem qua video để biết cách tạo ra một child theme:
Chúc các bạn thành công, bất kì vướng mắc nào hãy comment để Jam hỗ trợ !
Bạn Jam ở đâu vậy? Bạn có còn nhận thiết kế web bằng wp ko? mình vào mục liên hệ mà không thấy có địa chi.
Mình đang cần thiết kế web bằng WP
Bạn muốn thiết kế web về gì vậy bạn?
cho mình hỏi, nếu sử dụng child theme mà không lấy css của site cha mẹ, thì site đó nó chỉ có code chứ ko có css phải ko vậy?
Mình chưa hiểu ý của bạn ! Nhưng nếu muốn Childtheme không lấy css của cha mẹ thì bạn tạo ra file header.php để ghi đè file của theme mẹ, bạn có thể tùy biến tùy ý !
Chào Jam,
bây giờ tôi mới biết tác dụng tuyệt vời của child theme, cám ơn vì bài viết hữu ích. nhân đây bạn cho tôi hỏi chút:
1) tôi đang xài Newspaper theme, ở mục Custom CSS của theme tôi có chỉnh sửa một số code, và tôi để ý là khi update theme mới thì phần này không bị mất, vậy thì khi chuyển sang xài child theme thì không cần copy phần này qua đúng không?
2) có một số file tôi đã chỉnh sửa ở theme mẹ thì bây giờ copy nó qua child theme thì phải tạo thư mục giống như ở theme mẹ đúng không? Ví dụ có một file tên là a.php nằm ở thư mục header/parts của theme mẹ thì khi copy file này qua child theme thì cũng phải tạo 1 thư mục i xì như bên theme mẹ thì file này mới được thực thi đúng không hay chỉ cần bỏ nó vào thư mục gốc của child theme là đủ?
3) trong trường hợp kích hoạt child theme rồi mà bị lỗi thì hoàn toàn có thể active lại theme mẹ được đúng không?
Xin cảm ơn!
Dear bạn !
1. Custom CSS lưu trong CSDL nên không bị mất khi update
2. Chỉnh sửa file ở theme mẹ, thì copy file chỉnh và thư mục giống như theme mẹ sang child theme. Các thư mục phải “y nguyên” chứa file chỉnh sửa. Các thư mục khác không cần thiết nếu không ghi đè gì
3. Hoàn toàn có thể active lại theme mẹ !
Chúc bạn thành công !
Hi Jam,
Mình muốn sửa 1 file trong assets/css/abc.css và đã copy đúng path vào child-theme.
Đã modify 1 chút trên file đó nhưng vẫn không được. Liệu có cần khai báo gì trong functions.php hay style.css trong child-theme ko ?
Thanks.
Bạn cần phải chú ý cả tới cache nhé, có khi lại do bộ cache đấy !
Xin chào!
anh cho hỏi khi mình muốn làm 1 theme wordpress có nhiều giao diện ( ví dụ như ở menu có mục dịch vụ chẳng hạn khi click vào đó thì nó sẽ hiển thị ra 1 giao diện khác) thì mình cần phải làm gì?
xin cảm ơn!
Tại gói giao diện, bạn tạo một file mới là category-{ID của category}.php thì tại đó, bạn sẽ bố trí lại được các thành phần hoặc chỉnh sao cho đúng ý bạn ! Chúc bạn thành công !
Chào JamViet. bạn cho mình hỏi. Khi Active giao diện mẹ thì nó sinh ra vài page, thì sau này mình dùng giao diện con mình có thể xóa những cái page đó đi đc ko vì những page đó là page demo thì phải?