Child Theme là gì? Hướng dẫn tạo Child Theme trong WordPress [NEW]

Tôi thấy rất nhiều bạn hỏi Chủ đề Trẻ em là gì?? Tại sao sử dụng nó? Và cách tạo Theme con trong WordPress.

Vì vậy, trong bài viết này tôi sẽ giải thích tất cả mọi thứ, để bạn hiểu khi nào sử dụng nó.

Sau khi nắm vững những kiến ​​thức cơ bản về WordPress, chắc chắn bạn sẽ muốn tùy chỉnh chủ đề WordPress của mình theo ý thích của mình, phải không?

Đó là lý do tại sao bạn cần một chủ đề con để tùy chỉnh chủ đề WordPress của mình.

Child-theme-la-gi

Chủ đề Trẻ em là gì?

⇒ Nói một cách ngắn gọn dễ hiểu, child theme là một child theme kế thừa tất cả các tính năng và giao diện của Chủ đề chính (chủ đề mẹ)

Điều này cho phép bạn dễ dàng cập nhật chủ đề mẹ mà không phải lo lắng về nguy cơ mất các thay đổi trên chủ đề mẹ.

Bạn có thể tùy chỉnh chủ đề con mà không ảnh hưởng đến chủ đề mẹ.

Nhưng các bản cập nhật trên chủ đề mẹ sẽ được kế thừa hoàn toàn trên chủ đề con.

Tại sao bạn nên sử dụng Child Theme?

Dựa trên các định nghĩa trên, bạn có thể đã hiểu tại sao bạn cần một chủ đề trẻ em.

Sử dụng các chủ đề con để thay đổi giao diện là cách tốt nhất và an toàn nhất mà mọi người sử dụng WordPress cần biết.

Các thay đổi trên đó sẽ không bị xóa khi cập nhật phiên bản mới trên chủ đề mẹ.

Một lợi ích to lớn khác là, nếu có bất kỳ lỗi nào khi thay đổi chủ đề con. Bạn hoàn toàn có thể xóa nó và quay lại chủ đề ban đầu.

chach-child-theme-hoat-dong

Hướng dẫn tạo chủ đề con với bất kỳ chủ đề mẹ nào

Trong hướng dẫn này, tôi sẽ chỉ cho bạn 2 cách:

  1. Tạo chủ đề con theo cách thủ công.
  2. Sử dụng các plugin để tạo các chủ đề con.

Lời yêu cầu

Cần có hiểu biết cơ bản về CSS / HTML để tự sửa đổi. Một số kiến ​​thức về PHP chắc chắn sẽ hữu ích.

Đảm bảo sao chép và chỉnh sửa nó để phù hợp với chủ đề bạn đang sử dụng.

Tôi khuyên bạn nên thực hành trên máy chủ địa phương trước.

Bạn có thể di chuyển một trang WordPress trực tiếp sang một máy chủ thử nghiệm cục bộ hoặc sử dụng một trang web sao chép để phát triển chủ đề.

Cuối cùng đảm bảo rằng chủ đề chính xuất hiện trong Menu Giao diện »Chủ đề Xin vui lòng !

Phương pháp 1: Tạo chủ đề con theo cách thủ công

Bước 1: Tạo một thư mục với bất kỳ tên nào: ví dụ: voice-child

Bước 2: Tạo một tệp có tên style.css

Bước 3: Mở tệp style.css và thêm mã bên dưới.

tao-child-theme

Mở trình soạn thảo văn bản như Notepad hoặc Notepad ++ và dán mã này:

/*
Theme Name:     Voice Child
Theme URI:      https://dieuhau.com
Description:    Child theme for the Voice Theme
Author:         Dieu Hau
Author URI:     https://dieuhau.com
Template:       voice
Version:        0.1.0
*/ Custom CSS goes after this line

Bây giờ hãy lưu tệp này dưới dạng style.css trong thư mục chủ đề con mới được tạo.

Hầu hết những thứ trong tệp này đã nói lên ý nghĩa của chúng. Chú ý đến Bản mẫu: giọng nói

Nếu bạn nhập sai tên chủ đề, nó sẽ không chấp nhận nó.

