Bài trước TungZ đã giới thiệu về Theme Framework và Child theme trong WordPress. Nếu bạn chưa biết hai khái niệm này là gì thì có thể xem tại đây. Hôm nay mình sẽ nói cụ thể hơn về việc tạo một child theme cho bất kỳ một theme nào.

Bước 1: bạn hãy chọn ra một theme để làm parent theme. Trong bài thực hành này, mình chọn ngay theme classic có sẵn khi cài WordPress.

Bước 2: Trong wp-content/themes/ bạn tạo một thư mục con. TungZ tạo là mychildtheme.

Bước 3: Trong mychildtheme bạn tạo một file style.css (đến phần này là hay rồi nhé).

Trước hết ta hãy nhìn phần mở đầu cho file style.css của child theme qua một ví dụ lấy từ Wp Codex:

/*
 Theme Name: Rose
 Theme URI: the-theme's-homepage
 Description: a-brief-description
 Author: your-name
 Author URI: your-URI
 Template: use-this-to-define-a-parent-theme--optional
 Version: a-number--optional
.
 General comments/License Statement if any.
.
*/

Phần khai báo thêm nắm giữa dấu /* và dấu */ Trong đó phần quan trong nhất cần khai báo, đó chính là: Template. Bạn phải chỉ rõ parent theme là theme nào. Như thế thì child theme mới hoạt động được. Những phần khác chỉ để thêm thông tin tác giả, version theme, mô tả ngắn gọn về theme… không có cũng không sao. Bạn chỉ việc thay dòng chữ “use-this-to-define-a-parent-theme–optional” thành “tên thư mục chứa parent theme”. Vì mình dùng theme classic làm parent theme nên sẽ khai báo như sau:

/*
 Template: classic
*/

Lưu ý: Phân biệt chữ thường và chữ hoa nên bạn phải viết tuyệt đối chính xác tên thư mục chứa parent theme.

Bước 4: Vào Appearance –> Themes bạn sẽ thấy xuất hiện child theme của chúng ta. Child theme đã kế thừa toàn bộ tính năng của “cha nó” ^^

Bước 5: Active theme như bình thường và xem kết quả thu được.

Trông không giống classic theme phải không? Bạn đừng lo, hãy chuyển sang bước 6.

Bước 6: Import file css của classic theme vào style.css của chúng ta với 1 dòng code như sau:

 @import url('../classic/style.css');

Save vào. Bây giờ refresh lại trình duyệt, bạn thấy giống hệt classic theme chưa nào.

Từ giờ, bạn hoàn toàn có thể thay đổi giao diện child theme thông qua file style.css. Thử đổi font chữ, màu chữ xem sao:

 body {
	color: green;
}

Giao diện thay đổi rồi, vậy bây giờ bạn muốn thêm một số chức năng thì làm thế nào? Ví dụ muốn thêm thẻ meta google verify vào header?

Tạo trong mychildtheme một file functions.php. Thêm đoạn code này vào:

<?php
function google_verify() {
echo '<meta name="google-site-verification" content="mã google verify của bạn" />';
}
add_action('wp_head','google_verify');
?>

View Source và xem kết quả:

TungZ đã hướng dẫn xong cách tạo và sử dụng cũng như thay đổi cả về giao diện lẫn chức năng cho child theme. Chúc bạn có một child theme ưng ý.

Theo TungZBlog.Com.

Xem bài viết từ link của tác giả

http://tungzblog.com/wordpress/co-ban-ve-su-dung-child-theme-trong-wordpress.html