Đáp ứng nhu cầu của độc giả Tự Học MMO về làm thế nào để kiếm tiền online hiệu quả, mình muốn giới thiệu tới bạn các khóa học kiếm tiền online uy tínchất lượng nhất hiện nay tại KTcity.
học kiếm tiền online
Bạn có thể tham khảo nhanh một số khóa học MMO và Digital Marketing chất lượng rất tốt giúp bạn nhanh chóng có nền tảng kiến thức, tự tin chiến 1 mảng MMO phù hợp nhất:

Chào các bạn,

Mình thấy nhiều blogger hay gặp tình trạng chỉnh sửa, thay đổi trực tiếp trên theme và đến khi update theme lại phải chỉnh sửa lại.

Điều này rất mất thời gian cũng như rất bất tiện.

Child theme – một khái niệm mà nhiều bạn blogger khi sử dụng website WordPress thường bỏ qua hoặc khá bỡ ngỡ.

Mục đích của bài viết giúp bạn hiểu rõ child theme là gì ? đồng thời hướng dẫn tạo và sử dụng child theme.

// Bài viết tham khảo các kiến thức từ Internet.

1. Child theme là gì ?

child theme là gì hướng dẫn tạo child theme

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

Một theme sẽ trở thành parent theme khi nó có 1 child theme được tạo ra.

Child theme không khác gì một theme thông thường, có thể chứa file ảnh, JavaScript, CSS, template…

Mục đích sử dụng của child theme: hỗ trợ tùy biến theme mẹ mà không cần trực tiếp thay đổi trong theme mẹ.

Điểm khác biệt là child theme làm việc phụ thuộc vào parent theme của nó. Nếu không có parent theme, child theme sẽ không làm việc và không thể active. 

Bạn có thể thoải mái điều chỉnh các thông số, chức năng, CSS hoặc JavaScript mà không cần tác động tới code trong theme mẹ.

Bất cứ thay đổi nào bạn tạo ra trong child theme cũng sẽ không bị mất đi khi bạn cập nhật theme mẹ.

2. Child theme gồm các thành phần nào ?

Child theme bắt buộc phải có các thành phần:

  • File functions.phpviết thêm các hàm PHP.
  • File style.cssviết thêm custom CSS code.
  • Thư mục child theme.

3. Cách hoạt động của child theme

Child theme làm việc theo cấp độ của file.

hướng dẫn tạo child theme wordpress

Khi một file được thực thi trong quá trình tải theme, WordPress sẽ kiểm tra child theme trước.

Nếu file đó có mặt trong child theme, nội dung của nó sẽ được thực thi.

Nếu không có gì, nó sẽ sử dụng file từ theme mẹ.

Ngoại trừ duy nhất 1 file không hoạt động giống nguyên tắc đó là file functions.php.

Các code bên trong file functions.php của child theme sẽ tiến hành load song song với các code bên trong file functions.php của theme mẹ.

Khi bạn tạo một child theme, nếu bạn copy một file nào đó ở thư mục theme mẹ qua thư mục của child theme thì WordPress 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ẹ.

Ví dụ: Nếu mình copy file single.php từ thư mục theme mẹ sang child theme và có chỉnh sửa file này trong child theme thì WordPress sẽ thực thi file single.php ở thư mục child theme, các file khác nó vẫn thực thi ở thư mục theme mẹ.

Hiểu đơn giản, khi sử dụng child theme, muốn tùy biến file nào thì bạn chỉ cần copy file đó qua thư mục child theme và chỉnh sửa nó.

4. Tại sao nên dùng child theme cho blog/website ?

Khi sử dụng theme, chúng ta thường tiến hành chỉnh sửa trực tiếp lên theme như thay đổi CSS, code bên trong.

Điều này rất nguy hiểm nếu sau này bạn cập nhật theme đó lên phiên bản khác thì tất cả các chỉnh sửa đó sẽ bị mất đi do các file phiên bản khác chép đè lên.

Từ đó sinh ra child theme.

Với child theme, bạn thoải mái chỉnh sửa theme mà không lo mất các tuỳ chỉnh này khi theme được cập nhật.

Tất cả thay đổi, chỉnh sửa sẽ thực hiện trong child theme, khi update phiên bản mới bạn chỉ cần update theme mẹ, còn child theme vẫn giữ nguyên.

Cho nên việc sử dụng child theme có thể nói là bắt buộc chứ không phải việc nên làm.

Tuy nhiên, nếu bạn chỉ chỉnh sửa code CSS nhỏ, như font hoặc color, bạn có thể sửa trực tiếp trong phần custom CSS nếu theme đã hỗ trợ và không cần đến child theme.

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

Việc tạo child theme khá dễ dàng. Có 2 cách giúp bạn tạo child theme:

  • Tạo child theme thủ công
  • Tạo child theme bằng plugin

