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

Làm thế nào để phát triển một chủ đề WordPress tùy chỉnh từ đầu?

Đọc trong 3 phút
2026-03-16
2026-06-03
2,350
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.

Hiểu về cấu trúc cơ bản và các tệp tin chính của một chủ đề WordPress

Một chủ đề WordPress tùy chỉnh về bản chất là một thư mục chứa các tệp tin cụ thể, và nó được đặt tại địa chỉ nhất định trong hệ thống WordPress./wp-content/themes/Các tệp tin này nằm trong thư mục gốc của WordPress. Chúng tuân theo hệ thống cấu trúc phân cấp của các mẫu (templates) trong WordPress, và cùng nhau quy định cách trang web hiển thị nội dung từ cơ sở dữ liệu (như bài viết, trang) cho người dùng. Việc hiểu rõ vai trò của từng tệp tin và cách chúng phối hợp với nhau là bước đầu tiên trong quá trình phát triển trang web.

Các tệp cần thiết cho chủ đề và cấu trúc thư mục

Mọi chủ đề WordPress đều phải chứa hai tệp tin cốt lõi:style.css 和 index.phpTrong đó,style.css Vai trò của tệp CSS này cực kỳ quan trọng; nó không chỉ định kiểu dáng của giao diện trang web (theme style) mà còn chứa các đoạn ghi chú ở phần đầu tệp, những đoạn ghi chú này chính là “thẻ nhận dạng” giúp WordPress nhận biết được giao diện đang được sử dụng. Các đoạn ghi chú này phải tuân thủ một định dạng cụ thể một cách nghiêm ngặt.

/*
Theme Name: 我的自定义主题
Author: 开发者名称
Description: 这是一个用于演示如何从零开发的自定义WordPress主题。
Version: 1.0.0
Text Domain: my-custom-theme
*/

index.php Đây là tệp mẫu chính của chủ đề (theme’s main template file), đồng thời cũng đóng vai trò như “lớp phòng thủ cuối cùng” trong cấu trúc các tệp mẫu (template hierarchy). Khi WordPress không thể tìm thấy tệp mẫu cụ thể hơn cho yêu cầu hiện tại (như…).single.php或page.phpKhi đó, hệ thống sẽ quay trở lại việc sử dụng phương thức cũ (hoặc giá trị cũ).index.phpDo đó, một chủ đề (theme) mạnh mẽ (robust) phải có tệp tin này.

Đọc thêm Xây dựng website chuyên nghiệp: Hướng dẫn toàn diện tạo theme WordPress tùy chỉnh từ con số 0。

Cấp độ của các mẫu (templates) và chức năng của các tệp mẫu (template files)

Cấu trúc các mẫu (templates) trong WordPress là một bộ quy tắc chọn mẫu thông minh. Nó tự động lựa chọn tệp mẫu phù hợp nhất dựa trên loại trang mà người dùng đang truy cập (chẳng hạn: trang chủ, trang bài viết, trang danh mục). Ví dụ, khi truy cập vào một bài viết cụ thể, WordPress sẽ tìm kiếm theo thứ tự sau:single-post-{slug}.php -> single-post-{id}.php -> single.php -> singular.php -> Và cuối cùng mới đến điều đó. index.php。

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 hai tệp tin bắt buộc nêu trên, một chủ đề (theme) hoàn chỉnh về mặt chức năng thường còn bao gồm:
* header.phpĐịnh nghĩa phần đầu của tài liệu, bao gồm…<head>Khu vực, Logo trang web và bảng điều hướng chính.
* footer.phpĐịnh nghĩa phần chân trang của tài liệu, bao gồm thông tin bản quyền, các liên kết hỗ trợ, v.v.
* functions.phpĐây là “bộ não” của chủ đề (theme), được sử dụng để tải các tập lệnh và phong cách thiết kế (scripts and styles), đăng ký các menu và tiện ích (register menus and widgets), cũng như định nghĩa các chức năng hỗ trợ của chủ đề (define theme support features).
* single.php: dùng để hiển thị một bài viết đơn lẻ.
* page.php: dùng để hiển thị một trang đơn lẻ.

Các chức năng cốt lõi và mẫu thiết kế của một chủ đề (theme)

Sau khi thiết lập cấu trúc tệp tin cơ bản, bước tiếp theo là điền nội dung vào các tệp mẫu này, và sử dụng các hàm cốt lõi của WordPress cùng với “vòng lặp chính” (main loop) để hiển thị dữ liệu một cách động.

Trong tệp functions.php, hãy thực hiện việc khởi tạo các tính năng của chủ đề (theme features).

functions.php Các tệp tin là trung tâm của chức năng mở rộng chủ đề (theme extensions). Bạn có thể thêm các tính năng khác nhau vào đây mà không cần phải sửa đổi các tệp tin cốt lõi của WordPress. Quy trình khởi tạo tiêu chuẩn bao gồm việc thiết lập hỗ trợ cho chủ đề, đăng ký các menu điều hướng và khu vực công cụ (widgets), cũng như tải các tập lệnh (scripts) và bảng định dạng (style sheets) một cách an toàn.

&lt;?php
// 主题初始化设置
function mytheme_setup() {
    // 让WordPress管理<title>标签
    add_theme_support( 'title-tag' );
    // 启用文章特色图像（缩略图）支持
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主菜单位置
    register_nav_menus( array(
        'menu-1' =&gt; esc_html__( '主菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

// 注册小工具侧边栏
function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; esc_html__( '侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; esc_html__( '在此添加小工具。', 'my-custom-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

// 加载主题的样式表和脚本
function mytheme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 加载导航脚本（如果有的话）
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
?&gt;

Sử dụng vòng lặp chính (The Loop) để hiển thị nội dung.

“Chu trình chính” (Main Loop) là khái niệm cốt lõi nhất trong các mẫu WordPress; đó là đoạn mã PHP dùng để kiểm tra và lặp qua các bài viết (hoặc trang) cần được hiển thị trên trang hiện tại. Hầu hết các mẫu hiển thị nội dung đều phụ thuộc vào chu trình này. Dưới đây là một ví dụ về cách thức hoạt động của chu trình chính trong một mẫu WordPress:index.phpMột ví dụ đơn giản về việc sử dụng vòng lặp chính (main loop):

Đọc thêm Hướng dẫn nhập môn phát triển theme WordPress: Xây dựng theme tùy chỉnh từ con số không。

<?php if ( have_posts() ) : ?>
    <div class="posts-container">
        <?php while ( have_posts() ) : the_post(); ?>
            <article no numeric noise key 1009>
                <h2 class="entry-title">
                    <a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a>
                </h2>
                <div class="entry-meta">
                    发布于：
                </div>
                <div class="entry-summary">
                    <?php the_excerpt(); ?>
                </div>
            </article>
        <?php endwhile; ?>
    </div>
    
    <p><?php esc_html_e( '很抱歉，没有找到符合条件的内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Trong đoạn mã này,have_posts()和the_post()Hàm kiểm soát vòng lặp…the_title()、the_permalink()、the_excerpt()Các thẻ mẫu (template tags) được sử dụng để hiển thị nội dung cụ thể.

Thực hiện thiết kế thích ứng (responsive design) và các tính năng chủ đề nâng cao (advanced theme features).

Một chủ đề hiện đại không chỉ cần phải có đầy đủ các tính năng cần thiết, mà còn phải mang lại trải nghiệm người dùng tuyệt vời. Điều này bao gồm khả năng hiển thị tốt trên nhiều loại thiết bị khác nhau, cũng như khả năng đáp ứng các nhu cầu cá nhân hóa một cách linh hoạt.

Tích hợp bố cục thích ứng với các thiết bị khác nhau và tối ưu hóa trải nghiệm người dùng trên nền tảng di động

Để đảm bảo rằng trang web của bạn có giao diện thích ứng với các thiết bị khác nhau (máy tính bảng, điện thoại di động, máy tính xách tay), bạn cần tập trung vào hai khía cạnh chính: HTML và CSS. Đầu tiên, bạn cần…header.phpphần<head>Trong khu vực này, hãy đảm bảo rằng các thẻ meta liên quan đến viewport được bao gồm trong nội dung.

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 
<meta name="viewport" content="width=device-width, initial-scale=1">

Thứ hai, trong phần của bạn…style.cssTrong đó, chúng ta sử dụng Media Queries để điều chỉnh bố cục và kiểu dáng dựa trên độ rộng màn hình. Ví dụ, để ẩn thanh bên cạnh trên các thiết bị di động:

@media screen and (max-width: 768px) {
    #secondary-sidebar {
        display: none;
    }
    .site-main {
        width: 100%;
    }
}

Tạo mẫu trang tùy chỉnh và chủ đề con (custom page templates and subtopics)

Để đáp ứng những yêu cầu đặc biệt về bố cục trang, WordPress cho phép bạn tạo các mẫu trang tùy chỉnh. Ví dụ, bạn có thể tạo một mẫu trang có độ rộng toàn màn hình không chứa thanh bên, và đặt tên cho nó là…template-fullwidth.phpVà thêm chú thích sau đây ở đầu tệp:

<?php
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的页面模板。
 */

Sau đó, khi bạn chỉnh sửa trang trong giao diện quản trị của WordPress, bạn có thể chọn mẫu trang “Full Width Page Template” trong mục “Trang Properties” (Thuộc tính trang).

Đọc thêm Hướng dẫn toàn diện phát triển chủ đề WordPress: Xây dựng website tùy chỉnh từ con số không。

Để bảo vệ những thay đổi tùy chỉnh của bạn không bị ghi đè khi bản cập nhật chính (parent theme) được phát hành, chúng tôi khuyên bạn nên sử dụng các chủ đề con (subthemes) để phát triển. Một chủ đề con chỉ cần chứa…style.cssVà một tùy chọn (optional).functions.phpSubtopicstyle.cssPhần đầu (header) phải khai báo chủ đề cha (parent theme).

/*
Theme Name: 我的子主题
Template: parent-theme-folder-name
*/

Quốc tế hóa, tối ưu hóa nội dung chủ đề và chuẩn bị cho việc phát hành

Khi quá trình phát triển gần hoàn tất, bạn cần đảm bảo rằng sản phẩm dễ sử dụng đối với người dùng trên khắp thế giới và có hiệu suất tốt. Cuối cùng, hãy chuẩn bị kỹ lưỡng cho việc phát hành sản phẩm.

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ực hiện việc quốc tế hóa (i18n – Internationalization) cho một ứng dụng hoặc nội dung.

Quốc tế hóa (internationalization) là quá trình biến chủ đề (theme) của bạn thành phiên bản có thể được dịch sang các ngôn ngữ khác. Trong WordPress, điều này chủ yếu được thực hiện thông qua hai hàm:__()Dùng để trả về chuỗi đã được dịch,_e()Dùng để trực tiếp hiển thị kết quả dịch. Bạn cần sử dụng chúng ở tất cả các đoạn văn bản cần được dịch và chỉ định rõ vị trí cần thực hiện việc dịch.style.cssKhu vực văn bản được định nghĩa ở phần đầu (Text Domain defined at the top).

<h2><?php esc_html_e( '最新文章', 'my-custom-theme' ); ?></h2>
<p><?php echo esc_html__( '这是一段示例文本。', 'my-custom-theme' ); ?></p>

Sau đó, bạn có thể sử dụng các công cụ như Poedit để tạo ra những gì bạn cần..potVui lòng cung cấp tệp mẫu dịch và các gói ngôn ngữ cụ thể (ví dụ: en-US, zh-CN, etc.) để tôi có thể thực hiện công việc dịch..zh_CN.po和.mo(Tệp tin.)

Tiến hành tối ưu hóa hiệu năng và kiểm tra mã nguồn

Trước khi phát hành, cần tiến hành tối ưu hóa hiệu suất của ứng dụng. Các bước cần thực hiện bao gồm: nén các tệp CSS và JavaScript, đảm bảo kích thước hình ảnh phù hợp và đã được tối ưu hóa, giảm số lần truy vấn cơ sở dữ liệu, cũng như sử dụng đúng hệ thống xếp hàng các tập lệnh và kiểu dáng (scripts/styling) của WordPress để tránh việc trực tiếp đưa các tài nguyên vào các mẫu (templates). Đồng thời, cần tiến hành một cuộc kiểm tra toàn diện mã nguồn để đảm bảo rằng ứng dụng tuân thủ các tiêu chuẩn lập trình của WordPress, không còn mã gỡ lỗi (debug code) và tất cả các chức năng đều hoạt động như mong đợi.

Tóm lại

Việc phát triển một chủ đề WordPress tùy chỉnh từ đầu là một quá trình học tập có hệ thống, bao gồm nhiều khía cạnh như hiểu rõ cấu trúc của các tệp cốt lõi, cách sử dụng các cấp độ của các mẫu (templates) và vòng lặp chính (main loop), cho đến việc...functions.phpCông ty Zhongji đã thành công trong việc triển khai các tính năng mới, thực hiện thiết kế thích ứng với nhiều loại thiết bị khác nhau (thiết kế responsive), và sau đó tiến hành quá trình quốc tế hóa cũng như tối ưu hóa trang web. Họ tuân theo nguyên tắc “bắt đầu từ những thứ đơn giản và từng bước cải tiến dần”. Đầu tiên, họ xây dựng một giao diện (theme) có chức năng tối thiểu, sau đó liên tục thêm các tệp mẫu (template) và tính năng mới vào. Khi đã nắm vững những kỹ năng này, bạn sẽ có thể tạo ra những trang web độc đáo, hoàn toàn phù hợp với nhu cầu của bản thân hoặc khách hàng, mà không còn bị hạn chế bởi các giao diện có sẵn. Hãy nhớ rằng, tài liệu chính thức và cộng đồng các nhà ph

FAQ 常见问题

Có cần phải có kiến thức sâu rộng về PHP để phát triển một theme cho WordPress không?

Bạn cần có một nền tảng PHP vững chắc, nhưng không nhất thiết phải đạt trình độ chuyên gia. Bạn cần hiểu về ngữ pháp PHP, biến, mảng, hàm và cấu trúc lặp, vì các mẫu (templates) của WordPress chủ yếu được tạo ra bằng mã PHP. Điều quan trọng nhất là học cách sử dụng các hàm tích hợp sẵn của WordPress (các thẻ mẫu – template tags) và các công cụ gắn kết (hooks – actions và filters), những công cụ này đóng vai trò như cầu nối giữa giao diện thiết kế của bạn (theme) và các chức năng cốt lõi của WordPress.

Tại sao theme tùy chỉnh của tôi không hiển thị trong trang quản trị?

Nguyên nhân phổ biến nhất làstyle.cssĐịnh dạng chú thích ở phần đầu tệp không đúng hoặc có thông tin bị thiếu. Vui lòng kiểm tra kỹ xem các trường như “Theme Name” (Tên Chủ Đề), “Author” (Tác Giả) có được điền đầy đủ và đúng định dạng hay không. Một lý do khác là thư mục chứa các chủ đề (theme folder) đã được đặt ở thư mục không đúng; nó phải nằm trong thư mục phù hợp.wp-content/themes/Dưới đó.

Làm thế nào để chủ đề của tôi hỗ trợ trình soạn thảo Gutenberg?

Để chủ đề của bạn phù hợp tốt hơn với Trình biên tập Gutenberg, bạn cần phải…functions.phpHãy thêm tuyên bố hỗ trợ các chủ đề tương ứng vào đó. Điều này bao gồm việc hỗ trợ việc căn lề rộng, cũng như các bảng định dạng của trình soạn thảo v.v. Ví dụ:

add_theme_support( 'align-wide' ); // 支持宽和全宽对齐
add_theme_support( 'editor-styles' );
add_editor_style( 'style-editor.css' ); // 加载一个用于编辑器的专属样式表

Ngoài ra, hãy viết các đoạn mã thiết kế giao diện (frontend styles) cho một số thành phần cốt lõi như đoạn văn, tiêu đề, và nút bấm, để đảm bảo chúng có vẻ ngoài nhất quán trên trang web và trong công cụ biên tập.

Làm thế nào để tôi kiểm thử chủ đề (theme) của mình?

Việc kiểm thử nên được thực hiện từ nhiều góc độ khác nhau. Đầu tiên, hãy kiểm tra giao diện và chức năng trên các trình duyệt khác nhau (như Chrome, Firefox, Safari, Edge) cũng như trên các thiết bị có kích thước khác nhau (điện thoại, máy tính bảng, máy tính để bàn). Tiếp theo, kiểm tra tính tương thích với các tiện ích mở rộng (plugin) phổ biến. Sau đó, sử dụng dữ liệu “kiểm thử đơn vị chủ đề” (theme unit tests) đi kèm với WordPress (dưới dạng tệp XML) để nhập vào nhiều loại nội dung khác nhau, nhằm đánh giá hiệu suất của chủ đề trong các tình huống khắc nghiệt. Cuối cùng, hãy kích hoạt các tính năng cần thiết để đảm bảo chủ đề hoạt động đúng như mong đợi.WP_DEBUGKiểm tra xem có bất kỳ cảnh báo hay lỗi PHP nào không.

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ẻ: