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

Hướng dẫn bắt đầu phát triển theme WordPress: Xây dựng theme đầu tiên từ con số 0

4 phút đọc
2026-03-15
2026-06-04
2,081
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ông tác chuẩn bị và thiết lập môi trường

Trước khi bắt đầu viết bất kỳ đoạn mã nào, 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ôi trường máy chủ cục bộ (chẳng hạn như XAMPP, Local by Flywheel hoặc MAMP) cùng với một trình soạn thảo mã (như VS Code, Sublime Text hoặc PHPStorm). Hãy đảm bảo rằng bạn đã cài đặt đầy đủ PHP, MySQL và các dịch vụ máy chủ như Apache/Nginx trên môi trường cục bộ của mình.

Tiếp theo, bạn cần thực hiện các bước trên trên máy chủ cục bộ của mình.wp-content/themes/Hãy tạo một thư mục mới trong thư mục hiện tại. Tên của thư mục này sẽ giống với tên chủ đề của bạn, ví dụ:my-first-themeĐây là “nơi ở” của tất cả các tệp tin chủ đề (theme files) của bạn.

Một chủ đề WordPress cơ bản nhất chỉ cần hai tệp tin:style.css和index.phpTrong đó,style.cssKhông chỉ là một bảng định dạng (stylesheet), mà còn là “chứng minh thư” của một chủ đề (theme); phần chú thích ở phía trên của tệp này chứa đựng thông tin meta về chủ đề đó. Hãy cùng tạo tệp này trước nhé.

Đọc thêm Hướng dẫn hoàn chỉnh từ con số 0 về phát triển theme WordPress: Xây dựng website cá nhân hóa。

Create a theme information header file

style.cssKhối chú thích ở đầu tệp là yếu tố then chốt giúp WordPress nhận diện một giao diện (theme). Vui lòng tạo khối chú thích này trong thư mục chứa giao diện của bạn.style.cssVà hãy viết nội dung sau đây:

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://example.com/
Description: 一个用于学习WordPress主题开发的简单入门主题。
Version: 1.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/

Những thông tin này sẽ được hiển thị trên trang “Giao diện” -> “Thiết kế” (Appearance -> Themes) trong giao diện quản trị của WordPress.Text DomainĐược sử dụng cho mục đích quốc tế hóa; đây là mã định danh quan trọng để tải các tệp dịch về sau.

Tạo mẫu chỉ mục cơ bản

Tiếp theo, hãy tạo các tệp cốt lõi cho chủ đề (theme files).index.phpNgay cả khi tệp tin này chỉ chứa một dòng mã, nó vẫn có thể giúp WordPress nhận diện và kích hoạt chủ đề của bạn.

<?php get_header(); ?>
<h1>Chào mừng bạn đến với WordPress Theme World!</h1>
<?php get_footer(); ?>

get_header()和get_footer()Đó là các hàm mẫu (template functions) của WordPress; chúng sẽ cố gắng tải các tệp có tên…header.php和footer.phpĐó là các tệp cần thiết để thiết lập giao diện cho trang web. Mặc dù chúng ta vẫn chưa tạo ra chúng, nhưng việc viết như vậy là theo quy ước chuẩn. Bây giờ, bạn có thể truy cập vào giao diện quản trị WordPress, chọn mục “Nhìn” (Appearance) -> “Chủ đề” (Themes), tìm và kích hoạt chủ đề “My First Theme”. Sau khi làm mới trang chủ, bạn sẽ thấy dòng chữ “Hello, WordPress Theme World!”.

Hiểu về cấu trúc các cấp độ của mẫu (template hierarchy) và cách tạo ra các tệp tin cốt lõi (core files)

WordPress sử dụng một bộ quy tắc được gọi là “hệ thống phân cấp template” (template hierarchy) để xác định file template nào sẽ được sử dụng để hiển thị nội dung cho các loại trang khác nhau (như trang chủ, trang bài viết, trang danh mục). Việc hiểu rõ cơ chế này là nền tảng quan trọng để phát triển các giao diện (theme) một cách hiệu quả.

Đọc thêm 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。

Mẫu phổ biến nhất là…index.phpĐó là lựa chọn dự phòng cuối cùng cho tất cả các trang. Tuy nhiên, để có thể kiểm soát được ngoại hình của từng trang một cách chính xác hơn, chúng ta nên tạo ra các tệp mẫu (template files) cụ thể hơn. Trước tiên, hãy cùng tạo ra ba tệp cơ bản và quan trọng nhất:header.php、footer.php和functions.php。

Xây dựng mẫu đầu trang cho trang web

header.phpCác tệp tin thường chứa phần đầu (header) của tài liệu HTML.<head>Và các khu vực công cộng ở phía trên trang web, như Logo và menu điều hướng. Hãy tạo một…header.phptệp:

<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
    <header id="site-header">
        <div class="container">
            <h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
            <p><?php bloginfo( 'description' ); ?></p>
            <nav>
                'primary',
                    'menu_id'        =&gt; 'primary-menu',
                ) );
                ?&gt;
            </nav>
        </div>
    </header>
    <main id="main-content">

Có một vài hàm chính ở đây:wp_head()Các “hook” (móc) cho phép phần cốt lõi của WordPress, các plugin, và các giao diện (theme) tự động thực hiện các thao tác cần thiết một cách linh hoạt.<head>Chèn các đoạn mã cần thiết vào khu vực tương ứng (chẳng hạn như liên kết đến bảng định dạng).body_class()Nó sẽ tạo ra một loạt tên lớp CSS để bạn có thể dễ dàng kiểm soát giao diện trang web tùy theo từng trang cụ thể.wp_nav_menu()Dùng để hiển thị một menu điều hướng.

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

Xây dựng mẫu giao diện phía dưới của trang web

footer.phpCác tệp tin thường chứa phần nội dung ở cuối trang web (phần “footer”) dành cho mọi người, chẳng hạn như thông tin bản quyền, và sau đó được đóng lại (không tiếp tục hiển thị nội dung khác).header.phpNhững thẻ được mở trong trình duyệt. Hãy tạo chúng.footer.php：

    </main><!-- #main-content -->
    <footer id="site-footer">
        <div class="container">
            <p>©  . All rights reserved.</p>
        </div>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

wp_footer()与wp_head()Tương tự, đây là một hook quan trọng được sử dụng để…</body>Chèn script hoặc mã nguồn trước thẻ (tag).

Bây giờ, hãy quay trở lại với…index.phpHãy cập nhật nó để sử dụng các tệp đầu trang (header) và chân trang (footer) mới mà chúng tôi vừa tạo.

Đọc thêm Cách lựa chọn và tùy chỉnh chủ đề WordPress thân thiện với SEO。

<article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    </article>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>

Đoạn mã này tạo thành vòng lặp cốt lõi (The Loop) của một chủ đề WordPress. Nó sẽ kiểm tra xem trang hiện tại có bài viết nào không, sau đó lặp lại để hiển thị tiêu đề và nội dung của mỗi bài viết.

Tăng cường chức năng của chủ đề thông qua tệp lệnh (function file)

functions.phpĐây là “Trung tâm kiểm soát” (Control Center) của chủ đề bạn đang sử dụng. Nó không phải là một tệp mẫu (template file), mà là một tệp PHP được tự động tải vào khi chủ đề được khởi tạo. Bạn có thể thêm các tính năng hỗ trợ cho chủ đề, định vị các mục trong menu, các bảng định dạng (stylesheets) và các script vào đây. Hãy bắt đầu tạo nội dung cho tệp này nhé!functions.php：

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 
<?php
/**
 * My First Theme 的功能函数文件
 */

// 主题基础设置
if ( ! function_exists( 'my_first_theme_setup' ) ) :
    function my_first_theme_setup() {
        // 让WordPress管理文档标题
        add_theme_support( 'title-tag' );
        // 启用文章和页面的特色图片功能
        add_theme_support( 'post-thumbnails' );
        // 注册一个主导航菜单
        register_nav_menus( array(
            'primary' => esc_html__( 'Primary Menu', 'my-first-theme' ),
        ) );
        // 为文章摘录添加HTML支持
        add_filter( 'excerpt_more', 'my_first_theme_excerpt_more' );
    }
endif;
add_action( 'after_setup_theme', 'my_first_theme_setup' );

// 修改摘录末尾的“更多”链接样式
function my_first_theme_excerpt_more( $more ) {
    return '...';
}

// 注册并加载样式表
function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载一个自定义样式表
    wp_enqueue_style( 'my-first-theme-custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Tập tin hàm này thực hiện một số công việc quan trọng: 1) Thông qua…add_theme_support()Kích hoạt các chức năng phổ biến trong chủ đề WordPress hiện đại; 2) Thông quaregister_nav_menus()Bạn đã đăng ký một địa điểm bán đồ ăn; nhờ vậy, những gì chúng ta đã làm trước đây sẽ được áp dụng cho địa điểm này.header.phpThe function that is being called internally.primaryMenü có thể được phân bổ trong phần “Giao diện” -> “Menü” ở phía sau hậu trường; 3) Hãy sử dụng nó.wp_enqueue_style()Hàm đã thêm bảng định dạng vào hàng đợi một cách chính xác và an toàn, theo các quy định về bảo mật.

Tạo mẫu bài viết độc lập

Để một bài viết đơn lẻ được trình bày tốt hơn, chúng ta có thể tạo một tệp mẫu (template file) chuyên dụng.single.phpDựa trên cấu trúc phân cấp của các mẫu (templates), khi truy cập vào một bài viết cụ thể, WordPress sẽ ưu tiên sử dụng những mẫu được thiết lập cho cấp độ đó.single.php… thay vìindex.php。

<?php get_header(); ?>

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
    <header class="entry-header">
        &lt;?php the_title( &#039;<h1 class="entry-title">', '</h1>' ); ?&gt;
        <div class="entry-meta">
            <?php 
            printf( 
                esc_html__( '发布于 %s', 'my-first-theme' ), 
                get_the_date() 
            );
            ?>
        </div>
        <?php if ( has_post_thumbnail() ) : ?>
            <div class="post-thumbnail">
                <?php the_post_thumbnail( 'large' ); ?>
            </div>
        <?php endif; ?>
    </header>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
</article>

<?php get_footer(); ?>

Mẫu này trình bày thông tin về bài viết một cách chi tiết hơn, bao gồm ngày đăng và hình ảnh đặc trưng (nếu đã được thiết lập).post_class()Hàm sẽ xuất ra các lớp CSS tương ứng với loại bài viết.

Thêm các kiểu dáng cơ bản và thiết kế thích ứng (responsive design).

Bây giờ, chủ đề của bạn đã có cấu trúc và các chức năng cơ bản; đã đến lúc làm cho nó trở nên đẹp mắt hơn. Chúng ta sẽ…style.cssHãy thêm một số đoạn CSS cơ bản vào trang web, và đảm bảo rằng thiết kế của nó có tính phản ứng (responsive design).

Trongstyle.cssThêm định dạng sau cho tệp tin (phía dưới tiêu đề thông tin chủ đề):

/* 基础重置与排版 */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #f9f9f9;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 头部样式 */
#site-header {
    background: #fff;
    border-bottom: 1px solid #eee;
    padding: 1rem 0;
}
#site-header h1 a {
    color: #333;
    text-decoration: none;
}

/* 导航菜单 */
#primary-menu {
    display: flex;
    list-style: none;
}
#primary-menu li {
    margin-right: 1rem;
}
#primary-menu a {
    text-decoration: none;
    color: #555;
}

/* 主内容区 */
#main-content {
    padding: 2rem 0;
}
article {
    background: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* 底部样式 */
#site-footer {
    background: #333;
    color: #fff;
    text-align: center;
    padding: 1.5rem 0;
    margin-top: 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px;
    }
    #primary-menu {
        flex-direction: column;
    }
    #primary-menu li {
        margin-right: 0;
        margin-bottom: 0.5rem;
    }
    article {
        padding: 1rem;
    }
}

Những kiểu thiết kế này mang lại hiệu ứng thị giác rõ ràng và hiện đại, đồng thời hỗ trợ giao diện thân thiện với màn hình nhỏ (responsive layout) trên các thiết bị có màn hình nhỏ. Bạn có thể tạo ra những thiết kế tương tự./assets/css/custom.cssTệp này được sử dụng để lưu trữ nhiều kiểu dáng tùy chỉnh hơn; nó đã được tạo sẵn rồi.functions.phpNó đã được đưa vào danh sách chờ để được tải.

Tóm lại

Theo các bước được hướng dẫn trong bài viết này, bạn đã bắt đầu từ một thư mục trống và thành công trong việc xây dựng một chủ đề WordPress có chức năng đầy đủ và cấu trúc rõ ràng. Bạn cũng đã hiểu được những tệp tin cơ bản nhất liên quan đến quá trình phát triển chủ đề WordPress.style.css和index.phpBạn đã học về khái niệm về cấu trúc các tầng trong mẫu (template layers) và đã tạo ra chúng.header.php、footer.php、single.phpCác tệp mẫu cốt lõi khác cũng được sử dụng trong quá trình phát triển ứng dụng. Bạn cũng đã thực hiện việc sử dụng chúng một cách hiệu quả…functions.phpTệp tin này đã bổ sung các tính năng hỗ trợ và khả năng quản lý tài nguyên cho chủ đề của bạn, và cuối cùng, nó được mang lại “sức sống thị giác” thông qua CSS.

Đây chỉ là một điểm khởi đầu thôi. Tiếp theo, bạn có thể tìm hiểu cách tạo thêm nhiều tệp mẫu (template files) nữa.page.php、archive.php、404.phpHãy tìm hiểu sâu về hệ thống Hook, Action và Filter trong WordPress, cũng như cách để chủ đề (Theme) của bạn hỗ trợ Widgets và Customizer. Bằng cách liên tục thực hành và khám phá, bạn sẽ trở thành một nhà phát triển chủ đề WordPress chuyên nghiệp.

FAQ 常见问题

Làm thế nào để thay đổi Logo của một chủ đề (theme)?

在header.phpTrong tệp tin, hãy tìm dòng mã hiển thị tiêu đề trang web. Bạn có thể sử dụng một công cụ để xác định vị trí của dòng mã đó.

Thay thế thẻ (Tag Replacement)bloginfo( ‘name’ )Và hãy thêm liên kết đến hình ảnh Logo của bạn. Cách làm chuyên nghiệp hơn là…functions.phpsử dụngadd_theme_support( ‘custom-logo’ )Đây là bản cập nhật nhằm hỗ trợ tính năng tải lên hình ảnh logo trong các công cụ tùy chỉnh (customizers) của WordPress.

Tại sao menu điều hướng của tôi không hiển thị?

Trước tiên, hãy đảm bảo rằng bạn đã…functions.phphãy tải bản dịch thông qua hàmregister_nav_menus()Bạn đã đăng ký địa điểm của nhà hàng (ví dụ:…)primarySau đó, bạn cần đăng nhập vào giao diện quản trị WordPress, truy cập mục “Nhìn” (Appearance) -> “Menu” (Menus). Tạo một menu mới, chọn các mục menu cần thiết, đánh dấu vào ô “Vị trí hiển thị” (Display Location) để chọn vị trí menu mà bạn muốn (ví dụ: “Primary Menu”), và cuối cùng lưu menu đó.

Làm thế nào để thêm thanh bên cạnh cho một chủ đề?

Đầu tiên, trongfunctions.phpsử dụngregister_sidebar()Hàm này được sử dụng để đăng ký một khu vực dành cho các widget (tiện ích bổ sung) trong thanh bên (sidebar). Sau đó, bạn có thể sử dụng khu vực này trong các tệp mẫu (template files) nơi bạn muốn hiển thị thanh bên.index.php或single.php), hãy sử dụngdynamic_sidebar()Hàm được gọi trong khu vực này. Đồng thời, bạn cần phải tạo ra (create) những thứ cần thiết.sidebar.phpTệp tin này được sử dụng để định nghĩa cấu trúc HTML cụ thể của thanh bên (sidebar).

Các thao tác trong tệp `functions.php` nhất thiết phải được thực hiện thông qua các “hook” (các hàm được gọi tự động trong quá trình thực thi hệ thống) sao?

Đúng vậy, trong hầu hết các trường hợp, để đảm bảo rằng đoạn mã được thực thi đúng thời điểm cần thiết, bạn nên đóng gói các đoạn mã thực hiện chức năng vào các hàm (functions) và sử dụng các “hook” (các điểm kết nối) cụ thể để điều khiển quá trình thực thi đó.after_setup_theme、wp_enqueue_scripts) Mount it. Just write it directly.functions.phpCác đoạn mã hoạt động ở phạm vi toàn cục (global scope) có thể được thực thi vào những thời điểm không phù hợp hoặc gây ra lỗi.

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