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:

1. File functions.php
2. 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ợ !