Child theme là gì? Hướng dẫn cài child theme chi tiết

  Child theme   ( chủ đề con ) cho phép bạn thay đổi các khía cạnh nhỏ của giao diện trang web nhưng vẫn giữ được giao diện và chức năng của...

 Child theme  (chủ đề con) cho phép bạn thay đổi các khía cạnh nhỏ của giao diện trang web nhưng vẫn giữ được giao diện và chức năng của chủ đề. Để hiểu về Child theme hoạt động như thế nào, điều quan trọng đầu tiên là phải hiểu mối quan hệ giữa chủ đề parent và Child theme . Vậy child theme là gì? Chúng ta cùng tìm hiểu qua bài viết bên dưới nhé.

Child theme là gì? Hướng dẫn cài child theme chi tiết

Parent Theme là gì?

Chủ đề mẹ (Parent Theme) là một chủ đề hoàn chỉnh bao gồm tất cả các tệp và nội dung mẫu WordPress bắt buộc để chủ đề hoạt động. Tất cả các chủ đề – trừ chủ đề con – đều được coi là chủ đề mẹ.

Child theme là gì?

Như đã chỉ ra trong phần tổng quan, chủ đề con kế thừa giao diện của chủ đề mẹ và tất cả các chức năng của nó, nhưng có thể được sử dụng để sửa đổi bất kỳ phần nào của chủ đề. Bằng cách này, các tùy chỉnh được giữ riêng biệt với các tệp của chủ đề chính. Sử dụng chủ đề con cho phép bạn nâng cấp chủ đề mẹ mà không ảnh hưởng đến các tùy chỉnh bạn đã thực hiện cho trang web của mình.

Tính năng của Child theme:

• Làm cho các sửa đổi của bạn có thể di động và có thể nhân rộng,
• Giữ tùy chỉnh tách biệt với các chức năng chủ đề mẹ,
• Cho phép các chủ đề mẹ được cập nhật mà không phá hủy các sửa đổi của bạn,
• Cho phép bạn tận dụng nỗ lực và thử nghiệm được đưa vào chủ đề mẹ,
• Tiết kiệm thời gian phát triển vì bạn không tạo lại bánh xe,
• Là một cách tuyệt vời để bắt đầu tìm hiểu về phát triển chủ đề.

Cách tạo Child theme

1. Tạo một thư mục chủ đề con

Đầu tiên, tạo một thư mục mới trong thư mục chủ đề của bạn, nằm tại wp-content/themes.

tạo thư mục child theme

Thư mục cần có tên. Cách tốt nhất là đặt tên cho chủ đề con giống với chủ đề gốc nhưng có thêm -child vào cuối. Ví dụ: nếu bạn đang tạo một chủ đề con là twentytwenty, thì thư mục sẽ được đặt tên là twentytwenty-child.

2. Tạo 1 file stylesheet tên là style.css

Tiếp theo, bạn sẽ cần tạo tệp stylesheet (bảng định kiểu) có tên style.css, tệp này sẽ chứa tất cả các quy tắc và khai báo CSS kiểm soát giao diện chủ đề của bạn. Biểu định kiểu của bạn phải chứa chú thích tiêu đề bắt buộc bên dưới ở đầu tệp. Điều này cho WordPress biết thông tin cơ bản về chủ đề, bao gồm thực tế rằng nó là một chủ đề con với một chủ đề mẹ cụ thể.

1 2 3 4 5 6 7 8 9 10 11 12 13

/* Theme Name: Twenty Nineteen Theme URI:    http://example.com/twenty-fifteen-child/ Description:  Twenty Nineteen Child Theme Author: the WordPress team Author URI:   http://example.com Template: twentynineteen Version:      1.0.0 License:      GNU General Public License v2 or later License URI:  http://www.gnu.org/licenses/gpl-2.0.html Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twentynineteen */

Các thông tin sau là bắt buộc:

Tên chủ đề – cần phải là duy nhất cho chủ đề của bạn

Mẫu – tên của thư mục chủ đề mẹ. Chủ đề chính trong ví dụ của chúng tôi là chủ đề Twenty Twenty, vì vậy Mẫu sẽ là twentytwenty. Bạn có thể đang làm việc với một chủ đề khác, vì vậy hãy điều chỉnh cho phù hợp.

Bước cuối cùng là xếp hàng các biểu định kiểu chủ đề mẹ và con, nếu cần.

Trước đây, phương pháp phổ biến là nhập biểu định kiểu chủ đề mẹ bằng cách sử dụng @import bên trong style.css. Đây không còn là phương pháp được khuyến nghị nữa, vì nó làm tăng thời gian tải các biểu định kiểu. Thêm vào đó, bảng định kiểu mẹ có thể được tải hai lần.

Thêm thông tin còn lại nếu có. Tệp chủ đề con được yêu cầu duy nhất là style.css, nhưng functions.php là cần thiết để sắp xếp các kiểu một cách chính xác (bên dưới).

1 2 3 4 5 6 7

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parenthandle' ), wp_get_theme()->get('Version') // this only works if you have Version in the style header ); }

Nếu chủ đề mẹ tải kiểu của nó bằng một hàm bắt đầu bằng get_stylesheet, chẳng hạn như get_stylesheet_directory() và get_stylesheet_directory_uri(), thì chủ đề con cần tải cả biểu định kiểu mẹ và con. Đảm bảo sử dụng cùng một tên xử lý giống như tên cha mẹ cho các kiểu cha mẹ.

1 2 3 4 5 6 7 8 9 10 11 12 13

add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' ); function my_theme_enqueue_styles() { $parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme. $theme = wp_get_theme(); wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css', array(),  // if the parent theme code has a dependency, copy it to here $theme->parent()->get('Version') ); wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( $parenthandle ), $theme->get('Version') // this only works if you have Version in the style header ); }

3. Active child theme lên

Cuối cùng bạn chỉ việc vào Appearance -> Themes và kích hoạt twentytwenty Child  lên mà thôi.