Child Theme WordPress là gì?

2 tháng ago, Hướng dẫn người mới, Views

Child Theme WordPress Là Gì? Khám Phá Sức Mạnh Của Chủ Đề Con

Trong thế giới rộng lớn của WordPress, theme đóng vai trò quan trọng trong việc định hình giao diện và chức năng của website. Tuy nhiên, việc tùy chỉnh trực tiếp theme gốc (parent theme) có thể dẫn đến nhiều vấn đề khi theme được cập nhật. Đây là lúc Child Theme (Chủ Đề Con) xuất hiện, mang đến một giải pháp an toàn và hiệu quả cho việc tùy biến WordPress.

Bài viết này sẽ giúp bạn hiểu rõ Child Theme WordPress là gì, tại sao bạn nên sử dụng nó, và cách tạo một Child Theme đơn giản.

Định Nghĩa Child Theme WordPress

Child Theme là một theme WordPress kế thừa giao diện và chức năng của một theme khác, được gọi là Parent Theme (Chủ Đề Gốc). Child Theme hoạt động như một lớp tùy chỉnh nằm trên Parent Theme, cho phép bạn thay đổi code và thiết kế mà không ảnh hưởng trực tiếp đến các file của Parent Theme.

Nói một cách đơn giản, hãy tưởng tượng Parent Theme là ngôi nhà của bạn, và Child Theme là những vật dụng trang trí bạn thêm vào để cá nhân hóa không gian sống của mình. Bạn có thể thay đổi màu sơn, thêm tranh ảnh, hoặc bố trí lại đồ đạc mà không cần phải xây lại toàn bộ ngôi nhà.

Tại Sao Nên Sử Dụng Child Theme?

Sử dụng Child Theme mang lại rất nhiều lợi ích, đặc biệt khi bạn muốn tùy chỉnh theme WordPress của mình. Dưới đây là một số lý do quan trọng nhất:

An toàn khi cập nhật theme gốc: Đây là lợi ích lớn nhất. Khi Parent Theme nhận được các bản cập nhật (ví dụ: sửa lỗi, cải thiện bảo mật, thêm tính năng mới), tất cả các thay đổi bạn thực hiện trên Child Theme sẽ không bị ghi đè. Điều này giúp bạn tránh mất công tùy chỉnh lại website sau mỗi lần cập nhật theme.
Dễ dàng quản lý các tùy chỉnh: Child Theme giữ cho các tùy chỉnh của bạn được tách biệt khỏi theme gốc. Điều này giúp bạn dễ dàng theo dõi, chỉnh sửa, và loại bỏ các thay đổi mà không ảnh hưởng đến code gốc của theme.
Khả năng tùy biến linh hoạt: Child Theme cho phép bạn tùy biến gần như mọi khía cạnh của theme gốc, từ giao diện, bố cục, đến chức năng. Bạn có thể thêm CSS tùy chỉnh, sửa đổi template, thêm các hàm PHP, và nhiều hơn nữa.
Không cần kiến thức code chuyên sâu: Mặc dù kiến thức về CSS và PHP là một lợi thế, bạn vẫn có thể tạo và tùy chỉnh Child Theme với một số kiến thức cơ bản về WordPress. Có rất nhiều tài liệu và hướng dẫn trực tuyến có thể giúp bạn.

Cách Tạo Child Theme WordPress Đơn Giản

Việc tạo Child Theme khá đơn giản và không đòi hỏi kỹ năng lập trình phức tạp. Dưới đây là các bước cơ bản:

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

Truy cập vào thư mục wp-content/themes/ trên hosting của bạn thông qua FTP hoặc trình quản lý file. Tạo một thư mục mới cho Child Theme. Tên thư mục nên tuân theo quy tắc: parent-theme-name-child. Ví dụ, nếu Parent Theme của bạn là “Astra”, thì thư mục Child Theme có thể là “astra-child”.

Bước 2: Tạo File style.css

Trong thư mục Child Theme vừa tạo, hãy tạo một file mới có tên style.css. Đây là file quan trọng nhất của Child Theme, chứa thông tin về theme và các CSS tùy chỉnh của bạn. Thêm đoạn code sau vào file style.css:


/*
 Theme Name:   Astra Child
 Theme URI:    https://example.com/astra-child/
 Description:  Child theme for the Astra theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     astra
 Version:      1.0.0
*/

/*
   Add your styles here
*/

Lưu ý:

Thay thế “Astra Child” bằng tên Child Theme của bạn.
Thay thế “https://example.com/astra-child/” bằng URL website của bạn (nếu có).
Thay thế “Description”, “Author”, “Author URI” và “Version” bằng thông tin phù hợp.
Quan trọng: Dòng Template: astra phải chính xác và trùng với tên thư mục của Parent Theme (trong trường hợp này là “astra”).

Bước 3: Tạo File functions.php (Tùy Chọn)

Trong thư mục Child Theme, bạn có thể tạo một file functions.php để thêm các hàm PHP tùy chỉnh. Để đảm bảo Child Theme kế thừa CSS của Parent Theme một cách chính xác, hãy thêm đoạn code sau vào file functions.php:


<?php
function my_theme_enqueue_styles() {

    $parent_style = 'astra-style'; // Tên style handle của Parent Theme. Kiểm tra trong file style.css của 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', 'my_theme_enqueue_styles' );

Lưu ý:

Thay thế astra-style bằng tên style handle của Parent Theme. Bạn có thể tìm thấy tên này trong file style.css của Parent Theme. Thông thường, nó là tên của theme.

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

Đăng nhập vào trang quản trị WordPress của bạn, đi đến Appearance > Themes. Bạn sẽ thấy Child Theme mới của mình xuất hiện trong danh sách các theme. Nhấn nút Activate để kích hoạt Child Theme.

Tùy Chỉnh Child Theme

Sau khi kích hoạt Child Theme, bạn có thể bắt đầu tùy chỉnh nó bằng cách thêm CSS vào file style.css hoặc thêm các hàm PHP vào file functions.php.

Ví dụ: Thay đổi màu nền của website

Để thay đổi màu nền của website, hãy thêm đoạn code sau vào file style.css:


body {
  background-color: #f0f0f0;
}

Lưu file style.css và tải lại trang web của bạn. Bạn sẽ thấy màu nền của website đã thay đổi thành màu xám nhạt (#f0f0f0).

Ví dụ: Thêm chức năng vào Child Theme

Để thêm một chức năng đơn giản, ví dụ như hiển thị thông báo “Hello World!” ở cuối mỗi bài viết, hãy thêm đoạn code sau vào file functions.php:


<?php
function add_hello_world_to_posts( $content ) {
  if ( is_singular( 'post' ) ) {
    $content .= '<p>Hello World!</p>';
  }
  return $content;
}
add_filter( 'the_content', 'add_hello_world_to_posts' );

Lưu file functions.php và xem một bài viết trên website của bạn. Bạn sẽ thấy thông báo “Hello World!” xuất hiện ở cuối bài viết.

Khi Nào Không Nên Sử Dụng Child Theme?

Mặc dù Child Theme là một công cụ mạnh mẽ, không phải lúc nào nó cũng là giải pháp tốt nhất. Dưới đây là một số trường hợp bạn có thể không cần sử dụng Child Theme:

Khi bạn chỉ muốn thực hiện những thay đổi nhỏ về CSS: Nếu bạn chỉ muốn thay đổi một vài thuộc tính CSS nhỏ, bạn có thể sử dụng Custom CSS trong Customizer của WordPress (Appearance > Customize > Additional CSS). Cách này đơn giản và nhanh chóng hơn so với việc tạo Child Theme.
Khi bạn sử dụng theme builder: Nếu bạn sử dụng một theme builder mạnh mẽ (ví dụ: Elementor, Divi, Beaver Builder), bạn có thể tùy chỉnh giao diện và chức năng của website một cách trực quan bằng các công cụ của theme builder, mà không cần sử dụng Child Theme.
Khi bạn sử dụng plugin tùy chỉnh: Nếu bạn muốn thêm các chức năng phức tạp vào website, việc sử dụng plugin có thể là một lựa chọn tốt hơn so với việc thêm code vào Child Theme. Plugin thường được thiết kế để dễ dàng quản lý và cập nhật.

Kết Luận

Child Theme WordPress là một công cụ vô cùng hữu ích cho việc tùy chỉnh và quản lý theme WordPress một cách an toàn và hiệu quả. Bằng cách sử dụng Child Theme, bạn có thể thoải mái thử nghiệm và thay đổi giao diện và chức năng của website mà không lo lắng về việc mất các tùy chỉnh khi cập nhật theme gốc. Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về Child Theme và cách sử dụng nó để nâng cao trải nghiệm WordPress của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa