Cài Child Theme WordPress

4 ngày ago, Hướng dẫn người mới, 2 Views

Giới Thiệu Child Theme WordPress

Trong thế giới WordPress năng động, việc tùy chỉnh giao diện (theme) là một nhu cầu thiết yếu để tạo ra một trang web độc đáo và phù hợp với thương hiệu. Tuy nhiên, việc chỉnh sửa trực tiếp các file của theme gốc có thể dẫn đến nhiều vấn đề, đặc biệt là khi cập nhật theme. Đó là lý do tại sao Child Theme ra đời, như một giải pháp an toàn và hiệu quả để tùy biến theme WordPress.

Child Theme là một theme “con” kế thừa tất cả các chức năng và phong cách của theme “cha” (Parent Theme). Nó cho phép bạn ghi đè hoặc thêm mới các chức năng mà không ảnh hưởng đến các file gốc của Parent Theme. Điều này đảm bảo rằng khi theme gốc được cập nhật, những thay đổi bạn đã thực hiện sẽ không bị mất.

Tại Sao Nên Sử Dụng Child Theme?

Việc sử dụng Child Theme mang lại rất nhiều lợi ích, đặc biệt là khi bạn có ý định tùy chỉnh theme WordPress của mình. Dưới đây là một số lý do quan trọng:

An Toàn Khi Cập Nhật: Khi theme gốc có bản cập nhật, bạn có thể cập nhật một cách an toàn mà không lo lắng về việc mất các tùy chỉnh.
Dễ Dàng Quản Lý Các Tùy Chỉnh: Tất cả các thay đổi của bạn đều được lưu trữ trong Child Theme, giúp bạn dễ dàng quản lý và theo dõi.
Tránh Các Lỗi Phát Sinh: Việc chỉnh sửa trực tiếp theme gốc có thể gây ra lỗi. Child Theme giúp bạn tránh được những rủi ro này.
Dễ Dàng Phục Hồi: Nếu có bất kỳ vấn đề nào xảy ra, bạn có thể dễ dàng tắt Child Theme và kích hoạt lại theme gốc.

Cách Tạo Child Theme WordPress

Việc tạo Child Theme khá đơn giản và có thể được thực hiện theo các bước sau:

Bước 1: Tạo Thư Mục Child Theme

Đầu tiên, bạn cần tạo một thư mục mới cho Child Theme của mình. Thư mục này nên được đặt tên theo cấu trúc sau:

parent-theme-name-child

Ví dụ, nếu Parent Theme của bạn có tên là “Astra”, thư mục Child Theme sẽ có tên là “astra-child”.

Bạn có thể tạo thư mục này thông qua FTP client (như FileZilla) hoặc trình quản lý file trên hosting của bạn. Truy cập vào thư mục wp-content/themes/ và tạo thư mục mới.

Bước 2: Tạo File style.css

Trong thư mục Child Theme vừa tạo, bạn cần tạo một file style.css. File này chứa thông tin về Child Theme và chỉ định Parent Theme mà nó kế thừa. Nội dung của file style.css sẽ như sau:


/*
 Theme Name:   Astra Child
 Theme URI:    https://example.com/astra-child/
 Description:  Astra Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     astra
 Version:      1.0.0
 Text Domain:  astra-child
*/

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

/*
  Add your own styles here
*/

Giải thích:

Theme Name: Tên của Child Theme.
Theme URI: Đường dẫn đến trang web của Child Theme (tùy chọn).
Description: Mô tả ngắn gọn về Child Theme.
Author: Tên của tác giả Child Theme.
Author URI: Đường dẫn đến trang web của tác giả (tùy chọn).
Template: Tên thư mục của Parent Theme (quan trọng!). Đảm bảo tên này trùng khớp với tên thư mục của Parent Theme.
Version: Phiên bản của Child Theme.
Text Domain: Tên miền văn bản cho Child Theme (thường trùng với tên Child Theme).
@import url(‘../astra/style.css’); Dòng này nhập các kiểu dáng từ file style.css của Parent Theme. Thay thế “astra” bằng tên thư mục của Parent Theme nếu cần.

Lưu ý: Dòng @import url('../astra/style.css'); là rất quan trọng. Nó đảm bảo rằng Child Theme kế thừa tất cả các kiểu dáng từ Parent Theme. Bạn có thể thêm các kiểu dáng riêng của mình sau dòng này.

Bước 3: Tạo File functions.php (Tùy Chọn)

Mặc dù không bắt buộc, việc tạo file functions.php trong Child Theme là một cách tốt để thêm các chức năng mới hoặc ghi đè các chức năng của Parent Theme. Tuy nhiên, có một điểm khác biệt quan trọng so với việc chỉnh sửa file functions.php của Parent Theme. Trong Child Theme, bạn không cần phải sao chép toàn bộ hàm để ghi đè. Bạn chỉ cần định nghĩa lại hàm đó trong Child Theme, và nó sẽ được sử dụng thay thế.

