Tại sao lại như vậy và nó có đảm bảo gì không ?

Thực chất Child Theme sẽ kế thừa tất cả từ Parent Theme. Do đó, Child Theme luôn đảm bảo rằng tất cả những gì là giao diện và chức năng của Theme gốc luôn luôn còn. Khi thực hiện kích hoặc Child Theme thì tất cả giao diện & chức năng của Parent Theme vẫn như cũ. Đây là một đặc điểm giúp Child Theme mang khả năng nâng cấp cho Parent Theme.

1 ) Như chúng ta đã biết tât cả Theme đều có một Thư mục / Folder riêng của Theme để chứa tất cả mã lập trình và những thứ cần thiết. Do đó, để tạo một Child Theme thì ban đầu chúng ta sẽ tạo một Thư Mục cho Child Theme tại wp-content / themes.

Note : Tất cả các Theme, kể cả những Theme bạn cài đặt do WordPress cung cấp đều nằm trong wp-content / themes.

Tên của Thư Mục Child Theme sẽ là : Tên của thư mục Parent Theme cộng với –child.

Example : Thư Mục Child Theme twentyfifteen-child

2 ) Công việc tiếp theo của chúng ta là cần tạo những File đầu tiên và cần thiết cho Child Theme

+ Tạo file function.php :

Bao giờ cũng vậy một file php kể cả function.php đều mở đầu với một thẻ mở PHP ( <?php ). Sau đó chúng ta có thể thêm các mã Code cần thiết trong file function.php, bao gồm cả việc Load CSS của Theme.

Lưu ý : Nếu Parent Theme đã tải tất cả CSS của nó và của Child Theme thì chúng ta sẽ không cần làm bất cứ điều gì để tải CSS trong Child Theme.

Tuy nhiên, đó có vẻ như là điều chúng ta không mong muốn lắm. Vì chúng ta cần một giao diện có tính linh động cao hơn. Do đó, khi tạo Child Theme chúng ta sẽ luôn để cho Child Theme có CSS của riêng nó. Do vậy cần phải thực hiện mã Code để Load CSS của Child Theme và mã Code này sẽ nằm trong function.php.

Chúng ta có 2 trường hợp sau đây :

TRƯỜNG HỢP 1 : Nếu Parent Theme tải style CSS của nó sử dụng hàm bắt đầu bằng get_template, chẳng hạn như get_template_directory() & get_template_directory_uri() thì Child Theme chỉ cần tải Style của nó thôi. Nên chúng ta sử dụng đoạn Code sau :

<?php

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 defined in the style header.

     );

}

Có sử dụng Tham số phụ thuộc là tham số điều khiển parenthandle.

TRƯỜNG HỢP 2 : Nếu Parent Theme tải style CSS của nó với hàm bắt đầu bằng get_stylesheet chẳng hạn như get_stylesheet_directory() & get_stylesheet_directory_uri(), thì Child Theme cần tải Style của của cả Parent và Child Theme. Nên chúng ta có đoạn Code sau :

<?php

add_action( ‘wp_enqueue_scripts’, ‘my_theme_enqueue_styles’ );

function my_theme_enqueue_styles() {

     $parenthandle = ‘parent-style’;

     $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 defined in the style header.

     );

}

Như vậy, chúng ta có thể bắt đầu sử dụng function.php của Child Theme và đảm bảo đã tải đầy đủ yêu cầu của style CSS.

+ Tạo file style.css cho Child Theme :

Chúng ta cần tạo file thứ 2 của Child Theme là style.css, File này sẽ giúp cập nhật tất cả những quy định về CSS trong Child Theme. File style.css sẽ có những khia báo thông tin ban đầu bắt buộc như sau, những thông tin này phải chính xác để WordPress có thể hoạt động đúng :

/*

Theme Name:   Twenty Fifteen Child

Theme URI:    http://example.com/twenty-fifteen-child/

Description:  Twenty Fifteen Child Theme

Author:  New Bee

Author URI:   http://example.com

Template:     twentyfifteen

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:  twentyfifteenchild

*/

Những thông tin cần thiết không được thiếu là Theme Name & Template

3 ) Cài đặt Child Theme và kích hoạt để sử dụng

Chúng ta cần tạo một tệp Zip cho Child Theme bằng phần mềm có thể nén Thư Mục Child Theme thành một tệp Zip. Sau đó, thực hiện Appearance > Themes > Add New để thêm mới một theme bằng File Zip của Child Theme.

Như vậy đã hoàn thành việc cài đặt một Child Theme mà bạn có thể yên tâm sử dụng. Tiếp theo hãy kích hoạt Child Theme thôi.

Đã nói ở trên rằng Child Theme sẽ kế thừa tất cả nhừng gì của Parent Theme. Do đó, khi kích hoạt và sử dụng Child Theme thì tất cả trang Website đang phát triển vẫn đảm bảo tiếp tục được nâng cấp mà không ảnh hưởng & vẫn giữ đầy đủ tính năng như ban đầu.

4 ) Thêm Template Files cho Child Theme

Chúng ta có thể tạo tất cả những Template Files trong Child Theme như mong muốn. Cũng giống như việc tạo function.php hoặc bất cứ thứ gì, chúng ta có thể tạo ra các Template Files và ghi đè chúng lên Parent Theme. Hoặc đơn giản là chúng tạo ra những thứ cần phải mới hơn.

+ Với file style.css chúng ta sẽ có một vài thứ được ghi đè lên Parent Theme giống như !important vậy.

+ Với function.php thì sẽ không ghi đè lên Parent Theme, thay vào đó nó sẽ được tải cùng đối tác của nó từ Parent Theme. ( Cụ thể, nó được tải ngay trước tệp của Parent Theme. )

Đây có vẻ là cách thông minh để đưa ra các tính năng nâng cấp mới được xây dựng bởi Child Theme vì nó sẽ không bị mất đi hay ảnh hưởng do việc nâng cấp Theme gốc đang sử dụng…

Chúng ta có thể thêm bất kỳ mã Code nào vào function.php

if ( ! function_exists( ‘my_function’ ) ) {

    function my_function() {

        //  Do something.

    }

}