Hướng dẫn cách tạo child theme cho WordPress [Không bắt buộc biết code]

Photo of author
Written By Nam Nguyen

Mình là một du mục kỹ thuật số toàn thời gian, mình từng là một mọt sách WordPress và đây là nơi mình chia sẻ những kinh nghiệm WordPress hiệu quả nhất để bạn phát triển Online Business của mình một cách bền vững.

Là một người dùng WordPress, mình chắc hẳn ít nhiều bạn cũng có những lúc muốn bổ sung code vào theme của mình để cải thiện giao diện và tính năng cho WordPress.

Tuy nhiên khi bạn chèn code trực tiếp vào theme có thể dẫn đến một số vấn đề khá bất tiện hoặc thậm chí nghiêm trọng như:

  • Lỗi hiển thị giao diện
  • Khó tùy chỉnh khi có quá nhiều tệp code khác nhau
  • Các đoạn code bổ sung sẽ bị bay màu khi bạn cập nhật lên phiên bản mới
  • Website ngừng hoạt động 

Đó là lý do tại sao lúc này bạn nên tạo một child theme WordPress cho riêng mình, nó sẽ hỗ trợ bạn dễ dàng thêm mã PHP tùy chỉnh và tránh các rắc rối về mặt kỹ thuật.

Mình biết với hầu hết những bạn dùng WordPress không có kinh nghiệm về mã thì tạo child theme có lẽ là một bài toán lớn.

Đừng lo vì bạn đang ở đây.

Trong bài viết này mình sẽ hướng dẫn bạn tạo child theme cho WordPress một cách hoàn chỉnh và nó cũng đảm bảo được sự tương thích tuyệt đối với sản phẩm gốc.

Một Child Theme có nghĩa là gì?

Child Theme được hiểu đơn giản là một theme con của một theme chính thức hay còn gọi là theme gốc - theme cha -theme mẹ. Tóm lại chúng dùng để gọi nhằm nói đến sự phân cấp.

Ví dụ: GeneretePress có child theme là GeneratePress child

Trong đó Theme gốc đóng vai trò như một bộ khung còn Child Theme như một vỏ bọc bên ngoài để bạn thêm bớt làm đẹp giao diện.

Vì vậy khi bạn thực hiện bất kỳ thay đổi nào với Child Theme thì theme mẹ cũng không bị tổn tương hoặc lỗi.

Nhân tiện mình có một thông tin hay ho về Child Theme cho bạn...

StudioPress được cho là nơi khai sinh ra khái niệm Child Theme trên các Website WordPress.

Ngày nay khái niệm này trở nên phổ biến với mọi theme vì nó phục vụ nhu cầu tùy biến bằng code của một số người dùng không muốn phụ thuộc vào Plugin WordPress.

Thậm chí một số Child Theme còn vượt trội hơn theme gốc với nhiều lựa chọn tùy biến và tính năng cao cấp.

Các Child Theme chạy trên nền của Genesis Framework là một ví dụ điển hình trong số đó.

Mình có nhất thiết tạo child theme không?

Câu hỏi này có thể giúp bạn tránh mất thời gian cho bài viết và tránh được các kiến thức kỹ thuật khác.

Trên thực tế, mình không bắt buộc lúc nào bạn phải tạo child theme cho WordPress.

Bạn chỉ nên tạo khi thực sự cần nó.

Muốn tùy biến hoặc bổ sung mã PHP là trường hợp bạn nên tạo Child Theme.

Ví dụ khi bạn có một chút kiến thức về viết code thì có thể dùng nó để tùy biến giao diện và một số tính năng khác. Dù có xảy ra lỗi thì theme gốc của bạn vẫn còn nguyên bản.

Nếu bạn dùng một số trình tạo chủ đề như Elementor Pro, Divi hay Thrive Theme Builder thì không cần tạo child theme làm gì. Vì những những công cụ đó có hầu hết lựa chọn thiết kế để bạn thoải mái tùy biến.

Cách tạo child theme cho WordPress

Nhiều bạn thường nghĩ tạo Child Theme thì ít nhiều cũng phải chạm đến code mới thực hiện được.

Tuy nhiên khi ở đây, dù bạn mới học WordPress thì mình cũng có cách giúp bạn.

Có một vài cách tạo child theme khác nhau và mình chia thành 3 cấp độ: siêu đơn giản, đơn giản và phức tạp.

