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

Dễ dàng bắt đầu phát triển chủ đề WordPress: Xây dựng trang web tùy chỉnh từ con số không đến hoàn thiện

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

Hiểu cấu trúc cơ bản của theme WordPress

Trước khi bắt đầu viết mã, việc hiểu rõ cấu trúc của một chủ đề WordPress là điều cực kỳ quan trọng. Về bản chất, một chủ đề là một thư mục chứa một loạt các tệp có định dạng nhất định; những tệp này cùng nhau quyết định giao diện và chức năng của trang web. Một chủ đề cơ bản nhất chỉ cần hai tệp:style.css和index.php。

Tệp biểu mẫu kiểu cốt lõi (Core Style Sheet File)

style.cssTệp tin không chỉ đơn thuần là nơi lưu trữ các kiểu dáng (CSS) mà còn là “chứng minh thư” của một chủ đề (theme) trong WordPress. Phần đầu của tệp tin này phải chứa một khối ghi chú đặc biệt, được gọi là “phần đầu của bảng định kiểu” (style sheet header), dùng để thông báo cho hệ thống WordPress về tên chủ đề, tác giả, mô tả, phiên bản và các thông tin metadate khác. Nếu thiếu phần này, WordPress sẽ không thể nhận diện được rằng thư mục đó là một chủ đề hợp lệ.

Một trong những yếu tố cơ bản nhất…style.cssVí dụ về phần đầu tệp (file header) như sau:

Đọc thêm Phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh đầu tiên của bạn từ đầu。

/*
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
*/

Tệp mẫu cốt lõi

index.phpĐây là tệp mẫu mặc định của chủ đề, và cũng là tệp quan trọng nhất. Khi WordPress không thể tìm thấy tệp mẫu cụ thể hơn cho trang được yêu cầu, nó sẽ tự động sử dụng tệp mẫu mặc định này.index.phpNó có nhiệm vụ lấy dữ liệu từ cơ sở dữ liệu và trình bày chúng dưới dạng cấu trúc HTML trên trình duyệt. Đây là ví dụ đơn giản nhất về cách thức hoạt động của nó.index.phpTệp tin có thể chỉ chứa cấu trúc HTML cơ bản cùng với mã PHP để gọi các hàm cốt lõi của WordPress.

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

Ngoài hai tệp cốt lõi này, một chủ đề hoàn chỉnh thường bao gồm:
* header.phpPhần tiêu đề của trang web.
* footer.phpPhần chân trang (footer) của trang web.
* functions.phpDùng để nâng cao chức năng của các chủ đề (themes), menu đăng ký, thanh bên cạnh (sidebars), v.v.
* page.php: dùng để hiển thị một trang đơn lẻ.
* single.phpDùng để hiển thị một bài viết blog riêng lẻ.

Xây dựng môi trường phát triển cục bộ và tạo chủ đề đầu tiên

Việc phát triển các chủ đề (themes) trực tiếp trên máy chủ thực sự là một hành động nguy hiểm và kém hiệu quả. Thực hành tốt nhất là thiết lập một môi trường phát triển trên máy tính cá nhân, sao cho nó giống nhất với môi trường trực tuyến. Bạn có thể sử dụng các công cụ như XAMPP, MAMP, Local by Flywheel hoặc DevKinsta – những công cụ này cho phép cài đặt PHP, MySQL và máy chủ web chỉ với một cú nhấp chuột.

Tạo thư mục chủ đề và tệp tin

Trước hết, trong thư mục cài đặt WordPress của bạn trên máy tính, hãy tìm kiếm…wp-content/themes/Đường dẫn: Tại đây, hãy tạo một thư mục mới, đặt tên nó theo mã định danh của chủ đề bạn. Được khuyến nghị sử dụng chữ cái viết thường và dấu gạch nối, ví dụ:my-first-theme。

