Child Theme là gì? 6 bước cài đặt Child Theme chi tiết nhất

Child Theme là gì? Liệu bạn đã nắm rõ khái niệm này chưa? Về cơ bản, Child Theme là một theme kế thừa chức năng và giao diện của một theme khác. Cụ thể như thế nào? Hãy cùng THEME WP tìm hiểu qua bài viết sau đây nhé.

Giới thiệu về Child Theme

Nếu bạn chưa hiểu Child Theme là gì, thì Child Theme có nghĩa là một theme được kế thừa chức năng, giao diện của một theme khác (Parent Theme). Các Child Theme được dùng để thay đổi các theme hiện có đồng thời duy trì thiết kế và code. Child Theme giúp cho các lập trình viên website tạo ra nhiều thiết kế mới kế thừa chức năng của parent theme. Bên cạnh đó, Child Theme còn giúp tùy chỉnh Parent Theme nhưng vẫn không tác động vào các file chính. Vì vậy, nó giúp bảo vệ những điều chỉnh này trong quá trình bạn cập nhật Parent Theme.

child theme wordpress

Child Theme là gì?

Child Theme được sử dụng để:

  • Tùy chỉnh cả CSS và Javascript.
  • Thêm hoặc điều chỉnh các hàm PHP trong file functions.php.

2 loại Child Theme trên WordPress

Sau khi tìm hiểu Child Theme là gì, thì hãy cùng chúng tôi nghiên cứu xem, có bao nhiêu loại Child Theme nhé. Về kỹ thuật, chỉ có một loại Child Theme. Đó chính là phần mở rộng kế thừa các thiết kế và chức năng của Parent Theme. Tuy vậy, có đến 2 kiểu sử dụng Child Theme khác nhau, đó là:

Child Theme để tùy chỉnh

Child Theme này thường chỉ được dùng để điều chỉnh các chức năng bổ sung của theme, giúp các thay đổi khi cập nhật sẽ không bị mất.

Child Theme dùng để sale

Child Theme được dùng để sale thường sẽ thay đổi giao diện cơ bản của Parent Theme. Ví dụ điển hình của Child Theme để sale đó là Divi Theme.

Ưu điểm, nhược điểm của Child Theme là gì?

Ưu điểm của Child Theme là gì?

  • Có thể dễ dàng thay đổi các tùy chỉnh: Sử dụng Child Theme giúp cho bạn có thể dễ dàng thay đổi, chỉnh sửa trên theme mà không cần phải lo lắng về việc làm ảnh hưởng tới theme gốc.
  • An toàn hơn mỗi khi cập nhật: Vì không làm ảnh hưởng trực tiếp tới theme gốc, nên Child Theme đảm bảo an toàn hơn. Bạn sẽ không phải lo lắng việc bị mất đi các tùy biến mỗi khi cập nhật phiên bản mới. Các chỉnh sửa về giao diện ở trên Child Theme vẫn sẽ được giữ lại. Đồng thời, Parent Theme vẫn được cập nhật các phiên bản mới nhất.
  • Dễ dàng khôi phục, gỡ lỗi: Bạn có thể dễ dàng sửa chữa hoặc thậm chí xóa các tùy chỉnh giao diện không ưng ý khi sử dụng Child Theme.
  • Nắm rõ các thay đổi trong file theme: Sử dụng Child Theme còn giúp bạn theo dõi mọi thay đổi trên các file con của Theme. Điều này sẽ giúp cho bạn dễ dàng hơn trong việc theo dõi và quản lý.

Nhược điểm của Child Theme là gì?

Ngoài các ưu điểm kể trên, Child Theme cũng tồn tại vài nhược điểm. Đó là:

  • Mất nhiều thời gian để tìm hiểu các frame của WordPress và các bộ lọc.
  • Mất nhiều thời gian hơn trong việc truy cập dữ liệu: Khi sử dụng Child Theme, WordPress sẽ phải đọc và truy cập cả Child Theme và Parent Theme. Vì vậy, thời gian để website hiển thị dữ liệu ra giao diện sẽ lâu hơn, ảnh hưởng không tốt tới tốc độ truy cập trang web.

6 bước tạo Child Theme trên WordPress

Child theme là gì

Tạo directory cho child theme

Đầu tiên, bạn hãy tạo một directory mới trên màn hình và đặt cho nó bất kỳ tên nào, chẳng hạn như:

parentname-child

Domain name

Tạo file style.css

Đối với hàm, bạn chỉ cần một file là:

“style.css”

Tạo một file mới có tên style.css trong folder mà bạn đã tạo trước đó, mở file và dán đoạn code sau:

/*

 Theme Name: twentytwentyone Child

 Theme URI: https://bloggerpilot.com/wordpress-child-theme/

 Description: twentytwentyone Child Theme

 Author: Jochen Gererstorfer

 Author URI: https://bloggerpilot.com/

 Template: twentytwentyone

 Version: 1.0.0


Text Domain: twentytwentyone

*/


/**

 * Add your custom CSS here

 */

Gần như mọi thông tin bạn đều được tự do lựa chọn. Nhưng, lưu ý:  “Template:” phải chứa tên directory của child theme, nếu không thì nó sẽ không hoạt động.

Tạo file functions.php

Nếu bạn muốn tạo Child Theme,bạn cũng sẽ cần một file functions.php. Bạn có thể tạo file này trong directory mà bạn đã tạo trước đó.

<?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

 */

Nếu như Parent Theme dùng một hàm bắt đầu bằng “get_stylesheet” để load style, thì bạn cũng phải tải style.css của nó lên.

Tạo screenshot.php

Tạo file Screenshot theme sau đó lưu nó trong cùng directory với:

screenshot.png

Kích thước của screenshot là 1200px x 900px.

Tiến hành cài đặt Child Theme

Bạn có hai cách để cài đặt theme của mình như sau:

Upload Child Theme qua FTP

Kết nối với không gian của trang web bằng công cụ FTP, sau đó tạo một subdirectory mới với tên mà bạn muốn trong directory.

/ wp-content / themes /

Tiếp theo, upload các file đã tạo trước đó lên directory này.

Upload Child Theme trong WordPress Admin

Bạn có thể đặt thư mục mà bạn đã tạo trước đó với 3 file trong kho ZIP archive và tải nó lên trong WordPress Admin. Thay đổi sang menu Design > Themes > Theme, sau đó click “Upload Theme”. Cuối cùng, chọn file .zip của mình và click “Install now”.

Kích hoạt Child theme mới

Tại bước này, bạn phải kích hoạt template mới của mình. Thay đổi thành Design > Theme sau đó click vào “Activate”. Như vậy là bạn đã hoàn thành việc tạo Child Theme

Sự khác nhau giữa Theme và Child Theme là gì?

cách tạo child theme

Child Theme là gì?

Một Theme WordPress gồm tất cả các file PHP, CSS, JS cần thiết cho hoạt động của một trang web. Nhưng, một Child Theme thì luôn cần Parent Theme và một file duy nhất là style.css. Bởi vì bản thân Child Theme không thể tự hoạt động riêng được.

Xem Thêm: Theme Flatsome là gì? Vì sao bạn nên mua Theme Flatsome?

Như vậy là chúng ta đã cùng nhau tìm hiểu xong về khái niệm Child Theme là gì. Cách cài đặt Child Theme như thế nào? Hãy để lại bình luận của bạn phía dưới bài viết để THEME WP có thể giúp bạn giải đáp các thắc mắc nhé. Hẹn gặp lại các bạn trong những bài viết tiếp theo

5/5 - (2 bình chọn)
facebook-icon
zalo-icon
zalo-icon