Vì vậy nếu như bạn muốn trải nghiệm tất cả mình sẽ không ngại chia sẻ cho bạn, nhưng mình khuyên hãy chọn cái dễ mà áp dụng.

Một số người cho rằng cứ code tay là tốt nhưng với mình điều đó chưa hẳn đúng trong trong một số trường hợp.

Ví dụ: Xét dưới góc độ thiết kế một trang bán hàng, giữa một ông lập trình Web bằng cách viết code thủ công đem so với một sinh viên kinh tế có một chút kinh nghiện về Elementor Pro. Thì khả năng cao anh chàng viết code sẽ như một trò hề với sinh viên kinh tế.

Đơn giản vì Elementor Pro có hàng trăm mẫu được thiết kế sẵn, anh chàng sinh viên chỉ cần nhập nó về và chỉnh sửa một chút nội dung đã xong.

Được rồi, có vẻ như mình quá lạc đề.

Quay lại nào...

Bây giờ mình sẽ hướng dẫn bạn 3 cách tạo child theme cho WordPress và chúng được sắp xếp theo thứ tự từ dễ đến khó.

Một khi bạn đã hoàn thành bất kỳ cấp độ nào thì bạn có thể bỏ qua cấp độ dưới. Tránh lãng phí thời gian quý báu và dành cho nhiều việc khá.

Cách 1: Sử dụng một theme luôn kèm theo một child theme

Một số nhà cung cấp hiểu rõ được nhu cầu tùy biến người dùng nên bên cạnh theme gốc họ luôn tạo sẵn một child theme cho bạn tải về.

Bạn cài đặt nó như một theme thông thường sau đó tùy chỉnh code vào tệp funtions.php.

Những thay đổi của bạn sẽ được ghi đè mà không có bất kỳ ảnh hưởng đến chủ đề gốc.

Khi nói về Child Theme có lẽ bạn phải đề cập đến StudioPress, những Child Theme chạy trên bộ khung Genesis Framework. 

cac-childtheme-cua-studiopress

Một số theme miễn phí hỗ trợ child theme bạn có thể quan tâm như GeneratePress, Astra, OcenWP,...

Hầu hết khi bạn dùng một theme WordPress trả phí thì nhà cung cấp luôn kèm cho bạn một child theme cho phép sẵn sàng tải về. Hoặc ít ra họ sẽ tạo và gửi cho bạn. Vì vậy bạn không cần mất thời gian thực hiện.

Đó là một trong những lợi thế khi dùng sản phẩm Premium bạn không thể chối cãi.

Cách 2: Dùng plugin tạo Child Theme

Được rồi, có lẽ bây giờ Theme bạn đang sử dụng không hỗ trợ Child Theme, phải không?

Đừng quá gấp gáp đến mức suy nghĩ đến chuyện thay đổi theme, mặc dù mình hay làm vậy.

Nhưng nếu bạn cảm thấy không thể rời khỏi giao diện tuyệt đẹp hiện tại thì bạn có thể dùng cách tạo Child Theme bằng plugin.

Nó cũng đơn giản không tưởng.

Trước tiên bạn hãy đăng nhập Dashboard và cài plugin Child Theme Configurator.

child-theme-configurator

Đây là một plugin chuyên dụng được Lilaea Media phát triển với mục đích tạo Child Theme một cách đơn giản.

Nó sẽ thực hiện việc quét theme gốc và tạo ra các child theme phù hợp theo mức hoàn hảo nhất có thể.

Sau khi kích hoạt hãy đi đến Tools -> Child Theme.

Giờ thì bạn ở trên Tab parent/child hãy thực hiện các bước:

Bước 1

Tích vào tùy chọn CREATE a new Child Theme để yêu cầu tạo một chủ đề con mới.

Bước 2

Tại mục Select a Parent Theme hãy click vào tên theme để bung ra lựa chọn.

Bước 3

Chọn tên theme bạn cần tạo Child Theme. Ví dụ mình chọn Tweenty Tweenty.

Bước 4

Click vào Analyze để plugin tiến hành phân tích.

su-dung-child-theme-configurator

Sau đó hàng loạt báo cáo sẽ trả về cho bạn nhưng bạn chỉ cần chú ý mục Name the new theme directory đây là tên thư mục chứa child theme trong khu vực quản lý file WordPress.

