Khắc Phục Lỗi CSS Ở Child Theme Không Hoạt Động

Bạn đã tạo một Child Theme, thêm code vào functions.php, tùy chỉnh template, nhưng CSS của bạn trong Child Theme lại không có tác dụng? Đây là một vấn đề khá phổ biến mà nhiều người mới bắt đầu với WordPress và Child Theme thường gặp phải. Đừng lo lắng, chúng ta sẽ cùng tìm hiểu nguyên nhân và cách khắc phục triệt để.

Vì Sao `functions.php` và Template Chạy, Nhưng CSS Lại Không?

Khi bạn tùy chỉnh một Child Theme, bạn có thể thấy rằng các thay đổi trong file functions.php (ví dụ: thêm chức năng mới, thay đổi hành vi mặc định của WordPress) hoặc các file template PHP (như single.php, page.php bạn sao chép từ Parent Theme) đều hoạt động bình thường. Tuy nhiên, CSS của bạn trong file style.css của Child Theme lại không được áp dụng.

Nguyên nhân chính dẫn đến tình trạng này thường nằm ở cách WordPress tải các file stylesheet (CSS) của bạn. WordPress có một quy trình cụ thể để nhúng các file CSS và JavaScript vào website, và nếu bạn không tuân thủ quy trình đó, các file của bạn sẽ không được tải hoặc không được tải đúng thứ tự.

Cụ thể, vấn đề thường gặp là:

File style.css của Child Theme không được nhúng (enqueue) đúng cách: Mặc dù bạn có file style.css trong Child Theme, WordPress cần được “cho biết” để tải nó lên.
Thứ tự tải CSS bị sai: CSS của Parent Theme được tải sau CSS của Child Theme. Khi đó, các quy tắc của Parent Theme sẽ ghi đè lên các quy tắc của Child Theme, làm cho các tùy chỉnh của bạn không có tác dụng. CSS của Child Theme cần được tải SAU CSS của Parent Theme để có thể ghi đè các quy tắc.

Hướng Dẫn Nhúng CSS Đúng Cách vào `functions.php`

Để khắc phục, bạn cần sử dụng hàm wp_enqueue_style() trong file functions.php của Child Theme để đảm bảo cả CSS của Parent Theme và Child Theme đều được tải lên đúng thứ tự.

Mở file functions.php của Child Theme của bạn và đảm bảo nó có nội dung như sau:

PHP

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

// Hàm để nhúng (enqueue) các stylesheet và script
function ten_ham_cua_ban_enqueue_assets() {
    // 1. Nhúng stylesheet của Parent Theme
    // 'ten_handle_parent_style' là TÊN BIẾN (có thể đặt tùy ý, nhưng nên rõ ràng và duy nhất)
    wp_enqueue_style(
        'ten_handle_parent_style', // Tên duy nhất (handle) cho stylesheet của Parent Theme
        get_template_directory_uri() . '/style.css' // ĐƯỜNG DẪN ĐẾN FILE style.css CỦA PARENT THEME (CẦN ĐÚNG)
    );

    // 2. Nhúng stylesheet của Child Theme
    // 'ten_handle_child_style' là TÊN BIẾN (có thể đặt tùy ý, nhưng nên rõ ràng và duy nhất)
    wp_enqueue_style(
        'ten_handle_child_style', // Tên duy nhất (handle) cho stylesheet của Child Theme
        get_stylesheet_directory_uri() . '/style.css', // ĐƯỜNG DẪN ĐẾN FILE style.css CỦA CHILD THEME (CẦN ĐÚNG)
        array('ten_handle_parent_style'), // Mảng các handle mà stylesheet này phụ thuộc. Đảm bảo 'ten_handle_parent_style' tải TRƯỚC. (CẦN ĐÚNG)
        wp_get_theme()->get('Version') // Phiên bản của theme để tránh cache. (CẦN ĐÚNG)
    );

    // Bạn có thể thêm các script hoặc stylesheet khác tại đây
    // wp_enqueue_script(...)
    // wp_enqueue_style(...)
}
// Hook hàm vào hành động 'wp_enqueue_scripts'
add_action( 'wp_enqueue_scripts', 'ten_ham_cua_ban_enqueue_assets' );

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

?>

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

