Hướng dẫn tạo child theme WordPress

Nếu bạn đang sử dụng WordPress chắc hẳn đã nghe thấy từ khóa child theme WordPress, vậy cách tạo child theme WordPress như thế nào và làm sao để cài đặt child theme WordPress ? Bài viết này sẽ giúp các bạn làm điều đó.

Child theme wordpress là gì ?

Child Theme là một theme con được tạo ra và được kế thừa toàn bộ các đặc điểm, chức năng của theme cha (Parent Theme).

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

Trong quá trình sử dụng theme WordPress khi bạn muốn chỉnh sửa, thay đổi các chức năng để phù hợp với yêu cầu công việc là tất yếu. Điều này vô cùng nguy hiểm nếu sau này bạn cập nhật theme đó lên phiên bản mới nhất vì các thay đổi sẽ bị mất đi do các file phiên bản mới ghi đè lên.

Do đó, việc sử dụng Child Theme sẽ giúp bạn thoải mái tùy chỉnh code và CSS mà không sợ bị mất khi update phiên bản mới vì bạn chỉ cần update theme mẹ, còn child theme thì vẫn giữ nguyên.

>> Tham khảo: Hướng dẫn hạ cấp (Downgrade) WordPress xuống phiên bản thấp hơn

Child Theme hoạt động ra sao?

Khi bạn tạo một child theme, thì nếu bạn copy một file nào đó ở thư mục theme mẹ qua bên thư mục của child theme thì nó sẽ tiến hành thực thi file đó ở thư mục child theme, nếu thư mục child theme thiếu file nào thì nó sẽ thực thi file bên thư mục theme mẹ.

Chú ý: file style.css và file functions.php sẽ được thực thi song song, có nghĩa là muốn viết thêm các function bạn có thể viết trong child theme.

Hướng dẫn tạo child theme WordPress

Bạn có thể tạo chủ đề con theo cách thủ công bằng cách tạo thư mục và tệp cần thiết. Hoặc bạn có thể tạo một chủ đề con bằng cách sử dụng một plugin.

Phương pháp thủ công rất hữu ích vì nó sẽ giúp bạn làm quen với các tệp bạn cần làm việc sau này trong hướng dẫn. Phương pháp plugin có thể được sử dụng nếu bạn gặp khó khăn khi tạo các tệp đó.

Tạo child theme bằng cách thủ công

Ví dụ: Bạn có 1 theme wordpress là Twenty Twenty-One và bạn cần tạo 1 child theme là twentytwentyone-child. Cách làm như sau:

Hãy vào thư mục wp-content/themes tạo thêm một thư mục mới với tên twentytwentyone-child, (khuyến khích bạn nên đặt tên giống với thư mục theme mẹ và thêm chữ -child ở đằng sau), như ảnh:

Sau đó tạo một file style.css với nội dung giống như bên dưới:

Theme Name: Twentytwentyone Child Theme
Theme URI: https://webchuyennghiep247.com
Description: Day la child theme cua Twentytwentyone
Author: Webchuyennghiep247
Author URI: https://webchuyennghiep247.com
Template: twentytwentyone
Version: 1.0.0

Bạn có thể đổi các thông tin thành của bạn, nhưng lưu ý ở phần Template, ở đó là bạn ghi tên thư mục của theme mẹ để nó hiểu đâu là mẹ của nó, như trong ảnh thì là mình có thư mục twentytwentyone là theme mẹ. (chú ý tên theme mẹ có phân biệt chữ hoa chữ thường)

Kế tiếp, tạo file tên function.php và dán đoạn code phía dưới để import css từ theme mẹ.

/* enqueue scripts and style from parent theme */

function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-two-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');

Bạn thay twentytwentyone thành tên thư mục theme mẹ, mục đích là để nó sử dụng các CSS từ theme mẹ, cũng như có thể tiến hành ghi đè CSS mà bạn tùy chỉnh lên CSS có sẵn.

