Tạo child theme trong WordPress

2
29

Tạo child theme (giao diện con) trong website sử dụng mã nguồn WordPress.

Child theme là gì, tại sao phải tạo child theme khi sử dụng mã nguồn WordPress?

Khi chúng ta xây dựng một website sử dụng mã nguồn WordPress, các bạn sẽ tìm kiếm một mẫu giao diện (theme) đã được xây dựng sẵn, có thể là miễn phí hoặc có phí tùy vào nhà cung cấp giao diện.
Nhưng mọi việc không dừng lại ở đó, khi bạn tiến hành thiết lập theme cho website của mình và mở trang chủ (front-page) để xem nội dung được hiển thị (ở đây mình sẽ không đi chi tiết về việc thiết lập theme như thế nào, cấu hình homepage hoặc widget…).

Ở đây (mình sẽ sử dụng theme 2020 để làm ví dụ) mình có một danh sách các bài viết ở ngoài trang chủ có hiển thị tiêu đề bài viết, mô tả ngắn (short description) và tên tác giả, và mình muốn là mỗi bài viết nó sẽ hiển thị thêm ảnh đại diện, số lượt xem bài viết.
Trong trường hợp theme (2020) mà mình đã chọn không hỗ trợ điều này thì bắt buộc mình phải tiến hành sửa mã lệnh PHP trong theme.

Vậy điều gì sẽ xảy ra nếu một ngày đẹp trời tác giả của theme tung ra một bản cập nhật mới và bắt buộc mình phải cập nhật cho website của mình. Ôi thôi rồi, toàn bộ những dòng lệnh mà mình đã chỉnh sửa trong theme đã bị mất do quá trình cập nhật theme. Nếu như mình có lưu lại một bản (backup) trước khi cập nhật thì mình cũng phải mất rất nhiều thời gian để chỉnh sửa lại những dòng lệnh đã bị mất.

Để giải quyết vấn đề này, WordPress đã cung cấp cho chúng ta một cách đó là xây dựng child-theme từ theme gốc. Bạn có thể chỉnh sửa mọi thứ trong child-theme mà không cần phải lo lắng đến việc theme gốc có tung ra bản cập nhật mới hay không.

Không dài dòng nữa, mình sẽ trình bày cách tạo một child-theme đơn giản.

Mình sẽ sử dụng theme 2020 do WordPress cung cấp và theme này sẽ đi suốt loạt bài viết về WordPress cơ bản.

Khi bạn cài đặt xong mã nguồn WordPress và thiết lập theme cho website của mình. Cấu trúc thư mục sẽ như sau

cấu trúc thư mục theme

Hiện tại các bạn chỉ cần quan tâm đến thư mục “wp_content/themes“. Đây là nơi chứa toàn bộ giao diện được sử dụng trong mã nguồn WordPress và giao diện mình đang sử dụng là 2020 (twentytwenty).

Tiếp theo chúng ta sẽ tạo 1 thư mục để chứa child-theme. Các bạn vào thư mục “wp_content/themes” và tạo 1 thư mục mới với tên bất kì. Nhưng mình khuyên các bạn nên sử dụng cách đặt tên như sau “<theme_cha>-child”. Mình hay đặt như vậy vì trong thư mục themes có thể có rất nhiều theme khác nhau, mình đặt tên như vậy cho dễ phân biệt các theme với nhau, tránh bị nhầm lẫn.

Sau khi tạo được thư mục theme con rồi, mình tạo thêm 2 files là style.cssscreenshot.png. Bắt buộc các bạn phải tạo đúng 2 files với tên như trên nhé.
File style.css sẽ giúp WordPress biết được nội dung của theme này là gì và screenshot.png sẽ là ảnh đại diện cho theme mà mình vừa tạo.

Nội dung trong file style.css các bạn cần phải định nghĩa thông tin cho theme con.
Nội dung bao gồm có Theme Name, Text Domain, Version… Nhưng các bạn chú ý là phải có thuộc tính Template. Thuộc tính này nó sẽ giúp WordPress biết được là mình tạo theme con này từ theme cha tên là gì.
Tiếp theo các bạn cần phải import toàn bộ nội dung css của theme cha cho theme con bằng lệnh @import url(‘../twentytwenty/style.css’);
Nội dung sau khi chỉnh sửa file style.css sẽ như thế này

/*
Theme Name: Twenty Twenty Child
Text Domain: twentytwenty
Version: 0.1
Template: twentytwenty
*/

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

Khi các bạn quay lại trang quản lý theme của WordPress các bạn sẽ thấy kết quả như sau

Danh sách themes

Sau khi các bạn đã tạo được child theme rồi thì các bạn có thể tiến hành kích hoạt lên và cấu hình giống như theme cha.
Và để chỉnh sửa một file php nào đó các bạn chỉ cần copy đúng tên folder và tên file cần chỉnh sửa và chép vào thư mục child theme. Vấn đề này mình sẽ có một bài viết trình bày các để chỉnh sửa nội dung của một file PHP.

Nếu bạn thấy hay hoặc có ích vui lòng để lại một like hoặc một comment.
Nếu mình có gì sai sót vui lòng để lại góp ý của bạn để mình có thể hoàn thiện hơn.

2 BÌNH LUẬN

BÌNH LUẬN

Vui lòng nhập bình luận của bạn
Vui lòng nhập tên của bạn ở đây