Bạn có định tạo child theme WordPress không? Sau khi bạn đã nắm vững cơ bản về WordPress, bạn có thể muốn tìm hiểu cách tùy chỉnh trang web WordPress của mình. Child theme (giao diện con) là một điểm khởi đầu tuyệt vời cho bất kỳ ai muốn tùy chỉnh các theme WordPress. Trong bài viết này, Vietnix sẽ hướng dẫn bạn cách tạo child theme WordPress một cách nhanh chóng và dễ dàng.
Trước khi bạn bắt đầu tạo child theme WordPress
Trước khi bạn bắt đầu tạo một child theme, bạn cần hiểu rằng bạn sẽ làm việc với code. Để đạt được mục tiêu của mình, bạn cần có kiến thức cơ bản về HTML và CSS để hiểu và thực hiện những thay đổi cần thiết trong mã code.
Hiểu biết về PHP cũng sẽ có ích. Điều này ít nhất sẽ giúp bạn hiểu và biết rằng nên sao chép và dán đoạn code từ các nguồn khác và vị trí nào là hợp lý.
Vietnix khuyến nghị bạn nên thực hành trong môi trường phát triển cục bộ (local development environment). Bạn có thể chuyển một trang web WordPress đang hoạt động sang máy chủ cục bộ để thử nghiệm hoặc sử dụng nội dung giả định (dummy content) cho việc phát triển theme.
Cuối cùng, bạn cần quyết định chọn một parent theme (theme gốc đang sử dụng). Bạn nên chọn một parent theme có giao diện và tính năng tương tự với mục tiêu và mong muốn về trang web của bạn. Mục tiêu là làm ít thay đổi càng tốt, chính điều này sẽ giúp tiết kiệm thời gian đáng kể cho bạn đó nha.
Trong bài viết này, Vietnix sẽ sử dụng theme Twenty Twenty-One, là một trong những theme WordPress mặc định.
Tạo child theme WordPress đầu tiên của bạn
Bạn có thể tạo một child theme thủ công bằng cách tạo folder và các file cần thiết, hoặc dễ dàng tạo một child theme thông qua việc sử dụng một plugin child theme.
Việc sử dụng phương pháp thủ công sẽ giúp ích bạn khá nhiều trong việc biết, hiểu và quen với các file và folder đó. Điều này sẽ tiết kiệm khá nhiều thời gian của bạn khi sau này sửa lỗi hoặc thêm các đoạn code trong tương lai của bạn.
Tuy nhiên, nếu bạn gặp phải khó khăn trong việc tạo các file và folder như các thủ công thì bạn có thể sử dụng plugin để làm phương án thứ 2 nhé.
Dưới đây là 2 phương pháp để tạo child theme WordPress thông dụng, bạn có thể chọn phương pháp bạn mong muốn thông qua liên kết dưới đây để bỏ qua những đoạn không cần thiết nhé.
Phương pháp 1: Tạo child theme WordPress bằng code
Đầu tiên, bạn cần mở folder /wp-content/themes/ trong folder cài đặt WordPress và tạo một folder mới cho child theme của bạn.
Bạn có thể đặt tên folder này theo ý muốn. Trong hướng dẫn này, chúng ta sẽ đặt tên là “Vietnixdemo”.
Tiếp theo, bạn cần tạo hai file đầu tiên cho child theme của bạn. Bắt đầu bằng cách mở một trình soạn thảo văn bản như Notepad.
Sau đó, bạn cần sao chép đoạn code sau vào tài liệu trống:
Theme Name: WPB Child Theme
Theme URI: https://www.vietnix.com/
Description: A Twenty Twenty-One child theme
Author: Vietnix
Author URI: https://www.vietnix.com/
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechildĐoạn code này chứa thông tin về child theme, hãy thay đổi để phù hợp với nhu cầu của bạn. Tiếp theo, hãy lưu file này dưới dạng “style.css” trong folder child theme vừa tạo. Đây chính là bảng kiểu chính của child theme của bạn.
Công việc tiếp theo là tạo một file thứ hai để nhập hoặc enqueue (kích hoạt) các bảng kiểu từ parent theme. Để làm điều đó, hãy tạo một tài liệu mới trong trình soạn thảo văn bản của bạn và thêm code sau đây:
/* enqueue scripts and style from parent theme */
function twentytwentyone_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( 'twenty-twenty-one-style' ), wp_get_theme()->;get('Version') );
}
add_action( 'wp_enqueue_scripts', 'twentytwentyone_styles');Đoạn code này sẽ hoạt động khi bạn sử dụng Twenty Twenty-One làm parent theme. Nếu bạn sử dụng một parent theme khác, bạn cần sử dụng code khác được mô tả trong Hướng dẫn theme WordPress.
Nếu bạn gặp khó khăn khi sửa đổi code cho một parent theme khác, bạn có thể sử dụng phương pháp plugin thay thế.
Bây giờ hãy lưu file này dưới dạng “functions.php” trong folder child theme. Chúng ta sẽ quay lại file này sau để thêm các chức năng cho child theme của bạn.
Lưu ý: Trước đây, parent theme được nhập vào bằng cách sử dụng lệnh @import trong style.css. Vietnix không khuyến nghị phương pháp này nữa vì nó sẽ làm tăng thời gian tải các bảng kiểu.
Bạn đã tạo một child theme rất cơ bản và khi bạn điều hướng đến Appearance > Themes, bạn sẽ thấy theme WPB Child Theme. Bạn cần nhấp vào nút “Activate” để bắt đầu sử dụng child theme trên trang web của bạn.
Nhưng do bạn chưa thay đổi bất cứ điều gì trong child theme, trang web của bạn sẽ sử dụng chức năng và giao diện của parent theme. Bây giờ bạn có thể tiếp tục sang phần tiếp theo, nơi bạn sẽ tùy chỉnh child theme của mình.
Hiện tại Vietnix đang tặng kèm bộ theme và plugin bản quyền cho khách hàng đăng ký các gói hosting tốc độ cao. Nếu bạn đang muốn đổi mới giao diện cho website WordPress của mình thì không nên bỏ qua phần quà này. Bộ quà tặng gồm nhiều công cụ hữu ích như Plugin WP Rocket, WP Smush Pro, WPML, iThemes Security Pro, Rank Math SEO Pro, Elementor Pro, theme từ MyThemeShop – Astra – Divi,… với tổng giá trị lên tới 26.000.000 VND. Liên hệ với Vietnix để được tư vấn chi tiết gói hosting theo nhu cầu sử dụng và nhận ngay phần quà cực giá trị trên.
1 Core1GB RAM1 GB NVME1 DomainBackup tự động 4 lần/ngày1 - 5.000 Traffic/tháng
Tặng theme & plugin trị giá 50.000.000 VND- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: MyThemeShop
- Theme: Bricks
Bán chạy nhất3 Core6GB RAM10 GB NVME2 DomainBackup tự động 4 lần/ngày5.000 - 15.000 Traffic/tháng
Tặng theme & plugin trị giá 50.000.000 VND- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: MyThemeShop
- Theme: Bricks
8 Core12GB RAM25 GB NVME4 DomainBackup tự động 4 lần/ngày15.000 - 100.000 Traffic/tháng
Tặng theme & plugin trị giá 50.000.000 VND- Plugin: Rank Math SEO Pro
- Plugin: Elementor Pro
- Plugin: WPML
- Plugin: WP Smush Pro
- Theme: Divi
- Theme + plugin: MyThemeShop
- Theme: Bricks
Phương pháp 2: Tạo child theme WordPress bằng plugin
Child Theme Configurator là một plugin WordPress dễ sử dụng cho phép bạn tạo và tùy chỉnh child theme WordPress nhanh chóng mà không cần sử dụng code.
Điều đầu tiên bạn cần làm là cài đặt và kích hoạt plugin Child Theme Configurator. Để biết thêm chi tiết, hãy xem hướng dẫn từng bước của Vietnix về cách cài đặt plugin WordPress.
Sau khi kích hoạt, hãy điều hướng đến Tools > Child Themes trong bảng điều khiển WordPress của bạn.
Trong tab Parent/Child, bạn sẽ được yêu cầu chọn một parent theme từ menu dropdown. Chúng ta sẽ chọn theme Twenty Twenty-One.
Sau khi nhấp vào nút “Analyze”, plugin sẽ đảm bảo rằng theme phù hợp để sử dụng làm parent theme.
Twenty Twenty-One là OK.
Tiếp theo, bạn sẽ được yêu cầu đặt tên cho folder child theme bạn cần và chọn nơi lưu trữ các kiểu.
Chúng ta sẽ để lại các thiết lập mặc định.
Trong phần tiếp theo, bạn sẽ được yêu cầu chọn cách truy cập vào bảng kiểu của parent theme.
Một lần nữa, chúng ta sẽ sử dụng thiết lập mặc định.
Khi bạn đến Section 7, bạn cần nhấp vào nút được đánh dấu ‘Click to Edit Child Theme Attributes’.
Sau đó, bạn có thể điền vào các chi tiết cho child theme của bạn.
Khi tạo một child theme thủ công, bạn sẽ mất các menu và widget của parent theme. Child Theme Configurator có thể sao chép chúng từ parent theme sang child theme.
Đánh dấu hộp Section 8 nếu bạn muốn thực hiện điều này.
Cuối cùng, nhấp vào nút để tạo child theme mới của bạn. Plugin sẽ tạo một folder cho child theme của bạn và thêm các file style.css và functions.php bạn sẽ sử dụng để tùy chỉnh theme sau này.
Trước khi kích hoạt theme, bạn nên nhấp vào liên kết ở gần đầu màn hình để xem trước và đảm bảo nó trông tốt và không làm hỏng trang web của bạn.
Nếu mọi thứ hoạt động đúng, hãy nhấp vào nút ‘Activate & Publish’.
Bây giờ, child theme của bạn sẽ được kích hoạt.
Ở giai đoạn này, child theme sẽ trông và hoạt động chính xác như parent theme. Tiếp theo, chúng ta sẽ bắt đầu tùy chỉnh nó.
Tùy chỉnh child theme của bạn
Bây giờ chúng ta sẽ tùy chỉnh child theme để nó trông khác một chút so với parent theme. Chúng ta làm điều này bằng cách thêm code vào filestyle.css và điều này yêu cầu bạn có một chút hiểu biết về CSS.
Bạn có thể đơn giản hóa quá trình này bằng cách sao chép và sửa đổi code hiện có từ parent theme. Bạn có thể tìm code đó bằng cách sử dụng công cụ Inspect trong Google Chrome hoặc Firefox, hoặc sao chép trực tiếp từ file style.css của parent theme.
Phương pháp 1: Sao chép code từ Inspect trong Chrome hoặc Firefox
Cách dễ nhất để khám phá code CSS mà bạn cần chỉnh sửa là sử dụng các công cụ inspect đi kèm với Google Chrome và Firefox. Những công cụ này cho phép bạn nhìn vào code HTML và CSS phía sau bất kỳ phần tử nào trên trang web.
Ví dụ, nếu bạn muốn xem code CSS được sử dụng cho phần thân (body) của bài viết, bạn chỉ cần di chuột qua phần thân bài viết và nhấp chuột phải để chọn “Inspect”.
Điều này sẽ chia màn hình trình duyệt thành hai phần. Ở phía dưới màn hình, bạn sẽ thấy code HTML và CSS của trang web.
Tùy thuộc vào thiết lập trình duyệt của bạn, code HTML và CSS có thể hiển thị ở phía bên phải màn hình thay vì phía dưới.
Khi bạn di chuột qua các dòng code HTML khác nhau, trình kiểm tra của Chrome sẽ làm nổi bật chúng trong cửa sổ trên cùng. Nó cũng sẽ hiển thị các quy tắc CSS liên quan đến phần tử đang được làm nổi bật.
Bạn có thể thử chỉnh sửa code CSS ngay tại đó để xem nó sẽ trông như thế nào. Hãy thử thay đổi màu nền của phần thân (body) thành #fdf8ef.
Bạn sẽ thấy màu nền trang web thay đổi, nhưng thay đổi này chỉ là tạm thời.
Để làm cho nó thay đổi vĩnh viễn, bạn cần sao chép quy tắc CSS này và dán vào file style.css của child theme của bạn.
body {
background-color: #fdf8ef;
}Lưu các thay đổi bạn đã thực hiện vào file style.css và sau đó preview trang web của bạn.
Bạn có thể tiếp tục lặp lại quá trình này cho đến khi giao diện đúng theo mong muốn của bạn. Mọi thứ bạn muốn thử nghiệm thì bạn có thể sửa đổi code trong file này.
Dưới đây là toàn bộ stylesheet đã được tạo cho child theme, tham khảo nhé!
Theme Name: WPB Child Theme
Theme URI: https://www.vietnix.vn/
Description: A Twenty Twenty-One child theme
Author: Vietnix
Author URI: https://www.vietnix.vn
Template: twentytwentyone
Version: 1.0.0
Text Domain: twentytwentyonechild
*/
.site-title {
color: #7d7b77;
}
.site-description {
color: #aba8a2;
}
body {
background-color: #fdf8ef;
color: #7d7b77;
}
.entry-footer {
color: #aba8a2;
}
.entry-title {
color: #aba8a2;
font-weight: bold;
}
.widget-area {
color: #7d7b77;
}Phương pháp 2: Sao chép code từ file style.css của parent theme
Bạn cũng có thể sao chép một số code trực tiếp từ file style.css của chủ parent theme. Sau đó, bạn có thể dán nó vào file style.css của child theme và chỉnh sửa nó.
Điều đó đặc biệt hữu ích khi sử dụng Twenty Twenty-One làm parent theme vì nó sử dụng rộng rãi các biến CSS (CSS variables).
Ví dụ, khi chúng ta đã chỉnh sửa màu nền trang trên, code gốc như sau:
background-color: var(--global--color-background);Ở đây, “–global–color-background” là một biến. Biến này có thể được sử dụng ở nhiều vị trí khác nhau trong toàn bộ theme. Để thay đổi màu sắc tại tất cả những vị trí đó cùng một lúc, bạn chỉ cần thay đổi giá trị của biến.
Bạn cần di chuyển đến folder /wp-content/themes/twentytwentyone trong folder cài đặt WordPress của bạn và sau đó mở file style.css bằng trình soạn thảo văn bản. Sau đó, bạn có thể tìm vị trí nơi “–global–color-background” được định nghĩa.
--global--color-background: var(--global--color-green);
Chúng ta phát hiện ra rằng biến này được định nghĩa bởi một biến khác!
Thực tế, trong phần :root của file style.css của parent theme, chúng ta tìm thấy một loạt biến màu đã được định nghĩa. Đây là bảng màu mà theme Twenty Twenty-One sử dụng.
:root {
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
}Khi bạn đã chọn một bảng màu hoàn hảo cho trang web WordPress của mình, các biến này sẽ giúp bạn tùy chỉnh nhanh chóng child theme của mình.
Bạn chỉ cần sao chép code đó và dán vào file style.css của child theme. Sau đó, bạn cần thay thế code màu bằng những code màu mới mà bạn đã chọn cho bảng màu riêng của mình.
Những màu sắc đó sau đó sẽ tự động được sử dụng ở nhiều nơi trong child theme của bạn. Điều này không chỉ nhanh chóng mà còn làm cho màu sắc của theme của bạn thống nhất hơn.
Bạn cũng có thể làm điều tương tự với các biến khác. File style.css của Twenty Twenty-One liệt kê các biến cho các họ và cỡ chữ, tiêu đề, khoảng cách giữa dòng và nhiều hơn thế nữa. Bạn có thể sao chép bất kỳ trong số này vào file style.css mới của mình, nơi bạn có thể tùy chỉnh chúng.
Chỉnh sửa các file mẫu
Mỗi theme WordPress có một bố cục khác nhau. Ví dụ, theme Twenty Twenty-One có một tiêu đề, vòng lặp nội dung, Widgets chân trang và chân trang.
Mỗi phần được xử lý bởi một file khác nhau trong folder twentytwentyone. Những file này được gọi là các file mẫu.
Thường thì các file mẫu được đặt tên theo khu vực mà chúng được sử dụng. Ví dụ, khu vực chân trang thường được xử lý bởi file footer.php, và các khu vực tiêu đề và điều hướng được xử lý bởi file header.php.
Xem thêm: Cách chỉnh sửa Footer trong WordPress
Một số khu vực, như khu vực nội dung, có thể được xử lý bởi nhiều file gọi là các mẫu nội dung.
Nếu bạn muốn sửa đổi một file mẫu, bạn đầu tiên tìm file đó trong folder parent theme và sao chép nó vào folder child theme. Sau đó, bạn nên mở file đó bằng một trình soạn thảo văn bản và thực hiện các sửa đổi bạn muốn.
Trong hướng dẫn này, chúng ta sẽ sao chép file footer.php từ parent theme sang folder child theme. Khi bạn đã làm điều đó, bạn cần mở file bằng một trình soạn thảo văn bản đơn giản như Notepad.
Ví dụ, chúng ta sẽ loại bỏ liên kết ‘Proudly powered by WordPress’ khỏi khu vực footer và thêm thông báo bản quyền vào đó. Để làm điều đó, bạn nên xóa tất cả nội dung giữa các thẻ <div class= "powered-by">.
<div class="powered-by">
<?php
printf(
/* translators: %s: WordPress. */
esc_html__( 'Proudly powered by %s.', 'twentytwentyone' ),
'<a href="' . esc_url( __( 'https://wordpress.org/', 'twentytwentyone' ) ) . '">WordPress</a>'
);
?>
</div><!-- .powered-by -->Sau đó, bạn cần dán code bạn tìm thấy bên dưới các thẻ đó trong ví dụ bên dưới.
<div class="powered-by">
<p>© Copyright <?php echo date("Y"); ?>. All rights reserved.</p>
</div><!-- .powered-by -->Khi bạn lưu file và truy cập trang web WordPress của mình, bạn sẽ có thể xem thông báo bản quyền mới.
Thêm chức năng mới vào child theme của bạn
File functions.php trong một theme sử dụng code PHP để thêm tính năng hoặc thay đổi tính năng mặc định trên trang web WordPress. Nó hoạt động như một plugin cho trang web WordPress của bạn và sẽ tự động được kích hoạt cùng với theme hiện tại.
Bạn sẽ thấy rất nhiều hướng dẫn WordPress yêu cầu bạn sao chép và dán các đoạn code vào functions.php. Nhưng nếu bạn thêm code vào parent theme, nó sẽ bị ghi đè mỗi khi bạn cài đặt bản cập nhật mới cho theme.
Đó là lý do tại sao Vietnix đề xuất sử dụng một child theme khi thêm các đoạn code tùy chỉnh. Trong hướng dẫn này, Vietnix sẽ thêm một Widgets mới vào theme.
Chúng ta có thể làm điều đó bằng cách thêm đoạn code này vào file functions.php của child theme. Bạn cũng có thể sử dụng plugin để thêm code tùy chỉnh trong WordPress, điều đó có nghĩa là bạn sẽ không cần chỉnh sửa file functions:
<?php
// Register Sidebars
function custom_sidebars() {
$args = array(
'id' => 'custom_sidebar',
'name' => __( 'Custom Widget Area', 'text_domain' ),
'description' => __( 'A custom widget area', 'text_domain' ),
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
'before_widget' => '<aside id="%1$s" class="widget %2$s">',
'after_widget' => '</aside>',
);
register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
?>
Sau khi bạn lưu file, bạn có thể truy cập trang Appearance > Widgets trong bảng điều khiển WordPress của bạn.
Ở đây, bạn sẽ thấy Widgets tùy chỉnh mới của bạn.
Bạn có thể tìm hiểu thêm về cách thêm Widgets trong hướng dẫn của Vietnix về cách thêm các Widgets và thanh bên động trong WordPress.
Còn rất nhiều tính năng khác bạn có thể thêm vào theme của mình bằng cách sử dụng các đoạn code tùy chỉnh. Hãy xem các mẹo vô cùng hữu ích khác cho file functions của WordPress.
Xử lý sự cố
Nếu bạn chưa bao giờ tạo child theme trước đây, có khả năng bạn sẽ mắc một số sai lầm. Đừng nản lòng quá nhanh. Bạn có thể xem 12 cách sửa lỗi WordPress của Vietnix để tìm cách khắc phục.
Các lỗi phổ biến nhất code bạn có thể gặp là lỗi cú pháp do một số thứ bạn bỏ sót trong mã. Bạn sẽ tìm được sự trợ giúp để giải quyết các vấn đề này trong hướng dẫn nhanh của Vietnix về cách tìm và sửa lỗi cú pháp trong WordPress.
Nếu có vấn đề gì xảy ra, bạn luôn có thể bắt đầu lại từ đầu. Ví dụ, nếu bạn tình cờ xóa phần gì đó mà theme của bạn yêu cầu, bạn có xóa file đó khỏi child theme của bạn và bắt đầu lại từ đầu một cách đễ dàng.
Lời kết
Vietnix hy vọng hướng dẫn này đã giúp bạn học cách tạo child theme trong WordPress. Bạn cũng có thể muốn tìm hiểu cách chọn trình tạo trang web tốt nhất hoặc xem danh sách các plugin WordPress cần thiết để phát triển trang web của bạn.
