Hướng dẫn tạo child theme WordPress và cách vận hành

  • Được đăng bởi Miliweb

  • 01 Tháng mười hai, 2023

Child theme (chủ đề con) trong WordPress là một chủ đề được tạo ra để kế thừa và thay đổi các tính năng của chủ đề “cha” gốc mà không làm thay đổi chủ đề gốc đó trực tiếp. Nhờ đó, bạn có thể thoải mái thực hiện các tùy chỉnh mà không lo lắng sẽ bị mất dữ liệu khi chủ đề gốc được cập nhật. Vậy, bạn đã biết cách tạo child theme WordPress và sử dụng, chỉnh sửa nó chưa? Cùng tìm hiểu nhé!

Lý do nên tạo child theme WordPress là gì?

Có nhiều lý do bạn nên tạo child theme WordPress để sử dụng, bao gồm: 

  • Bảo toàn thay đổi khi cập nhật chủ đề gốc: Khi bạn cập nhật chủ đề gốc, mọi sửa đổi bạn đã thực hiện trực tiếp trên chủ đề đó có thể mất đi. Trong khi đó, child theme giữ lại tất cả các thay đổi, do đó bạn có thể cập nhật chủ đề gốc mà không gặp rủi ro mất dữ liệu. 
  • An toàn và ổn định: Tạo child theme giúp tránh tình trạng xung đột giữa các tùy chỉnh và cập nhật chủ đề. Bạn có thể thử hay thực hiện các thay đổi mà không làm ảnh hưởng đến trang web chính. 
  • Dễ quản lý: Bạn có thể tách biệt code tùy chỉnh thành một child theme, nhờ vậy mã nguồn rõ ràng và dễ quản lý hơn. 
  • Tùy chỉnh không giới hạn: Bạn có thể thực hiện bất kỳ tùy chỉnh nào trong child theme mà không lo ảnh hưởng đến chủ đề gốc. Điều này giúp bạn linh hoạt hơn trong việc thay đổi giao diện của trang web. 
  • Tiện ích phát triển: Tạo child theme WordPress giúp bạn dễ dàng thử nghiệm và thực hiện các sửa đổi để phát triển theme mà không làm ảnh hưởng đến theme gốc. 
 tạo child theme WordPress
Vì sao nên tạo child theme WordPress

Sự khác biệt giữa theme và child theme là gì?

Chủ đề (Theme) và chủ đề con (Child Theme) phục vụ cho mục đích khác nhau. Cụ thể là: 

  • Chủ đề (Theme), hay chủ đề gốc (Parent Theme) là chủ đề chính mà bạn chọn để áp dụng cho trang web của mình. Đây có thể là theme mặc định của WordPress hoặc theme bạn tải từ một nguồn khác hay mua. Chức năng cơ bản của theme là cung cấp giao diện và bố cục cho trang web. Nó chứa các tệp tin như style.css, index.php, header.php, footer.php và các tệp khác để định nghĩa cấu trúc và giao diện của trang web. 
  • Chủ đề con (Child Theme) được tạo ra để kế thừa và mở rộng chức năng của một chủ đề gốc (cha) mà bạn đã chọn. Nó phụ thuộc vào chủ đề cha để hoạt động. Việc  tạo child theme WordPress cho phép bạn thực hiện các tùy chỉnh mà không ảnh hưởng đến mã nguồn gốc của chủ đề cha. Điều này giúp giữ nguyên vẹn các sửa đổi của bạn khi chủ đề cha được cập nhật. Child theme bao gồm ít nhất hai tệp tin chính là style.css (để mô tả chủ đề con) và functions.php (để thêm các chức năng tùy chỉnh). 
 tạo child theme WordPress
Theme và child theme khác nhau như thế nào?

Mình lấy một ví dụ về mã nguồn trong tệp tin style.css của chủ đề con:

/*

Theme Name:   Twenty Twenty Child

Theme URI:    http://example.com/twenty-twenty-child/

Description:  Twenty Twenty Child Theme

Author:       Your Name

Author URI:   http://example.com

Template:     twentytwenty

Version:      1.0.0

*/

Bạn có thể thấy trường “Template” rất quan trọng để chỉ định chủ đề cha mà chủ đề con sẽ kế thừa.

Cách hoạt động của child theme là gì?

