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

Bắt đầu phát triển theme WordPress: Xây dựng theme tùy chỉnh đầu tiên từ con số 0

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

Chuẩn bị: Tạo một môi trường chủ đề hoàn chỉnh

Trước khi bắt đầu viết bất kỳ đoạn mã nào, việc thiết lập một môi trường phát triển có cấu trúc rõ ràng là yếu tố then chốt để đạt được thành công. Đầu tiên, bạn cần cài đặt WordPress trên máy tính của mình hoặc trên một máy chủ từ xa. Sau đó, hãy tạo một thư mục để lưu trữ các giao diện (theme) của WordPress; thư mục này nên được đặt trong thư mục cài đặt của WordPress. /wp-content/themes/ Đúng vậy. Chúng ta sẽ tạo ra một thứ có tên là… my-first-theme Đây là thư mục mới được tạo ra, và nó chính là thư mục cốt lõi cho chủ đề tùy chỉnh của chúng ta.

Một chủ đề WordPress cơ bản nhất chỉ cần hai tệp tin là có thể được hệ thống nhận diện. Tệp tin đầu tiên là tệp tin biểu mẫu (style sheet). style.cssNó không chỉ định giao diện của trang web mà còn chứa các thông tin được ghi chú ở phần đầu trang (header), những thông tin này có thể được coi là “chứng minh thư” của chủ đề (theme) – bao gồm tên chủ đề, tác giả, mô tả, và các dữ liệu meta khác. Đây là tệp mẫu (template) cốt lõi. index.phpĐó là tệp mẫu trang chủ mặc định của WordPress.

Hãy bắt đầu bằng cách tạo ra nó trước nhé. style.css Đây là một tệp tin, trong đó các thông tin tiêu đề (header information) cần thiết được ghi vào.

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

/*
Theme Name: My First Theme
Theme URI: http://example.com/my-first-theme/
Author: 你的名字
Author URI: http://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
*/

/* 以下是正式的样式内容 */
body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    padding: 20px;
}

Tiếp theo, hãy tạo ra phiên bản cơ bản nhất. index.php Tệp tin này có thể rất đơn giản, chỉ được sử dụng để kiểm tra xem chủ đề có được nhận diện đúng cách hay khô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%
Logo UltaHost Truy cập trang 
<!DOCTYPE html>
<html no numeric noise key 1004>
<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 1001>
    <h1>Xin chào thế giới! Đây là chủ đề đầu tiên của tôi.</h1>
    <?php wp_footer(); ?>
</body>
</html>

Sau khi hoàn thành việc tạo hai tệp tin trên, hãy đăng nhập vào backend của WordPress, truy cập trang “Giao diện” (Appearance) -> “Chủ đề” (Themes). Bạn sẽ thấy chủ đề “My First Theme” mà chúng ta vừa tạo. Hãy kích hoạt nó, sau đó truy cập trang chủ của trang web để xem kết quả đầu ra đơn giản nhất. Điều này có nghĩa là khung công cụ cho chủ đề của bạn đã được xây dựng thành công.

Hiểu rõ về tệp mẫu cốt lõi và cấu trúc phân cấp của nó

WordPress sử dụng cấu trúc phân cấp các mẫu (Template Hierarchy) để quyết định mẫu nào sẽ được sử dụng để hiển thị nội dung cho từng yêu cầu truy cập trang web khác nhau. Việc hiểu rõ các quy tắc này là yếu tố then chốt trong quá trình phát triển các giao diện (theme) cho WordPress. Nói một cách đơn giản, khi người dùng truy cập một trang cụ thể, WordPress sẽ tìm kiếm mẫu phù hợp theo một thứ tự ưu tiên nhất định. Mẫu cơ bản nhất là… index.phpĐó là tùy chọn hoàn tác (backout) cuối cùng cho tất cả các trang.

Ví dụ, khi người dùng truy cập vào nội dung cụ thể của một bài viết trên blog, WordPress sẽ tìm kiếm thông tin đó trước tiên. single-post.phpNếu không có, hãy tìm kiếm. single.phpChỉ sẽ được sử dụng nếu nó chưa tồn tại. index.phpĐối với trang hiển thị danh sách bài viết, nó sẽ tìm kiếm theo thứ tự từng mục trong danh sách đó. home.php、front-page.php、index.php。

Để tạo ra một chủ đề blog hoàn chỉnh về mặt chức năng, chúng ta cần tạo ít nhất một số tệp mẫu (template files) quan trọng sau:header.php(Trang đầu của trang web)footer.php(Phần chân trang của trang web)sidebar.php(Nhãn cạnh bên, tùy chọn)index.php(Main Content Index)single.php(Một bài viết đơn lẻ)page.php(Một trang) và style.css(Các bảng định dạng).

Đọc thêm Làm thế nào để phát triển một chủ đề WordPress tùy chỉnh từ đầu?。

Thông qua get_header()、get_footer() 和 get_sidebar() Những hàm mẫu này giúp chúng ta có thể mô-đun hóa các đoạn mã chung, từ đó tăng khả năng tái sử dụng mã nguồn. Tệp mẫu chính có thể được thiết kế như sau… index.php Cấu trúc của nó sẽ trở nên rất rõ ràng nhờ vào điều này.

<?php get_header(); ?>

<main id="main-content">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
        endwhile;
    else :
        // 没有找到内容的提示
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ý tưởng về tính mô-đun hóa này không chỉ giúp mã nguồn dễ bảo trì hơn, mà còn cho phép bạn dễ dàng tạo ra các tiêu đề trang (header) và chân trang (footer) riêng biệt cho các loại trang khác nhau.

Thực hành phát triển: Tạo vòng lặp chính và gọi nội dung bài viết

Trọng tâm của bất kỳ chủ đề blog nào cũng là “The Loop” (Vòng lặp chính). Đây là cấu trúc mã PHP mà WordPress sử dụng để lấy nội dung bài viết từ cơ sở dữ liệu và hiển thị chúng trên trang web. Bên trong vòng lặp này, bạn có thể sử dụng một loạt các thẻ mẫu (Template Tags) để hiển thị tiêu đề bài viết, nội dung, tác giả, ngày xuất bản và các thông tin khác.

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

Hãy cùng xây dựng một phiên bản cơ bản nhất của nó.index.phpTrong vòng lặp chính, các tệp tin được sử dụng để hiển thị danh sách bài viết.

<?php get_header(); ?>

<div class="content-area">
    <main class="site-main">
        <?php if ( have_posts() ) : ?>
            <header class="page-header">
                <h1 class="page-title">Bài viết mới nhất</h1>
            </header>
            <?php
            while ( have_posts() ) : the_post();
            ?>
                <article no numeric noise key 1011 id="post-<?php the_ID(); ?>">
                    <h2 class="entry-title">
                        <a href="/vi/</?php the_permalink(); ?>">
                            <?php the_title(); ?>
                        </a>
                    </h2>
                    <div class="entry-meta">
                        Đăng ngày:<time datetime="<?php echo get_the_date( 'c' ); ?>"><?php echo get_the_date(); ?></time> | 作者：
                    </div>
                    <div class="entry-content">
                        <?php the_excerpt(); // 输出文章摘要 ?>
                    </div>
                </article>
            <?php
            endwhile;
            // 输出分页导航
            the_posts_navigation();
        else :
            ?>
            <p>Xin lỗi, không tìm thấy bài viết nào.</p>
        <?php endif; ?>
    </main>
    <?php get_sidebar(); ?>
</div>

<?php get_footer(); ?>

Trong đoạn mã trên, chúng ta đã sử dụng… have_posts() 和 the_post() Để xây dựng vòng lặp, chúng ta sử dụng các thẻ mẫu (template tags). the_title()、the_permalink()、the_excerpt() Các ký hiệu như “đợi” được sử dụng để hiển thị nội dung tương ứng.post_class() Hàm sẽ tự động tạo ra một loạt các lớp CSS rất hữu ích cho container bài viết, giúp chúng ta dễ dàng thiết kế giao diện (style design).

