Child Theme WordPress là gì? Cách tạo Child Theme WordPress trong 5 phút

Bạn muốn thay đổi thiết kế và chức năng của theme WordPress mà bạn đang sử dụng nhưng lại sợ rằng việc làm đó có thể gây ra các sự cố không mong muốn và có thể hỏng theme gốc của bạn?

Đừng lo!

Sử dụng một Child Theme WordPress (theme con) là cách tuyệt vời để chỉnh sửa và kiểm tra theme của bạn mà không cần lo lắng về những rủi ro liên quan. Vì bạn sẽ sửa đổi Child Theme chứ không phải sửa theme gốc, bạn sẽ không mất bất kỳ tùy chỉnh nào khi cập nhật parent theme (theme cha).

Nếu bạn gặp phải bất kỳ vấn đề gì sau khi thực hiện các thay đổi, bạn luôn có thể quay lại theme gốc bằng cách xóa Child Theme WordPress mà bạn đã tạo.

Trong bài viết này, HostingRaft sẽ giúp bạn hiểu rõ Child Theme WordPress là gì và cách để tạo Child Theme WordPress một cách đơn giản, nhanh chóng và không gặp bất cứ lỗi gì. Ok, hãy cùng bắt đầu!

Nội dung chính

Child Theme WordPress là gì?

Child Theme WordPress – như tên gọi của nó – là một theme kế thừa các chức năng từ một theme gốc (hay còn gọi là WordPress Parent Theme – theme cha). Việc chỉnh sửa theme gốc có thể rất rủi ro vì bất kỳ tùy chỉnh nào cũng có thể tạo ra các thay đổi so với ban đầu. Do đó, Child Theme WordPress sẽ là một lựa chọn an toàn để thực hiện các thay đổi cho theme WordPress của bạn.

Child Theme WordPress tồn tại trong một thư mục khác với theme cha, và Child Theme WordPress phụ thuộc vào các chức năng của theme cha. Khi cài đặt một Child Theme WordPress trong WordPress Dashboard, bạn sẽ thấy rằng nó được kết nối với theme cha.

Nếu bạn sử dụng một Child Theme WordPress trên website của bạn, thì WordPress sẽ kiểm tra các file của Child Theme WordPress trước. Nếu nó không được thay đổi, WordPress sẽ thực thi các file của theme cha.

Điều quan trọng cần nhớ là Child Theme WordPress không thể hoạt động độc lập. Nó phải được cài đặt bên cạnh theme cha.

Child Theme WordPress (theme con) khác gì với Parent Theme (theme cha / theme gốc)?

Parent Theme là một theme gốc hoàn chỉnh, bao gồm các tệp tin template, stylesheet, CSS, JavaScript và các tài nguyên khác cần thiết để chạy một website WordPress. Mặt khác, Child Theme WordPress được kế thừa các chức năng của theme cha.

Parent Theme:

Độc lập với các theme khác.
Chứa tất cả các tệp tin và tài nguyên.
Bắt buộc phải có.
Xem chi tiết: Theme WordPress là gì?

Child Theme:

Child Theme WordPress phụ thuộc vào theme cha và kế thừa chức năng của theme cha.
Một Child Theme WordPress thường chỉ có hai file là: style.css và functions.php.
Child Theme WordPress chỉ cần thiết khi bạn muốn tùy chỉnh giao diện và chức năng của website.

Khi nào nên sử dụng Child Theme WordPress?

Bạn có thể sử dụng Child Theme WordPress khi:

Bạn muốn tùy chỉnh các template hoặc style của theme mà không muốn làm thay đổi source của theme gốc.
Bạn muốn kiểm tra các tính năng hoặc tùy chỉnh mới mà không gây rủi ro.
Bạn đang phát triển một theme mới và muốn sử dụng một theme hiện có để làm điểm khởi đầu.
Bạn muốn tạo một theme tùy chỉnh cho một khách hàng hoặc dự án cụ thể và sử dụng một theme hiện có làm điểm khởi đầu.

Xem thêm:

Cách chỉnh sửa Theme WordPress giống demo.

Hướng dẫn sử dụng theme Newspaper.

Cần chuẩn bị gì trước khi tạo Child Theme WordPress?

Việc đầu tiên và cũng là quan trọng nhất mà bạn cần làm trước khi tạo một Child Theme WordPress là hãy tạo một bản sao lưu của website. Trong trường hợp xảy ra bất kỳ sự cố nào, bạn nên có một bản sao lưu để khôi phục website của bạn.

Việc thứ hai mà bạn nên làm là tạo một môi trường staging, thực hiện các thay đổi trong môi trường staging, kiểm thử các thay đổi xem có xảy ra các vấn đề lỗi gì không, sau đó mới áp dụng các thay đổi cho website chính của bạn. Tạo một website WordPress staging cho phép bạn kiểm tra các thay đổi mà không ảnh hưởng đến website trực tiếp của bạn.