1. Tạo child theme thủ công

Bạn sử dụng FTP hoặc mở File Manager trong cPanel và tìm đến thư mục:

wp-content/themes

Bạn tạo một thư mục mới ở đây và nên đặt giống tên của theme mẹ với gắn “-child” vào cuối.

Ví dụ: mình đang sử dụng theme news-portal, mình sẽ tạo và đặt tên thư mục là news-portal-child
hướng dẫn tạo child theme
hướng dẫn tạo child theme
Và đây là kết quả:

hướng dẫn tạo child theme
Tạo file style.css

Trong thư mục child theme, bạn tạo một file style.css với nội dung tương tự như bên dưới:

/*
 Theme Name:   Twenty Fifteen Child
 Theme URI:    http://example.com/twenty-fifteen-child/
 Description:  Twenty Fifteen Child Theme
 Author:       John Doe
 Author URI:   http://giamgiahapdan.com
 Template:     twentyfifteen
 Version:      1.0.0
*/

Bạn có thể đổi các thông tin thành của bạn.

Lưu ý: phần Template, bạn cần ghi đúng tên theme mẹ để nó hiểu đâu là mẹ của nó. Nếu thiếu dòng Template thì ngay lập tức giao diện của bạn sẽ không hoạt động được hoặc core của WordPress không nhận dạng được theme mẹ.

hướng dẫn tạo child theme

hướng dẫn tạo child theme

File style.css có phân biệt hoa thường nên bạn phải gõ giống 100%.

Lưu lại file style.css bạn vừa thay đổi.

Như vậy bây giờ mình có file style.css ở thư mục theme con như sau:

/*
 Theme Name: news-portal Child
 Theme URI: http://shareebook.net
 Description: news-portal Child Theme
 Author: Huy Le
 Author URI: http://shareebook.net
 Template: news-portal
 Version: 1.0.0
*/

Lưu ý: Trước đây thì phương pháp giúp đồng nhất file .css giữa theme mẹ và child theme theo Thạch Phạm bằng cách chèn thêm đoạn này vào ngay bên dưới:

@import url("../startbox/style.css");

Tuy nhiên, phương pháp này sẽ tăng thời gian tải file .css từ theme mẹ, do đó hiện nay không dùng nữa.

Tạo file functions.php

Để child theme hoạt động, tương tự bạn tạo file functions.php.

Sau đó, bạn thêm đoạn code sau vào file này và Save lại.

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

Code trên sẽ giúp tải toàn bộ CSS từ theme mẹ.

>> Toàn bộ code trên mình đã lưu vào file này, bạn download về là được => tải tại đây.

Như vậy là trong thư mục child theme đã có 2 files.

Active child theme

Bây giờ, bạn có thể vào Appearance => Themes để activate theme con.

child theme là gì hướng dẫn tạo child theme

2. Tạo child theme sử dụng plugin

Ngoài cách tạo child theme thủ công như trên, bạn có thể sử dụng một số plugin để tạo child theme:

Cách này thích hợp với các bạn mới làm quen với WordPress hay muốn tiết kiệm thời gian.

Cách thức tạo child theme bằng plugin khá đơn giản nên mình bỏ qua.

6. Hướng dẫn chỉnh sửa child theme

Sau khi tạo xong child theme, nếu bạn muốn chỉnh sửa code bạn có thể chỉnh sửa trực tiếp file trong bảng quản trị WordPress:

Appearance => Editor => …

Hoặc bạn có thể mở các file và chỉnh sửa trong File Manager (cPanel) (mình hay dùng cách này)

1. Chỉnh sửa CSS

Khi muốn thay đổi CSS, bạn chỉ cần mở file style.css của child theme và bổ sung code vào bên dưới là được.

2. Chỉnh sửa file PHP

Nếu muốn chỉnh sửa file .php nào của theme mẹ, bạn cần copy nó vào thư mục theme con.

Bạn phải copy nó vào đúng thư mục với đường dẫn file giống cấu trúc đường dẫn trong thư mục theme mẹ.

Ví dụ: mình muốn thay đổi file template-functions.php của theme mẹ. File này nằm trong thư mục: themes/news-portal/inc

Vì vậy, mình phải tạo thư mục inc tương tự bên child theme và copy file template-functions.php vào đó.

  • Đường dẫn của theme mẹ: /public_html/wp-content/themes/news-portal/inc
  • Đường dẫn của theme con: /public_html/wp-content/themes/news-portal-child/inc

child theme là gì hướng dẫn tạo child theme
child theme là gì hướng dẫn tạo child theme

Như vậy là file đã được copy sang child theme và giờ thì bạn có thể chỉnh sửa file này một cách thoải mái.

