Hướng Dẫn Tự Tạo Child Theme (Theme Con) cho WordPress

Child Theme là gì?

Child Theme (Theme con) là một theme WordPress kế thừa tất cả các chức năng, kiểu dáng, và mẫu (template) từ một theme khác, được gọi là Parent Theme (Theme cha). Về cơ bản, Child Theme hoạt động như một lớp “áo khoác” bên ngoài Parent Theme. Nó cho phép bạn thực hiện các tùy chỉnh (CSS, PHP, JavaScript, v.v.) mà không làm thay đổi trực tiếp code của Parent Theme.

Ví dụ, nếu bạn đang sử dụng Blocksy làm theme chính, bạn sẽ tạo một Child Theme dựa trên Blocksy.

Tại sao nên sử dụng Child Theme?

Việc sử dụng Child Theme mang lại nhiều lợi ích quan trọng, đặc biệt là về sự bền vững và an toàn cho website của bạn:

Cập nhật Parent Theme an toàn: Đây là lý do quan trọng nhất! Khi Parent Theme có bản cập nhật (ví dụ: vá lỗi bảo mật, thêm tính năng mới), bạn có thể cập nhật nó mà không lo mất đi các tùy chỉnh của mình. Nếu bạn chỉnh sửa trực tiếp Parent Theme, mọi thay đổi sẽ bị ghi đè và mất hết sau mỗi lần cập nhật.
Dễ dàng bảo trì và quản lý: Mọi tùy chỉnh của bạn đều nằm trong Child Theme, giúp dễ dàng tìm kiếm, chỉnh sửa, và quản lý code hơn.
Học hỏi và thử nghiệm an toàn: Child Theme là môi trường lý tưởng để bạn thử nghiệm các đoạn code mới, thêm tính năng mà không lo làm hỏng theme gốc.
Phục hồi dễ dàng: Nếu có lỗi xảy ra trong Child Theme, bạn chỉ cần vô hiệu hóa nó và kích hoạt lại Parent Theme để website hoạt động trở lại, giúp việc khắc phục sự cố nhanh chóng.

Khi tạo Child Theme cần lưu ý những gì?

Parent Theme phải tồn tại: Dĩ nhiên, Child Theme không thể hoạt động nếu không có Parent Theme được cài đặt trên website của bạn.
Chỉ tạo khi cần tùy chỉnh code: Nếu bạn chỉ thay đổi giao diện thông qua Customizer của theme hoặc các tùy chọn có sẵn trong bảng điều khiển, bạn không nhất thiết phải tạo Child Theme. Child Theme thực sự cần thiết khi bạn muốn thêm CSS tùy chỉnh sâu hơn, sửa đổi các file template PHP, hoặc thêm chức năng mới qua functions.php.
Không xóa hoặc đổi tên Parent Theme: Đừng bao giờ xóa hay đổi tên Parent Theme khi Child Theme đang hoạt động, website của bạn sẽ gặp lỗi nghiêm trọng.
Thứ tự ưu tiên: Các file trong Child Theme sẽ ưu tiên hơn các file có cùng tên trong Parent Theme. Ví dụ: nếu bạn có single.php trong Child Theme, WordPress sẽ sử dụng nó thay vì single.php trong Parent Theme.
Kế thừa toàn bộ: Child Theme kế thừa mọi thứ từ Parent Theme. Bạn chỉ cần thêm những gì bạn muốn thay đổi hoặc bổ sung.

Hướng dẫn từng bước tạo Child Theme

Có hai cách chính để tạo Child Theme: sử dụng plugin hoặc tạo thủ công. Với người mới, tạo thủ công là cách tốt nhất để hiểu rõ cấu trúc và nguyên lý hoạt động của nó.

Bước 1: Chuẩn Bị (Truy cập file qua FTP/File Manager)

Bạn cần truy cập vào thư mục cài đặt WordPress của mình trên hosting thông qua FTP client (như FileZilla) hoặc File Manager có sẵn trong bảng điều khiển hosting (cPanel, FastPanel, DirectAdmin, v.v.).

Đường dẫn: Điều hướng đến thư mục wp-content/themes/.

