Bắt đầu từ đầu: Hướng dẫn từng bước giúp bạn xây dựng một chủ đề con chuyên nghiệp cho WordPress

Trong hệ sinh thái WordPress, child theme là nền tảng an toàn để tùy chỉnh và nâng cấp bảo trì website. Nó cho phép bạn kế thừa mọi tính năng, kiểu dáng và tệp mẫu từ theme gốc, đồng thời thực hiện chỉnh sửa trong thư mục độc lập. Điều này có nghĩa là khi theme gốc phát hành bản vá bảo mật hoặc cập nhật tính năng, bạn có thể cập nhật một cách dễ dàng mà không lo mã tùy chỉnh được viết kỹ lưỡng bị ghi đè. Dù là điều chỉnh màu sắc, sửa đổi bố cục hay thêm tính năng phức tạp, việc thực hiện thông qua child theme đều là phương pháp tối ưu nhất.

Tại sao bắt buộc phải sử dụng child theme

Việc trực tiếp sửa đổi tệp của theme gốc là một thao tác rủi ro cao. Một khi theme gốc được cập nhật, mọi chỉnh sửa của bạn sẽ mất hết, cần phải áp dụng lại thủ công, quá trình này rất dễ xảy ra sai sót và tốn thời gian công sức. Quan trọng hơn, khi làm việc nhóm hoặc di chuyển website trong tương lai, việc không có bản ghi chỉnh sửa rõ ràng sẽ gây ra rắc rối lớn.

Child theme giải quyết vấn đề này thông qua cơ chế “ghi đè”. Khi WordPress hiển thị một trang, nó sẽ tìm tệp mẫu tương ứng trong thư mục child theme trước. Nếu tìm thấy, sẽ sử dụng phiên bản của child theme; nếu không tìm thấy, sẽ tự động quay về phiên bản của theme gốc. Cơ chế này cho phép bạn chỉ sửa đổi phần cần thiết, phần còn lại vẫn tiếp tục được hưởng cập nhật và bảo trì từ theme gốc.

Đọc thêm Hướng dẫn nhập môn phát triển chủ đề WordPress: Xây dựng chủ đề đầu tiên từ con số 0。

Ngoài ra, việc sử dụng chủ đề con là phương pháp được WordPress chính thức khuyến nghị, nó giúp duy trì mã nguồn gọn gàng và dễ bảo trì, là dấu hiệu của phát triển chuyên nghiệp.

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

Cấu trúc cơ bản để tạo một chủ đề con

Tạo một chủ đề con rất đơn giản, chỉ cần hai tệp cơ bản: một bảng định kiểu và một tệp hàm. Đầu tiên, bạn cần /wp-content/themes/ Tạo một thư mục mới trong thư mục, thường được đặt tên là “tên-chủ-đề-cha-child”, ví dụ twentytwentyfour-child。

Tạo tệp biểu định kiểu cốt lõi

Cốt lõi của chủ đề con là tệp biểu định kiểu của nó style.cssTệp này không chỉ chứa các quy tắc CSS, mà quan trọng hơn là phần chú thích đầu tệp, được sử dụng để khai báo với WordPress rằng đây là một chủ đề con và chủ đề cha của nó là ai.

/*
 Theme Name:   Twenty Twenty-Four Child
 Theme URI:    https://example.com/twentytwentyfour-child/
 Description:  Twenty Twenty-Four Child Theme
 Author:       Your Name
 Author URI:   https://example.com
 Template:     twentytwentyfour
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  https://www.gnu.org/licenses/gpl-2.0.html
 Text Domain:  twentytwentyfour-child
*/

Trong đó,Template: Dòng này rất quan trọng, giá trị của nó phải hoàn toàn khớp với tên thư mục của theme cha, phân biệt chữ hoa chữ thường. Đây là căn cứ để WordPress nhận diện mối quan hệ cha-con.

Nhập bảng định kiểu của theme cha

Chỉ với các tệp trên, theme con vẫn chưa thể tải được kiểu của theme cha. Bạn cần phải trong tệp hàm của theme con functions.php sử dụng wp_enqueue_scripts hook để xếp hàng tải bảng định kiểu của theme cha.

Đọc thêm Tạo website chuyên nghiệp bắt buộc: Hướng dẫn toàn diện về phát triển và tùy chỉnh chủ đề WordPress。

<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_enqueue_styles' );
function my_child_theme_enqueue_styles() {
    wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
    wp_enqueue_style( 'child-style',
        get_stylesheet_directory_uri() . '/style.css',
        array( 'parent-style' ),
        wp_get_theme()->get('Version')
    );
}
?>