Đối với một bài viết riêng lẻ, chúng ta cần tạo… single.phpCấu trúc của nó tương tự như trang chỉ mục, nhưng thường chỉ hiển thị nội dung của một bài viết cụ thể và trình bày toàn bộ nội dung đó.the_content())。

Đọc thêm Hướng dẫn nhập môn phát triển theme WordPress: Xây dựng theme tùy chỉnh từ con số không。

<?php get_header(); ?>

<main id="primary">
    <?php
    while ( have_posts() ) : the_post();
        get_template_part( 'template-parts/content', 'single' );
    endwhile;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Ở đây, một hàm mạnh mẽ hơn đã được đưa vào sử dụng. get_template_part()Nó được sử dụng để tải một tệp mã nguồn (template fragment) khác nằm trong thư mục chứa các chủ đề (theme directory). Ví dụ,get_template_part( 'template-parts/content', 'single' ); Sẽ ưu tiên tải trước template-parts/content-single.php Nếu tệp không tồn tại, hãy tải nó về. template-parts/content.phpĐiều này giúp nâng cao thêm mức độ tổ chức và khả năng tái sử dụng của mã nguồn.

Cải tiến chức năng chủ đề và thực hành tốt nhất

Sau khi một chủ đề cơ bản được xây dựng xong, chúng ta có thể làm cho nó mạnh mẽ và ổn định hơn bằng cách thêm các tệp chứa chức năng liên quan đến chủ đề và tuân theo các thực hành tốt nhất. Một trong những tệp quan trọng nhất là… 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

Chủ đềfunctions.phpTệp tin này không phải là bắt buộc, nhưng nó cho phép bạn thêm các tính năng vào chủ đề của mình, đăng ký các đặc điểm cụ thể, và tương tác với API cốt lõi của WordPress. Nó tương tự như một “plugin” dành cho chủ đề của bạn, nhưng lại được liên kết chặt chẽ với chủ đề đó. Ở đây, những gì bạn cần làm là thực hiện các thao tác “đăng ký” và “tuyên bố” (registration and declaration) các tính năng đó, thay vì trực tiếp hiển thị nội dung.

get_footer()functions.phpNội dung cần bao gồm các phần sau:

1. 注册菜单：使用 register_nav_menus() Hàm.
2. 注册侧边栏：使用 register_sidebar() Hàm.
3. 添加主题支持：使用 add_theme_support() Các hàm được sử dụng để kích hoạt các tính năng cốt lõi như hình ảnh đặc trưng của bài viết, logo tùy chỉnh, v.v.
4. 加载样式和脚本：使用 wp_enqueue_style() 和 wp_enqueue_script() Hãy sử dụng hàm một cách chính xác và phù hợp. wp_enqueue_scripts Móc.

__( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

function my_first_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );
    // 加载谷歌字体
    wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&amp;display=swap', array(), null );
    // 加载主 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

// 注册一个右侧边栏
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; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );
?&gt;

Hãy tuân theo những thực hành tốt nhất này, chẳng hạn như thêm chức năng thông qua các “hook” (các hàm được gọi tự động), sắp xếp thứ tự tải các tài nguyên một cách chính xác, và sử dụng các hàm dịch (translation functions). __() 和 _e() Việc làm cho chủ đề (theme) của bạn trở nên quốc tế hóa (internationalized) sẽ giúp đảm bảo rằng nó an toàn, hiệu quả, và tuân thủ các tiêu chuẩn phát triển chính thức của WordPress.

Tóm lại

Từ khi tạo ra… style.css 和 index.php Bắt đầu từ các thư mục cơ bản của WordPress, bạn đã hoàn thành hành trình chính trong quá trình xây dựng một chủ đề WordPress tùy chỉnh. Chúng ta đã tìm hiểu sâu về hệ thống cấp độ của các mẫu (templates), và hiểu được cách WordPress lựa chọn đúng tệp mẫu phù hợp để hiển thị các trang khác nhau một cách thông minh. Chúng ta cũng đã thực hành việc xây dựng vòng lặp chính (main loop) và học cách sử dụng các thẻ mẫu (template tags) để hiển thị nội dung một cách dinh hồng. Cuối cùng, thông qua những bước này… functions.php Chủ đề này đã được trang bị thêm nhiều tính năng mạnh mẽ và quy chuẩn hơn. Mặc dù đây chỉ là bước khởi đầu, nhưng nó đã mở ra cho bạn cánh cửa để bạn có thể tiếp tục khám phá, thêm vào nhiều tệp mẫu hơn, nhiều kiểu dáng đa dạng hơn, cũng như các tính năng tương tác, và cuối cùng tạo ra một trang web độc đáo hoàn toàn phù hợp với nhu cầu của bạn hoặc khách hàng.

FAQ 常见问题

Phải chăng để phát triển các ứng dụng dựa trên nền tảng PHP, người ta nhất định phải hiểu biết về PHP?

Đúng vậy, để phát triển sâu rộng các chủ đề (themes) cho WordPress, bạn cần có kiến thức nhất định về PHP. WordPress được xây dựng trên nền tảng PHP, vì vậy tất cả các tệp mẫu (templates), lệnh gọi hàm (function calls) và logic xử lý dữ liệu đều phụ thuộc vào PHP. Đối với người mới bắt đầu, việc nắm vững ngữ pháp cơ bản của PHP, biến (variables), mảng (arrays), vòng lặp (loops), điều kiện (conditionals) và hàm (functions) là điều cực kỳ quan trọng.

Làm thế nào để thiết kế của tôi phù hợp với các thiết bị di động?

Việc tạo ra những thiết kế có khả năng thích ứng với các kích thước màn hình khác nhau (responsive design) là một yêu cầu cơ bản đối với các trang web hiện đại. Bạn cần sử dụng CSS Media Queries để điều chỉnh cấu trúc và kiểu dáng trang web tùy theo độ rộng màn hình. Khi phát triển trang web, bạn nên áp dụng nguyên tắc “di động trước” (mobile-first): hãy viết mã thiết kế dành riêng cho màn hình nhỏ trước, sau đó từ từ bổ sung hoặc thay đổi các thiết lập cho các kích thước màn hình lớn hơn thông qua Media Queries.

Phương pháp tốt nhất để phát triển và kiểm thử các chủ đề (themes) là gì?

Chúng tôi khuyến nghị mạnh mẽ bạn nên thực hiện công việc phát triển các chủ đề (themes) trong môi trường phát triển cục bộ. Việc sử dụng các công cụ như Local by Flywheel, XAMPP, MAMP hoặc Docker để thiết lập môi trường máy chủ cục bộ sẽ giúp bạn thực hiện các thao tác lặp lại (iteration) và kiểm thử nhanh chóng mà không ảnh hưởng đến trang web trên mạng. Đồng thời, hãy đảm bảo rằng bạn đã kích hoạt các tính năng cần thiết trong WordPress để tối ưu hóa quá trình phát triển các chủ đề. WP_DEBUG Chế độ (mode) rất quan trọng; nó giúp hiển thị các lỗi và cảnh báo của PHP trên màn hình, từ đó bạn có thể phát hiện và sửa chữa các vấn đề trong mã nguồn một cách kịp thời.

Tôi cần nắm vững những công nghệ front-end nào?

Ngoài PHP, bạn cũng cần thành thạo HTML và CSS – những công cụ cơ bản để xây dựng cấu trúc và thiết kế giao diện trang web. Đối với những tính năng tương tác phức tạp hơn hoặc hiệu ứng động, kiến thức về JavaScript cũng rất quan trọng. Đặc biệt, bạn nên học cách thêm và sử dụng các tệp JavaScript một cách an toàn, đúng cách trong WordPress. wp_enqueue_script), cũng như học cách sử dụng thư viện JavaScript tích hợp sẵn trong WordPress.

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