Cơ chế hoạt động của chủ đề con trong WordPress như sau: 

  • Kế thừa từ chủ đề gốc: Tạo child theme WordPress để “kế thừa” tất cả các tính năng và mã nguồn từ chủ đề gốc. Khi website WordPress sử dụng chủ đề con, đầu tiên, nó sẽ kiểm tra xem có tệp tin hoặc chức năng nào đó đã được định nghĩa trong chủ đề con không. Nếu có, nó sẽ sử dụng định nghĩa đó; nếu không, nó sẽ “rơi về” chủ đề cha và sử dụng định nghĩa từ đó. 
  • Tùy chỉnh bằng cách thêm hoặc thay đổi: Bạn có thể thêm các tệp mới hoặc thay đổi các tệp có sẵn trong chủ đề con mà không ảnh hưởng đến chủ đề cha. Đối với các tệp cùng tên giữa chủ đề con và chủ đề cha, WordPress sẽ sử dụng định nghĩa từ chủ đề con. 
  • Tùy chỉnh bằng functions.php: Bạn có thể sử dụng tệp tin functions.php trong chủ đề con để thêm chức năng tùy chỉnh hoặc ghi đè lên các chức năng có sẵn trong chủ đề cha. Mã trong functions.php của chủ đề con được thực thi cùng với mã trong functions.php của chủ đề cha. 
  • Bảo toàn thay đổi khi cập nhật: Khi chủ đề cha được cập nhật, các thay đổi bạn thực hiện trong chủ đề con không bị mất. Điều này giúp bảo vệ tùy chỉnh của bạn và giữ cho trang web hoạt động mà không bị ảnh hưởng bởi cập nhật của chủ đề cha. 
  • Mối quan hệ với Template Hierarchy: Chủ đề con sẽ sử dụng “Template Hierarchy” của WordPress để quyết định cách hiển thị trang và bài viết. Nếu một tệp template không tồn tại trong chủ đề con, WordPress sẽ sử dụng tệp tin template từ chủ đề cha.
 tạo child theme WordPress
WordPress child theme hoạt động như thế nào?

Cách tạo child theme WordPress là gì?

 tạo child theme WordPress
Cách tạo child theme WordPress

Tạo child theme trong WordPress khá đơn giản, chỉ cần một số bước cơ bản như sau: 

Bước 1: Tạo thư mục cho chủ đề con. Thư mục này sẽ chứa tất cả các tệp của chủ đề con. 

Bước 2: Tạo tệp style.css cho chủ đề con trong thư mục chủ đề con. Tệp tin này phải chứa một tiêu đề mô tả để WordPress nhận diện chủ đề con. Ví dụ:

/*

Theme Name:   Tên-Chủ-Đề-Con

Theme URI:    URL-Chủ-Đề-Con

Description:  Mô Tả Chủ Đề Con

Author:       Tên Tác Giả

Author URI:   URL Tác Giả

Template:     Tên-Chủ-Đề-Gốc

Version:      1.0.0

*/

Mình giải thích các khái niệm trên một chút: 

  • Theme Name: Tên chủ đề con. 
  • Theme URI: URL của chủ đề con. 
  • Description: Mô tả ngắn về chủ đề con. 
  • Author: Tên của bạn. 
  • Author URI: URL của bạn. 
  • Template: Tên của chủ đề gốc mà chủ đề con sẽ kế thừa. 
  • Version: Phiên bản của chủ đề con. 

Bước 3: Tạo tệp functions.php cho chủ đề con nếu bạn muốn thêm các chức năng tùy chỉnh hoặc điều chỉnh các chức năng từ chủ đề cha. Ví dụ:

<?php

// Thêm mã PHP của bạn ở đây

?>

Bước 4: Sau bước tạo style.css xong, bạn có thể nén thư mục chủ đề con vào một tệp ZIP (nếu chưa nén) và tải lên WordPress trực tiếp hoặc tải lên thư mục wp-content/themes/ của website thông qua FTP. Sau khi tải lên, chủ đề con sẽ được liệt kê và bạn chỉ cần nhấp vào Activate để kích hoạt. 

Bây giờ, bạn đã tạo child theme WordPress xong, sẵn sàng để tùy chỉnh.

Hướng dẫn cách sử dụng child theme WordPress

