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

Hướng dẫn cơ bản về phát triển theme WordPress: Tạo chiếc theme tùy chỉnh đầu tiên của bạn từng bước một

Đọc trong 3 phút
2026-03-15
2026-06-03
1,887
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ác bước chuẩn bị và cấu hình môi trường

Trước khi bắt đầu viết dòng code đầu tiên, bạn cần một môi trường phát triển phù hợp. Điều này bao gồm một máy chủ cục bộ và một trình soạn thảo code. Chúng tôi khuyên bạn nên sử dụng XAMPP, MAMP hoặc Laragon để thiết lập máy chủ cục bộ; những công cụ này cho phép bạn cài đặt và chạy Apache, MySQL và PHP chỉ với một cú nhấp chuột. Hãy chọn trình soạn thảo code yêu thích của mình, chẳng hạn như Visual Studio Code, Sublime Text hoặc PHPStorm – những công cụ này hỗ trợ hiển thị mã nguồn một cách rõ ràng và tự động hoàn thành các dòng code (auto-completion), từ đó giúp bạn nâng cao hiệu quả phát triển phần mềm.

Tiếp theo, bạn cần tạo một thư mục mới trong hệ thống cài đặt WordPress của mình để lưu trữ chủ đề mới. Tất cả các chủ đề WordPress đều được lưu trữ tại đó. /wp-content/themes/ Trong thư mục này, hãy tạo một thư mục mới cho chủ đề mà bạn sắp tạo, ví dụ như đặt tên nó là… my-first-themeTên của thư mục này chính là biểu tượng cho chủ đề của bạn, và nó sẽ được hiển thị trong danh sách các chủ đề ở phía sau hậu trường (phần quản trị hệ thống).

Đồng thời, bạn cần hiểu rõ hai nền tảng cơ bản trong việc phát triển các giao diện (theme) cho WordPress: các tệp template (mẫu) và các tệp style sheet (bảng định dạng). Một giao diện WordPress cơ bản nhất chỉ cần hai loại tệp này.style.css 和 index.php。style.css Không chỉ kiểm soát phong cách trình bày trực quan của trang web, các khối chú thích ở phần đầu tệp (header) còn đóng vai trò như “chứng minh thư” của chủ đề (theme), chứa đựng các thông tin meta như tên chủ đề, tác giả, mô tả, v.v.index.php Đó chính là tệp mẫu chính mặc định.

Đọc thêm Hướng dẫn toàn diện về phát triển theme WordPress: Xây dựng theme tùy chỉnh từ đầu。

Tạo các tập tin chủ đề cốt lõi

Định nghĩa kiểu dáng và thông tin cho chủ đề

Mọi thứ bắt đầu từ… style.css Bắt đầu. Tạo tệp này trong thư mục gốc của thư mục chủ đề (theme folder), và thêm một khối ghi chú được định dạng ở đầu tệp. Khối ghi chú này rất quan trọng vì WordPress sẽ dựa vào nó để nhận diện và tải thư mục chủ đề. Đoạn mã dưới đây minh họa phần đầu của một bảng định dạng (style sheet header) cơ 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 
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://yourwebsite.com
Description: 这是一个学习 WordPress 主题开发而创建的入门级主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Trong đó,Text Domain Đây là tệp dùng cho việc hỗ trợ quốc tế hóa (i18n), nhằm chuẩn bị cho các bản dịch sang nhiều ngôn ngữ trong tương lai. Sau khi tạo xong tệp này, hãy đăng nhập vào trang quản trị WordPress, chọn mục “Giao diện” (Appearance) -> “Chủ đề” (Themes), và bạn sẽ thấy chủ đề của mình; tuy nhiên, lúc này chủ đề đó vẫn chưa chứa bất kỳ tính năng nào cả.

Xây dựng cấu trúc mẫu cơ bản

Tiếp theo, hãy tạo tệp khung (skeleton file) cho chủ đề (theme) đó. index.phpĐây là mẫu cơ bản nhất; nó được sử dụng khi WordPress không thể tìm thấy các tệp mẫu cụ thể hơn. single.php 或 page.phpKhi cần sử dụng nó, chúng ta sẽ áp dụng phương pháp đơn giản nhất có thể. index.php Có thể chỉ sử dụng những hàm cơ bản như các hàm liên quan đến việc gọi phần đầu (header), vòng lặp (loop), và phần cuối (footer) của WordPress.