// Hàm để nhúng (enqueue) các stylesheet và script
function ten_ham_cua_ban_enqueue_assets() {
    // 1. Nhúng stylesheet của Parent Theme
    // 'ten_handle_parent_style' là TÊN BIẾN (có thể đặt tùy ý, nhưng nên rõ ràng và duy nhất)
    wp_enqueue_style(
        'ten_handle_parent_style', // Tên duy nhất (handle) cho stylesheet của Parent Theme
        get_template_directory_uri() . '/style.css' // ĐƯỜNG DẪN ĐẾN FILE style.css CỦA PARENT THEME (CẦN ĐÚNG)
    );

    // 2. Nhúng stylesheet của Child Theme
    // 'ten_handle_child_style' là TÊN BIẾN (có thể đặt tùy ý, nhưng nên rõ ràng và duy nhất)
    wp_enqueue_style(
        'ten_handle_child_style', // Tên duy nhất (handle) cho stylesheet của Child Theme
        get_stylesheet_directory_uri() . '/style.css', // ĐƯỜNG DẪN ĐẾN FILE style.css CỦA CHILD THEME (CẦN ĐÚNG)
        array('ten_handle_parent_style'), // Mảng các handle mà stylesheet này phụ thuộc. Đảm bảo 'ten_handle_parent_style' tải TRƯỚC. (CẦN ĐÚNG)
        wp_get_theme()->get('Version') // Phiên bản của theme để tránh cache. (CẦN ĐÚNG)
    );

    // Bạn có thể thêm các script hoặc stylesheet khác tại đây
    // wp_enqueue_script(...)
    // wp_enqueue_style(...)
}
// Hook hàm vào hành động 'wp_enqueue_scripts'
add_action( 'wp_enqueue_scripts', 'ten_ham_cua_ban_enqueue_assets' );

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

?>

Giải Thích Chi Tiết Các Tham Số:

Trong hàm wp_enqueue_style( $handle, $src, $deps, $ver, $media ):

$handle (BẮT BUỘC): TÊN BIẾN – Có thể đặt TÙY Ý.
- Đây là một chuỗi duy nhất (gọi là “handle”) mà bạn dùng để nhận diện stylesheet của mình.
- Ví dụ: 'ten_handle_parent_style', 'ten_handle_child_style'.
- Hãy đặt tên rõ ràng, dễ nhớ và đảm bảo nó không trùng với bất kỳ handle nào khác trên website của bạn (do theme hoặc plugin khác sử dụng).
$src (BẮT BUỘC): ĐƯỜNG DẪN ĐẾN FILE CSS – CẦN ĐÚNG.
- Đây là URL hoặc đường dẫn tuyệt đối đến file CSS mà bạn muốn nhúng.
- Sử dụng các hàm WordPress để lấy đường dẫn chính xác:
  - get_template_directory_uri() . '/style.css': Lấy đường dẫn đến file style.css của Parent Theme.
  - get_stylesheet_directory_uri() . '/style.css': Lấy đường dẫn đến file style.css của Child Theme.
$deps (TÙY CHỌN): Mảng các handle phụ thuộc – CẦN ĐÚNG (khi cần).
- Đây là một mảng các handle (tên biến) của các stylesheet khác mà stylesheet hiện tại phụ thuộc vào.
- Quan trọng nhất ở đây: Bằng cách thêm array('ten_handle_parent_style') vào tham số $deps khi nhúng CSS của Child Theme, bạn “ra lệnh” cho WordPress rằng CSS của Child Theme chỉ được tải sau khi CSS của Parent Theme đã được tải. Điều này đảm bảo các quy tắc của Child Theme sẽ ghi đè lên Parent Theme nếu có xung đột.
$ver (TÙY CHỌN): Phiên bản của stylesheet – CẦN ĐÚNG (khuyến nghị).
- Bạn có thể đặt một chuỗi phiên bản (ví dụ: '1.0') hoặc sử dụng wp_get_theme()->get('Version') để tự động lấy phiên bản của theme.
- Việc này rất hữu ích để tránh vấn đề bộ nhớ đệm (cache). Khi bạn thay đổi code CSS và tăng phiên bản (ví dụ từ 1.0.0 lên 1.0.1), trình duyệt của người dùng sẽ buộc phải tải lại file CSS mới thay vì sử dụng bản cũ đã lưu trong cache.
$media (TÙY CHỌN): Loại media áp dụng – CẦN ĐÚNG (khi cần).
- Xác định loại media mà stylesheet này áp dụng (ví dụ: 'all', 'screen', 'print'). Mặc định là 'all'.