Cách tạo Child Theme WordPress thủ công.

Tạo một Child Theme WordPress chỉ mất vài bước. Trong ví dụ dưới đây, chúng tôi sẽ tạo một Child Theme WordPress của WordPress theme mặc định Twenty Fifteen và thực hiện một số sửa đổi để hiểu rõ hơn về Child Theme WordPress.

Để tạo một Child Theme WordPress, chúng tôi sẽ làm theo 5 bước đơn giản sau:

Tạo một thư mục Child Theme.
Tạo một Stylesheet cho Child Theme.
Enqueue các Stylesheet của theme cha và Child Theme.
Chỉnh sửa tệp tin style.css của Child Theme.
Chỉnh sửa một tệp Template của single.php.

Ok, bây giờ hãy đi vào chi tiết từng bước.

Bước 1: Tạo thư mục Child Theme.

Đầu tiên, tạo một thư mục riêng để đặt tất cả các tệp tin cần thiết cho Child Theme trên máy local của bạn.

Tại sao cần làm trên máy local?

Vì khi bạn đã hoàn thành tất cả các tệp tin cần thiết, bạn có thể upload cả thư mục đó lên website của bạn bằng cách sử dụng công nghệ FTP (File Transfer Protocol).

Thứ hai, đặt tên cho thư mục mới tạo này giống với theme cha của bạn và thêm từ ‘child‘ nối vào sau tên của theme. Ví dụ, tôi đang sử dụng theme Twenty Twenty-Two trên website WordPress của tôi. Nếu tôi muốn tạo một Child Theme WordPress cho Twenty Twenty-Two, tôi sẽ đặt tên thư mục là Twenty-Twenty-Two-child. Với ý nghĩa rằng thư mục này là một thư mục Child Theme WordPress của theme Twenty-Two.

Cach tao Child Theme WordPress thu cong - Buoc 1: Tao thu muc Child Theme

Bước 2: Tạo file CSS cho Child Theme (child theme style css).

Tiếp theo, bạn sẽ cần tạo tệp tin ‘style.css‘ bên trong thư mục Child Theme (tệp tin CSS sẽ chứa tất cả các quy tắc và khai báo về style cho Child Theme).

Để làm cho stylesheet hoạt động đúng cách, bạn cần thêm các header comments ở phía trên cùng của tệp tin CSS của bạn. Các header comments chứa thông tin cơ bản về Child Theme, bao gồm việc nó là một theme con của một theme cha cụ thể.

Hai yếu tố quan trọng nhất trong các header comments là Theme Name và Template directory. Các theme thường được đặt trong thư mục wp-content/theme.

Mở Notepad, sao chép và dán đoạn code dưới đây vào tệp tin CSS của bạn (nhớ lưu tệp tin đó với đuôi là .css).

/*
Theme Name: Twenty Twenty Two Child
Theme URI: https://wordpress.org/themes/twentytwentytwo/
Author: the WordPress team
Author URI: https://wordpress.org/
Template: twentytwentytwo
Description: Child Theme of Twenty Twenty-Two
Version: 1.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, pink, purple, white, yellow, dark, light, two-columns, left-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentytwentytwo-child
This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.
*/

Bây giờ, điều hướng đến WordPress Admin Dashboard → Appearance → Theme, bạn sẽ thấy rằng Twenty Fifteen Child đã xuất hiện. Bạn có thể áp dụng theme đó cho website của bạn.

Vì style.css có mặt trong thư mục Child Theme WordPress, WordPress sẽ chạy style.css đó và không chạy style.css của theme cha. Mọi tệp khác, như index.php, page.php và functions.php sẽ được tải từ theme cha.

Vì chúng tôi không có bất kỳ style nào được định nghĩa trong style.css của Child Theme WordPress, chúng tôi sẽ phải nhập các style. Phương pháp tốt nhất được đề xuất trên WordPress codex là enqueue các style sheet bằng cách sử dụng tệp functions.php.

Bước 3: Enqueue các Stylesheet của Parent Theme và Child Theme.

Không giống như các file khác, nguyên lý hoạt động của file functions.php trong child theme là: Trước tiên, WordPress sẽ chạy file functions.php của child theme và khởi chạy các hàm bên trong đó trước, sau đó mới thực thi các hàm bên trong file functions.php của parent theme.

Như đã đề cập, nhập các style sheet là cách tốt nhất để sắp xếp chúng thông qua tệp tin functions.php.

Tạo tệp functions.php trong thư mục Child Theme WordPress của bạn và thêm đoạn code sau.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Điều này sẽ gọi tệp style sheet ‘style.css‘ từ tệp theme cha. Nếu bạn muốn chỉnh sửa bất cứ điều gì trong các style sheet, bạn có thể thêm các quy tắc đó vào style.css của Child Theme WordPress.

