Để xây dựng một theme WordPress hoàn chỉnh về chức năng, bạn cần chuẩn bị một loạt các tệp tin cốt lõi. Những tệp tin này tạo nên cấu trúc cơ bản của theme, và mỗi tệp tin đều có một vai trò cụ thể.
Các loại tệp tin cơ bản nhất bao gồm:
* `style.css`：主题的样式表，同时也是主题的“身份证”，包含主题名称、作者、描述等元信息。
* `index.php`：主题的主模板文件，是默认的首页和文章列表页模板。
* `header.php`：网站的头部模板，通常包含`<head>`部分和网站顶部的导航区域。
* `footer.php`：网站的底部模板，通常包含版权信息、脚本等。
* `functions.php`：主题的功能文件，用于添加自定义功能、注册菜单、侧边栏等。
Hãy bắt đầu bằng cách tạo tập tin `style.css`. Ở phần đầu của tập tin, bạn cần thêm một dòng chú thích chứa thông tin về chủ đề (theme information) của tập tin đó.
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习WordPress主题开发而创建的简单自定义主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/Tiếp theo, hãy tạo tập tin `index.php`. Ở phiên bản cơ bản nhất, tập tin này cần phải đưa vào các phần nội dung ở đầu (header) và cuối trang (footer), đồng thời lặp lại để hiển thị các bài viết.
<?php get_header(); ?>
<main id="main-content">
<article id="post-<?php the_ID(); ?>">
<h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<p>Chưa có bài viết nào.</p>
<?php endif; ?>
</main>
<?php get_footer(); ?>Các tệp `header.php` và `footer.php` chứa cấu trúc HTML phần đầu (header) và phần cuối (footer) chung cho toàn bộ trang web. Tệp `functions.php` được sử dụng để mở rộng các chức năng của giao diện (theme).
Hiểu cấp bậc mẫu và vòng lặp
WordPress sử dụng một hệ thống cấp độ template thông minh để quyết định cách hiển thị nội dung trên các trang khác nhau. Ví dụ, khi truy cập vào một bài viết cụ thể, WordPress sẽ tìm kiếm tập tin `single.php` trước; khi truy cập vào trang danh mục, nó sẽ tìm kiếm tập tin `category.php`; nếu những tập tin này không tồn tại, nó sẽ sử dụng tập tin `archive.php`, và nếu vẫn không tìm thấy, nó sẽ sử dụng tập tin `index.php`.
What is the main loop?
`the loop`是WordPress主题开发的核心概念。它是一段PHP代码，用于从数据库中获取文章内容并将其显示在网页上。你在`index.php`中看到的`while ( have_posts() ) : the_post();`就是循环的开始。在循环内部，你可以使用一系列模板标签来输出文章信息，如`the_title()`, `the_content()`, `the_permalink()`等。
Đọc thêm Hướng dẫn toàn diện phát triển giao diện WordPress: Từ cơ bản đến nâng cao。
Tạo các tệp mẫu khác
Để làm cho chủ đề trở nên chuyên nghiệp hơn, bạn nên tạo một số tệp mẫu (template files) thường được sử dụng. Ví dụ, hãy tạo tệp `single.php` để hiển thị nội dung của từng bài viết một cách riêng biệt.
<?php get_header(); ?>
<main>
<?php while ( have_posts() ) : the_post(); ?>
<article>
<h1><?php the_title(); ?></h1>
<div class="post-meta">
发布于： | 作者：
</div>
<div class="post-content">
<?php the_content(); ?>
</div>
</article>
</main>
<?php get_footer(); ?>Tương tự như vậy, bạn có thể tạo tệp `page.php` để định nghĩa mẫu trang, và tệp `archive.php` để định nghĩa mẫu trang lưu trữ (chứa danh mục, thẻ, v.v.).
Tích hợp Menu và Thanh bên
Một chủ đề hiện đại thường bao gồm một menu điều hướng có thể tùy chỉnh và khu vực công cụ bên cạnh (sidebar tools). Những tính năng này cần được đăng ký và kích hoạt thông qua tệp `functions.php`.
Đăng ký menu điều hướng
Hãy thêm đoạn mã sau vào tệp `functions.php` để đăng ký một vị trí mục (menu item) cho chủ đề, ví dụ như “Menu Chính”.
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( '主菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );Sau khi đăng ký, người dùng có thể truy cập vào phần “Giao diện” -> “Menu” trong giao diện quản trị WordPress để phân bổ các menu vào vị trí mong muốn. Tiếp theo, bạn cần thêm đoạn mã sau vào tập tin `header.php` tại nơi muốn hiển thị menu, để kích hoạt việc hiển thị menu đó:
<nav id="site-navigation">
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>Thêm thanh bên công cụ nhỏ (Add a sidebar with small tools)
Các tiện ích nhỏ (widgets) là một tính năng rất linh hoạt trong WordPress. Để thêm một thanh bên (sidebar), bạn cũng cần đăng ký một “khu vực tiện ích nhỏ” (widget area) trong tệp `functions.php`.
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );然后，在你希望显示侧边栏的模板文件（如`sidebar.php`）中，使用`dynamic_sidebar()`函数来输出它。
<aside id="secondary" class="widget-area">
<?php dynamic_sidebar( 'sidebar-1' ); ?>
</aside>Cuối cùng, đừng quên sử dụng lệnh `get_sidebar();` trong tập tin `index.php` hoặc `single.php` để đưa file bên cạnh (sidebar) này vào trang hiển thị.
Đọc thêm Hướng dẫn phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh từ đầu。
Thêm phong cách (styles) và mã nguồn (scripts)
为了保持代码的整洁和可维护性，不应该直接在HTML中硬编码样式和脚本链接。正确的方式是通过`functions.php`文件，使用`wp_enqueue_style()`和`wp_enqueue_script()`函数将它们加入队列。
Nhập định bảng định dạng (stylesheet)
Mặc dù tệp `style.css` là bắt buộc, nhưng WordPress sẽ không tự động tải nó. Bạn cần phải thêm tệp này vào danh sách các tệp cần được tải một cách rõ ràng. Thông thường, chúng ta cũng sẽ tách tệp kiểu dáng chính (main style sheet) ra khỏi tệp thiết lập lại kiểu dáng (reset style sheet).
function my_first_theme_scripts() {
// 引入主题的主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
// 引入一个自定义样式表 (假设位于 /assets/css/main.css)
wp_enqueue_style( 'my-first-theme-main', get_template_directory_uri() . '/assets/css/main.css' );
// 引入一个自定义JavaScript文件 (假设位于 /assets/js/navigation.js)
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), false, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );Sử dụng các thực hành phát triển CSS hiện đại
Trong lĩnh vực phát triển front-end vào năm 2026, việc chú trọng đến thiết kế thích ứng (responsive design) và tính khả tiếp cận (accessibility) là điều vô cùng quan trọng. Bạn nên sử dụng các truy vấn phương tiện truyền thông (media queries) trong tập tin `style.css` hoặc tập tin `main.css` riêng biệt của mình để đảm bảo trang web hiển thị tốt trên nhiều loại thiết bị khác nhau.
/* 基础样式 */
body {
font-family: sans-serif;
line-height: 1.6;
}
/* 响应式导航菜单 */
@media screen and (max-width: 768px) {
#primary-menu {
display: none;
}
/* 移动端菜单样式 */
}Kiểm tra và Gỡ lỗi
Sau khi việc phát triển chủ đề hoàn tất, việc kiểm thử là một bước không thể thiếu. Bạn cần tiến hành kiểm thử toàn diện trên nhiều môi trường khác nhau, cũng như trên các trình duyệt và thiết bị khác nhau.
Kích hoạt chế độ gỡ lỗi (Debug Mode)
Trong quá trình phát triển, hãy nhớ bật chế độ gỡ lỗi (debug mode) của WordPress. Điều này sẽ giúp bạn nhanh chóng phát hiện các lỗi, cảnh báo và thông báo liên quan đến PHP. Mở tệp `wp-config.php`, tìm hoặc thêm đoạn mã sau vào tệp đó:
define( 'WP_DEBUG', true );
define( 'WP_DEBUG_LOG', true ); // 将错误记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误，更安全Unit testing for the theme
Bạn nên sử dụng dữ liệu kiểm thử đơn vị chủ đề (theme unit test data) chính thức của WordPress để kiểm thử toàn diện chủ đề của mình. Bộ dữ liệu này bao gồm nhiều loại bài viết, trang, phương tiện truyền thông, bình luận, v.v., giúp đảm bảo rằng chủ đề của bạn hoạt động đúng cách khi hiển thị các loại nội dung khác nhau, và không có vấn đề về kiểu dáng hay bố cục nào bị bỏ qua.
Tóm lại
Từ việc tạo ra các tệp cơ bản `style.css` và `index.php`, đến việc hiểu cách cấu trúc các thành phần trong mẫu (templates) và cách sử dụng vòng lặp (loops), rồi đến việc đăng ký các menu, thanh bên (sidebars) và thêm các script kiểm soát giao diện một cách an toàn, bạn đã hoàn thành toàn bộ quá trình xây dựng một chủ đề WordPress tùy chỉnh cơ bản nhưng hoàn chỉnh. Hãy nhớ rằng, việc phát triển chủ đề là một quá trình lặp đi lặp lại; bắt đầu với phiên bản đơn giản nhất và từ từ thêm các tính năng cũng như hoàn thiện các chi tiết là cách làm tốt nhất. Việc tiếp tục học hỏi về các thẻ mẫu (template tags), các hook hành động (action hooks) và các bộ lọc (filters) sẽ giúp bạn tạo ra những chủ đề mạnh mẽ và linh hoạt hơn.
FAQ 常见问题
Để phát triển một chủ đề (theme) cho WordPress, bạn cần nắm vững một số kiến thức cơ bản sau:
Bạn cần nắm vững kiến thức cơ bản về HTML, CSS và PHP. Việc có hiểu biết nhất định về JavaScript cũng sẽ rất hữu ích, nhất là để thêm các tính năng tương tác vào trang web. Ngoài ra, việc quen thuộc với các khái niệm cơ bản của WordPress như bài viết, trang, thể loại, thẻ, tiện ích và menu là điều không thể thiếu.
Tại sao những thay đổi tôi thực hiện trên chủ đề của mình không được áp dụng trong giao diện nền (backend)?
Điều này thường xảy ra do lỗi trong bộ đệm của trình duyệt hoặc bộ đệm của WordPress. Hãy thử làm mới trình duyệt một cách đầy đủ (Ctrl + F5 hoặc Cmd + Shift + R). Nếu vấn đề vẫn còn tồn tại, hãy kiểm tra xem bạn có thêm các định dạng và script vào hàng đợi (queue) một cách chính xác hay không, và đảm bảo rằng tệp `functions.php` không chứa lỗi ngữ pháp. Trong một số trường hợp hiếm gặp, bạn có thể cần phải xóa bộ đệm của máy chủ hoặc các plugin.
Làm thế nào để chủ đề của tôi hỗ trợ đa ngôn ngữ?
你需要做好主题的“国际化”准备。这意味着在代码中所有需要翻译的文本，都应使用翻译函数（如`__()`， `_e()`）进行包装，并为`text-domain`设置一个唯一标识（在`style.css`的头部已定义）。然后，你可以使用如Poedit这样的工具创建`.po`和`.mo`翻译文件，使你的主题能够被轻松翻译成其他语言。
Sự khác biệt giữa chủ đề tùy chỉnh (custom theme) và tiểu chủ đề (sub-theme) là gì?
Các chủ đề tùy chỉnh (custom themes) là những chủ đề hoàn toàn mới được phát triển độc lập từ đầu. Ngược lại, các chủ đề con (subthemes) được xây dựng dựa trên một “chủ đề mẹ” (parent theme) có sẵn; chúng kế thừa tất cả các tính năng, kiểu dáng và tệp mẫu của chủ đề mẹ. Các chủ đề con cho phép bạn chỉ sửa đổi hoặc thêm những phần cần thiết (thường là kiểu dáng và một vài tệp mẫu), mà không cần phải thay đổi chủ đề mẹ. Điều này giúp đảm bảo rằng những thay đổi của bạn sẽ không bị xóa đi khi bạn tùy chỉnh hoặc nâng cấp một chủ đề phổ biến, là một cách làm an toàn và hiệu quả hơn.
Bước tiếp theo, chúng ta nên làm gì tiếp theo?
Đọ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.
- Phát triển chủ đề WordPress từ cơ bản đến nâng cao: Hướng dẫn toàn diện để xây dựng trang web cá nhân hóa
- Phát triển chủ đề WordPress từ đầu: Tạo ra giao diện trang web độc đáo
- Hướng dẫn phát triển chủ đề WordPress: Xây dựng trang web tùy chỉnh từ con số không
- Hướng dẫn toàn diện về phát triển theme WordPress: Từ con số không đến thành thục thông qua các bài học thực hành
- Hướng dẫn đầy đủ về phát triển chủ đề WordPress: Xây dựng các mẫu trang web chuyên nghiệp từ con số không
Tiếng Việt