Hướng dẫn phát triển chủ đề WordPress: Từ cơ bản đến nâng cao để tạo website cá nhân hóa

Đọc trong 3 phút
2026-03-18
2026-06-03
2,885
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ơ bản về phát triển giao diện WordPress

Để bắt đầu phát triển một chủ đề (theme) cho WordPress, trước tiên bạn cần hiểu rõ cấu trúc cơ bản của nó. Một chủ đề cơ bản nhất thường bao gồm ít nhất hai tệp tin:index.phpstyle.cssTrong đó,style.css Không chỉ là các bảng định dạng (style sheets), chúng còn chứa cả thông tin siêu dữ liệu (meta-data) liên quan đến chủ đề (theme). Những thông tin này được khai báo thông qua các khối chú thích (comment blocks) đặc biệt, và đó là yếu tố then chốt giúp WordPress nhận diện được chủ đề đó.

Viết tệp tiêu đề thông tin chủ đề (Theme Information Header File)

style.cssỞ phía trên của tệp tin, phải có một khối chú thích theo định dạng chuẩn. Khối này định nghĩa các metadata như tên chủ đề, tác giả, mô tả, phiên bản, v.v. Ví dụ:

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Trong đóText DomainDùng cho việc hỗ trợ quốc tế hóa (i18n – Internationalization), và sẽ được sử dụng sau đó cùng với các hàm dịch (chẳng hạn như…)__()_e()Đây là các trường văn bản bắt buộc phải được điền khi thực hiện một thao tác nhất định. Việc điền đúng thông tin là điều kiện tiên quyết để chủ đề được hệ thống quản trị WordPress nhận diện và kích hoạt thành công.

Đọc thêm Phát triển chủ đề WordPress: Hướng dẫn toàn diện xây dựng chủ đề website cấp chuyên nghiệp từ con số không

Hiểu cấu trúc phân cấp của các tệp tin chủ đề (theme files)

WordPress sử dụng hệ thống cấp độ template (mẫu) để quyết định sẽ gọi tập tin template nào cho các loại trang khác nhau. Ví dụ, khi truy cập vào một bài viết cụ thể, WordPress sẽ ưu tiên tìm kiếm tập tin template dành riêng cho loại trang đó.single.phpNếu không tồn tại, hãy quay trở lại trạng thái ban đầu.singular.phpCuối cùng, quay trở lại trạng thái ban đầu.index.phpHãy cố gắng hiểu rõ cấu trúc này (ví dụ:…)front-page.php > home.php > index.phpĐiều này rất quan trọng đối với việc tạo ra những chủ đề (templates) có chức năng hoàn chỉnh. Các nhà phát triển nên ưu tiên tạo ra những tệp mẫu (template files) cụ thể nhất có thể, và đảm bảo rằng có sẵn một hệ thống quản lý hiệu quả để kiểm soát và cập nhật những tindex.phpĐược sử dụng như phương án dự phòng cuối cùng.

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%

Vai trò của tệp mẫu cốt lõi (core template file)

Ngoài tệp nhập cảnh (entry file), một chủ đề (theme) có tính năng đầy đủ thường bao gồm các tệp mẫu (template files) cốt lõi sau:
* header.phpĐịnh nghĩa phần đầu của tài liệu (document header), thường bao gồm:<head>Khu vực và tiêu đề trang web.
* footer.phpĐịnh nghĩa phần chân trang (footer) của tài liệu.
* sidebar.phpĐịnh nghĩa khu vực bên cạnh (sidebar).
* functions.phpĐây là “Trung tâm Tính năng” của chủ đề, dùng để thêm các tính năng mới, đăng ký các mục trong menu, hỗ trợ việc sử dụng hình ảnh đặc biệt, v.v.
Trong tệp mẫu, sử dụngget_header()get_footer()get_sidebar()Hãy sử dụng các hàm như `include` hoặc `require` để đưa các phần này vào chương trình, nhằm giữ cho mã nguồn có tính mô-đun hóa cao.

Xây dựng các chức năng cốt lõi của chủ đề (Building the core functions of the theme)

Chủ đềfunctions.phpCác tệp tin là yếu tố cốt lõi trong việc mở rộng chức năng của một giao diện (theme) trong WordPress. Đây không phải là những tệp tin mẫu (template files), mà là những tệp PHP được tự động tải vào khi giao diện được khởi tạo, nhằm mục đích kết nối với các API cốt lõi của WordPress.

Thao tác khởi tạo tệp chức năng chủ đề (Theme Function File Initialization)

functions.phpTrong quá trình thực hiện, tất cả các thao tác đều phải được thực hiện thông qua…add_action()Liên kết với một hành động cụ thể, hoặc thông qua…add_filter()Để thay đổi dữ liệu, một điểm khởi đầu tiêu chuẩn là…after_setup_themeHỗ trợ thiết lập chủ đề trong các hành động (actions). Ví dụ:

function mytheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support( 'title-tag' );
    // 启用文章和页面的特色图像功能
    add_theme_support( 'post-thumbnails' );
    // 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
        'footer'  => __( '页脚菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Đoạn mã này đã kích hoạt các thẻ tiêu đề tự động, hiển thị ảnh thu nhỏ của bài viết, và đăng ký hai vị trí cho các mục tùy chỉnh. Lưu ý rằng tất cả các chuỗi văn bản đều được xử lý bằng hàm dịch.__()(Và đã chỉ định những thông tin liên quan đến…)style.cssTrường văn bản nhất quán (Consistent text field)my-custom-theme

Đọc thêm Hướng dẫn Nhập môn Nổi bật 2026: Cách Tạo Chủ đề WordPress Đầu tiên Từ Con số 0

Cách đúng đắn để đưa các tệp biểu mẫu (style sheets) và tệp script vào trang web

Đừng bao giờ đặt liên kết trực tiếp (hard link) đến các tệp CSS hoặc JavaScript trong tệp mẫu (template file). Thay vào đó, hãy sử dụng các phương pháp khác để đưa chúng vào tệp mẫu một cách có tổ chức và dễ bảo trì hơn.wp_enqueue_style()wp_enqueue_script()Các hàm này sẽ được tạo ra và kết nối (hooked) với nhau để thực hiện các thao tác cần thiết.wp_enqueue_scriptsVề mặt thao tác (hành động), điều này đảm bảo rằng các mối quan hệ phụ thuộc được xử lý một cách chính xác và tránh tình trạng tải dữ liệu lặp lại.

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Sử dụngget_stylesheet_uri()get_template_directory_uri()Có thể lấy URL của thư mục chủ đề một cách động, đảm bảo rằng đường dẫn là chính xác.

Đăng ký và quản lý khu vực tiện ích

Widget là yếu tố then chốt trong việc làm cho nội dung trên WordPress trở nên linh hoạt và thú vị hơn. Để kích hoạt các widget, trước tiên bạn cần phải…functions.phpKhu vực đăng ký tiện ích nhỏ (Sidebar).

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%.
function mytheme_widgets_init() {
    register_sidebar( array(
        'name'          =&gt; __( '侧边栏', 'my-custom-theme' ),
        'id'            =&gt; 'sidebar-1',
        'description'   =&gt; __( '在此添加小工具。', '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' );

Sau khi đăng ký, bạn có thể tìm thấy khu vực “Thanh bên cạnh” (Sidebar) trong mục “Giao diện” (Appearance) -> “Tiện ích nhỏ” (Widgets) ở phía sau hệ thống. Sau đó, hãy xem xét tệp mẫu (template file)…sidebar.php), hãy sử dụngdynamic_sidebar( 'sidebar-1' )Hàm được sử dụng để gọi và hiển thị nội dung của khu vực đó.

Thực hiện mẫu chủ đề và vòng lặp

Trọng tâm của việc hiển thị nội dung trong WordPress chính là cơ chế “The Loop”. Đây là một đoạn mã PHP dùng để kiểm tra xem có bài viết nào không, và nếu có bài viết, thì nó sẽ lặp lại quá trình hiển thị từng bài viết một.

Cách viết chuẩn cho vòng lặp bài viết (Article Loop)

index.phpsingle.phparchive.phpTrong các mẫu như vậy, cấu trúc cơ bản của vòng lặp là như sau:

Đọc thêm Hướng dẫn tối thượng về phát triển chủ đề WordPress: Từ nguyên lý đến thực chiến

<!-- 针对每一篇文章的HTML和模板标签 -->
        <article>
            <h2><?php the_title(); ?></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    
    <p><?php _e( '抱歉,没有找到任何内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Bên trong vòng lặp, bạn có thể sử dụng một loạt các thẻ mẫu bắt đầu bằng “the_”, chẳng hạn như…the_title()the_content()the_permalink()V.v., để hiển thị các thông tin của bài viết hiện tại.

Tùy chỉnh truy vấn và lặp lại bài viết

Đôi khi cần hiển thị các bài viết đáp ứng những điều kiện nhất định (ví dụ: 5 bài viết mới nhất thuộc một thể loại cụ thể). Trong trường hợp này, không nên sửa đổi vòng lặp chính, mà nên tạo ra một vòng lặp mới để thực hiện công việc này.WP_QueryVí dụ.

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.
<?php
$custom_query = new WP_Query( array(
    'category_name' => 'news',
    'posts_per_page' => 5,
) );
if ( $custom_query->have_posts() ) :
    while ( $custom_query->have_posts() ) : $custom_query->the_post();
        // 输出文章内容...
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?>

Rất quan trọng: Sau khi sử dụng truy vấn tùy chỉnh, bạn phải gọi (thực hiện) hành động tương ứng.wp_reset_postdata()Để khôi phục dữ liệu bài viết toàn cục cho vòng lặp chính, nhằm tránh các lỗi có thể xảy ra trong đoạn mã tiếp theo.

Việc đưa các phần mẫu (templates) vào và tái sử dụng chúng

Để tuân theo nguyên tắc DRY (Don’t Repeat Yourself – Đừng lặp lại bản thân), những đoạn mã được sử dụng nhiều lần (chẳng hạn như phần tóm tắt bài viết, danh sách bình luận) nên được tách ra thành các tệp riêng biệt (tệp có phần mở rộng là “Part”) và được sử dụng lại một cách linh hoạt trong các ứngget_template_part()Đưa vào (introduce).

// 在循环中引入内容模板
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_type() );
endwhile;

Đoạn mã này sẽ tìm kiếm theo thứ tự từng phần cụ thể.template-parts/content-{post-type}.phptemplate-parts/content.phpTệp được kết hợp và tải vào hệ thống. Ví dụ, đối với một bài viết tiêu chuẩn, hệ thống sẽ thực hiện việc tải nội dung của tệp đó.content-post.php

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

Khi các tính năng cơ bản đã được triển khai đầy đủ, bạn có thể khám phá những tính năng nâng cao hơn nhằm nâng cao mức độ chuyên nghiệp và tính linh hoạt của chủ đề (theme) đó.

Việc tích hợp API của bộ công cụ tùy chỉnh (Customizer API)

WordPress Customizer cho phép người dùng xem trước và thay đổi cài đặt của giao diện (theme) một cách thời gian thực. Nhờ API của Customizer, bạn có thể thêm các tùy chọn như bộ sưu tập màu sắc, công cụ tải ảnh, danh sách thả xuống (dropdown lists), và nhiều tính năng khác vào giao diện của trang web.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“主题选项”板块
    $wp_customize->add_section( 'mytheme_options', array(
        'title' => __( '主题选项', 'my-custom-theme' ),
    ) );
    // 在板块中添加一个“页脚文本”设置
    $wp_customize->add_setting( 'footer_text', array(
        'default' => __( '版权所有', 'my-custom-theme' ),
        'transport' => 'refresh', // 或 'postMessage' 用于实时JS预览
    ) );
    // 为该设置添加一个文本输入控件
    $wp_customize->add_control( 'footer_text', array(
        'label' => __( '页脚文本', 'my-custom-theme' ),
        'section' => 'mytheme_options',
        'type' => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

footer.phpTrong trường hợp này, bạn có thể sử dụng nó.get_theme_mod( 'footer_text', '默认文本' )Hiển thị giá trị mà người dùng đã thiết lập.

Quy định về việc tạo và sử dụng các chủ đề con (subtopics)

Tạo ra các chủ đề con (subtopics) là thực hành tốt nhất để thay đổi nội dung của các chủ đề cha (parent topics) một cách an toàn và có tổ chức. Mỗi chủ đề con chỉ cần chứa một nội dung duy nhất.style.cssVà một tùy chọn (optional).functions.php
của chủ đề constyle.cssPhần đầu (header) phải được xử lý đúng cách (hoặc được thông qua một quá trình kiểm tra nào đó).TemplateTên thư mục chủ đề cha của khai báo trường:

/*
Theme Name: My Child Theme
Template: my-custom-theme // 父主题目录名
...
*/

của chủ đề confunctions.phpNó sẽ không ghi đè nội dung của chủ đề cha (parent theme), mà sẽ tải cả hai chủ đề cùng lúc. Các tệp mẫu (template files) trong chủ đề con (child theme) sẽ thay thế hoàn toàn các tệp có cùng tên trong chủ đề cha. Điều này cho phép bạn chỉ cần sửa đổi những phần cần thiết và vẫn giữ nguyên các thiết lập tùy chỉnh của mình khi chủ đề cha được

Chuẩn bị cho quốc tế hóa và địa phương hóa nội dung (Theme Internationalization and Localization Preparation)

Để các chủ đề có thể được sử dụng bởi người dùng trên toàn thế giới, tất cả các chuỗi ký tự dành cho người dùng đều phải được xử lý theo quy trình quốc tế hóa. Điều này có nghĩa là trong mã nguồn, mọi đoạn văn bản đều phải được bao bọc bởi các hàm dịch.
* __('文本', 'text-domain')Bạn là một công cụ dịch tự động chuyên nghiệp. Vui lòng cung cấp đoạn văn bản cần được dịch để tôi có thể thực hiện công việc dịch cho bạn.
* _e('文本', 'text-domain')Trực tiếp hiển thị chuỗi kết quả sau khi dịch.
Đối với chuỗi có chứa placeholder, hãy sử dụngprintf( __( '搜索 %s 的结果', 'my-custom-theme' ), $search_term )
Sau khi hoàn thành, hãy sử dụng các công cụ như Poedit để trích xuất tất cả các chuỗi dịch và tạo ra tập tin chứa chúng..potDựa trên tệp tin này, người dịch có thể tạo ra những nội dung mới.zh_CN.po.moCác tệp gói ngôn ngữ cần được đặt trong thư mục tương ứng của chủ đề (theme)./languages/thư mục chính xác.

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình có hệ thống, bắt đầu từ việc hiểu rõ cấu trúc cơ bản của các tệp tin, sau đó dần đi sâu vào các chức năng cốt lõi, hệ thống template và cơ chế lặp (looping), và cuối cùng là nắm vững các kỹ thuật tùy chỉnh nâng cao cũng như quy trình hỗ trợ đa ngôn ngữ (internationalization). Yếu tố then chốt là phải tuân thủ các tiêu chuẩn lập trình và thực hành tốt nhất của WordPress, chẳng hạn như sử dụng đúng các hook hành động (action hooks), đóng gói các hàm (function encapsulation) để tạo các thẻ template, cung cấp các tùy chọn thiết lập thông qua API Customizer, và chuẩn bị tất cả các nội dung văn bản cho việc hỗ trợ đa ngôn ngữ. Quá trình này bắt đầu từ việc tạo ra một chủ đề đơn giản nhất…style.cssindex.phpBắt đầu từ đây, hãy từng bước thêm các tệp mẫu vào hệ thống và làm cho nó trở nên phong phú hơn.functions.phpBạn có thể tận dụng các tính năng của hệ thống và áp dụng cơ chế các chủ đề con (sub-themes) để tùy chỉnh mức độ bảo mật theo nhu cầu. Nhờ đó, các nhà phát triển có thể tạo ra những chủ đề chuyên nghiệp vừa mạnh mẽ vừa linh hoạt. Việc không ngừng học hỏi và áp dụng những khái niệm cốt lõi này là nền tảng để xây dựng những trang web WordPress cá nhân hóa có chất lượng cao, dễ bảo trì và tương thích

FAQ 常见问题

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

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

Điều này thường xảy ra do…style.cssLỗi này xảy ra do định dạng khối ghi chú thông tin chủ đề ở phía trên tệp không đúng hoặc do thiếu thông tin. Vui lòng đảm bảo rằng khối ghi chú đó hoàn toàn tuân thủ định dạng yêu cầu của WordPress, và…Theme Name:Các trường đã được điền đúng cách. Ngoài ra, hãy kiểm tra xem thư mục chứa các chủ đề (theme folders) có được đặt ở đúng vị trí hay không./wp-content/themes/Nó nằm trong thư mục, và tên của thư mục không chứa các ký tự đặc biệt hay chữ Hán.

Làm thế nào để chủ đề của tôi hỗ trợ tiếng Trung hoặc các ngôn ngữ khác?

Trước hết, trong quá trình phát triển, hãy đảm bảo rằng tất cả các chuỗi dữ liệu được hiển thị cho người dùng đều được xử lý bằng các hàm dịch (chẳng hạn như…)__()_e()) để đóng gói nội dung và chỉ định đúng lĩnh vực văn bản (Text Domain). Lĩnh vực văn bản này cần phải phù hợp với…style.cssNội dung được tuyên bố trong tài liệu phải phù hợp với tên miền văn bản (Text Domain) đã được chỉ định. Sau đó, sử dụng các công cụ như Poedit để quét các tệp tin chứa nội dung của chủ đề (theme files) và tạo ra các tài liệu cần thiết..potDịch tệp mẫu. Người dịch có thể sử dụng mẫu này để tạo ra các tệp dịch dành cho ngôn ngữ tương ứng (ví dụ:zh_CN.poTệp dịch của (…) và biên dịch nó thành….moCuối cùng, hãy đặt các tệp ngôn ngữ này vào thư mục tương ứng của chủ đề (theme)./languages/Trong danh mục, nội dung sẽ được tự động tải lại khi người dùng thay đổi ngôn ngữ trang web.

Sau khi chủ đề cha được cập nhật, các thay đổi trong chủ đề con của tôi có bị mất đi không?

Không. Mục đích ban đầu của việc thiết kế các chủ đề con (sub-themes) là để cho phép người dùng tùy chỉnh nội dung một cách an toàn. Khi chủ đề cha (parent theme) được cập nhật, chỉ những tệp liên quan đến chính nó mới bị thay thế. Các tệp của chủ đề con bạn (bao gồm cả nội dung được tùy chỉstyle.cssfunctions.phpCác tệp tin mẫu (templates) mà bạn sao chép vào các chủ đề con (subtopics) và đã sửa đổi cũng sẽ được bảo toàn nguyên vẹn. Đây cũng là lý do tại sao chúng tôi khuyên mạnh mẽ bạn nên sử dụng cách tạo các chủ đề con để thực hiện các thay đổi trên các chủ đề hiện có, thay vì trực tiếp chỉnh sửa các tệp tin của chủ đề gốc

Sử dụng trình tạo trang và tự phát triển chủ đề, nên chọn cách nào?

Điều này phụ thuộc vào mục tiêu, kỹ năng và thời gian của bạn. Việc sử dụng các công cụ xây dựng trang web (như Elementor, WPBakery) cho phép bạn thiết lập trang web một cách nhanh chóng mà không cần biết lập trình, rất phù hợp với người mới bắt đầu, các freelancer hoặc những dự án cần được hoàn thành trong thời gian ngắn. Tuy nhiên, các công cụ này có thể tạo ra mã nguồn dư thừa, ảnh hưởng đến hiệu suất trang web, và có nguy cơ bị phụ thuộc vào nhà cung cấp. Việc tự phát triển chủ đề (theme) cho phép bạn kiểm soát toàn bộ quá trình phát triển, tạo ra mã nguồn sạch sẽ và hiệu quả hơn, đáp ứng tốt hơn các nhu cầu cụ thể, đồng thời giúp bạn nâng cao kỹ năng lập trình. Tuy nhiên, điều này đòi hỏi bạn phải đầu tư thời gian học hỏi và quá trình phát triển sẽ kéo dài hơn. Đối với những người phát triển muốn đạt được hiệu suất tối ưu, thiết kế độc đáo hoặc muốn hiểu sâu hơn về WordPress, việc tự phát triển chủ đề là lựa chọn tốt nhất.