Cách tạo Child theme cho wordpress đơn giản mà hiệu quả

Cách tạo Child theme cho wordpress đơn giản mà hiệu quả

Child theme là gì và Cách tạo Child theme cho wordpress như thế nào? Tại sao phải dùng child theme cho wordpress? Bài viết “Cách tạo Child theme cho wordpress” hôm nay Vntot sẽ giải đáp cho bạn các thắc mắc về child theme trong wordpress nhé.

Cách tạo Child theme cho wordpress, khái niệm child theme

Đầu tiên bạn nên biết khái niệm về Child theme trong wordpress và hiểu rõ bản chất của child theme là gì  và nguyên lý hoạt động của child theme trước khi tạo một Child theme cho wordpress.

Child theme wordpress là gì?

Child theme (theme con – giao diện con) được hiểu nôm na là một theme dược tạo ra từ một theme gốc (theme mẹ) với thuộc tính mặc định là giống y như theme gốc. Nếu bạn kích hoạt một child theme và không chỉnh sửa gì (mặc định), giao diện và tính năng của website không khác gì giao diện và tính năng của theme gốc.

Vậy tạo ra Child theme để làm gì?

Nếu bạn đang sử dụng mã nguồn mở wordpress bạn sẽ hiểu là wordpress luôn luôn cập nhật để cải tiến và phòng chống các nguy cơ về bảo mật.

Và mỗi lần cập nhật giao diện, các code trong các file temple của giao diện sẽ trở về trạng thái mặc định ở phiên bản mới nhất vừa cập nhật.

Và bạn cũng biết khi làm web, bạn sẽ phải thay đổi code các temple của theme sao cho phù hợp với web của bạn, nhu cầu và sở thích của bạn, không có theme nào sinh ra để dành riêng cho bạn cả.

Và sau khi cập nhật wordpress, những gì bạn đã vất vả thay đổi để được như ý sẽ … biến mất, giao diện trở về trạng thái mặc định.

Bạn không thể không cập nhật wordpress vì nỗi lo về các vấn đề bảo mật và lỗi thời, không tương thích.

Vậy làm sao để vẫn cập nhật theme mà vẫn giữ được những thay đổi của bạn trong theme?

Giải pháp đó là tạo ra và kích hoạt sử dụng Child theme thay cho theme gốc.

Cách làm việc của Child theme?

Để Child theme làm việc được bạn bắt buộc phải cài theme gốc. Bạn tiến hành tạo và kích hoạt Child theme thay thế cho theme gốc (Cách làm Vntot sẽ hướng dẫn ở mục dưới)

Trong thư mục Child theme vừa tạo ra, mặc định sẽ có file  functions.php và file Style.css. Với 2 file có sẵn này sẽ giúp cho Child theme thừa hưởng những đặc tính y hệt theme gốc.

Bây giờ bạn thử copy một file temple từ thư mục theme gốc sang thư mục Child theme tương ứng, và thay đổi nó theo ý muốn.  Bạn sẽ thấy những thay đổi đó được áp dụng cho web của bạn. Và Khi bạn cập nhật theme gốc, những thay đổi ở Child theme không bị ảnh hưởng.

Điều này có nghĩa là mặc định Child theme sẽ giống như đúc theme gốc, nếu bạn muốn thay đổi file temple nào, bạn copy file đó từ theme gốc sang Child theme, file đó sẽ quy định giao diện hiện tại của web bạn. Những file tương ứng không có ở Child theme thì giao diện web sẽ thừa hưởng đặc tính từ theme gốc.

Nói hơi dài dòng nhưng nôm na là giữa theme gốc và Child theme có liên kết một chiều: Những thay đổi ở theme gốc tác động lên Child theme, nhưng những thay đổi ở Child theme không ảnh hưởng đến theme gốc, vì thế Child theme không bị ảnh hưởng khi bạn cập nhật giao diện wordpress. Nguyên lý là những temple nào không có ở thư mục Child theme thì đặc tính đó sẽ được thừa hưởng từ theme gốc, nếu temple nào có ở thư mục Child theme thì giao diện web sẽ bị quy định bởi temple này và những thay đổi trong temple tương ứng ở theme gốc không còn có tác dụng lên giao diện website.

Giải thích hơi mệt nhỉ, thôi thì có gì không hiểu bạn cứ để lại comment bên dưới nhé.

Cách tạo Child theme cho wordpress đơn giản và hiệu quả

Cách 1: Dùng code (bạn cứ xem đã, cách 2 hay hơn^^)

Vào thư mục wp-content/themes tạo thêm một thư mục mới với tên bất kỳ, nhưng mình khuyến khích bạn nên đặt tên giống với thư mục theme mẹ và thêm chữ -child ở đằng sau, như ảnh:

childtheme-folder

Sau đó tạo một file style.css với nội dung giống như bên dưới:

/*
Theme Name: Startbox Child Theme
Theme URI: http: //thachpham.com
Description: Day la child theme cua Startbox
Author: Thach Pham
Author URI: http://thachpham.com
Template: startbox
Version: 0.1
*/

Bạn có thể đổi các thông tin thành của bạn, nhưng lưu ý ở phần Template, ở đó là bạn ghi tên thư mục của theme mẹ để nó hiểu đâu là mẹ của nó, như trong ảnh thì là mình có thư mục startbox là theme mẹ.

Kế tiếp, bạn chèn thêm đoạn này vào ngay  bên dưới */

@import url("../startbox/style.css");

Bạn thay startbox thành tên thư mục theme mẹ, mục đích là để nó sử dụng các CSS từ theme mẹ, cũng như có thể tiến hành ghi đè CSS mà bạn tùy chỉnh lên CSS có sẵn.

Như vậy bây giờ mình có file style.css ở thư mục theme con như sau:

/*
Theme Name: Startbox Child Theme
Theme URI: http: //thachpham.com
Description: Day la child theme cua Startbox
Author: Thach Pham
Author URI: http://thachpham.com
Template: startbox
Version: 0.1
*/
@import url("../startbox/style.css");

Việc còn lại là chỉ việc vào Appearance -> Themes và kích hoạt child theme lên mà thôi.

Phần này Lười viết nên Vntot trích luôn của bạn Thạch phạm.

Cách 2: Đơn giản và dễ tùy biến hơn với người mới – Vntot khuyến khích đó là dùng Plugin

Sử dụng Plugin Child Theme Configurator để tạo Child theme cho wordpess nhanh chóng và đơn giản hơn.

Bạn tiến hành cài đặt Plugin Child Theme Configurator như các Plugin bình thường khác, sau đó kích hoạt Plugin.

Vào bảng quản trị và tìm mục Công cụ/Child Themes để tạo Child theme cho wordpress

Bạn chú ý ở mục số 2, chọn Theme cần tạo Child theme rồi bấm Analyze để tiến  hành tạo Child theme

Cách tạo Child theme cho wordpress đơn giản mà hiệu quả

Cách tạo Child theme cho wordpress đơn giản mà hiệu quả bằng Plugin Child Theme Configurator

Vậy là bạn đã tạo xong Child theme rồi, bây giờ vào mục Giao diện để kích hoạt Child theme vừa tạo.

Bạn có thể sử dụng Plugin Child Theme Configurator này để copy bất kỳ file temple nào từ theme gốc sang Child theme. Bạn bấm vào tab Files ở ảnh trên để copy file.

Ngoài ra còn có rất nhiều công dụng các từ Plugin Child Theme Configurator hay ho này, bạn tự tìm hiểu thêm nhé. Có gì thắc mắc hãy để lại comment.

Vậy là bạn đã biết Cách tạo Child theme cho wordpress đơn giản mà hiệu quả. Hy vọng bài viết giải đáp thắc mắc được cho bạn.

★★★ Vn tốt
© www.vntot.com - Vui lòng ghi rõ nguồn vntot.com khi đăng tải lại nội dung trên website! Hosting tốt nhất nên dùng -vntotHosting giá rẻ tốt nhất cho website vntot khuyên dùng - Click xem ngay
► Hướng dẫn Cách tạo website chuyên nghiệp trong 1 giờ đồng hồ - Tôi hướng dẫn, bạn cứ làm theo là được ► BẮT ĐẦU NGAY!

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Mua Hosting giá ưu đãi nhất hôm nay, không thể rẻ hơn! MUA NGAY