get_template_directory_uri() Hàm lấy URL thư mục chủ đề gốc, trong khi get_stylesheet_directory_uri() lấy URL thư mục chủ đề hiện tại (chủ đề con). Thông qua mảng phụ thuộc array( 'parent-style' ) đảm bảo rằng kiểu dáng của chủ đề con được tải sau kiểu dáng của chủ đề gốc, từ đó cho phép các quy tắc CSS tùy chỉnh của bạn ghi đè chính xác kiểu dáng của chủ đề gốc.

Mở rộng chức năng của child theme

Sau khi tạo cấu trúc cơ bản, bạn có thể mở rộng chức năng trang web vô hạn thông qua tệp functions.php Mã trong tệp này sẽ được thực thi trước tệp functions.php của parent theme, cung cấp cho bạn một điểm mở rộng tuyệt vời để sửa đổi chức năng cốt lõi.

Tùy chỉnh chức năng website

Ví dụ, bạn có thể muốn thêm một loại bài viết tùy chỉnh mới “Dự án” cho website. Bạn có thể đăng ký nó trong functions.php tệp của theme con.

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

add_action( 'init', 'register_project_post_type' );
function register_project_post_type() {
    $args = array(
        'public'      => true,
        'label'       => '项目',
        'has_archive' => true,
        'supports'    => array( 'title', 'editor', 'thumbnail', 'excerpt' ),
        'menu_icon'   => 'dashicons-portfolio',
    );
    register_post_type( 'project', $args );
}

Đồng thời, bạn cũng có thể loại bỏ một số chức năng không cần thiết từ theme cha. Ví dụ, nếu theme cha thêm một widget chân trang không mong muốn thông qua một hàm cụ thể, bạn có thể sử dụng remove_action() Để loại bỏ nó. Giả sử chủ đề cha đã thêm tiện ích con trên init hook bằng hàm parent_theme_footer_widgets bạn có thể xóa như sau:

add_action( 'after_setup_theme', 'remove_parent_theme_features', 15 );
function remove_parent_theme_features() {
    remove_action( 'init', 'parent_theme_footer_widgets' );
}

Lưu ý, ở đây sử dụng after_setup_theme Móc và thiết lập một mức độ ưu tiên hơi cao hơn (ví dụ 15), là để đảm bảo mã của chủ đề cha đã được thực thi add_action, như vậy remove_action của chúng tôi mới có hiệu lực.

Ghi đè lên tệp mẫu của chủ đề cha

Một trong những tính năng mạnh mẽ nhất của child theme là khả năng ghi đè các tệp mẫu của theme cha. Nếu bạn muốn thay đổi cách hiển thị trang bài viết đơn lẻ, chỉ cần sao chép single.php từ theme cha vào thư mục child theme của bạn, sau đó chỉnh sửa. WordPress sẽ tự động sử dụng phiên bản của bạn.

Đọc thêm Mở khóa tiềm năng: Khám phá các kỹ thuật cốt lõi và phương pháp thực hành tốt nhất để xây dựng theme WordPress nâng cao。

Để kiểm soát chi tiết hơn, bạn thậm chí có thể ghi đè các thành phần mẫu (Template Parts) hoặc các khối mẫu cụ thể. Ví dụ, để sửa đổi cách hiển thị siêu dữ liệu bài viết, bạn có thể sao chép và chỉnh sửa từ theme cha template-parts/content-post-meta.php Tệp vào cùng đường dẫn với chủ đề con.

Kỹ thuật nâng cao cho phát triển chủ đề con

Khi phát triển chủ đề con bước vào giai đoạn chuyên nghiệp hơn, bạn sẽ tiếp cận các chủ đề nâng cao như bản địa hóa, kế thừa tùy chọn chủ đề và cập nhật chính chủ đề con.

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

Thực hiện dịch thuật bản địa hóa văn bản

Để cho phép chủ đề con của bạn hỗ trợ đa ngôn ngữ, bạn cần thiết lập đúng tên miền văn bản (Text Domain) và sử dụng các hàm dịch. Việc tải tên miền văn bản trong phần đầu của style.css và trong functions.php là bước đầu tiên.

在 functions.php trong đó, sử dụng load_child_theme_textdomain Hàm:

add_action( 'after_setup_theme', 'child_theme_localization_setup' );
function child_theme_localization_setup() {
    load_child_theme_textdomain( 'twentytwentyfour-child', get_stylesheet_directory() . '/languages' );
}

Sau đó, tại các chuỗi cần dịch, sử dụng hàm như esc_html__( 'Your Text', 'twentytwentyfour-child' ) để bao bọc. Tiếp theo, bạn có thể dùng công cụ như Poedit để tạo .po 和 .mo tệp dịch và lưu chúng trong thư mục /languages/ của child theme.

An toàn sửa đổi hàm lõi

Đôi khi, bạn cần sửa đổi một hàm phức tạp trong theme cha mà hàm đó không cung cấp đủ tính linh hoạt thông qua các Hook. Nếu hàm đó là “có thể cắm thêm” (Pluggable), tức được bao bọc bởi if ( ! function_exists( ... ) ) thì bạn có thể khai báo lại hàm đó trực tiếp trong functions.php của theme con để ghi đè hoàn toàn nó.

Trước khi thử thao tác này, hãy đảm bảo kiểm tra cách hàm được định nghĩa trong theme chính. Nếu nó không phải là pluggable, việc cố gắng khai báo lại sẽ gây ra lỗi nghiêm trọng. Trong trường hợp này, cách an toàn hơn là liên hệ với nhà phát triển theme hoặc tìm kiếm các filter hook khác để đáp ứng nhu cầu của bạn.

Tóm lại

Việc xây dựng các phụ thể (subthemes) cho WordPress là một kỹ năng cốt lõi mà mọi nhà phát triển web nên nắm vững. Việc này giúp tạo ra một quy trình tùy chỉnh an toàn và bền vững, đồng thời giúp phân tách rõ ràng giữa mã nguồn tùy chỉnh của bạn và mã nguồn gốc của chính giao diện WordPress. Điều quan trọng là phải tạo ra các phụ thể này bằng cách sử dụng các thông tin đầu (header information) chính xác style.css And the loading style… functions.php Từ bước bắt đầu, đến việc thay thế các tệp mẫu (template files) và mở rộng chức năng (extend functions), rồi đến xử lý các vấn đề liên quan đến hóa địa phương hóa (localization) và các tùy chọn nâng cao khác, mọi bước đều tuân theo các thực tiễn tốt nhất của WordPress. Việc luôn sử dụng các chủ đề con (subthemes) là nền tảng vững chắc để đảm bảo trang web của bạn không chỉ luôn cập nhật kịp thời theo các phiên bản mới nhất của WordPress, mà còn giữ được vẻ ngoài và chức năng độc đáo trong n

FAQ 常见问题

Tên thư mục của child theme có yêu cầu gì không?

Tên thư mục của child theme không có giới hạn nghiêm ngặt, nhưng để rõ ràng và minh bạch, thường khuyên nên sử dụng định dạng “tên-chủ-đề-chính-child”, ví dụ astra-child. Điểm quan trọng nằm ở style.css trong phần header của file Template: Trường này, giá trị của nó phải khớp hoàn toàn với tên thư mục của theme cha, bao gồm cả chữ hoa chữ thường, nếu không WordPress sẽ không thể thiết lập chính xác mối quan hệ cha-con.

Có phải tất cả theme cha đều hỗ trợ tạo theme con?

Phần lớn các theme hiện đại và tuân thủ tiêu chuẩn mã hóa của WordPress đều hỗ trợ đầy đủ theme con. Về lý thuyết, bất kỳ theme nào cũng có thể làm theme cha. Tuy nhiên, một số theme được thiết kế kém hoặc rất cũ có thể khiến theme con hoạt động không bình thường do sử dụng đường dẫn tuyệt đối để tham chiếu tài nguyên hoặc thiếu các tệp mẫu cần thiết. Khi chọn theme cha, việc kiểm tra tài liệu hoặc đánh giá người dùng của nó là điều khôn ngoan.

Làm thế nào để di chuyển theme cha đã được sửa đổi trực tiếp sang theme con?

Trước tiên, trong môi trường cục bộ hoặc môi trường kiểm thử của bạn, hãy tạo một chủ đề con mới dựa trên chủ đề cha gốc chưa chỉnh sửa. Sau đó, so sánh từng tệp chủ đề cha bạn đã sửa đổi trước đó với tệp gốc để tìm sự khác biệt. Di chuyển có tổ chức các đoạn mã khác biệt (có thể là CSS, PHP hoặc HTML) vào các tệp tương ứng trong chủ đề con: CSS đặt vào chủ đề con style.cssmã chức năng đặt vào functions.phpcác tệp mẫu đã sửa đổi thì sao chép vào thư mục chủ đề con rồi thay đổi. Đây là một quá trình sắp xếp tỉ mỉ, nhưng một lần là xong mãi mãi.

Chủ đề con có ảnh hưởng đến tốc độ trang web không

Tác động của việc tạo child theme đúng cách đến tốc độ website là rất nhỏ. Các tệp CSS và JS bổ sung thường nhỏ, và thông qua việc xếp hàng đợi tải đúng cách, chúng có thể được hợp nhất và lưu vào bộ nhớ đệm một cách hiệu quả. Chi phí chính của child theme có thể đến từ functions.php logic PHP phức tạp được thêm vào. Do đó, việc giữ cho mã của child theme gọn nhẹ và hiệu quả, tuân theo các nguyên tắc tương tự như khi phát triển trong parent theme. Sử dụng hợp lý các kỹ thuật lưu vào bộ nhớ đệm có thể bù đắp thêm bất kỳ tác động hiệu suất tiềm ẩn nào.