<!DOCTYPE html>
<html no numeric noise key 1011>
<head>
    <meta charset="<?php bloginfo( 'charset' ); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1008>
    <?php wp_body_open(); ?>
    <header>
        <h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
        <p><?php bloginfo( 'description' ); ?></p>
    </header>

<main>
        &lt;?php
        if ( have_posts() ) :
            while ( have_posts() ) : the_post();
                // 文章内容输出
                the_title( &#039;<h2>', '</h2>' );
                the_content();
            endwhile;
        else :
            echo '<p>暂无文章。</p>';
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Đây là một tệp tin sử dụng các thẻ mẫu cốt lõi của WordPress, chẳng hạn như… bloginfo() Lấy thông tin về trang web.the_title() 和 the_content() Trong vòng lặp, in ra tiêu đề và nội dung của bài viết.wp_head() 和 wp_footer() Đây là những “hook” vô cùng quan trọng; chúng cho phép phần cốt lõi của WordPress, các plugin, và các script khác tương tác với nội dung trên trang web. <head> 和 <footer> Injection of code into a specific area (or region).

Tách mẫu và chức năng nhập

Module-based template files

将 index.php Việc đặt toàn bộ mã nguồn trong một tệp duy nhất sẽ khiến việc bảo trì mã trở nên khó khăn. Thực hành tốt nhất là chia mã thành nhiều thành phần mẫu (Template Parts) khác nhau. Hãy tạo các tệp sau để tổ chức cấu trúc mã nguồn một cách rõ ràng:
* header.phpLưu trữ <head> Nội dung phần đầu trang chung, bao gồm các khu vực và menu điều hướng ở phía trên trang web.
* footer.phpNơi để lưu trữ thông tin bản quyền và các nội dung khác thuộc phần cuối trang web (phần “footer”).
* sidebar.phpKhu vực dùng để lưu trữ các tiện ích (widget) của thanh bên (tùy chọn).
* functions.phpTệp chứa các hàm chức năng liên quan đến chủ đề (theme-specific functional functions).

Đọc thêm Từ con số không: Hướng dẫn bạn từng bước cách phát triển một chủ đề WordPress tùy chỉnh。

Sau đó, hãy sử dụng nó. get_header()、get_footer() 和 get_sidebar() đợi hàm trong index.php Chúng được đưa vào trong quá trình cải tạo. Phiên bản sau khi cải tạo… index.php Phần cốt lõi sẽ trở nên rất ngắn gọn và súc tích:

<?php get_header(); ?>

<main>
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
        <article>
            &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        </article>
    <?php endwhile; else : ?>
        <p><?php esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

Lưu ý rằng chúng tôi đã sử dụng… esc_html_e( '抱歉，没有找到符合条件的内容。', 'my-first-theme' ) Đây là cách tiếp cận chuẩn mực trong quá trình quốc tế hóa.

Nâng cao chức năng của chủ đề (Enhancing theme functionality)

functions.php Tệp tin này chính là “trung tâm điều khiển” của chủ đề (theme) bạn đang sử dụng. Nó được dùng để thêm các tính năng hỗ trợ cho chủ đề, đăng ký các menu và thanh bên cạnh (sidebar), tải các bảng định dạng (style sheets) và các tập lệnh (scripts), v.v. Đây không phải là một tệp tin mẫu (template); thay vào đó, nó được tự động tải vào khi chủ đề được khởi tạo (initiated

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

Dưới đây là một phần thông tin cơ bản… functions.php ứng dụng:

__( '主导航菜单', 'my-first-theme' ),
    ) );

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

// 添加标题标签支持
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

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

// 加载主题的样式表
function my_first_theme_scripts() {
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()-&gt;get( 'Version' ) );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?&gt;

Trong tệp này, chúng ta đã định nghĩa các hàm. my_first_theme_setupvà thông qua add_action( ‘after_setup_theme’， ‘my_first_theme_setup’ ) Hãy gắn nó vào các hook hành động cụ thể của chủ đề khởi tạo WordPress. Tương tự như vậy, chúng ta cũng sử dụng… register_sidebar Hàm đã đăng ký một khu vực chứa các công cụ nhỏ (small tools), và thông qua đó… wp_enqueue_style Hàm đã đưa đúng bảng định dạng chủ đề (theme style sheet) vào chương trình.

Tạo các mẫu và kiểu dáng chuyên dụng

