Child theme là gì? Hướng dẫn sử dụng, tạo và cài đặt Child theme
19 Jun
2019

Child theme là gì? Tổng hợp kiến thức, tạo và cài đặt child theme

Category:Blog

Mỗi khi cập nhật theme cho website, bạn sẽ gặp phải tình trạng file cũ và file mới đan xen, chồng chéo lên nhau. Kết quả là vố số rắc rối khác nảy sinh và điều tệ nhất có thể xảy đến chính là toàn bộ CSS, Code của bạn đều “biến mất”, khiến bạn tiêu tốn thêm tiếng đồng hồ để update, chỉnh sửa, giải quyết mọi vấn đề. Sử dụng child theme là phương pháp giúp bạn thoát khỏi tình trạng này. Hãy cùng đọc bài viết của Website Template Design bên dưới đây!

Child theme là gì?

Giới thiệu về Child theme

Child theme là những theme con được tạo ra dựa trên các đặc điểm, tính chất, chức năng của một theme khác. Theme được lựa chọn ban đầu thường được gọi là Parent theme hay theme mẹ. Hầu như mọi theme trong WordPress đều có thể trở thành Parent theme để tạo ra các theme con.

Khi sử dụng Child theme, theme mẹ nhận được hỗ trợ tùy biến ngay cả khi bạn không cần trực tiếp thay đổi code. Nhờ vậy, bạn có thể điều chỉnh Code hay CSS một cách thoải mái.

Child theme là gì?

Đồng thời, vào những thời điểm cần nâng cấp theme mẹ, các tính chất của theme con vẫn được giữ nguyên, không thay đổi, giúp bạn giải quyết hoàn toàn phiền não mỗi lần cần update theme WordPress.

Tính năng của Child theme

Child theme sỡ hữu những tính năng, đặc điểm không khác gì một theme thông thường. Tuy nhiên, tất cả những tính năng đó đều “thừa hưởng” và làm việc phụ thuộc hoàn toàn vào theme mẹ. Điều này đồng nghĩa với việc nếu bạn xóa theme mẹ, bạn sẽ không thể sử dụng theme con.

Các thông số, Code, SCC,… ở theme con có thể thay đổi dựa trên nhu cầu của bạn và việc này không gây ảnh hưởng đến theme mẹ.

Cách thức hoạt động của Child theme

Nếu website của bạn sử dụng Child theme, WordPress sẽ tiến hành tải, sử dụng file trong Child theme trước, những file không có trong Child theme sẽ tiến hành tải từ Parent theme. Bởi vậy, khi bạn copy file từ Parent theme sang Child theme để tiến hành sửa chữa, các thay đổi mới này sẽ được ưu tiên áp dụng trước.

Tuy nhiên riêng file style.css và functions.php không hoạt động giống với nguyên tắc thông thường. Ngay cả khi bạn thêm các file fuction.php khác vào thư mục Child theme, các code bên trong functions.php của Parent theme cũng không thay đổi và hai file sẽ được load cùng lúc với nhau.

Có nên sử dụng Child theme?

Như đã đề cập trong các nội dung phần đầu bài viết, Child theme là giải pháp hiệu quả đế bạn có thể tiến hành những thay đổi, điều chỉnh cho giao diện website. Sử dụng theme con sẽ bảo đảm bạn giữ lại được các cài đặt, tùy chỉnh sau mỗi lần cập nhật phên bản mới từ nhà phát hành theme.

Vậy nếu bạn không muốn sử dụng Child theme? Bạn có thể sẽ phải đối mặt với các tình huống dưới đây nếu không có giải pháp thay thế khác.

  • Sau mỗi lần tiến hành update, những dữ liệu về các tùy chỉnh, chỉnh sửa sẽ bị mất. Điều này khiến giao diện và các tính năng trên website của bạn đều gặp vấn đề, có khả năng không thể truy cập hay sử dụng. Bạn sẽ cần tiến hành sửa lại tất cả các lỗi.
  • Trong trường hợp bạn không thực hiện update sau khi đã thực hiện các chỉnh sửa với theme, website của bạn đối mặt với nguy cơ bị hack cao do không cập nhật các phiên bản nâng cấp, sửa lỗi bảo mật mới từ giao diện theme WordPress.

Hướng dẫn tạo Child theme

Theo phương pháp thủ công

Bước 1: Đăng nhập vào phần Control Panel, mở mục File Manager.

Bước 2: Tìm đến thư mục cài WordPress (thông thường có tên là public_html), mở tiếp đến thư mục wp-content -> themes.

Bước 3: Tiến hành tạo thêm một foder mới, kích vào icon Create new foder (+ Foder). Đặt tên cho thư mục mới này rồi kích vào Create.

Bước 4: Sau khi thư mục mới hiển thị lên màn hình, kích mở thư mục đó.

Bước 5: Kích vào nút New file (hình dấu cộng), đặt tên file là “style.css” rồi kích Create để tạo.

Bước 6: Nhập đoạn code làm giữ liệu cho file mới. Bạn điền các giá trị theo những mục sau đúng với theme, tên miền của bạn. Quan trọng nhất, phần Template cần điền chính xác tên Parent theme để WordPress có thể biết được bạn tạo Child theme từ đâu. Kích vào Save sau khi hoàn thành. Kích Close để đóng file lại.

Hướng dẫn tạo child theme

*/

Theme Name:

Theme URL:

Description:

Author:

Author URL:

Template:

Version: 1.0.0

Text Domain:

*/ Custom CSS goes after this line

Bước 7: Trong cùng thư mục hiện tại, tạo thêm file trống và thêm function .php thiết yếu cho hoạt động của theme con.

Bước 8: Mở sang mục admin area của WordPress, chuyển tới phần Appearance => Themes để kiểm tra theme con mới được tạo. Kích vào Activate để theme con bắt đàu hoạt động.

Bước 9: Chuyển sang phần Editor cũng nằm trong Appearance, chọn functions.php.

Bước 10: Copy đoạn code sau vào file functions.php của theme con. Sau đó kích vào Update để cập nhật thay đổi

<?php

add_action( ‘wp_enqueue_scripts’, ‘enqueue_parent_styles’ );

function enqueue_parent_styles() {

  wp_enqueue_style( ‘parent-style’, get_template_directory_uri().’/style.css’ );

}

?>

Đến đây, bạn đã hoàn thành xong việc tạo một Child theme cho WordPress.

Tạo Child theme bằng Plugin

Ngoài phương pháp thủ công vẫn được sử dụng khá phổ biến hiện nay, bạn còn có một lựa chọn khác đẻ tạo child theme là sử dụng plugin Child Theme Configurator. Phương pháp này sẽ đặc biệt phù hợp cho những bạn mới tập làm quen, sử dụng WordPress hoặc khi cần tiết kiệm thời gian.

Thực hiện tạo Child theme theo các bước sau:

Bước 1: Cài đặt và kích hoạt cho pluin Child Theme Configurator.

Bước 2: Mở mục Tools, vào phần Child Themes, kích tiếp vào Analyze để plugin này tiến hành phân tích Parent theme mà bạn muốn sử dụng.

Bước 3: Sau quá trình phân tích, phần cấu hình sẽ được hiển thị, bạn có thể xem qua nhưng không thiết phải tiến hành chỉnh sửa hay thay đổi. Kích vào “Create New Chld Theme” để bắt đầu quá trình tạo Child theme.

Sẽ mất một ít thời gian để hoàn thành việc tạo Child theme. Khi quá trình kể thúc, bạn vào phần Appearance => Themes để kích hoạt child theme vừa được tạo ra.

Các bước tùy chỉnh Child theme

Chỉnh sửa CSS

Điều chỉnh CSS sẽ tạo nên các thay đổi về mặt giao diện của website. Để tiến hành các thay đổi, bạn chỉ cần chỉnh sửa file custom.css của child theme thông qua sử dụng text editor và FTP client, file manager hoặc editor WordPress editor.

Tuy chỉnh giao diện con

Tuy nhiên, bạn sẽ cần nắm được những kiến thức về CSS để có thể tạo những đoạn code mới, thay đổi giao diện theo đúng mong muốn của bạn.

Chỉnh sửa file PHP

Khi bạn cần tiến hành chỉnh sửa bất kỳ file PHP nào, bước đầu tiên hãy copy file sang Child theme, đảm bảo cấu trúc file được giữ nguyên như khi ở theme mẹ.

Đồng thời, bạn cũng có thể sử dụng quy tắc về chỉnh sửa file này để áp dụng cho việc thêm hoặc xóa một vài tính năng nhất định. Thực hiện việc thêm, xóa tính năng thông qua việc chính sửa, thêm code PHP vào file functions.php ở thư mục của theme con.

Child theme đem đến cho bạn khả năng thực hiện những thay đổi đáng kể trong thiết kế giao diện nhưng không gây ảnh hưởng đến theme chính của website. Sử dụng Child theme chính là phương pháp đơn giản, hiệu quả mà bạn chắc chắn nên áp dụng.