Ngoài ra bạn có thể click vào mục "Click to Edit Child Theme Attributes" để bung ra một số tùy chọn thay đổi.

Tại đây nó cho phép bạn cá những thông tin về theme như tên theme, tên tác giả, url website, mô tả,..

tao-childtheme-bang-plugin

Được rồi, khi đã thay đổi theo ý muốn hãy kéo xuống cuối cùng nhấn Create New Child Theme để tiến hành tạo.

Giờ thì quay lại trang quản lý theme để kích hoạt child theme vừa tạo và có thể bổ sung code theo ý muốn.

Đừng quên Deactivate plugin và xóa nó để đỡ nặng nề Website WordPress của bạn.

Cách 3: Tạo child theme thủ công bằng code

Nói thật mình không khuyến khích bạn sử dụng cách này vì nó quá rườm ra hay nói thẳng ra đây là con đường vòng của cách trên.

Tuy nhiên đã lỡ hướng dẫn thì mình sẽ nói nhanh qua một chút, nếu bạn thích thì cứ thử cho biết.

Đầu tiên bạn cần sử dụng trình quản lý file hoặc FTP để đi đến thư mục chứa theme của WordPress.

Bây giờ hãy tạo một thư mục child theme dựa trên tên chủ đề mẹ theo công thức:

[thu-muc-chu-de-me]-child

Ví dụ theme gốc của mình có thư mục là twentytwenty thì giờ cần tạo thêm một thư mục twentytwenty-child

tao-thu-muc-chu-de-con

Tiếp tục mở thư mục vừa tạo và tạo một tệp có dạng style.css

tao-tep-style-css

Sau đó chọn Edit.

mo-tep-style-css

Giờ thì dán đoạn mã dưới đây vào tệp style.css

/*
Theme Name: TT Child Theme
Theme URI: https://namdenroi.com/
Description: Theme con của TT
Author: Nam Nguyen
Author URI: https://namdenroi.com
Template: twentytwenty
Version: 1.0.0
*/

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

Bạn có thể thay đổi mọi thông tin về theme theo ý muốn, tuy nhiên riêng mục cuối cùng bạn nhớ điền đúng tên theme gốc vào đường dẫn.

Nhớ Save lại nhé!

them-code-vao-tep-style-css

Nhân tiện nếu bạn thắc mắc về ý nghĩa của các dòng trên thì hiểu một cách đơn giản thế này:

Hàng Theme Name nó nói lên theme con con của Twenty Twenty có tên là TT Child Theme (cái tên này do mình tự đặt và bạn cũng có thể thay đổi).

Bên cạnh đó còn kèm theo các thông tin liên quan như tên tác giả, môt tả, URL,..

Quan trọng nhất, dòng cuối cùng dùng để nhập các định kiểu kế thừa CSS của chủ đề mẹ vào Child Theme. 

Tuy nhiên hiện tại, loại nhập định kiểu này đã lỗi thời và nó sẽ khiến thời gian của bạn chậm lại do nó tải liên tục.

Đó là lý do tại sao bạn nên xem xét xóa bỏ dòng này, ở phần sau mình sẽ còn một phương pháp thay thế tốt hơn cho bạn.

Tạo tệp functions.php

Tệp functions.php rất quan trọng với mọi theme WordPress vì vậy với child theme cũng không ngoại lệ.

Trong khi tệp style.css cho phép bạn làm đẹp giao diện bằng mã CSS thì functions.php giúp bạn bổ sung các tính năng bằng mã PHP và các hàm trong WordPress.

tao-tep-functions

Điều đơn giản lúc này là bạn cần tạo một tệp tương tự như style.css nhưng thay tên tệp bằng functions.php sau đó mở ra và thêm một đoạn mã như thế này.

<?php
//* thêm code tại đây

Ngoài ra, ở phần trên mình đã nói về định kiểu CSS.

Nếu như bạn không muốn theo cách nhập ở tệp style.css thì có thể dùng phương pháp dưới đây và nó có phần tối ưu hơn.

Đó là dùng hàm wp_enqueue_style() trong WordPress.

Bây giờ hãy dán mã dưới đây vào khu vực chèn code funstions.php của child theme.

add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}

Nhớ lưu lại các thay đổi của bạn.

Thêm hình ảnh cho theme

Theo mặc định, khi tạo child theme thủ công thì nó sẽ không kế thừa hình ảnh đại diện của theme gốc.