Bước 2: Tạo Thư Mục Child Theme

Trong thư mục wp-content/themes/, hãy tạo một thư mục mới cho Child Theme của bạn.

Tên thư mục: Tên thư mục nên dễ nhận biết, thường là tên của Parent Theme kèm theo -child.
- Ví dụ: Nếu Parent Theme của bạn là blocksy, hãy tạo thư mục là blocksy-child.

Bước 3: Tạo File `style.css` (Bắt buộc)

Mỗi theme WordPress cần có ít nhất một file style.css. Đây là file đầu tiên WordPress đọc để nhận diện theme của bạn.

Trong thư mục blocksy-child (mà bạn vừa tạo), tạo một file mới có tên là style.css.
Mở file style.css bằng trình chỉnh sửa văn bản (Notepad++, VS Code, Sublime Text hoặc trình soạn thảo của File Manager) và dán nội dung sau vào:

CSS
/*
 Theme Name: Blocksy Child
 Theme URI: https://codecungai.com/
 Description: Blocksy Child Theme
 Author: Kien Dinh
 Author URI: https://codecungai.com/author/kiendinh/
 Template: blocksy
 Version: 1.0.0
 Text Domain: blocksy-child
*/

/*
 Thêm CSS tùy chỉnh của bạn vào đây.
 Các quy tắc CSS ở đây sẽ ghi đè các quy tắc trong Parent Theme nếu có cùng selector.
*/

CSS
/*
 Theme Name: Blocksy Child
 Theme URI: https://codecungai.com/
 Description: Blocksy Child Theme
 Author: Kien Dinh
 Author URI: https://codecungai.com/author/kiendinh/
 Template: blocksy
 Version: 1.0.0
 Text Domain: blocksy-child
*/

/*
 Thêm CSS tùy chỉnh của bạn vào đây.
 Các quy tắc CSS ở đây sẽ ghi đè các quy tắc trong Parent Theme nếu có cùng selector.
*/

Giải thích các dòng quan trọng:

Theme Name: Tên hiển thị của Child Theme trong WordPress Admin.
Theme URI: URL website của bạn.
Description: Mô tả ngắn gọn về Child Theme.
Author: Tên của bạn.
Author URI: URL hồ sơ của bạn hoặc website cá nhân.
Template: blocksy: Dòng này cực kỳ quan trọng! Nó cho WordPress biết Parent Theme của bạn là gì (trong trường hợp này là blocksy). Hãy đảm bảo giá trị này trùng khớp chính xác với tên thư mục của Parent Theme.
Version: Phiên bản Child Theme của bạn.
Text Domain: Tên miền văn bản duy nhất cho Child Theme (thường trùng với tên thư mục).

Bước 4: Tạo File `functions.php` (Để nhúng Stylesheet của Parent Theme)

Đây là file quan trọng thứ hai. Bạn sẽ sử dụng nó để đảm bảo stylesheet của Parent Theme được nhúng đúng cách vào Child Theme, giúp website hiển thị giao diện Parent Theme trước khi áp dụng các tùy chỉnh của Child Theme.

Trong thư mục blocksy-child, tạo một file mới có tên là functions.php.
Mở file functions.php và dán nội dung sau vào:

PHP

<?php
/**
 * File functions.php của Blocksy Child Theme
 * Chứa các tùy chỉnh và chức năng bổ sung.
 */

// Nhúng stylesheet của Parent Theme
function my_blocksy_child_theme_enqueue_assets() {
    wp_enqueue_style(
        'blocksy-parent-style', // Handle duy nhất cho parent theme
        get_template_directory_uri() . '/style.css' // Đường dẫn của parent style
    );

    // Nhúng stylesheet của Child Theme sau
    wp_enqueue_style(
        'blocksy-child-style', // Handle duy nhất cho child theme
        get_stylesheet_directory_uri() . '/style.css', // Đường dẫn của child style
        array('blocksy-parent-style'), // Đảm bảo child style tải sau parent style
        wp_get_theme()->get('Version') // Phiên bản để tránh cache
    );
}
add_action( 'wp_enqueue_scripts', 'my_blocksy_child_theme_enqueue_assets' );

// Thêm các chức năng tùy chỉnh khác của bạn ở đây
// Ví dụ:
// require_once get_stylesheet_directory() . '/inc/custom-functions.php';

?>

PHP

<?php
/**
 * File functions.php của Blocksy Child Theme
 * Chứa các tùy chỉnh và chức năng bổ sung.
 */

// Nhúng stylesheet của Parent Theme
function my_blocksy_child_theme_enqueue_assets() {
    wp_enqueue_style(
        'blocksy-parent-style', // Handle duy nhất cho parent theme
        get_template_directory_uri() . '/style.css' // Đường dẫn của parent style
    );

    // Nhúng stylesheet của Child Theme sau
    wp_enqueue_style(
        'blocksy-child-style', // Handle duy nhất cho child theme
        get_stylesheet_directory_uri() . '/style.css', // Đường dẫn của child style
        array('blocksy-parent-style'), // Đảm bảo child style tải sau parent style
        wp_get_theme()->get('Version') // Phiên bản để tránh cache
    );
}
add_action( 'wp_enqueue_scripts', 'my_blocksy_child_theme_enqueue_assets' );

// Thêm các chức năng tùy chỉnh khác của bạn ở đây
// Ví dụ:
// require_once get_stylesheet_directory() . '/inc/custom-functions.php';

?>

Giải thích:

Hàm my_blocksy_child_theme_enqueue_assets() được sử dụng để đăng ký và nhúng các stylesheet.
wp_enqueue_style('blocksy-parent-style', get_template_directory_uri() . '/style.css'); đảm bảo CSS của Parent Theme được tải lên trước.
wp_enqueue_style('blocksy-child-style', get_stylesheet_directory_uri() . '/style.css', array('blocksy-parent-style'), wp_get_theme()->get('Version')); đảm bảo CSS của Child Theme được tải sau, và nó phụ thuộc vào Parent Theme (array('blocksy-parent-style')).

Bước 5: Kích Hoạt Child Theme

Đăng nhập vào bảng điều khiển WordPress Admin của bạn.
Đi tới Appearance (Giao diện) > Themes (Giao diện).
Bạn sẽ thấy Child Theme của mình với tên “Blocksy Child” (hoặc tên bạn đã đặt).
Nhấp vào nút Activate (Kích hoạt) cho Child Theme đó.

Bước 6: Kiểm Tra và Bắt Đầu Tùy Chỉnh

Truy cập website của bạn để đảm bảo mọi thứ vẫn hiển thị đúng như cũ.
Bây giờ, bạn có thể bắt đầu thêm các tùy chỉnh vào Child Theme của mình:
- Thêm CSS tùy chỉnh: Dán các đoạn CSS bạn muốn vào cuối file style.css của Child Theme.
- Thêm chức năng PHP: Dán các đoạn code PHP tùy chỉnh vào file functions.php của Child Theme (luôn đặt bên trong <?php ... ?>).
- Chỉnh sửa các file template: Nếu bạn muốn thay đổi cấu trúc HTML của một trang cụ thể (ví dụ: trang bài viết đơn), bạn có thể sao chép file template tương ứng từ Parent Theme (ví dụ: single.php, page.php, header.php, footer.php) vào thư mục Child Theme của bạn. Sau đó, chỉnh sửa bản sao trong Child Theme. WordPress sẽ tự động sử dụng file trong Child Theme thay vì Parent Theme.

Tóm Lại

Tạo và sử dụng Child Theme là một thói quen tốt nhất (best practice) trong việc phát triển và tùy biến WordPress. Nó bảo vệ website của bạn khỏi những rủi ro khi cập nhật theme, giúp bạn duy trì các tùy chỉnh một cách có tổ chức và hiệu quả. Mặc dù ban đầu có vẻ hơi phức tạp, nhưng việc đầu tư thời gian để hiểu và thiết lập Child Theme sẽ mang lại lợi ích lâu dài cho website của bạn.

Xem thêm: Hướng dẫn tối ưu file .htaccess cho web được bảo mật hơn