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

Phát triển chủ đề WordPress từ cơ bản đến thực chiến: Nắm vững công nghệ cốt lõi và mẫu thiết kế

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

Việc phát triển một theme WordPress hoàn chỉnh không đơn thuần là tạo ra một giao diện đẹp mắt; điều này đòi hỏi người phát triển phải hiểu sâu sắc về cấu trúc cốt lõi của WordPress, cấu trúc các template, các hàm liên quan đến theme, cũng như các phương pháp phát triển front-end hiện đại. Bài viết này sẽ hướng dẫn bạn từ đầu, giúp bạn nắm vững các kỹ thuật cốt lõi trong quá trình phát triển theme một cách có hệ thống, đồng thời hiểu rõ các mô hình thiết kế đằng sau chúng, từ đó bạn có thể tự mình xây dựng những theme tùy chỉnh chuyên nghiệp.

Những kiến thức cơ bản về chủ đề WordPress và các tệp tin cốt lõi

Một chủ đề WordPress cơ bản nhất chỉ cần hai tệp tin:style.css 和 index.phpTuy nhiên, một chủ đề (theme) mạnh mẽ và dễ bảo trì cần có một loạt các tệp tin cốt lõi được tổ chức một cách có cấu trúc.

File chứa thông tin chủ đề và tuyên bố về kiểu trình bày (Theme Information and Style Declaration File)

“Chứng minh nhân dân” của chủ đề là style.css Đây là một tệp tin chứa không chỉ các định dạng CSS mà còn bao gồm một khối ghi chú ở phía trên, vốn đóng vai trò quan trọng trong việc WordPress nhận diện chủ đề (theme) của trang web. Khối ghi chú này phải chứa những thông tin đầu tiên (header information) cụ thể.

Đọc thêm Hướng dẫn bạn từng bước cách nắm vững các kỹ thuật cốt lõi và thực hành thực tế trong việc phát triển các giao diện (theme) cho WordPress, từ con số không.。

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于演示的现代化WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Trong đó,Text Domain Dùng cho mục đích quốc tế hóa (internationalization); sẽ được sử dụng sau này. __() 或 _e() Đây là tên của hàm được sử dụng để thực hiện công việc dịch văn bản.

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

Cấu trúc của tệp mẫu cốt lõi

Ngoài các tệp định dạng kiểu (style files), trọng tâm của một chủ đề (theme) là một loạt tệp mẫu PHP (PHP template files) – những tệp này tuân theo cấu trúc phân cấp của các mẫu trong WordPress. Tệp mẫu cơ bản nhất là… index.phpĐây là mẫu trang cuối cùng (template for all pages) dùng để quay trở lại trạng thái ban đầu (initial state) trong trường hợp cần thiết. Một chủ đề (theme) được thiết kế tốt thường bao gồm các tệp tin sau:
* header.phpMẫu đầu trang của trang web, thường bao gồm: <head> Một số phần và khu vực tiêu đề trang web.
* footer.phpMẫu thiết kế phần cuối trang web (footer template).
* sidebar.phpMẫu thanh bên (Sidebar template).
* functions.phpTệp chứa các hàm chức năng liên quan đến chủ đề, dùng để thêm các tính năng mới, đăng ký các mục trong menu, thanh bên cạnh, v.v.
* page.phpMẫu trang riêng biệt.
* single.phpMẫu bài viết đơn lẻ.
* archive.phpMẫu lưu trữ bài viết (phân loại, thẻ, tác giả, v.v.)
* 404.phpMẫu trang lỗi 404.
* search.phpMẫu trang kết quả tìm kiếm.

Đi sâu vào cấu trúc phân cấp của các mẫu (templates) và các hàm chủ đề (theme functions)

Việc hiểu rõ cấu trúc phân cấp của các mẫu (templates) là yếu tố then chốt để thành thạo công việc phát triển các chủ đề (themes) cho WordPress. Khi người dùng truy cập một trang web, WordPress sẽ tìm kiếm tệp mẫu tương ứng dựa trên loại nội dung được truy cập, theo một thứ tự ưu tiên được xác định trước.