7. Lưu ý khi sử dụng child theme

  • 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.
  • Bạn cần tạo cấu trúc thư mục và file tương tự như ở Parent Theme. Dựa trên cấu trúc đó, khi bạn sử dụng child theme thì các file trong thư mục child theme sẽ được thực thi. Nếu thư mục child theme không có file đó thì file bên parent Theme sẽ được thực thi.

Lời kết

Child theme là cách tốt nhất giúp bạn giữ được tùy chỉnh bất kỳ theme nào khi cần cập nhật phiên bản mới của theme.

Việc tạo child theme cũng khá dễ và đơn giản, bạn chỉ cần bám sát bài viết này là sẽ có được những kiến thức cơ bản về sử dụng child theme.

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

Subscribe
Nhận thông báo
guest
41 Comments
Mới nhất
Cũ nhất
Inline Feedbacks
View all comments
QUAN
QUAN
2 tháng trước

Cho mình hỏi là dùng theme bản quyền có cần phải tạo child theme không, có bị mất content sau mỗi lần update không ạ

Hung
Hung
5 tháng trước

Cho mình hỏi nếu mình muốn tạo nhiều child theme. vi dụ như mình muốn tạo thêm child theme là tenthemecha-Child1,tenthemecha-Child2, tenthemecha-Child3… Thì mình phải đặt tên thế nào vậy bạn, cảm ơn

Tran
Tran
10 tháng trước

Chào bạn, mình đọc bài review theme generatepress của bạn có phần tải sẵn child theme. như vậy mình có cần làm các thao tác thủ công như trên bài viết này nữa ko nhỉ? Hay chỉ cần kích hoạt là xong?

Bình
Bình
1 năm trước

Chào bác, bác có thể chỉ giúp em cách thêm code js vào child theme wordpress!
Em lấy mẫu từ Codepen.io
https://codepen.io/daniesy/pen/KeCDL

Nó có mục js, giờ em không biết làm sao add vào childtheme vì nó chỉ có 2 files là css và functions!

Cảm ơn bác!

Anh Duy
Anh Duy
1 năm trước

Chào bạn. Mình cần dịch mấy cái tên hiện thị trong wp-admin qua tiếng việt. Mà mấy cái tên đó nằm trong plugin, không biết mình including file plugin để chỉnh sửa file trong child theme được không nhỉ, để tránh plugin update lại mất hết tiếng việt

Bắc
Bắc
1 năm trước

bạn cho mình hỏi là khi update theme mẹ thì các nội dùng của file mình chỉnh sửa nó thay đổi thì sao? vd mình sửa file header.php nhưng khi update phiên bản mới họ tối ưu file header.php của theme mẹ vậy nếu theme vẫn load file cũ đã chỉnh sửa trong theme con thì coi như không dùng được tính năng được update ạ. hay nguyên tắc update là họ update cái khác? mình không rành lắm về code ạ.

Bắc
Bắc
1 năm trước
Phản hồi tới  Huy Lê

ý mình là thường thì họ update theme thì có update file chính như header, foster không.

Trung
Trung
1 năm trước

Chào bạn! Mình làm theo cách tạo file funtion.php của bạn, nhưng sitemap sẽ bị lỗi. Do đó mình đã làm theo cách cũ của Thachpham. Không biết bạn có giải pháp gì không?

Trung
Trung
1 năm trước
Phản hồi tới  Huy Lê

Lỗi có tên như bài viết dưới này. https://wordpress.org/support/topic/sitemap-error-error-on-line-2-at-column-6-xml-declaration-allowed-only-at-the/
Oke mình cảm ơn nhé! Cho mình hỏi dùng child theme có ảnh hưởng đến tốc độ không nhỉ?

HUNG TRAN VAN
HUNG TRAN VAN
1 năm trước

anh cho em hỏi là bây giờ em muốn thêm đoạn code tính toán bmr cho trang webstite về giảm cân thì cho vào file nào ạ. em cho vào file function.php thì nó lên toàn bộ tất cả các trang luôn ạ. vì em cũng không biết code em đi down trên mạng về ạ

HUNG TRAN VAN
HUNG TRAN VAN
1 năm trước
Phản hồi tới  Lê Huy

em chèn thẳng vào bài viết nhưng mà nó không tính toán được. em làm theo cái bài viết này nhưng em chưa làm được. https://calendarscripts.info/bmr-calculator.html. anh có thể chỉ qua cho em là cái file down về tải vào phần nào được không.

HUNG TRAN VAN
HUNG TRAN VAN
1 năm trước
Phản hồi tới  Lê Huy

dạ vâng em cám ơn ạ

Pháp
Pháp
1 năm trước

Cho em hỏi vài câu như sau anh @Lê Huy:

1. Trong đoạn code này, có phải điền đúng như thế này không anh?