Tùy chỉnh mẫu cho các loại trang khác nhau

Cấu trúc phân cấp của các mẫu trong WordPress cho phép bạn tạo ra các tệp mẫu riêng biệt cho các loại trang khác nhau. Ví dụ:
* front-page.phpĐược sử dụng làm trang chủ tĩnh (không thay đổi nội dung).
* home.phpTrang danh sách bài viết trên blog.
* single.phpTrang chi tiết của một bài viết.
* page.phpTrang đơn (Single-page).
* archive.phpTrang lưu trữ thông tin về phân loại, thẻ mục, tác giả, v.v.
* search.phpTrang kết quả tìm kiếm.
* 404.phpTrang lỗi 404.

Đọc thêm Hướng dẫn thực hành cơ bản về phát triển chủ đề WordPress: Xây dựng cấu trúc và mẫu chủ đề tùy chỉnh từ đầu。

Tạo ra page.php Bạn có thể kiểm soát độc lập giao diện của tất cả các trang, mà không ảnh hưởng đến trang nội dung bài viết. Cấu trúc của nó là… index.php Tương tự, nhưng thường không cần hiển thị các thông tin meta về bài viết (như ngày đăng, tác giả).

Thiết kế giao diện và tương tác có khả năng thích ứng với các thiết bị khác nhau (responsive design and interaction)

Các chủ đề WordPress hiện đại phải có khả năng thích ứng với nhiều loại màn hình khác nhau (từ điện thoại di động đến máy tính bàn). Điều này đòi hỏi rằng mã CSS của bạn cần được thiết kế sao cho phù hợp với mọi kích thước màn hình. Bạn nên áp dụng chiến lược thiết kế CSS theo nguyên tắc “Mobile First” (Ưu tiên thiết kế cho màn hình di động): trước tiên hãy xây dựng các kiểu dáng cơ bản dành cho màn hình nhỏ, sau đó sử dụng các câu lệnh truy vấn phương tiện truyền thông (Media Queries) để thêm các tính năng bổ sung cho màn hình lớn hơn.

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

Đồng thời, chủ đề của bạn có thể cần một số đoạn mã JavaScript để cung cấp các chức năng tương tác như menu thả xuống, slide show, v.v. Cách làm đúng đắn là… functions.php sử dụng wp_enqueue_script() Các hàm được sử dụng để đăng ký và xếp hàng các tập lệnh (script), đồng thời đảm bảo rằng các phụ thuộc (chẳng hạn như jQuery) được khai báo một cách chính xác. Điều này giúp tránh xung đột giữa các tập lệnh và tình trạng tải chúng lặp đi lặp lại, đồng thời tương thích với các tính năng tối ưu hóa tập lệnh của WordPress.

Tóm lại

Qua các bước trên, bạn đã hoàn thành một chủ đề tùy chỉnh cho WordPress cơ bản nhất và có thể sử dụng được ngay. Bạn đã học được cách tạo ra và định nghĩa các thông tin liên quan đến chủ đề đó. style.cssXây dựng nền tảng cơ bản index.php Mẫu (template): Hãy chia nhỏ mẫu thành các thành phần được tổ chức theo nguyên tắc mô-đun hóa (modular components). functions.php Bạn đã tìm hiểu cách tăng cường các tính năng liên quan đến chủ đề (theme) trong WordPress. Bạn cũng đã nắm rõ về cấu trúc phân cấp mạnh mẽ của các mẫu (templates) trong WordPress, điều này mở ra khả năng tạo ra những trang mẫu chuyên dụng phức tạp hơn.

Việc phát triển các chủ đề (themes) là một quá trình liên tục được cải tiến và sâu rộng. Tiếp theo, bạn có thể tìm hiểu về cách phát triển các chủ đề con (Child Themes) để thay đổi các chủ đề hiện có một cách an toàn, học cách sử dụng API của công cụ tùy chỉnh WordPress (WordPress Customizer) để cho phép người dùng điều chỉnh cài đặt chủ đề trực tiếp từ giao diện quản trị, hoặc nghiên cứu kỹ hơn về REST API của WordPress nhằm tạo ra những chủ đề có thể kết hợp được với các framework phía trước (front-end frameworks). Việc theo dõi các tài liệu chính thức dành cho nhà phát triển và tham gia tích cực vào cộng đồng là yếu tố then chốt để liên tục nâng cao kỹ năng của bạn.

FAQ 常见问题