Tên thư mục gốc phân biệt chữ hoa chữ thường. Nếu chúng tôi cung cấp cho WordPress với Template: Voice, nó sẽ không hoạt động.

Bước 4: Tạo một tệp có tên function.php và dán mã bên dưới để nhập css từ chủ đề mẹ.

<?php
add_action( 'wp_enqueue_scripts', 'enqueue_child_theme_styles', PHP_INT_MAX);
function enqueue_child_theme_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
?>

Bước 5: Nén toàn bộ thư mục voice-child thành một tệp zip. Sau đó tải lên thư mục chủ đề.

Bước 6: Chủ đề trẻ em hoạt động và sử dụng.

Bây giờ đi vào Vẻ bề ngoài » Chủ đề và bạn sẽ thấy Chủ đề giọng nói trẻ em. Bạn cần nhấp vào nút kích hoạt để bắt đầu sử dụng chủ đề con trên trang web của mình.

kich-hoat-child-theme

Vì bạn không thay đổi bất kỳ điều gì trong chủ đề con nên trang web của bạn sẽ sử dụng tất cả các chức năng và giao diện của chủ đề mẹ.

Phương pháp 2: Cách tạo chủ đề con bằng plugin

Nếu bạn không muốn làm những điều trên thì vẫn còn một giải pháp khác đó là sử dụng plugin.

Có khá nhiều plugin miễn phí như: One-Click Child Theme, Child Theme Configurator, Child Theme Creator của Orbisius….

Trong bài đăng này, tôi sẽ sử dụng: Child Theme Configurator

Bước 1: Cài đặt và kích hoạt plugin Trình cấu hình chủ đề con

Child Theme Configurator

Bước 2: Đi vào Công cụ »Chủ đề con

tao child theme bang plugin

Chọn Chủ đề chính và sau đó nhấp vào Phân tích. Một số tùy chọn sẽ xuất hiện, theo ý kiến ​​của tôi, nó là thô Tạo chủ đề con mới.

Bước 3: Sự trở lại Apperance »Chủ đề và kích hoạt chủ đề con và bạn đã hoàn tất.

Voice Child Theme demo

Tùy chỉnh chủ đề con

Mỗi chủ đề WordPress đều có tệp style.css trong thư mục chính của nó. Hầu hết chúng là biểu định kiểu chính của chủ đề, nơi lưu trữ tất cả CSS.

Tuy nhiên, hầu hết các theme hiện nay, file này chỉ hiển thị thông tin cơ bản của theme. và tất cả CSS sẽ nằm trong một thư mục riêng có tên css

stylecss Voice

Đối với phần này, bạn cần một chút kiến ​​thức về CSS.

Google Chrome và Firefox có công cụ F12 tích hợp sẵn. Những công cụ này cho phép bạn xem HTML và CSS đằng sau bất kỳ phần tử trang web nào.

Hoặc bạn có thể sử dụng Tiện ích mở rộng Visbug Chrome mới được phát hành của Google, nó rất trực quan và dễ sử dụng.

Ví dụ, ở đây tôi sẽ thấy CSS trên thanh menu điều hướng. F12 chọn kiểm tra hoặc bám vào Ctrl + Shift + CLOSE trỏ đến bất kỳ phần tử nào trên trang web

CSS menu full

Bấm để phóng to

Thao tác này sẽ chia màn hình trình duyệt thành hai phần. Ở cuối màn hình, bạn sẽ thấy HTML và CSS cho trang

css menu full 1

Bấm để phóng to

Khi bạn di chuyển chuột qua các dòng HTML khác nhau, trình kiểm tra Chrome sẽ đánh dấu chúng trong cửa sổ phía trên.

Như bạn có thể thấy, chúng tôi đã chọn menu điều hướng trong ảnh chụp màn hình ở trên.

Nó cũng sẽ hiển thị cho bạn các quy tắc CSS liên quan đến các phần tử đánh dấu trong khung bên phải.

Bạn có thể thử chỉnh sửa CSS ngay tại đó để xem nó trông như thế nào.

Hãy thử thay đổi nền nền của .main-navigation Pháo đài #c04837.