Đó là lý do bạn cần tạo một hình ảnh cho child theme của mình để nó dễ dàng nhận biết hơn. Với mình nó còn giúp trở nên chuyên nghiệp trong lúc quản trị. 

Bạn có thể lấy một hình ảnh bất kỳ sau đó đổi tên nó thành screenshot.png sau đó upload lên thư mục có tên child theme.

doi-ten-screenshot

Bạn cũng nên cân nhắc sử dụng hình ảnh có kích thước phù hợp, mình khuyên bạn nên giữ nó ở mức 880 x 660px hoặc 387 x 290px.

Được rồi bây giờ hãy chắc chắn bạn đã có một thư mục dạng tentheme-child và có 2 tệp cùng 1 hình ảnh như thế này.

cac-tep-cua-child-theme

Đã tới phần cuối cùng, quay lại Dashboard WordPress của bạn và kích hoạt Child theme vừa tạo.

activate-child-theme

Tùy chỉnh Child Theme của bạn

Khi đã có child theme bạn đã có thể thoải mái tùy biến giao diện WordPress của mình mà không sợ ảnh hướng đến tệp gốc. Hoặc khi nhà cung cấp phát hành phiên bản mơi thì bạn cũng không sợ mất những code đã chèn trước đó.

Tùy vào mỗi cá nhân và mỗi theme sẽ có cách tùy biến khác nhau. Về phần làm đẹp bằng CSS thì chỉ có một chút kinh nghiệm thì sẽ dễ dàng thay đổi. Tuy nhiên với mã PHP thì có phần khó khăn hơn. 

Một số theme miễn phí thì đa phần bạn phải tự tìm hiểu hoặc tìm kiếm các code có tính năng hay ho ở trên mạng, và điều này khá mất thời gian.

Nhưng với những theme trả phí thì chắc chắn họ sẽ có một diễn đàn với vô vàn chủ đề tùy biến và mã chèn vào Child Theme của bạn.

Lời kết

Hy vọng qua bài viết này bạn đã biết cách tạo Child Theme cho WordPress của mình. 

Và bạn thấy đấy!

Tạo Child Theme không khó như bạn tưởng, phải không?

Tuy nhiên mình nghĩ nó thật sự cần thiết với mọi người dùng WordPress. Nếu là một nhà phát triển nó cho phép bạn phát triển thêm nhiều tính năng trên Child Theme.

Còn khi là một người dùng thông thường Child Theme sẽ giúp bạn dễ dàng tùy biến giao diện và các tính năng cuar theme gốc mà không cần can thiệp vào tệp gốc.

Dù có lỗi khi tùy chỉnh code thì ít ra bạn cũng không cảm thấy bối rối bởi những lỗi nghiêm trọng vốn xảy ra thường xuyên với những người không rành về mã.

Trong quá trình thực hiện nếu bạn có khó khăn hoặc thắc mắc nào thì hãy để lại comment trong phần dưới, mình sẽ phản hồi sớm nhất cho bạn.

Đôi chút về Nam Nguyen

Mình là một cựu quân nhân Hải Quân đã xuất ngũ, Blog này là một trong những doanh nghiệp trực tuyến của mình. Nơi mình chia sẻ những kinh nghiệm thiết thực nhất về WordPress có thể áp dụng để xây dựng và phát triển Online Business của bạn một cách bền vững. Bạn có thể kết nối với mình trên Facebook, Twitter, Linkedin.

10 thoughts on “Hướng dẫn cách tạo child theme cho WordPress [Không bắt buộc biết code]”

  1. Bài viết đầy đủ nhất về child theme mình từng đọc, rất ưu ích cho những người mới tìm hiểu về phát triển wp như mình, thanks ad!

    Reply
  2. Mình cứ tưởng muốn child theme là phải tự tạo, ai ngờ thấy ad nói mình liên hệ cái support họ gửi ngay luôn. quá nhanh quá nguy hiểm :v

    Reply
  3. cảm ơn bạn đã chia sẻ nhiều cách, mình đang dùng Ocenwp premium nên vừa liên hệ bảo support gửi cho mình.

    Reply
  4. Thực sự hữu ích, cảm ơn bạn vì bài viết này. Mình vẫn đang sử dụng @import, vì vậy giờ mình sẽ chuyển sang dùng hàm wp_enqueue_style() để web load nhanh hơn.

    Reply

Leave a Comment