Ví dụ tôi chúng css child theme tôi đang dùng:

// --- Bắt đầu: Nhúng Stylesheet của Theme và Font Awesome ---
/**
 * Đúng cách nhúng stylesheet của parent theme, child theme
 */
function my_blocksy_child_theme_enqueue_assets() {
    // Nhúng stylesheet của parent theme trước
    wp_enqueue_style(
        'blocksy-parent-style', // Handle duy nhất
        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
        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' );
// --- Kết thúc: Nhúng Stylesheet của Theme ------

// --- Bắt đầu: Nhúng Stylesheet của Theme và Font Awesome ---
/**
 * Đúng cách nhúng stylesheet của parent theme, child theme
 */
function my_blocksy_child_theme_enqueue_assets() {
    // Nhúng stylesheet của parent theme trước
    wp_enqueue_style(
        'blocksy-parent-style', // Handle duy nhất
        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
        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' );
// --- Kết thúc: Nhúng Stylesheet của Theme ------

Những Lưu Ý Quan Trọng Khi Thực Hiện:

Chỉ sử dụng functions.php của Child Theme: Bạn không được phép sao chép toàn bộ functions.php của Parent Theme vào Child Theme. Nếu làm vậy, nó sẽ tạo ra lỗi và xung đột. File functions.php của Child Theme chỉ nên chứa các đoạn code mới hoặc các hàm bạn muốn thêm/ghi đè.
Luôn đặt code trong functions.php: Mọi logic PHP để nhúng CSS hoặc thêm chức năng mới đều phải được đặt trong file functions.php của Child Theme.
Xóa Cache: Sau khi thực hiện bất kỳ thay đổi nào trong functions.php hoặc style.css của Child Theme, hãy luôn luôn xóa mọi loại cache trên website của bạn:
- Cache của Plugin (LiteSpeed Cache, WP Super Cache, WP Rocket, v.v.).
- Cache của Hosting (FastCGI Cache, Nginx Cache, Varnish, v.v. – thường được quản lý trong bảng điều khiển hosting).
- Cache của CDN (Cloudflare, Kinsta CDN, SiteGround CDN, v.v.).
- Cache trình duyệt (thử dùng trình duyệt ẩn danh hoặc xóa cache của trình duyệt bạn đang dùng). Đây là nguyên nhân hàng đầu khiến bạn không thấy thay đổi dù đã chỉnh sửa đúng.
Kiểm tra trong trình duyệt: Sau khi xóa cache và tải lại trang, hãy sử dụng Developer Tools (F12 trên hầu hết các trình duyệt) để kiểm tra xem file style.css của Child Theme đã được tải lên chưa và nó có nằm sau file style.css của Parent Theme không. Bạn có thể tìm thấy nó trong tab “Network” hoặc “Sources”.
Cú pháp CSS: Đảm bảo rằng cú pháp CSS của bạn trong style.css của Child Theme là chính xác. Một lỗi nhỏ trong cú pháp cũng có thể khiến toàn bộ hoặc một phần CSS không hoạt động.
Độ đặc hiệu của CSS (CSS Specificity): Đôi khi CSS của bạn không hoạt động không phải vì nó không được tải, mà vì quy tắc CSS của Parent Theme có độ đặc hiệu (specificity) cao hơn. Trong trường hợp này, bạn có thể cần tăng độ đặc hiệu của quy tắc trong Child Theme (ví dụ: sử dụng selector cụ thể hơn hoặc thêm !important – tuy nhiên, !important nên là giải pháp cuối cùng).

Bằng cách tuân thủ các bước và lưu ý trên, bạn sẽ dễ dàng khắc phục được vấn đề CSS không hoạt động ở Child Theme và tự tin tùy chỉnh website WordPress của mình một cách an toàn và hiệu quả!

Xem thêm: Hướng Dẫn Tự Tạo Child Theme (Theme Con) cho WordPress