Không thể phủ nhận những ưu điểm của child theme so với khi chỉ sử dụng theme mẹ. Chính vì thế nên khi mua theme chúng ta hay nhận được cả 2 bản theme giúp bạn dễ dàng cài đặt cho website của mình. Tuy nhiên, đôi khi chúng ta chỉ nhận được mỗi theme mẹ. Vậy làm thế nào để tạo child theme?
Ưu điểm của sử dụng child theme
Khi sử dụng child theme, bạn có thể thoải mái update theme chính lên một phiên bản mới hơn để cập nhật thêm các tính năng, bản vá lỗi của nhà cung cấp mà không sợ bị đè file mất tùy chỉnh CSS, code …
Do vậy, khi sử dụng theme có sẵn thì mình khuyên các bạn nên sử dụng child theme nhé!
Child theme hoạt động như thế nào?
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ẳng hạn như nếu childtheme chỉ có một file style.css thì nó sẽ load file này để chạy, còn các file khác child theme không có thì nó sẽ tự động load từ theme mẹ để chạy.
Riêng file functions.php của theme mẹ mẹ sẽ không bị thay đổi dù bạn có khai báo thêm file functions.php trong thư mục child theme, mà các code bên trong file functions.php của child theme sẽ tiến hành load thêm song hành với các code bên trong file functions.php của theme mẹ.
Hướng dẫn cách tạo child theme của một theme bất kỳ
Hãy đăng nhập vào quản trị tệp tin của website, vào đường dẫn wp-content/themes và tạo một thư mục mới với tên bất kỳ, tuy nhiên, mình khuyến nghị bạn sử dụng tên dạng A-child để dễ dàng phân biệt nhé!
Tạo tệp style.css
Trong thư mục này, các bạn tạo một tệp tin style.css với đoạn mã sau:
/* Theme Name: Startbox Child Theme Theme URI: https: //ngankeonho.com Description: Day la child theme cua Jannah Author: Ngan keo nho Author URI: https://ngankeonho.com Template: jannah Version: 0.1 */
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 Jannah là theme mẹ.
Kế tiếp, bạn chèn thêm đoạn này vào ngay bên dưới:
@import url("../jannah/style.css");
Bạn thay jannah 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.
Như vậy bây giờ mình có file style.css ở thư mục theme con như sau:
/*
Theme Name: Startbox Child Theme
Theme URI: https: //ngankeonho.com
Description: Day la child theme cua Jannah
Author: Ngan keo nho
Author URI: https://ngankeonho.com
Template: jannah
Version: 0.1
*/
@import url("../jannah/style.css");
Tạo tệp functions.php
Tạo thêm tệp functions.php cùng cấp với tệp style.css với nội dung như sau:
<?php
/**
* Enqueue child styles.
*/
function j0e_enqueue_styles() {
wp_enqueue_style( 'child-theme', get_stylesheet_directory_uri() . '/style.css', array(), 100 );
}
add_action( 'wp_enqueue_scripts', 'j0e_enqueue_styles' );
/**
* Add custom functions here
*/
Và kể từ đây, bạn cần chỉnh sửa function gì thì ghi vào bên dưới cùng là được.
Thêm ảnh cho child theme
Mặc định bạn không tạo ảnh thì child theme vẫn hoạt động bình thường, tuy nhiên nếu thêm ảnh vào thì nó sẽ chuyên nghiệp và đẹp hơn. ( Child theme không kế thừa ảnh đại diện của theme gốc)
Bạn chỉ việc tạo một hình ảnh bất kỳ up lên thư mục child theme với tên screenshot.png là mặc định nó sẽ nhận. Tuy nhiên kích thước khuyến nghị là 880 x 660px hoặc 387 x 290px.
Việc còn lại là chỉ việc vào quản trị website => giao diện và kích hoạt child theme lên mà thôi.
Làm thế nào nếu đã lỡ sử dụng theme mẹ mà không phải là child theme?
Nếu bạn lỡ có quên không sử dụng child theme từ ban đầu mà muốn cập nhật phiên bản mới của theme mẹ thì có thể cân nhắc đến phương án như sau:
Bước 1: Hãy backup lại toàn bộ code và database để đảm bảo an toàn. Và nhớ hãy tải hẳn xuống máy tính cho chắc ăn nhé!
Bước 2: Tải về plugin Customizer Export/Import , sau đó export file dạng .dat về máy để lưu các tùy chỉnh.
Bước 3: Tạo mới Child theme như hướng dẫn ở bên trên hoặc up child theme có sẵn của nhà cung cấp lên.
Bước 4: Copy lại đoạn mã trong file style.css và functions.php của theme mẹ rồi dán vào child theme. Hãy đảm bảo rằng bạn copy đúng cấu trúc để tránh lỗi web.
Đến đây là bạn đã đảm bảo được 2 file style và function cũ được lưu lại vào child theme. Tuy nhiên, vẫn còn một số file khác nữa có thể bị thay đổi mà bạn chưa copy lại được.
Việc bây giờ của bạn là tải về phần mềm https://winmerge.org/ nếu bạn sử dụng window hoặc https://kaleidoscope.app/ nếu bạn sử dụng Mac. Phần mềm này giúp bạn so sánh giữa 2 phiên bản theme cũ và theme mới cập nhật lên được thay đổi hay thêm vào hay không.
Lúc này bạn cần so sánh bản theme mới nhất và theme cũ có gì khác biệt. Sau khi nhận biết được rồi thì bạn cần copy lại file đó vào child theme mới tạo rồi lưu lại.
Bước 5: Truy cập vào quản trị website và kích hoạt child theme này lên nhé! Nếu vẫn chưa đủ các tùy chỉnh thì bạn cần import thêm file custom lên để chúng nhận đủ.
Bước 6: Sau khi hoàn tất sử dụng child theme, bạn hoàn toàn có thể update theme mẹ thoải mái nhé!
Trên đây là toàn bộ các hướng dẫn về childtheme, nếu có thắc mắc gì, các bạn hãy để lại bình luận bên dưới nhé!
