Child Theme là gì? Hiểu đơn giản Child Theme là các giao diện con của các theme wordpress. Theo đó Child Theme kế thừa toàn bộ các đặc điểm của Parent Theme. Do vậy, khi Parent Theme được cập nhật thì các thay đổi trong Child Theme vẫn được giữ nguyên.
Lý do sử dụng Child Theme? Với đa số người dùng WordPress không thể tự thiết kế một theme riêng cho mình. Vì vậy, một phần lớn sẽ dùng các Theme trên thư viện Theme của WordPress sau đó hiệu chỉnh phù hợp với nhu cầu. Khi Theme này được cập nhật thì các hiệu chỉnh cũng biến mất theo. Cũng vì lý do này, Child Theme được sử dụng để giải quyết vấn đề này, các thay đổi hiệu chỉnh tại Child Theme sẽ ghi đè lên Parent Theme và các bạn có thể cập nhật thoải mái với Parent Theme
Cách thức hoạt động của Child Theme? Khi tạo một Child Theme các file copy từ theme mẹ sẽ được thực thi tại Child Theme. Nếu Child Theme không có file thì mới thực thi file đó tại theme mẹ. Ví dụ đơn giản với file style.css khi thay đổi css tại child theme thì không thay đổi style.css tại theme mẹ và sẽ thực thi tại theme con. Vì vậy, khi tạo Child Theme thì chúng ta chỉ cần copy file từ theme mẹ và điều chỉnh tương ứng là được.
Cách thức tạo Child Theme? Để tạo Child Theme cho bất cứ Theme WordPress nào đó, chúng ta thực hiện như sau:
– Tại thư mục wp-content/themes tạo một thư mục bất kỳ để lưu theme, có thể đặt tên theme gốc và thêm “-child” để dễ phân biệt với các theme khác.
– Tạo file style.css với nội dung sau:
/*
Theme Name: TenTheme Child Theme
Theme URI: https://hockhon.com
Description: Day la child theme cua HocKhon
Author: Tieu Bao
Author URI: https://hockhon.com
Template: TenTheme
Version: 0.1
*/
/* Nhập CSS từ theme gốc */
@import url("../TenTheme/style.css");
/* Thêm CSS tùy chỉnh ở dưới đây */Tạo file functions.php và chèn vào đoạn mã sau:
<?php
// Enqueue style của parent theme
function TenTheme_child_enqueue_styles() {
$parent_style = 'parent-style'; // Tên của style trong parent theme
wp_enqueue_style($parent_style, get_template_directory_uri() . '/style.css');
wp_enqueue_style('child-style',
get_stylesheet_directory_uri() . '/style.css',
array($parent_style),
wp_get_theme()->get('Version')
);
}
add_action('wp_enqueue_scripts', 'TenTheme_child_enqueue_styles');Sau khi hoàn thành nội dung này, các bạn vào Appearance => Themes và kích hoạt lên là chúng ta hoàn thành việc tạo Child Theme.
Tạo ảnh đại diện cho Child Theme? tạo file screenshot.png với kích thước 487 x 331 pixcel và tải lên Child Theme để làm ảnh đại diện cho Theme
Một số lưu ý khi sử dụng Child Theme?
– Đảm bảo rằng tên thư mục và giá trị Template trong file style.css của child theme khớp chính xác với tên thư mục của Parent theme. Kiểm tra kỹ lưỡng các thay đổi để đảm bảo rằng child theme hoạt động như mong muốn mà không phá vỡ giao diện hoặc chức năng của trang web.
– Luôn phải có theme mẹ đi cùng nên không được xoá theme mẹ
– Khi tuỳ biến các file .php hãy copy từ thư mục theme mẹ và sửa ở Child Theme
– Khi viết CSS mới hãy viết dưới dòng @import ở Child Theme.
– Nếu muốn hiệu chỉnh các file .php mà không thuộc thư mục theme mẹ thì phải require tại functions.php như theme mẹ (xem tại file functions.php của theme mẹ để xem.