/*
Theme Name: news-portal Child => tên theme mẹ + Child
Theme URI: http://shareebook.net => URL của website mình đang xây dựng
Description: news-portal Child Theme => tên theme mẹ + Child Theme
Author: Huy Le => tên tác giả hay tên trang web gì đó
Author URI: http://shareebook.net => URL của website mình đang xây dựng
Template: news-portal => ghi chính xác tên Theme mẹ
Version: 1.0.0 => chỗ này ghi version theo Theme mẹ hay sao anh?
*/

Mong Anh @Lê Huy trả lời giúp em.

Pháp
Pháp
1 năm trước
Phản hồi tới  Lê Huy

Thank Anh@Lê Huy,
Cho em hỏi một vài vấn đề nữa là:

1. Khi em kích hoạt child theme thì em có cần chỉnh sửa gì lại để giao diện giống như ban đầu (khi chưa xài child theme) không anh? (vì em chưa dám kích hoạt để sử dụng ạ)

2. Sao em vào file manager trong cPanel để copy file header.php sang child theme để chỉnh sửa 1 vài thứ (ví dụ chèn lại code cho Google analytics, chèn code sửa lỗi 404 redirect về trang chủ chẳng hạn…). Nhưng vấn đề là em tìm hoài mà không thấy file header.php nó nằm ở đâu cả. Anh biết chỉ giúp em với.

3. Nếu child theme có vấn đề gì đó (chẳng hạn code sai…) không hoạt động được thì mình có thể về lại theme mẹ để dùng rồi build lại child theme không ạ? Nó có tìm ẩn nguy cơ nguy hiểm gì không anh?

Em xin cảm ơn.

Pháp
Pháp
1 năm trước
Phản hồi tới  Lê Huy

Thank anh @Lê Huy,

Tiện thể cho em hỏi 1 vấn đề không liên quan với bài viết ạ,

1. Cái ghi chú cho khách này làm sao vậy ạ?

“Lưu ý:
– Không dùng keyword (từ khóa trong mục ‘Tên của bạn’.
– Bạn nên sử dụng tên thật và Email chính xác (email đang hoạt động).
– Bạn vui lòng bình luận, nhận xét bằng tiếng việt có dấu.
– Để tránh tình trạng spam, bình luận không đúng quy định, chủ đề bài viết nên tất cả các comments đầu tiên sẽ được kiểm duyệt cẩn thận.
Mọi bình luận, nhận xét không đúng quy định sẽ bị xóa đi.
Em muốn làm như thế này mà không biết cách ạ.

2. Cái phân cấp trả lời comment của anh, làm sao để các cấp comment vẫn có cỡ chữ như nhau vậy ạ?. Website site em cũng phân cấp nhưng cấp sau (comment trả lời) lại có cỡ chữ nhỏ hơn khó nhìn lắm ạ.

Website của em đây ạ:
https://chiasegiatot.com/

Anh xem rồi giúp em khắc phục với ạ. Thank Anh nhiều.

Pháp
Pháp
1 năm trước
Phản hồi tới  Lê Huy

Dạ cảm ơn lời khuyên của anh @Lê Huy.
Sự thật là em chủ yếu làm website để bán nông sản ạ. Em chưa đăng sản phẩm.
Phần WordPress chỉ là chia sẻ những gì mình đã tìm hiểu và biết được cho các bạn mới toanh chưa biết gì thôi ạ. Vì vậy, Bài viết em viết rất chi tiết nên nghĩ là các bạn chưa biết gì vẫn có thể hiểu được và làm theo được. Phần này chia sẻ là chính chứ không có ý định Seo top gì cả Anh.

Cảm ơn anh một lần nữa ạ.

Duy Anh
Duy Anh
1 năm trước

Sao mình chỉnh file CSS trong child theme ko được nhỉ, mở F12 thì thấy đường dẫn file css là css/style.css

Duy Anh
Duy Anh
1 năm trước
Phản hồi tới  Lê Huy

Mình chỉnh sửa plugin bằng child-theme thì mình phải thêm đoạn mã như thế nào vào file funtions nhỉ. Thêm vào file funtions ở trong child-theme hay là theme mẹ vậy bạn

Duy Anh
Duy Anh
1 năm trước
Phản hồi tới  Lê Huy

Ý mình là mình không require được file PHP ngoài child-theme. Bạn có thể hướng dẫn mình require file ngoài child-theme được không. Cảm ơn bạn

Tâm Pacific
1 năm trước

site mình load bị chậm mất từ 1 đến 3 giây cho sử dụng Child Template. Có cách nào khắc phục không bạn

Sản xuất thang máng cáp

Hay quá, mình cũng áp dụng thôi.thanks

Le Van Bai
Le Van Bai
1 năm trước

Mình thấy đoạn code trong file style.php của child-theme nằm trong nghi chú /*…*/
vậy làm sao nó hoạt động?

Sabo
Sabo
2 năm trước

Sau khi đọc xong mình đã biết cách tùy chỉnh child theme 😀