Ví dụ, nếu bạn muốn thêm một chức năng đơn giản để hiển thị thông báo “Hello World!” trên trang web của mình, bạn có thể thêm đoạn code sau vào file functions.php:


<?php

function my_child_theme_function() {
    echo '<p>Hello World!</p>';
}
add_action( 'wp_footer', 'my_child_theme_function' );

?>

Lưu ý quan trọng: Khi tạo file functions.php, bạn KHÔNG được sao chép toàn bộ nội dung của file functions.php của Parent Theme. Thay vào đó, bạn chỉ nên thêm các hàm mới hoặc ghi đè các hàm cần thiết.

Bước 4: Kích Hoạt Child Theme

Sau khi đã tạo thư mục và các file cần thiết, bạn có thể kích hoạt Child Theme của mình trong WordPress. Truy cập vào Appearance > Themes và tìm Child Theme bạn vừa tạo. Nhấn nút “Activate” để kích hoạt.

Tùy Chỉnh Child Theme

Sau khi kích hoạt Child Theme, bạn có thể bắt đầu tùy chỉnh nó để tạo ra một trang web độc đáo. Dưới đây là một số cách phổ biến để tùy chỉnh Child Theme:

Thay Đổi Kiểu Dáng (CSS): Bạn có thể thêm CSS tùy chỉnh vào file style.css của Child Theme để thay đổi màu sắc, phông chữ, bố cục, và nhiều yếu tố khác trên trang web của bạn.
Thêm Chức Năng (functions.php): Sử dụng file functions.php để thêm các chức năng mới, chẳng hạn như thêm shortcode, tùy chỉnh menu, hoặc thêm các widget tùy chỉnh.
Ghi Đè Template Files: Bạn có thể sao chép các file template từ Parent Theme vào Child Theme và chỉnh sửa chúng để thay đổi cách hiển thị của các trang, bài viết, hoặc các phần khác của trang web.

Ghi Đè Template Files

Để ghi đè một file template, bạn cần sao chép file đó từ Parent Theme vào Child Theme, giữ nguyên cấu trúc thư mục. Ví dụ, nếu bạn muốn chỉnh sửa file single.php (file template cho trang bài viết), bạn sẽ sao chép file single.php từ thư mục Parent Theme vào thư mục Child Theme, giữ nguyên vị trí của nó. Sau đó, bạn có thể chỉnh sửa file single.php trong Child Theme, và những thay đổi này sẽ được áp dụng thay vì file gốc trong Parent Theme.

Ví dụ:

Giả sử Parent Theme của bạn có file single.php nằm trong thư mục astra. Bạn sẽ sao chép file này vào thư mục astra-child và giữ nguyên tên file là single.php.

Sau khi sao chép, bạn có thể chỉnh sửa file single.php trong thư mục astra-child để thay đổi cách hiển thị của trang bài viết.

Các Lỗi Thường Gặp và Cách Khắc Phục

Trong quá trình tạo và tùy chỉnh Child Theme, bạn có thể gặp một số lỗi. Dưới đây là một số lỗi thường gặp và cách khắc phục:

Trang Web Hiển Thị Lộn Xộn: Lỗi này thường xảy ra khi bạn quên dòng @import url('../parent-theme/style.css'); trong file style.css của Child Theme. Đảm bảo rằng dòng này có mặt và trỏ đúng đến file style.css của Parent Theme.
Lỗi PHP: Nếu bạn gặp lỗi PHP, hãy kiểm tra file functions.php của Child Theme. Đảm bảo rằng bạn đã viết code PHP đúng cú pháp và không có lỗi nào.
Các Tùy Chỉnh Không Hiển Thị: Đôi khi, trình duyệt có thể lưu cache, khiến các tùy chỉnh của bạn không hiển thị. Hãy thử xóa cache của trình duyệt hoặc sử dụng chế độ ẩn danh để kiểm tra.
Lỗi “Template is missing”: Kiểm tra lại dòng “Template” trong file style.css của child theme. Đảm bảo rằng nó trỏ chính xác đến thư mục của Parent theme.

Lời Kết

Child Theme là một công cụ mạnh mẽ và cần thiết cho bất kỳ ai muốn tùy chỉnh theme WordPress của mình một cách an toàn và hiệu quả. Bằng cách sử dụng Child Theme, bạn có thể thoải mái thử nghiệm và tùy biến giao diện trang web của mình mà không lo lắng về việc mất các thay đổi khi cập nhật theme gốc. Hy vọng rằng hướng dẫn chi tiết này đã giúp bạn hiểu rõ hơn về Child Theme và cách tạo một Child Theme cho trang web WordPress của mình.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa