Trang chủ/Kiến thức/WordPress/Chi tiết nội dung

Phát triển chủ đề WordPress: Hướng dẫn toàn diện để tạo chủ đề tùy chỉnh từ đầu

Đọc trong 3 phút
2026-03-19
2026-06-04
2,772
Tôi kiếm được hoa hồng khi bạn mua sắm thông qua các liên kết dưới đây, mà không phát sinh thêm chi phí nào cho bạn.

Cấu trúc cơ bản của một chủ đề WordPress

Một chủ đề WordPress về cơ bản là một tập hợp các tệp nằm trong thư mục `wp-content/themes/`.wp-content/themes/Các thư mục trong danh mục chứa một loạt tệp tin được sử dụng để điều khiển giao diện và chức năng của trang web. Việc hiểu rõ vai trò của những tệp tin cốt lõi này là nền tảng quan trọng trong quá trình phát triển trang web.

Đây là tệp mẫu bắt buộc cho chủ đề (theme) được yêu cầu.

Mỗi chủ đề (theme) phải bao gồm hai tệp tin cơ bản nhất:style.css和index.phpTrong đó,style.cssKhông chỉ được sử dụng để lưu trữ các định dạng CSS, phần ghi chú ở đầu tệp còn chứa thông tin siêu dữ liệu (metadata) về chủ đề (theme). WordPress dựa vào những thông tin này để nhận diện chủ đề cụ thể.

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

index.phpĐây là tệp mẫu mặc định của chủ đề; khi WordPress không tìm thấy mẫu cụ thể nào khác, nó sẽ sử dụng tệp này để hiển thị trang web. Nó đóng vai trò như “lưới an toàn” đảm bảo rằng tất cả các trang đều được hiển thị đúng cách.

Đọc thêm Xây dựng trang web chất lượng cao: Hướng dẫn thực hành chi tiết về việc tùy chỉnh và tối ưu hóa các giao diện (theme) của WordPress。

Các tệp mẫu khác thường được sử dụng:

Để có thể kiểm soát việc hiển thị trên các trang khác nhau một cách chính xác hơn, bạn cần tạo thêm nhiều tệp mẫu (template files) nữa. Ví dụ,header.phpThường bao gồm tuyên bố về loại tài liệu (document type declaration).<head>Phần tiêu đề của khu vực và trang web;footer.phpNó sẽ chứa nội dung phần chân trang (footer) và các thẻ đóng (closing tags).sidebar.phpDùng cho thanh bên cạnh (sidebar). Thực hiện điều này bằng các hàm tích hợp sẵn trong WordPress.get_header()、get_footer()和get_sidebar()Bạn có thể dễ dàng đưa các phần này vào các mẫu khác.

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%
Logo UltaHost Truy cập trang

Ngoài ra, bạn cũng có thể tạo ra…single.phpdành cho bài viết đơn lẻ,page.phpDành cho trang độc lập,archive.phpDùng để lập danh sách các tài liệu đã được lưu trữ, cũng như…functions.phpTệp tin đặc biệt này được sử dụng để thêm các chức năng và tính năng liên quan đến việc thiết lập chủ đề (theme settings).

Tạo mẫu trang chủ cho chủ đề (Create a homepage template for the theme)

Trang chủ là “bộ mặt” của một trang web, vì vậy thường cần được thiết kế một cách độc đáo nhất. Chúng ta sẽ bắt đầu từ việc xây dựng…index.phpChúng ta hãy bắt đầu và tìm hiểu cách sử dụng vòng lặp (loop) để hiển thị nội dung.

Đồng bộ hóa phần đầu trang (header) và phần chân trang (footer)

Một thực hành tốt là việc mô-đun hóa các phần chung (các thành phần có thể được sử dụng lại trong nhiều ứng dụng khác nhau). Đầu tiên, hãy tạo các mô-đun này trong thư mục chứa chủ đề (theme folder) của bạn.header.php和footer.php… trong…header.phpbạn cần bao gồm<!DOCTYPE html>Tuyên bố,<html>Bắt đầu của thẻ…<head>Khu vực (sử dụngwp_head()Các “hook” (móc) cho phép các plugin và theme chèn mã lệnh vào đây, cũng như hiển thị các nội dung khởi đầu như biểu tượng trang web và menu điều hướng chính.

Sau đó, trongindex.phpĐể bắt đầu, hãy sử dụng…<?php get_header(); ?>Hãy sử dụng đoạn mã sau để đưa phần tiêu đề (header) này vào trang web của bạn:index.phpỞ cuối đoạn văn, hãy sử dụng…<?php get_footer(); ?>Để giới thiệu…footer.phpTrong đó nên bao gồm…wp_footer()Hook calls and closures.</body></html>Thẻ.

Đọc thêm Hướng dẫn đầy đủ về phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh hiệu suất cao từ không đến một。

Sử dụng vòng lặp để in ra nội dung bài viết.

Trái tim của WordPress chính là “The Loop” – đoạn mã PHP được sử dụng để kiểm tra xem có bài viết nào tồn tại hay không, và nếu có, thì sẽ hiển thị chúng theo thứ tự.index.php的get_header()Sau đó, bạn có thể chèn đoạn mã vòng lặp cơ bản sau:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    
    <p>Xin lỗi, không tìm thấy bài viết nào.</p>
<?php endif; ?>

Trong đoạn mã này,have_posts()和the_post()Vòng lặp được điều khiển bởi hàm (Function-driven loop).the_title()、the_permalink()和the_excerpt()Các thẻ mẫu như `` và `` được sử dụng để hiển thị nội dung cụ thể của bài viết. Như vậy, một trang danh sách bài viết cơ bản đã được tạo xong.

Thêm phong cách (styles) và mã nguồn (scripts) cho chủ đề (theme).

Một chủ đề không có bất kỳ thiết kế nào (không có kiểu dáng cụ thể) sẽ thiếu đi sức hấp dẫn. Bạn cần thêm các tệp CSS và JavaScript vào đúng vị trí trong hệ thống, theo cách mà WordPress khuyến nghị. Điều này sẽ đảm bảo rằng các thành phần phụ thuộc vào nhau được xử lý đúng cách và tránh được xung đột giữa chúng.

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%.
Logo của Hosting.com Truy cập trang

Cách đúng để đưa vào bảng định dạng (style sheet):

Mặc dùstyle.cssĐiều đó là cần thiết, nhưng bạn không nên trực tiếp đặt liên kết đến nó trong HTML. Cách đúng đắn là…functions.phptrong tệpwp_enqueue_style()Hàm. Trước tiên, hãy tạo nó trong thư mục gốc của chủ đề (theme root directory).functions.phpTải tệp xuống, sau đó thêm đoạn mã sau:

<?php
function my_theme_enqueue_styles() {
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );

Đoạn mã này định nghĩa một hàm, hàm đó yêu cầu WordPress sử dụng bảng định dạng chính (main style sheet) của chủ đề (theme) để thiết lập giao diện trang web.get_stylesheet_uri()Đường dẫn đã thu được được thêm vào hàng đợi với “my-theme-style” làm tham chiếu (handle).add_action()Hook này sẽ gắn (mount) hàm này vào hệ thống.wp_enqueue_scriptsĐối với hành động này, hãy đảm bảo rằng nó được thực hiện khi trang web được tải.

Đưa vào JavaScript tùy chỉnh

Cách để đưa vào tệp JavaScript cũng tương tự, nhưng bạn sử dụng…wp_enqueue_script()Hàm. Giả sử bạn có một hàm nằm ở…js/script.jsĐối với tệp tin đó, bạn có thể thêm nó theo cách sau:

Đọc thêm Từ cơ bản đến nâng cao: Hướng dẫn toàn diện và bài học thực hành về phát triển theme WordPress。

function my_theme_enqueue_scripts() {
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );

Các tham số ở đây lần lượt biểu thị: handle của script, URL của script, mảng phụ thuộc (ví dụ nhưarray('jquery')Phiên bản, số phiên bản, và việc xác định liệu nội dung đó có được tải vào phần chân trang (footer) hay không.truebiểu thị rằng từ</body>(Tải trước).

(Tính năng mở rộng chủ đề)

functions.phpĐây là “hộp công cụ” (toolbox) của chủ đề; bạn có thể thêm các tính năng khác nhau vào đây để nâng cao chất lượng của chủ đề mà không cần phải sửa đổi các tệp mẫu cốt lõi.

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.
Logo của InterServer Truy cập trang

Thêm tính năng hỗ trợ thêm chủ đề (Add theme support feature)

WordPress cung cấp nhiều tính năng tích hợp sẵn, nhưng chúng chỉ có thể được kích hoạt nếu giao diện (theme) của bạn tuyên bố rõ ràng rằng nó hỗ trợ các tính năng đó. Điều này được thực hiện thông qua cơ chế…add_theme_support()cách triển khai hàm. Ví dụ, để hỗ trợ ảnh đại diện bài viết (featured image), logo tùy chỉnh và các thẻ HTML5, có thể thêm vàofunctions.phpthêm:

function my_theme_setup() {
    add_theme_support( 'post-thumbnails' );
    add_theme_support( 'custom-logo' );
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
    add_theme_support( 'title-tag' ); // 让WordPress管理页面标题
}
add_action( 'after_setup_theme', 'my_theme_setup' );

add_action( 'after_setup_theme', 'my_theme_setup' )Hãy đảm bảo rằng các thiết lập này được thực hiện càng sớm càng tốt khi chủ đề được khởi tạo (tức là ngay khi chương trình bắt đầu hoạt động).

Đăng ký menu điều hướng

Để người dùng có thể thiết lập menu điều hướng trong mục “Giao diện – Menu” ở phía sau hậu trường, bạn cần phải đăng ký trước các vị trí của các mục trong menu. Hãy sử dụng công cụ phù hợp để thực hiện việc này.register_nav_menus()Hàm:

function my_theme_register_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'init', 'my_theme_register_menus' );

Sau khi đăng ký, bạn có thể trong tệp mẫu (ví dụ nhưheader.php）sử dụngwp_nav_menu( array( 'theme_location' => 'primary' ) )Đây là lúc menu được hiển thị rồi.

Tóm lại

Từ khi tạo ra…style.css和index.phpBạn bắt đầu từ thư mục cơ bản của theme và từng bước xây dựng một theme WordPress hoàn chỉnh. Bằng cách hiểu rõ cấu trúc phân cấp của các template, bạn đã học được cách tạo ra các tệp template riêng biệt để kiểm soát chính xác các loại trang khác nhau.wp_enqueue_style()和wp_enqueue_script()Việc quản lý tài nguyên là thực hành tốt nhất để đảm bảo tính tương thích và hiệu suất của các ứng dụng/dịch vụ. Cuối cùng, hãy tận dụng những công cụ và phương pháp có sẵn để tối ưu hóa quá trình quản lý tài nguyên.functions.phpBạn có thể truy cập vào tệp tin đó.add_theme_support()和register_nav_menus()Các hàm như vậy giúp thêm những tính năng mạnh mẽ vào chủ đề một cách an toàn. Bằng cách nắm vững những bước cốt lõi này, bạn sẽ có được nền tảng vững chắc để tự phát triển các chủ đề WordPress cá nhân hóa.

FAQ 常见问题

Phát triển chủ đề WordPress cần những kiến thức tiên quyết nào?

Bạn cần có nền tảng vững chắc về HTML và CSS để xây dựng cấu trúc và thiết kế giao diện cho các trang web. Bạn cũng cần hiểu biết cơ bản về ngôn ngữ lập trình PHP, vì các mẫu templat của WordPress chủ yếu được viết bằng PHP. Kiến thức cơ bản về JavaScript sẽ hữu ích trong việc thêm các tính năng tương tác vào trang web. Ngoài ra, việc am hiểu các khái niệm cơ bản của WordPress như bài viết (articles), trang (pages), thể loại (categories) và thẻ (tags) sẽ giúp bạn làm việc hiệu quả hơn trong quá trình phát triển.

Tại sao phải sử dụng wp_enqueue_style để tải stylesheet thay vì dùng link trực tiếp?

Sử dụng trực tiếp<link>Việc cố định đường dẫn tệp biểu mẫu (stylesheet) trong các thẻ (tags) qua mã nguồn gây ra nhiều vấn đề. Đầu tiên, cách này không thể xử lý được các mối phụ thuộc giữa các tệp biểu mẫu một cách hiệu quả; ví dụ, các thiết lập trong biểu mẫu của bạn có thể phụ thuộwp_enqueue_styleCho phép các plugin hoặc các phần tử thuộc hệ thống tem (theme) an toàn định dạng lại hoặc sửa đổi các thiết lập về giao diện (styles) của bạn. Điều quan trọng nhất là tính năng này giúp tương tác tốt hơn với các plugin liên quan đến việc lưu trữ dữ liệu (cache) và tối ưu hóa hiệu suất (performance optimization), đảm bảo thứ tự và hiệu quả trong quá trình tải các tài nguyên. Đây là một phương thức tiêu chuẩn trong hệ sinh thá

Có gì khác biệt giữa file `functions.php` và các plugin?

functions.phpĐoạn mã được định nghĩa trong thème (theme) có mối liên kết chặt chẽ với thiết kế và giao diện của thème đó; khi người dùng thay đổi thème, các tính năng này sẽ không còn khả dụng nữa. Những đoạn mã này thích hợp để lưu trữ các chức năng liên quan trực tiếp đến việc hiển thị và bố cục của thème, chẳng hạn như menu đăng ký, hỗ trợ việc sử dụng hình ảnh đặc biệt, hoặc định nghĩa các thanh bên cạnh (sidebar). Ngược lại, các tính năng được cung cấp bởi plugin thường độc lập với thème và nhằm mục đích bổ sung những tính năng chung cho trang web (như biểu mẫu liên hệ, tối ưu hóa SEO), vì vậy chúng vẫn sẽ hoạt động ngay cả khi người dùng thay đổi thème. Nếu một tính nào đó không liên quan đến giao diện của thème, việc xem xét biến nó thành một plugin thường là lựa chọn linh hoạt hơn.

Làm thế nào để chủ đề của tôi hỗ trợ dịch đa ngôn ngữ?

Việc hỗ trợ quốc tế hóa cho các chủ đề (themes) là yếu tố then chốt để tiếp cận thị trường toàn cầu. Đầu tiên, hãy sử dụng các hàm dịch của WordPress ở tất cả các nơi mà văn bản liên quan đến chủ đề được hiển thị.__('文本', 'my-custom-theme')或_e('文本', 'my-custom-theme')Trong đómy-custom-themeĐúng vậy.style.cssVăn bản được định nghĩa trong các trường văn bản tương ứng. Sau đó, sử dụng các công cụ như Poedit để quét các tệp chủ đề (theme files) và tạo ra nội dung cần thiết..potcác tệp mẫu, từ đó các dịch giả có thể tạo ra các tệp.po和.moCuối cùng, về tệp tin…functions.phphãy tải bản dịch thông qua hàmload_theme_textdomain()Hàm được sử dụng để tải các tệp dữ liệu dịch.

Bước tiếp theo, chúng ta nên làm gì tiếp theo?

Nếu bạn đang xây dựng hoặc tối ưu hóa trang web WordPress của mình, bước tiếp theo là tiếp tục đọc về tối ưu hóa hiệu năng, cấu hình plugin và tùy chỉnh chủ đề.

Đọc thêm và kiến thức thực tế

Những nội dung sau đây liên quan đến chủ đề của bài viết này, thích hợp để tiếp tục đọc sâu hơn. Ưu tiên bắt đầu với bài viết gần nhất với vấn đề hiện tại của bạn, rồi dần dần mở rộng sang các chủ đề xung quanh, hiệu quả thường sẽ tốt hơn.

Thẻ: