Cài Child Theme WordPress

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

Child Theme trong WordPress là gì?

Child Theme (chủ đề con) trong WordPress là một chủ đề kế thừa chức năng và giao diện của một chủ đề khác, được gọi là Parent Theme (chủ đề cha). Child Theme cho phép bạn tùy chỉnh và sửa đổi giao diện trang web WordPress của bạn mà không cần trực tiếp chỉnh sửa các tập tin của Parent Theme. Điều này rất quan trọng vì khi bạn cập nhật Parent Theme, tất cả các thay đổi bạn đã thực hiện trực tiếp trên nó sẽ bị mất. Child Theme giúp bạn bảo toàn những tùy chỉnh này.

Hãy tưởng tượng bạn có một ngôi nhà (Parent Theme). Bạn muốn sơn lại tường, thay đổi đèn, hoặc thêm một vài chi tiết trang trí. Thay vì sửa đổi trực tiếp cấu trúc của ngôi nhà, bạn xây dựng một phần mở rộng (Child Theme). Khi ngôi nhà chính được sửa chữa hoặc nâng cấp, phần mở rộng của bạn vẫn giữ nguyên, không bị ảnh hưởng.

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

Có rất nhiều lý do tại sao bạn nên sử dụng Child Theme khi tùy chỉnh giao diện WordPress. Dưới đây là một số lý do quan trọng nhất:

Bảo toàn các tùy chỉnh: Khi bạn cập nhật Parent Theme, tất cả các thay đổi bạn đã thực hiện trực tiếp trên nó sẽ bị mất. Child Theme giúp bạn bảo toàn những tùy chỉnh này một cách an toàn.
Dễ dàng cập nhật Parent Theme: Bạn có thể cập nhật Parent Theme lên phiên bản mới nhất mà không lo lắng về việc mất các tùy chỉnh của mình.
Dễ dàng quản lý các tùy chỉnh: Child Theme giúp bạn quản lý các tùy chỉnh của mình một cách có tổ chức và dễ dàng hơn. Tất cả các thay đổi bạn thực hiện đều được lưu trữ trong Child Theme, giúp bạn dễ dàng theo dõi và hoàn tác.
Dễ dàng thay đổi lại giao diện: Nếu bạn không thích các tùy chỉnh bạn đã thực hiện, bạn có thể dễ dàng tắt Child Theme và quay lại giao diện mặc định của Parent Theme.
Giữ cho Parent Theme luôn nguyên vẹn: Việc không chỉnh sửa trực tiếp Parent Theme giúp bạn dễ dàng sửa lỗi nếu có sự cố xảy ra.

Cách tạo Child Theme

Việc tạo Child Theme khá đơn giản. Bạn có thể làm điều này theo cách thủ công hoặc sử dụng plugin. Dưới đây là hướng dẫn chi tiết:

Tạo Child Theme thủ công

Tạo một thư mục mới: Tạo một thư mục mới trong thư mục wp-content/themes/ của WordPress. Tên thư mục nên liên quan đến Parent Theme, ví dụ: twentyseventeen-child nếu Parent Theme là Twenty Seventeen.
Tạo file style.css: Trong thư mục vừa tạo, tạo một file có tên style.css. File này sẽ chứa thông tin về Child Theme và các CSS tùy chỉnh của bạn.
Thêm thông tin header vào style.css: Mở file style.css và thêm đoạn code sau, thay đổi thông tin cho phù hợp:
```
      /*
      Theme Name:   Twenty Seventeen Child
      Theme URI:    http://example.com/twentyseventeen-child/
      Description:  Twenty Seventeen Child Theme
      Author:       Your Name
      Author URI:   http://example.com
      Template:     twentyseventeen
      Version:      1.0.0
      */

      @import url("../twentyseventeen/style.css");
    
```
- Theme Name: Tên của Child Theme.
- Theme URI: URL của Child Theme (tùy chọn).
- Description: Mô tả về Child Theme.
- Author: Tên tác giả.
- Author URI: URL của tác giả (tùy chọn).
- Template: Quan trọng! Tên thư mục của Parent Theme. Ví dụ: twentyseventeen.
- Version: Phiên bản của Child Theme.
Dòng @import url("../twentyseventeen/style.css"); là quan trọng. Nó sẽ nhập tất cả các kiểu dáng (CSS) từ Parent Theme vào Child Theme.
Tạo file functions.php (tùy chọn): Nếu bạn muốn thêm các chức năng (functions) cho Child Theme, hãy tạo một file có tên functions.php trong thư mục Child Theme. Trong file này, bạn có thể thêm các hàm PHP để mở rộng hoặc sửa đổi chức năng của Parent Theme. Lưu ý rằng bạn cần enqueue (nạp) stylesheet của parent theme một cách chính xác. Ví dụ:
```
    <?php
    add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
    function my_theme_enqueue_styles() {
        $parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen 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')
        );
    }
    ?>
    
```
Đoạn code trên sẽ nạp stylesheet của Parent Theme và Child Theme một cách chính xác. Thay đổi 'parent-style' và 'twentyfifteen-style' nếu bạn sử dụng một Parent Theme khác.
Kích hoạt Child Theme: Đăng nhập vào trang quản trị WordPress, đi đến Appearance > Themes và kích hoạt Child Theme bạn vừa tạo.

