Hướng dẫn tạo và sử dụng child theme trong WordPress

Nếu bạn đã từng sử dụng WordPress để xây dựng các website thì việc biết đến và sử dụng Child Theme là hết sức cần thiết. Child Theme là một theme con được tạo ra và được kế thừa toàn bộ các đặc điểm, chức năng của theme cha (Parent Theme).

1. Tại sao nên sử dụng Child Theme Trong quá trình sử dụng theme WordPress khi bạn muốn chỉnh sửa, thay đổi các chức năng để phù hợp với yêu cầu công việc là tất yếu. Tuy nhiên những chỉnh sửa này có thể sẽ mất nếu bạn sửa trực tiếp và khi theme update. Việc khôi phục và gỡ lỗi là khá khó khăn. Mục đích của việc sử dụng Child Theme là giúp bạn chỉnh sửa theme theo ý muốn mà không mất các tuỳ biến này khi theme được cập nhật.
2. Child Theme hoạt động như thế nào?

• Khi bạn sử dụng 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.
• Chú ý: file style.css và file functions.php sẽ được thực thi song song, có nghĩa là muốn viết thêm các function bạn có thể viết trong child theme.

1. Cách tạo child theme Ví dụ: Chúng ta có 1 theme wordpress là haru-circle và chúng ta cần tạo 1 child theme là haru-circle-child. Cấu trúc file như sau:

• functions.php: có thể viết thêm các hàm php phục vụ cho chức năng của site
• style.css: viết thêm custom css code
• templates folder: tuỳ từng theme sẽ có thư mục này hay không, đây là các templates hiển thị của WordPress (copy tương ứng từ Parent Theme sang child theme theo cấu trúc thư mục) Chi tiết code file style.css

/*
Theme Name: Haru Circle - Child
Theme URI: http://harutheme.com/circle
Author: HaruTheme
Author URI: http://harutheme.com/
Description: This is child theme of Haru Circle
Template: haru-circle
Version: 1.0.0

*/

/*---------------------------------
    Write your css code from here
------------------------------------*/

Chi tiết file functions.php

<?php 
/**
 *
 * [Haru Circle] child theme functions and definitions
 */

function haru_child_theme_enqueue_scripts() {
    wp_enqueue_style( 'haru-theme-child-style', get_stylesheet_directory_uri(). '/style.css', array('haru-theme-style') );
}
add_action( 'wp_enqueue_scripts', 'haru_child_theme_enqueue_scripts', 12 );

?>

Tuỳ theo khai báo file style.css trong parent theme bạn sẽ cần thay đổi: haru-theme-style (đây là khai báo của file style.css trong parent theme) Ví dụ code trong parent theme Copy tương ứng và chỉnh sửa trong child theme Hiển thị đã được thay đổi khi sửa trong child theme Chú ý để sử dụng child theme bạn cần active trong Apprearance -> Themes Qua bài viết chia sẻ về cách sử dụng Child Theme hy vọng sẽ giúp các bạn đang và sẽ sử dụng WordPress có thể áp dụng và tuỳ biến theme để phù hợp với công việc của mình và tránh các mất mát khi đã chỉnh sửa.