Sau đó, hãy tạo hai tệp tin cốt lõi đã đề cập ở trên bên trong thư mục đó:style.css和index.phpNhập đoạn mã đầu tiên của bảng định dạng (stylesheet) vào vị trí thích hợp trong tệp HTML của bạn.style.cssHãy thay thế nội dung trong đoạn văn bằng thông tin của riêng bạn.

Đọc thêm Nhập môn phát triển chủ đề WordPress: Xây dựng giao diện website đầu tiên từ con số 0。

Viết tệp mẫu cơ bản

Tiếp theo,index.phpHãy viết đoạn mã cơ bản nhất vào đây; đoạn mã này chứa các thẻ mẫu (template tags) cần thiết cho 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 :
            _e( '抱歉，没有找到任何内容。', 'my-first-theme' );
        endif;
        ?&gt;
    </main>

<footer>
        <p>©</p>
    </footer>

<?php wp_footer(); ?>
</body>
</html>

Sau khi hoàn thành các bước trên, hãy truy cập trang “Giao diện” -> “Themes” (Appearance -> Themes) trong giao diện quản trị WordPress của bạn. Bạn sẽ thấy một theme có tên “My First Theme” (Thème Đầu tiên của tôi) đã được thêm vào danh sách các theme có sẵn. Hãy kích hoạt theme đó, sau đó truy cập trang chủ của trang web. Lúc này, tiêu đề và nội dung của các bài viết sẽ được hiển thị trên trang chủ.

Sử dụng cấu trúc phân cấp của các mẫu (templates) và các hàm cốt lõi (core functions).

WordPress sử dụng một hệ thống “cấp độ template” thông minh để quyết định file template nào sẽ được sử dụng cho các yêu cầu trang khác nhau (như trang chủ, trang bài viết, trang danh mục). Việc hiểu rõ hệ thống 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.

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

Hiểu thứ tự tải mẫu

Ví dụ, khi truy cập một bài viết trên blog, WordPress sẽ tìm kiếm tệp template theo thứ tự sau:single-post.php -> single.php -> singular.php -> index.phpNó sẽ sử dụng tệp đầu tiên được tìm thấy. Thiết kế này cho phép bạn tạo ra các bố cục được tùy chỉnh chặt chẽ cho các loại trang khác nhau, đồng thời vẫn giữ được tính linh hoạt trong quá trình sử dụng.index.phpĐây là lựa chọn dự phòng cuối cùng.

Sử dụng vòng lặp và thẻ mẫu

在index.phpĐoạn mã PHP mà bạn thấy chính là “Vòng lặp WordPress (The Loop)” nổi tiếng. Đây là thành phần cốt lõi của tất cả các tệp mẫu (template files), được sử dụng để duyệt qua và hiển thị các bài viết hoặc nội dung cần được trình bày trên trang hiện tại.

within the loopthe_title()、the_content()、the_excerpt()Các hàm như vậy được gọi là “thẻ mẫu” (template tags). Chúng có nhiệm vụ hiển thị dữ liệu bài viết tương ứng một cách an toàn. Một hàm quan trọng khác là…the_post()Nó được gọi trong mỗi lần lặp, để thực hiện các thao tác liên quan đến biến toàn cục (global variables).$postĐối tượng được thiết lập với dữ liệu của bài viết hiện tại, sau đó hệ thống sẽ chuyển sang bài viết tiếp theo.

Đọc thêm Nắm vững kỹ thuật then chốt: Tạo chủ đề WordPress đầu tiên của bạn từ con số 0。

Việc mô-đun hóa cấu trúc trang web là một phương pháp tốt để nâng cao khả năng bảo trì mã nguồn. Đó chính là ý tưởng chính.header.php和footer.phpĐây chính là nơi mà những kỹ năng và khả năng đó có thể được phát huy tối đa.

Tách phần đầu (header) và phần chân trang (footer)

将index.phptrong<head>Một phần và<header>Cắt ra phần khu vực cần thiết, sau đó dán nó vào một tài liệu mới được tạo.header.phpTrong tệp tin. Tương tự như vậy, hãy thực hiện điều đó.<footer>Một phần đã được cắt ra.footer.phptrong.

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