Tạo Child Theme bằng Plugin

Có rất nhiều plugin WordPress miễn phí giúp bạn tạo Child Theme một cách dễ dàng. Một số plugin phổ biến bao gồm:

Child Theme Configurator
One Click Child Theme
Child Theme Wizard

Sau khi cài đặt và kích hoạt một trong các plugin này, bạn có thể tạo Child Theme chỉ bằng một vài cú nhấp chuột. Plugin thường sẽ tự động tạo thư mục và file style.css cần thiết. Hãy làm theo hướng dẫn của plugin bạn chọn.

Tùy chỉnh Child Theme

Sau khi tạo và kích hoạt Child Theme, bạn có thể bắt đầu tùy chỉnh giao diện trang web của mình. Bạn có thể thực hiện các thay đổi sau:

CSS: Thêm các quy tắc CSS vào file style.css của Child Theme để thay đổi kiểu dáng của các phần tử trên trang web. Bạn có thể ghi đè (override) các quy tắc CSS của Parent Theme.
Template Files: Sao chép các template file (ví dụ: header.php, footer.php, single.php) từ Parent Theme vào Child Theme và chỉnh sửa chúng. Khi WordPress tìm một template file, nó sẽ ưu tiên sử dụng file trong Child Theme trước.
Functions: Thêm các hàm PHP vào file functions.php của Child Theme để mở rộng hoặc sửa đổi chức năng của Parent Theme.

Ví dụ, để thay đổi màu nền của trang web thành màu xanh dương, bạn có thể thêm đoạn code sau vào file style.css của Child Theme:


  body {
    background-color: lightblue;
  }

Để chỉnh sửa header, bạn sao chép file header.php từ Parent Theme vào Child Theme, sau đó chỉnh sửa file header.php trong Child Theme. Lưu ý rằng việc sao chép quá nhiều template file có thể làm cho Child Theme của bạn trở nên phức tạp hơn. Chỉ sao chép những file bạn thực sự cần chỉnh sửa.

Ví dụ cụ thể: Thay đổi Footer của Twenty Twenty-Three bằng Child Theme

Giả sử bạn muốn thay đổi dòng chữ ở footer của theme Twenty Twenty-Three. Bạn sẽ thực hiện các bước sau:

Tạo một Child Theme cho Twenty Twenty-Three. (Sử dụng hướng dẫn ở trên). Đảm bảo file `style.css` của bạn có `Template: twentytwentythree`
Sao chép file `templates/footer.html` từ thư mục `twentytwentythree` vào thư mục Child Theme của bạn, giữ nguyên cấu trúc thư mục (`twentytwentythree-child/templates/footer.html`).
Mở file `twentytwentythree-child/templates/footer.html` và chỉnh sửa dòng chữ footer theo ý muốn. Ví dụ, bạn có thể thay đổi dòng chữ “Proudly powered by WordPress” thành “© 2023 Bản quyền thuộc về [Tên của bạn]”.
Lưu file `footer.html`.
Kiểm tra trang web của bạn. Bạn sẽ thấy footer đã được thay đổi.

Lưu ý quan trọng khi sử dụng Child Theme

Khi sử dụng Child Theme, hãy lưu ý những điều sau:

Luôn kiểm tra tính tương thích: Sau khi cập nhật Parent Theme, hãy kiểm tra xem Child Theme của bạn có còn hoạt động bình thường không. Đôi khi, các thay đổi trong Parent Theme có thể gây ra xung đột với Child Theme.
Chỉ tùy chỉnh những gì cần thiết: Tránh sao chép quá nhiều template file từ Parent Theme vào Child Theme. Chỉ sao chép những file bạn thực sự cần chỉnh sửa.
Sử dụng Child Theme một cách có tổ chức: Đặt tên file và thư mục một cách rõ ràng và có ý nghĩa để dễ dàng quản lý các tùy chỉnh của bạn.
Sao lưu Child Theme: Thường xuyên sao lưu Child Theme của bạn để tránh mất dữ liệu trong trường hợp có sự cố xảy ra.
Tìm hiểu về WordPress Theme Development: Nếu bạn muốn tùy chỉnh Child Theme một cách chuyên sâu hơn, hãy tìm hiểu về WordPress Theme Development.

Kết luận

Child Theme là một công cụ mạnh mẽ giúp bạn tùy chỉnh giao diện WordPress một cách an toàn và dễ dàng. Bằng cách sử dụng Child Theme, bạn có thể bảo toàn các tùy chỉnh của mình, dễ dàng cập nhật Parent Theme và quản lý các thay đổi của mình một cách có tổ chức. Hãy sử dụng Child Theme mỗi khi bạn muốn tùy chỉnh giao diện WordPress để đảm bảo rằng trang web của bạn luôn hoạt động ổn định và được bảo vệ.

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