Bước 4: Chỉnh sửa tệp style.css của Child Theme.

Trong Child Theme WordPress, bạn có thể dễ dàng chỉnh sửa các style sheet bằng cách định nghĩa các quy tắc trong style.css trong thư mục Child Theme WordPress. Ví dụ, nếu chúng tôi muốn thay đổi màu của liên kết, tất cả những gì chúng tôi cần làm là thêm đoạn code sau vào style.css của Child Theme WordPress.

a {
color: #D54E21;
text-decoration: none;
}

Điều xảy ra ở đây là style.css của Child Theme WordPress cho thẻ <a>, ghi đè lên style.css của theme cha, phần còn lại vẫn không đổi.

Bước 5: Chỉnh sửa một tệp Template của single.php.

Chúng ta có thể dễ dàng chỉnh sửa các tệp template riêng lẻ trong Child Theme WordPress. Ví dụ, nếu chúng tôi muốn chỉnh sửa single.php, chúng tôi phải sao chép tệp đó từ thư mục theme cha và dán nó vào thư mục Child Theme WordPress.

Giả sử chúng tôi muốn loại bỏ phần bình luận khỏi các trang bài đăng đơn. Sau khi sao chép tệp vào thư mục Child Theme WordPress của chúng tôi, chúng tôi có thể chỉnh sửa nó và xóa phần bình luận sau.

// If comments are open or we have at least one comment, load up the comment template.
if ( comments_open() || get_comments_number() ) :
comments_template();
endif;

Điều xảy ra ở đây là WordPress kiểm tra thư mục Child Theme WordPress cho single.php. Nếu nó tồn tại trong thư mục, nó sẽ tải nó từ đó. Nếu không, nó sẽ quay lại thư mục theme cha.

Giống như vậy, chúng ta có thể chỉnh sửa bất kỳ tệp template nào trong theme của chúng ta. Cách tiếp cận này thường tốt vì nó giữ nguyên theme cha và cập nhật theme cha mà không mất tùy chỉnh của chúng ta.

Cách tạo Child Theme WordPress bằng Plugin

Nếu bạn không phải là một nhà phát triển và không có nền tảng kỹ thuật hoặc không muốn sử dụng phương pháp thủ công, thì bạn có thể tạo một Child Theme WordPress bằng một plugin. Có nhiều plugin có sẵn trong thư viện WordPress để tạo Child Theme WordPress.

Dưới đây là 3 plugin Child Theme WordPress miễn phí phổ biến nhất:

Child Theme Wizard.
WPS Child Theme Generator.
WP Child Theme Generator.

Trong bài hướng dẫn này, tôi sẽ sử dụng plugin Child Theme Wizard để tạo Child Theme WordPress.

Để bắt đầu:

Đi đến WordPress Dashboard > Plugin > Add New.
Tìm kiếm plugin tên là Child Theme Wizard trên thanh tìm kiếm bên phải.
Nhấp vào nút Install.
Sau khi cài đặt, nhấp vào nút Activate để kích hoạt plugin.
Sau khi plugin được kích hoạt thành công, bạn sẽ thấy tùy chọn Child Theme Wizard dưới tùy chọn Tools trên thanh quản trị WP bên trái.
Bây giờ, bạn phải chọn theme cha. Để làm điều đó, bạn cần thêm Title, Description và URL của Child Theme WordPress và nhấp vào Create Child Theme.
Ok, xong rồi, bây giờ đi đến Appearance > Theme và xem Child Theme WordPress mới tạo của bạn.

Cách kiểm tra Child Theme WordPress sau khi cài đặt.

Dù bạn tạo Child Theme WordPress thủ công hay bằng plugin, bạn có thể xem Child Theme WordPress của bạn bằng cách điều hướng đến Appearance > Theme. Từ đây, bạn có thể xem Child Theme WordPress đã cài đặt. Bạn có thể Activate và Delete theme theo ý muốn.

Lời kết.

Hy vọng bạn đã hiểu Child Theme WordPress là gì và nó khác gì so với theme cha. Trong bài viết này, HostingRaft cũng đã giải thích các lợi ích của việc sử dụng Child Theme WordPress, các điều kiện cần thiết phải chuẩn bị trước khi tạo child theme. Và cuối cùng, HostingRaft đã trình bày các bước chi tiết để tạo Child Theme WordPress theo 2 cách thủ công và bằng plugin.

Nếu bạn vẫn còn bất kỳ câu hỏi nào, hãy để lại comment ở bên dưới, chúng tôi sẽ trả lời bạn trong thời gian sớm nhất. Chúc bạn thành công!

Nếu bạn thấy bài viết này là hữu ích, hãy chia sẻ để nhiều người biết đến hơn.