Sau đó, tại vị trí ban đầu…index.phptrong đó, sử dụngget_header()和get_footer()Hai thẻ mẫu này được sử dụng để đưa chúng vào bài viết.

<?php get_header(); ?>

<main>
    &lt;?php the_title( &#039;<h2>', '</h2>' ); ?&gt;
        <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
    <?php endif; ?>
</main>

<?php get_footer(); ?>

Như vậy, tất cả các mẫu trang đều có thể sử dụng chung một bộ phần đầu (header) và phần chân trang (footer); khi cần thay đổi, chỉ cần chỉnh sửa duy nhất một tệp tin là được.

Tăng cường chức năng của chủ đề thông qua file Functions.php

functions.phpTệp tin này chính là “trung tâm điều khiển” cho chủ đề (theme) của bạn. Đây không phải là một tệp tin mẫu (template), mà là một thư viện hàm (function library) đượ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 mới hoặc sửa đổi hành vi mặc định của chủ đề tại đây, mà không cần phải chỉnh sửa các tệp tin cốt lõi của WordPress.

Các tính năng được hỗ trợ khi đăng ký chủ đề:

在functions.phpbạn có thể sử dụngadd_theme_support()Hãy sử dụng các hàm để chỉ định những tính năng của WordPress mà giao diện của bạn hỗ trợ. Ví dụ, kích hoạt tính năng hiển thị ảnh thu nhỏ (ảnh đại diện) cho bài viết và tùy chỉnh menu là những thao tác phổ biến.

<?php
function my_theme_setup() {
    // 添加对文章缩略图的支持
    add_theme_support( 'post-thumbnails' );

// 添加对自定义菜单的支持
    add_theme_support( 'menus' );

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Thêm phong cách (styles) và mã nguồn (scripts)

Cách đúng để thêm CSS và JavaScript là thông quawp_enqueue_style()和wp_enqueue_script()hàm, và gắn chúng vàowp_enqueue_scriptsNó được gắn trên chiếc móc này. Điều này đảm bảo rằng các mối phụ thuộc được thiết lập đúng cách và tránh tình trạng tải lại các tài nguyên không cần thiết.

function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/script.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Sau khi hoàn thành những việc này, bạn sẽ có thể…header.phpsử dụngwp_nav_menu()Hãy sử dụng một hàm để hiển thị danh sách các mục menu mà bạn đã đăng ký, và thực hiện điều này trong vòng lặp các bài viết (article loop).the_post_thumbnail()Đã đến lúc hiển thị hình ảnh đặc sắc rồi.

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình từng bước, bắt đầu từ cấu trúc tổng thể cho đến những chi tiết nhỏ nhất. Đầu tiên, bạn cần hiểu rõ cách các thành phần cơ bản của một chủ đề được thiết kế và hoạt động.style.css和index.phpĐây là nội dung về việc xây dựng cốt lõi của hệ thống và thiết lập môi trường phát triển cục bộ. Sau đó, bạn sẽ nắm vững hệ thống cấu trúc các mẫu (templates) và khái niệm về “vòng lặp” (loops), giúp bạn tạo ra bố cục chính xác cho các trang web khác nhau. Bheader.php和footer.phpViệc sử dụng cách tiếp cận lập trình module hóa sẽ giúp mã nguồn của bạn trở nên rõ ràng và dễ bảo trì hơn. Cuối cùng,functions.phpCác tệp tin mở ra cánh cửa cho việc mở rộng chức năng của trang web; từ menu đăng ký cho đến việc tải các tài nguyên một cách an toàn, chúng giúp các giao diện (theme) từ những mẫu tĩnh chuyển thành những bộ giao diện động và mạnh mẽ hơn. Hãy theo đuổi con đường này, liên tục thực hành và khám phá các tệp tin mẫu cụ thể hơn (như…)single.php、page.php、archive.phpBằng cách này, bạn có thể từng bước xây dựng một trang web WordPress tùy chỉnh với các tính năng hoàn chỉnh và thiết kế độc đáo.

FAQ 常见问题

Phát triển chủ đề WordPress cần những kiến thức tiên quyết nào?

Bạn cần nắm vững các kiến thức cơ bản về HTML và CSS để xây dựng cấu trúc và thiết kế giao diện cho trang web. Ngoài ra, bạn cũng cần có hiểu biết cơ bản về PHP, vì các tệp mẫu của WordPress chủ yếu được viết bằng PHP và được sử dụng để tạo ra nội dung một cách dinh hồi. Việc thành thạo JavaScript sẽ giúp bạn thêm các chức năng tương tác vào các chủ đề (theme) của trang web; điều này không bắt buộc trong giai đoạn đầu, nhưng sẽ rất quan trọng sau này.

Tại sao chủ đề của tôi không hiển thị trong phần quản trị (backend)?

Nguyên nhân phổ biến nhất làstyle.cssThông tin tiêu đề trong tệp tin không đúng định dạng hoặc bị thiếu. Vui lòng đảm bảo rằng phần đầu của tệp tin chứa một khối chú thích đầy đủ và phù hợp với yêu cầu về định dạng. Ngoài ra, hãy kiểm tra xem thư mục chứa các chủ đề (topic folders) có được đặt ở đúng vị trí haywp-content/themes/Nó nằm trong thư mục, và tên của thư mục không chứa các ký tự đặc biệt.

Làm thế nào để thêm khu vực công cụ (bảng điều khiển bên cạnh) cho chủ đề của tôi?

Bạn cần phải thực hiện một số bước trước tiên.functions.phpsử dụngregister_sidebar()Hàm này đăng ký một hoặc nhiều khu vực chứa các tiện ích (widgets). Sau đó, trong các tệp mẫu tương ứng (chẳng hạn như…)sidebar.php), hãy sử dụngdynamic_sidebar()Hãy sử dụng một hàm để gọi và hiển thị nội dung đó. Cuối cùng, hãy thực hiện điều này trong mẫu trang (page template).get_sidebar()Hãy nhập tệp này vào hệ thống.

Làm thế nào khi website bị màn hình trắng do sửa đổi file functions.php?

Điều này thường xảy ra vì…functions.phpTrong tệp tin có lỗi ngữ pháp PHP. Vì tệp tin này được thực thi ngay từ giai đoạn đầu tiên khi chủ đề được tải, lỗi này có thể gây ra sự gián đoạn cho toàn bộ trang web. Cách khắc phục là sử dụng FTP hoặc công cụ quản lý tệp tin trong bảng điều khiển máy chủ để thay thế tệp tin bị lỗi.functions.phpĐổi tên (ví dụ: đổi thành…)functions.php.bakNhư vậy, WordPress sẽ bỏ qua nội dung đó, trang web sẽ trở lại trạng thái có thể truy cập được bình thường, và sau đó bạn có thể tải lên phiên bản đã được sửa chữa.

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

Bạn cần thực hiện hai việc. Đầu tiên, hãy sử dụng hàm dịch của WordPress ở tất cả các nơi xuất hiện văn bản trong chủ đề.__()、_e()Và hãy chỉ định vị trí (hoặc thời điểm) mà chúng sẽ được sử dụng.style.css“Text Domain” được định nghĩa trong phần đầu (header). Tiếp theo, sử dụng các công cụ như Poedit để quét các tệp tin chứa nội dung của chủ đề (theme files) và tạo ra các tài liệu cần thiết..potCác tệp mẫu (template files), và dựa trên đó tạo ra các phiên bản ngôn ngữ tương ứng (such as…)zh_CN.po和.moVui lòng cung cấp tệp dịch cho nội dung cần được dịch, sau đó đặt chúng vào thư mục tương ứng của chủ đề./languages/thư mục chính xác.

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