thay doi mau menu

Bạn sẽ thấy nền nền của thanh điều hướng sẽ thay đổi.

Nếu bạn thích điều này, hãy sao chép CSS này và dán nó vào tệp style.css của chủ đề con.

.main-navigation {
background: #c04837;
}

Lưu các thay đổi được thực hiện đối với tệp style.css và xem trước trang web của bạn.

Ghi chú: Nếu bạn không thay đổi các dòng khác, bạn không cần phải ghi chúng vào đây.

Hãy tiếp tục và thay đổi bất kỳ yếu tố nào bạn muốn. CSS có thể làm rất nhiều việc như:

  • Thay đổi phông chữ, màu phông chữ, khoảng cách dòng …
  • Vị trí của phần từ đã chọn
  • Che bóng đối tượng
  • Ẩn và hiển thị các yếu tố bạn muốn
  • ………….

Cái này bạn còn phải học thêm rất nhiều, bạn có thể học ở w3schools. Dưới đây là giải thích và ví dụ cho từng thuộc tính.

Chỉnh sửa Tệp Mẫu

WordPress Template File

Mỗi chủ đề WordPress có một bố cục khác nhau. Hãy xem bố cục của chủ đề Giọng nói.

  • Đầu trang, Menu điều hướng, Widget, Chân trang, Nội dung (vòng lặp)

Mỗi điều này được xử lý bởi một tệp khác nhau trong thư mục Voice.

Các tệp này được gọi là mẫu.

Hầu hết các mẫu này được đặt tên theo khu vực mà chúng được sử dụng.

Ví dụ: phần chân trang thường được xử lý bởi tệp footer.php, còn phần đầu trang và menu điều hướng được xử lý bởi tệp header.php.

Một số khu vực, như khu vực nội dung, được xử lý bởi nhiều tệp được gọi là nội dung mẫu.

Điều đầu tiên bạn cần làm là chọn tệp mẫu mà bạn muốn sửa đổi và sao chép nó vào chủ đề con.

Ví dụ: nếu bạn muốn xóa liên kết được cung cấp bởi WordPress ở chân trang và thêm thông báo bản quyền ở đó, chỉ cần sao chép tệp footer.php trong chủ đề con và mở nó trong một trình soạn thảo văn bản như notepad. Tìm ra những dòng bạn muốn loại bỏ và thay thế chúng. Như thế này:

Thêm chức năng mới cho chủ đề con

Bạn sẽ thấy nhiều hướng dẫn WordPress yêu cầu bạn sao chép và dán mã vào tệp functions.php của chủ đề.

Đọc bài viết 28 Mẹo cực kỳ hữu ích cho tệp các hàm trong WordPress để tìm hiểu cách sử dụng tệp này nếu bạn chưa biết.

Thêm một số mã vào tệp functions.php của chủ đề mẹ, có nghĩa là các thay đổi của bạn sẽ bị ghi đè bất cứ khi nào một phiên bản mới được cập nhật.

Đây là lý do tại sao bạn nên sử dụng chủ đề con và thêm tất cả mã trong tệp functions.php vào chủ đề con

Tạo một tệp mới trong thư mục chủ đề con và đặt tên là functions.php.

Xử lý sự cố

Là một người mới làm quen với WordPress, bạn sẽ mắc sai lầm khi tạo chủ đề con đầu tiên của mình.

Chỉ cần đừng bỏ cuộc quá nhanh. Hãy xem danh sách các lỗi phổ biến này trong WordPress để tìm ra cách khắc phục chúng.

Lỗi phổ biến nhất mà bạn sẽ thấy là lỗi cú pháp, thường xảy ra khi bạn quên một thứ gì đó trong mã.

Dưới đây là hướng dẫn nhanh giải thích cách sửa lỗi Cú pháp trong WordPress

Kết luận

Tôi hy vọng bài viết này đã giúp bạn hiểu cách tạo một chủ đề con WordPress. Mọi thắc mắc các bạn comment bên dưới nhé!

Nếu bạn thích bài viết này, hãy đăng ký YouTube của tôi về hướng dẫn WordPress. Hãy tìm tôi trên Facebook.