Lưu ý: Trước đây, chủ đề mẹ được nhập bằng lệnh @import trong style.css. Chúng tôi không khuyến khích phương pháp này nữa vì nó sẽ làm tăng lượng thời gian cần thiết để tải các bảng kiểu.

Việc còn lại là chỉ việc vào Appearance -> Themes và kích hoạt child theme lên mà thôi.

Cách tạo child theme bằng plugin

Nếu bạn không muốn làm cách trên, thì vẫn còn một giải pháp khác đó là sử dụng plugin.

Có khá nhiều free plugin như: One-Click Child Theme, Child Theme Configurator, Child Theme Creator by Orbisius….

Trong bài này tôi sẽ sử dụng: Child Theme Configurator

Bước 1: Cài đặt và Active plugin Child Theme Configurator

Bước 2: Vào Tool » Child Theme

Ở tab Parent/Child
1. Select an action: Bạn tick chọn CREAT a new child theme
2. Select a Parent Theme: Bạn sẽ chọn chủ đề Twenty Twenty-One.

Sau đó bấm Analyze plugin sẽ tự động tạo chủ đề con theo Parent Theme mà bạn chọn

Tiếp theo, bạn nên để tất cả cài đặt mặc định.

Khi bạn tạo chủ đề con theo cách thủ công, bạn sẽ mất các menu và tiện ích con của chủ đề mẹ. Trình cấu hình chủ đề con có thể sao chép chúng từ chủ đề mẹ sang chủ đề con. Đánh dấu vào ô Phần 8 nếu bạn muốn thực hiện việc này.

Cuối cùng, nhấp vào nút để tạo chủ đề con mới của bạn. Plugin sẽ tạo một thư mục cho các chủ đề con của bạn và thêm các tệp style.css và functions.php mà bạn sẽ sử dụng để tùy chỉnh chủ đề sau này.

Bước 3: Quay lại Apperance » Theme và kích hoạt child theme là xong.

Quy tắc sử dụng Child Theme cần nên nhớ

• Không được xóa thư mục theme mẹ.
• Muốn tùy biến file .php nào, hãy copy nó từ thư mục theme mẹ sang child theme và sửa ở child theme.
• Khi viết CSS, luôn viết dưới dòng @import ở child theme.
• Trường hợp bạn cần tuỳ biến các file PHP mà không thuộc template của theme thì hãy require nó vào file functions.php như bên theme mẹ đã làm. Bạn xem file functions.php của theme mẹ để xem nó require bằng cách nào rồi làm y vậy.

Cách active theme child xong sẽ không bị mất định dạng

Trường hợp hay gặp nhất là khi trước đó bạn ko biết hoặc quên chưa tạo child theme chỉ chỉnh sửa trên theme cha, và khi active child theme lên sẽ bị mất định dạng và css của web cũ. Sau đây ad sẽ hướng dẫn bạn cách sau khi tạo lại child theme làm sao để active theme child để không bị mất định dạng.

Hầu hết các theme hiện nay đã có phần backup option (sao lưu các cài đặt để sử dụng cho website khác sử dụng cùng theme)

Ad lấy ví dụ cho theme quốc dân Flatsome:

Bước 1: Các bạn vào Flatsome –> Advanced –> Backup/Import, chọn vào nút Backup Options, nhấn OK để tiến hành backup options, sau đó copy đoạn mã trong phần transfer theme options data, và lưu vào 1 file notepad để dùng cho bước sau

Bước 2: Các bạn vào giao diện, chọn Child thêm vừa tạo và kích hoạt lên. Sau khi kích hoạt lên, các bạn sẽ thấy web bị mất các định dạng và CSS. Đừng lo, các bạn hãy vào lại Flatsome-> Advanced -> Backup/Import, Paste đoạn mã lúc nãy vào phần Transfer theme options Data (Nhớ xóa đoạn mã hiện tại trong phần này). Sau đó chọn Import Options, và Save lại để tận hưởng thành quả nhé.

Chúc các bạn thành công !