Để đảm bảo tính ổn định và an toàn của website, bạn nên nhớ các quy tắc sử dụng WordPress child theme sau đây: 

  • Tránh sửa đổi trực tiếp mã nguồn của chủ đề gốc. Thay vào đó, bạn thực hiện tất cả các sửa đổi trong chủ đề con. 
  • Khi bạn cần thực hiện bất kỳ tùy chỉnh nào đối với giao diện hoặc chức năng của trang web, hãy sử dụng chủ đề con thay vì chủ đề gốc. 
  • Trước khi cập nhật chủ đề cha, hãy kiểm tra xem nó có ảnh hưởng đến chủ đề con không. Nếu có, hãy đảm bảo rằng chủ đề con vẫn hoạt động đúng cách sau khi cập nhật. 
  • Đặt tên cho các tệp tin và thư mục của chủ đề con một cách có nghĩa để dễ dàng theo dõi và quản lý. Như vậy, mã nguồn sẽ rõ ràng và dễ bảo trì hơn. 
  • Trước khi áp dụng bất kỳ thay đổi thực nào trên website, hãy thử nghiệm và kiểm tra bản thử nghiệm trước đã. 
  • Luôn luôn sao lưu trang web của bạn trước khi thực hiện bất kỳ thay đổi quan trọng nào, đặc biệt là khi bạn làm việc với chủ đề con và thực hiện các tùy chỉnh lớn. 
  • Theo dõi tài nguyên và hỗ trợ trực tuyến của WordPress để biết các thông tin cập nhật, hướng dẫn và lời khuyên từ cộng đồng WordPress. 
  • Khi sử dụng các plugin, luôn kiểm tra xem chúng có tích hợp tốt với chủ đề con không. Một số plugin có thể yêu cầu điều chỉnh khi bạn sử dụng chủ đề con. 
  • Đọc tài liệu của chủ đề cha để hiểu cách nó hoạt động và tương tác với chủ đề con. 
  • Đảm bảo rằng chủ đề con của bạn cũng được cập nhật để tương thích với phiên bản mới nhất của chủ đề cha và WordPress.
 tạo child theme WordPress
Cách sử dụng WordPress child theme

Cách kích hoạt child theme trong WordPress không làm mất định dạng

Sau khi tạo child theme WordPress, thông thường không có lý do gì để mất định dạng khi kích hoạt, vì chủ đề con chỉ kế thừa giao diện và các tính năng từ chủ đề cha. Tuy nhiên, đôi khi bạn có thể gặp phải một số vấn đề nhất định. Để khắc phục những rủi ro có thể xảy ra, bạn hãy thử thực hiện các bước sau đây:

  1. Đảm bảo chủ đề con được định dạng đúng: Mở tệp tin style.css của chủ đề con và đảm bảo rằng tất cả các trường như Theme Name, Theme URI, Template,… được khai báo đúng và đầy đủ.

/*

Theme Name:   Tên-Chủ-Đề-Con

Theme URI:    URL-Chủ-Đề-Con

Description:  Mô Tả Chủ Đề Con

Author:       Tên Tác Giả

Author URI:   URL Tác Giả

Template:     Tên-Chủ-Đề-Gốc

Version:      1.0.0

*/

  1. Sử dụng tệp tin functions.php nếu cần: Nếu bạn có một số tùy chỉnh hoặc mở rộng chức năng từ chủ đề cha, hãy đảm bảo rằng tệp functions.php trong chủ đề con được sử dụng đúng cách.

<?php

// Thêm mã PHP của bạn ở đây

?>

  1. Kiểm tra trong trình điều chỉnh WordPress: Kiểm tra xem có các tùy chọn nào cần được thiết lập lại sau khi bạn kích hoạt chủ đề con không. Điều này có thể bao gồm cấu hình trang chủ, phông chữ, màu sắc, vv. Đôi khi bạn phải làm bằng tay. 
  2. Kiểm tra các plugin: Có thể một số plugin bạn đang sử dụng không tương thích hoặc cần được cập nhật khi bạn chuyển sang chủ đề con. Hãy kiểm tra xem có bản cập nhật cho các plugin không và cập nhật chúng nếu cần. 
  3. Kiểm tra console developer trong trình duyệt: Mở Console Developer trong trình duyệt và xem có bất kỳ lỗi JavaScript hoặc CSS nào xuất hiện khi bạn kích hoạt chủ đề con hay không. Lỗi này có thể làm ảnh hưởng đến định dạng của trang web. 
  4. Sử dụng công cụ debugging: Sử dụng các công cụ debugging như WP_DEBUG để kiểm tra xem có thông báo lỗi hoặc cảnh báo nào xuất hiện khi bạn kích hoạt chủ đề con không. 
 tạo child theme WordPress
Xử lý tránh lỗi khi kích hoạt child theme WordPress

Nếu sau khi thực hiện các bước trên mà vẫn xảy ra trục trặc, có thể do một số vấn đề đặc biệt với chủ đề hoặc cấu hình trang web. Lúc này, phải kiểm tra cụ thể mới biết vấn đề nằm ở đâu và xử lý như thế nào. Bạn có thể liên hệ Miliweb để được hỗ trợ và báo giá nhé!

Hướng dẫn cách chỉnh sửa sau khi tạo child theme WordPress

 tạo child theme WordPress
Cách chỉnh sửa sau khi tạo child theme WordPress

Ngoài cách tạo child theme WordPress, bạn cũng nên biết cách chỉnh sửa chủ đề con trong WordPress. Công việc này thường bao gồm việc thực hiện các thay đổi giao diện, thêm chức năng tùy chỉnh hoặc điều chỉnh các phần khác nhau của trang web. Dưới đây là một hướng dẫn chỉnh sửa theme child cơ bản:

Mở tệp Style.css

Mở tệp style.css trong thư mục của chủ đề con. Trong tệp tin này, bạn có thể thực hiện các thay đổi về mô tả chủ đề con, tác giả, và các tùy chọn khác. Mình có lấy một ví dụ:

/*

Theme Name:   Tên-Chủ-Đề-Con

Theme URI:    URL-Chủ-Đề-Con

Description:  Mô Tả Chủ Đề Con

Author:       Tên Tác Giả

Author URI:   URL Tác Giả

Template:     Tên-Chủ-Đề-Gốc

Version:      1.0.0

*/

Tùy chỉnh giao diện 

Để tùy chỉnh giao diện, bạn có thể chỉnh sửa các tệp như header.php, footer.php, single.php, và archive.php. Những thay đổi trong các tệp này sẽ áp dụng cho trang web. 

Thêm tùy chọn bổ sung

Nếu bạn muốn thêm chức năng mới hoặc tùy chọn tùy chỉnh, hãy mở tệp tin functions.php và thêm mã PHP. Ví dụ, để thêm hình đại diện (featured images) vào chủ đề con:

<?php

add_theme_support( ‘post-thumbnails’ );

Sử dụng tùy chọn chủ đề

Một số chủ đề con có các tùy chọn tùy chỉnh được tích hợp sẵn. Đối với những chủ đề này, bạn có thể tìm thấy các tùy chọn trong trình quản lý WordPress, thường ở mục Appearance -> Customize. 

Sử dụng CSS tùy chỉnh

Nếu bạn chỉ muốn thực hiện những thay đổi nhỏ trong giao diện, bạn có thể sử dụng CSS tùy chỉnh. Mở tệp tin style.css và thêm các yếu tố CSS. Ví dụ:

body {

    font-family: ‘Arial’, sans-serif;

}

 

.site-title a {

    color: #0073e5;

}

Thử nghiệm trước khi áp dụng

Trước khi áp dụng bất kỳ thay đổi nào trên trang web, hãy thử nghiệm chúng trên một trang web thử nghiệm hoặc môi trường phát triển để đảm bảo rằng chúng hoạt động đúng. 

Đọc tài liệu của theme 

Đôi khi, các chủ đề con có tài liệu hướng dẫn riêng để giúp bạn thực hiện các điều chỉnh cụ thể. Hãy kiểm tra tài liệu của child theme WordPress. 

Lưu ý rằng quy trình và tệp cụ thể có thể thay đổi tùy thuộc vào chủ đề con và chủ đề cha mà bạn đang sử dụng. Luôn luôn nên đọc tài liệu và hướng dẫn của chủ đề để đảm bảo bạn tạo child theme WordPress và thực hiện các thay đổi một cách đúng đắn.

Chia sẽ bài viết:

Bài viết liên quan