Quy trình ra quyết định về việc tải các mẫu (templates)

Ví dụ, khi truy cập một trang danh mục, WordPress sẽ tìm kiếm theo thứ tự sau:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpThiết kế này mang lại sự linh hoạt rất lớn, cho phép các nhà phát triển tạo ra các mẫu (templates) độc đáo cho từng danh mục cụ thể, trang web, hoặc thậm chí là từng bài viết riêng lẻ. Việc nắm vững cấu trúc phân cấp này có nghĩa là bạn có thể kiểm soát chính xác cách thức hiển thị mọi loại nội dung trên trang web.

Trung tâm điều khiển các tính năng chủ đề

functions.php Tệp tin chính là “bộ não” của chủ đề (theme); nó được sử dụng để nâng cao chức năng của chủ đề đó, và không bị mất hiệu lực khi bạn thay đổi chủ đề (khác với các plugin). Tại đây, bạn có thể sử dụng tệp tin này để tùy chỉnh hoặc cải thiện các tính năng của chủ đề theo ý muốn. add_theme_support() Hàm này được sử dụng để tuyên bố các tính năng mà chủ đề hỗ trợ.

Đọc thêm Từ con số không: Hướng dẫn toàn diện và thực hành tốt nhất để phát triển chủ đề WordPress。

// 为主题添加文章特色图像支持
add_theme_support( 'post-thumbnails' );

// 添加自定义Logo支持
add_theme_support( 'custom-logo', array(
    'height'      => 100,
    'width'       => 400,
    'flex-height' => true,
    'flex-width'  => true,
) );

// 添加HTML5标记支持
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );

Ngoài ra, bạn cũng cần đăng ký menu điều hướng và thanh bên cạnh (khu vực công cụ phụ trợ) tại đây.

// 注册导航菜单位置
function mytheme_register_menus() {
    register_nav_menus( array(
        'primary' =&gt; __( '主导航菜单', 'my-custom-theme' ),
        'footer'  =&gt; __( '底部菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_register_menus' );

// 注册侧边栏小工具区域
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' );

Lặp lại (Looping), Hook và Xuất Định Dạng Nội Dung Động (Dynamic Content Output)

Trọng tâm của WordPress là nội dung, và “cơ chế lặp lại” (loop) chính là công cụ dùng để hiển thị những nội dung đó. Các hook (Actions và Filters) là những công cụ mạnh mẽ giúp mở rộng và điều chỉnh hoạt động của WordPress cũng như các giao diện (themes).

Hiểu và vận dụng vòng lặp chính (main loop)

Vòng lặp là đoạn mã PHP được sử dụng để hiển thị các bài viết trong mẫu chủ đề (theme template). Cấu trúc vòng lặp tiêu chuẩn như sau:

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 
<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    
    <p><?php _e( '抱歉，没有找到对应的文章。', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Trong vòng lặp, bạn có thể sử dụng một loạt các thẻ mẫu (template tags), chẳng hạn như… the_title(), the_content(), the_permalink(), the_post_thumbnail() Vui lòng chờ đợi để thông tin về bài viết được hiển thị.

Sử dụng các hook (các hàm được gọi tự động trong quá trình thực thi chương trình) để mở rộng chức năng của ứng dụng.

Các “hook” (móc) được chia thành hai loại: hook hành động (action hook) và hook lọc (filter hook). Hook hành động cho phép bạn chèn mã của riêng mình vào những thời điểm cụ thể. Ví dụ, trong… wp_enqueue_scripts Việc tải các tập lệnh (script) và bảng định dạng (stylesheet) một cách an toàn vào ứng dụng là một thực hành tốt nhất (best practice).

function mytheme_enqueue_scripts() {
    // 加载主题主要样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );
    // 加载自定义JavaScript文件
    wp_enqueue_script( 'mytheme-script', get_template_directory_uri() . '/js/main.js', array('jquery'), wp_get_theme()->get('Version'), true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_scripts' );

Các hook (khớp nối) của bộ lọc cho phép bạn thay đổi dữ liệu. Ví dụ, bạn có thể thay đổi độ dài của phần tóm tắt bài viết.

Đọc thêm Hướng dẫn Tối thượng cho Người mới: Xây dựng Giao diện WordPress Cá nhân hóa từ Con số 0。

function mytheme_custom_excerpt_length( $length ) {
    return 20; // 将摘要字数改为20个词
}
add_filter( 'excerpt_length', 'mytheme_custom_excerpt_length' );

Thực hành phát triển hiện đại và tối ưu hóa hiệu suất

Việc phát triển các ứng dụng và trang web hiện nay không thể tách rời khỏi các công cụ và quy trình làm việc hiện đại; đồng thời, việc tối ưu hóa hiệu suất cũng đóng vai trò vô cùng quan trọng.

Thiết kế đáp ứng (Responsive Design) và các framework CSS

Đảm bảo rằng giao diện của bạn hiển thị tốt trên mọi loại thiết bị là một yêu cầu cơ bản. Bạn có thể tự viết mã CSS tương thích với nhiều thiết bị (responsive CSS) từ đầu, hoặc sử dụng các framework như Bootstrap, Tailwind CSS để đẩy nhanh quá trình phát triển. Yếu tố then chốt là sử dụng các câu lệnh truy vấn phương tiện truyền thông (Media Queries) để điều chỉnh giao diện cho từng kích thước màn hình khác nhau. header.php Trong đó, nhất định phải thêm thẻ meta về khung xem (viewport meta tag):<meta name="viewport" content="width=device-width, initial-scale=1">。

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

Best Practices for Performance and Security

Việc tối ưu hóa hiệu suất có thể được thực hiện từ nhiều khía cạnh khác nhau. Trước hết, như đã đề cập trước đó, việc sử dụng… wp_enqueue_style() 和 wp_enqueue_script() Để quản lý tài nguyên một cách hiệu quả, trước hết hãy đảm bảo rằng bạn đã cấu hình các công cụ cần thiết để quản lý nội dung trang web. Tiếp theo, hãy kích hoạt chức năng tải ảnh từ từ (lazy loading) cho các hình ảnh (chức năng này đã được hỗ trợ sẵn từ WordPress 5.5 trở l add_image_size() Hãy tạo ra kích thước hình ảnh phù hợp để tránh việc trang web phải tự động thu nhỏ hoặc phóng to hình ảnh.

Về mặt bảo mật, nguyên tắc quan trọng nhất là: phải tiến hành “đánh dấu đặc biệt” (escape) tất cả các dữ liệu được hiển thị trên trang web (dữ liệu động), đồng thời kiểm tra và làm sạch tất cả các dữ liệu đến từ người dùng. WordPress cung cấp nhiều hàm hỗ trợ bảo mật rất hữu ích.
Khi xuất ra nội dung HTML, hãy sử dụng… wp_kses_post() 或 wp_kses()。
Khi hiển thị URL, hãy sử dụng định dạng phù hợp để người dùng dễ dàng đọc và nhớ. esc_url()。
Khi hiển thị văn bản trong các thuộc tính HTML, hãy sử dụng cách sau: esc_attr()。
Ở<textarea>或<title>Khi xuất ra văn bản, hãy sử dụng… esc_textarea() 或 esc_html()。

Đừng bao giờ sử dụng nó trực tiếp. echo $_GET[‘param’] Loại mã nguồn như thế này.

Tóm lại

Việc phát triển các chủ đề (themes) cho WordPress là một kỹ năng tổng hợp, yêu cầu sự kết hợp giữa logic phía máy chủ (PHP), cách trình bày giao diện phía trước (HTML/CSS/JavaScript), cùng với sự hiểu biết sâu rộng về cấu trúc cốt lõi của WordPress. Bắt đầu từ việc nắm vững những kiến thức cơ bản nhất… style.css Bắt đầu với các tệp mẫu (template files), sau đó dần đi sâu vào cấu trúc phân cấp của các mẫu, các cấu trúc lặp (loops),…functions.php Từ việc mở rộng các chức năng của một theme, đến việc sử dụng thành thạo hệ thống các “hook” (các công cụ được tích hợp sẵn trong WordPress để tương tác với mã nguồn), và tuân thủ các quy tắc lập trình an toàn, mỗi bước đều là nền tảng cơ bản để xây dựng một theme WordPress vững chắc, hiệu quả và dễ bảo trì. Bằng cách áp dụng các phương pháp phát triển hiện đại, chú trọng đến hiệu năng và bảo mật, bạn sẽ có thể tạo ra những theme không chỉ có giao diện đẹp mắt mà còn mang lại trải nghiệm

FAQ 常见问题

Một chủ đề WordPress cần ít nhất bao nhiêu tệp tin?

Một chủ đề đơn giản nhất có thể được WordPress nhận diện chỉ cần hai tệp tin:style.css 和 index.php。style.css Khối chú thích ở phía trên được sử dụng để công bố thông tin về chủ đề. index.php Vậy nó sẽ trở thành mẫu mặc định cho tất cả các trang.

Làm thế nào để thêm một mẫu trang tùy chỉnh vào một chủ đề (theme)?

Để tạo một mẫu trang tùy chỉnh, trước tiên hãy tạo một tệp PHP mới trong thư mục chủ đề của bạn (ví dụ: template-fullwidth.phpỞ phần đầu tiên của tệp tin đó, hãy thêm một dòng chú thích về tên mẫu cụ thể. Sau đó, bạn có thể sửa đổi nó giống như cách bạn sửa đổi một tệp tin bình thường. page.php Hãy chỉnh sửa tệp tin này theo cách tương tự, và khi chỉnh sửa trang nền (trong giao diện backend), hãy chọn tệp tin đó từ danh sách thả xuống “Mẫu” (Template) trong mục “Thuộc tính trang” (Page Properties).

<?php
/*
Template Name: 全宽页面模板
*/
get_header(); ?>
// ... 你的自定义内容 ...
<?php get_footer(); ?>

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

functions.php Các tính năng trong này được liên kết chặt chẽ với chủ đề hiện tại. Khi bạn thay đổi chủ đề, những tính năng này sẽ không còn khả dụng nữa. Chúng thích hợp để thêm những công cụ liên quan trực tiếp đến giao diện và cách hiển thị của chủ đề, chẳng hạn như menu đăng ký, thông báo về các tính năng được hỗ trợ bởi chủ đề, hoặc tải các tập lệnh kiểu dáng đặc biệt của chủ đ

Các tính năng do plugin cung cấp hoạt động độc lập với giao diện (theme) được sử dụng. Dù bạn chọn giao diện nào, các tính năng của plugin vẫn sẽ được triển khai. Plugin rất thích hợp để thêm những tính năng chung không liên quan đến cách hiển thị của giao diện, chẳng hạn như biểu mẫu liên hệ, tối ưu hóa SEO, lưu trữ dữ liệu (cache), v.v. Thông thường, nếu một tính năng có mối liên hệ mật thiết với giao diện (v functions.phpNếu đó là một tính năng chung (tính năng có thể được sử dụng trên nhiều ứng dụng khác nhau), thì việc tạo nó thành một plugin sẽ phù hợp hơn.

Tại sao thay đổi về chủ đề của tôi không hiển thị ở phía sau (trong giao diện quản trị hệ thống)?

Điều này thường xảy ra do lỗi đệm (cache) của trình duyệt hoặc máy chủ. Trước tiên, hãy thử làm mới trình duyệt một cách thủ công (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ó đang sử dụng bất kỳ tiện ích nào liên quan đến việc quản lý đệm (như W3 Total Cache, WP Rocket) hay không, và hãy xóa dữ liệu đệm của những tiện ích đó. Ngoài ra, hãy đảm bảo rằng bạn đang chỉnh sửa đúng tệp thuộc chủ đề (theme) đang được sử dụng hiện tại, và tệp đã được lưu thành công rồi được tải lên máy chủ ở đúng vị trí.

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