Có phải để phát triển một theme cho WordPress, người ta phải am hiểu sâu rộng về PHP không?

Đúng vậy, việc nắm vững kiến thức cơ bản về PHP là điều kiện cần thiết để phát triển các giao diện (theme) cho WordPress. Bởi vì WordPress được viết bằng PHP, tất cả các tệp mẫu (template files) của nó cũng được tạo ra bằng ngôn ngữ này. index.php、single.php) và các tệp chứa thông tin chức năng (function files).functions.phpTất cả đều cần sử dụng mã PHP để tạo nội dung một cách dinh hồng, gọi các hàm của WordPress và thao tác với dữ liệu.

Đồng thời, bạn cũng cần làm quen với HTML và CSS để xây dựng cấu trúc và kiểu dáng của trang web, đồng thời có kiến thức cơ bản về JavaScript (đặc biệt là jQuery, vì nó được tích hợp sẵn trong nền tảng WordPress) để thêm các chức năng tương tác.

Tại sao thay đổi về chủ đề (theme) của tôi không hiển thị trên giao diện quản trị (WordPress backend)?

Đ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ử xóa lỗi đệm trong trình duyệt bằng cách… Ctrl + F5(Dành cho Windows/Linux) hoặc Cmd + Shift + RTrên Mac, bạn có thể thực hiện việc làm mới cưỡng bức (forced refresh) để xóa bộ nhớ đệm (cache) của trình duyệt.

Nếu vấn đề vẫn còn tồn tại, có thể là do phía máy chủ hoặc các plugin tối ưu hóa bộ nhớ đệm của WordPress (chẳng hạn như W3 Total Cache, WP Super Cache) đang lưu trữ các tệp cũ. Hãy thử xóa toàn bộ dữ liệu được lưu trong các plugin này. Trong quá trình phát triển, bạn nên tạm thời vô hiệu hóa các plugin tối ưu hóa bộ nhớ đệm này để tránh gây ra sự cố.

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

Việc hỗ trợ nhiều ngôn ngữ (quốc tế hóa và địa phương hóa, i18n và l10n) trong một theme chủ yếu phụ thuộc vào các hàm dịch của WordPress. Trong theme, tất cả các chuỗi văn bản dành cho người dùng không nên được viết trực tiếp, mà phải được bao bọc bằng các hàm dịch tương ứng.

Ví dụ, sử dụng (‘文本’， ‘my-first-theme’) Vui lòng cung cấp đoạn văn bản bạn muốn được dịch, hoặc chỉ định phần nào cần được xử lý. echo esc_html(‘文本’， ‘my-first-theme’) thực hiện xuất và thoát. Bạn cần style.css và trong load_theme_textdomain() Điều chỉnh chính xác trong lời gọi hàm Text Domain(Văn bản trường), sau đó sử dụng các công cụ như Poedit để tạo ra nó. .pot dịch mẫu và .po/.mo Tệp ngôn ngữ.

Có sự khác biệt gì giữa tệp functions.php của chủ đề (theme) và các tính năng (features) của plugin?

functions.php Chức năng của đoạn mã trong tệp tin tương tự như chức năng của đoạn mã trong plugin; cả hai đều có thể được sử dụng để mở rộng chức năng của WordPress. Sự khác biệt chính nằm ở phạm vi hoạt động (scope) và mục đích sử dụng (purpose).

functions.php Các tính năng này được liên kết chặt chẽ với chủ đề hiện tại. Khi người dùng thay đổi chủ đề, những tính năng này thường sẽ không còn khả dụng nữa. Chúng thích hợp để thêm những tính năng có liên quan trực tiếp đến giao diện trực quan, bố cục, và mẫu của chủ đề (chẳng hạn như vị trí đăng ký mục ăn, tùy chọn hỗ trợ chủ đề).

Các tính năng được cung cấp bởi plugin là độc lập với chủ đề (theme) được sử dụng; dù bạn chọn chủ đề nào, miễn là plugin được kích hoạt, các tính năng đó vẫn sẽ hoạt động. Chúng rất thích hợp để thêm những tính năng mang tính chất chung, không liên quan đến giao diện của chủ đề (ví dụ: biểu mẫu liên hệ, tối ưu hóa SEO, tính năng thương mại điện tử). Nếu một tính năng vẫn cần được giữ lại sau khi thay đổi chủ đề, thì nó nên được triển khai dưới dạng một plugin.

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