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

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

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

Bước vào thế giới WordPress và phát triển chủ đề (theme) của riêng mình là một cột mốc thú vị và đầy ý nghĩa. Điều này không chỉ giúp bạn kiểm soát hoàn toàn vẻ ngoài và chức năng của trang web mà còn là con đường tuyệt vời để hiểu sâu hơn về cách thức hoạt động cơ bản của WordPress. Hướng dẫn này sẽ hướng dẫn bạn từ đầu, từ việc xây dựng một chủ đề cơ bản nhưng đầy đủ, bao gồm mọi bước quan trọng, từ cấu trúc tệp tin đến các mẫu (templates) cốt lõi.

Xây dựng môi trường phát triển và cấu trúc chủ đề (Developing Environment and Theme Structure)

Trước khi bắt đầu viết mã, bạn cần một môi trường phát triển phù hợp. Chúng tôi khuyên bạn nên sử dụng các phần mềm máy chủ cục bộ như XAMPP, WAMP hoặc MAMP – những công cụ này giúp bạn dễ dàng thiết lập một môi trường trên máy tính cá nhân bao gồm Apache, MySQL và PHP. Ngoài ra, một trình soạn thảo mã chuyên nghiệp như Visual Studio Code, Sublime Text hoặc PHPStorm cũng là điều không thể thiếu.

Một chủ đề WordPress cơ bản nhất cần ít nhất hai tệp tin:style.css和index.php。style.cssKhông chỉ đơn thuần là một bảng định dạng (style sheet), nó còn là “chứng minh thư” của một giao diện (theme). WordPress sẽ nhận diện giao diện của bạn bằng cách đọc thông tin chú thích ở phần đầu của tệp này. Đầu tiên, hãy tìm đến thư mục cài đặt WordPress của bạn trên máy tính.wp-content/themestạo một thư mục mới, ví dụ:my-first-themeSau đó, hãy tạo một thư mục mới bên trong thư mục này.style.cssTệp.

Đọc thêm Làm chủ phát triển chủ đề WordPress: Hướng dẫn hoàn chỉnh từ con số 0 đến thành thạo với kỹ năng thực chiến。

Định nghĩa thông tin chủ đề

在style.cssỞ phần đầu của tệp tin, bạn cần thêm một đoạn ghi chú (comment) nhất định để định nghĩa thông tin meta về chủ đề của tệp tin đó.

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

Trong đó,Theme Name和Text DomainĐây là một trường bắt buộc. Khu vực nhập văn bản dùng để dịch thuật quốc tế, và thường phải trùng với tên thư mục chủ đề (theme folder).

Việc tạo ra tệp mẫu cốt lõi (core template file)

index.phpĐây là mẫu mặc định của chủ đề, đồng thời cũng là mẫu dự phòng quan trọng nhất. Khi WordPress không tìm thấy tệp mẫu cụ thể hơn (ví dụ:single.php, page.phpKhi cần sử dụng nó, bạn chỉ cần áp dụng nó. Bạn có thể đặt vào đó cấu trúc HTML cơ bản nhất cùng một số hàm của WordPress để truy xuất và hiển thị nội dung.

Core template files and loops

Hệ thống chủ đề của WordPress dựa trên các mẫu (templates); các loại trang khác nhau được điều khiển bởi các tệp mẫu riêng biệt. Việc hiểu rõ và tạo ra những tệp mẫu cốt lõi này là yếu tố then chốt trong quá trình phát triển chủ đề.

Khái niệm cốt lõi nhất là “Vòng lặp WordPress” (WordPress Loop). Đây là một cấu trúc mã PHP dùng để lấy các bài viết (Posts) từ cơ sở dữ liệu và hiển thị chúng từng bài một. Hầu hết các tệp mẫu (template files) dùng để hiển thị nội dung đều cần sử dụng đến vòng lặp này.

Đọc thêm Cách tạo một chủ đề WordPress chuyên nghiệp: Hướng dẫn đầy đủ từ con số 0 đến khi ra mắt。

Việc xây dựng mẫu trang chủ (Home Page Template)

index.phpTệp tin cần chứa toàn bộ cấu trúc HTML cơ bản cùng với các vòng lặp (loops). Một ví dụ đơn giản như sau:

<!DOCTYPE html>
<html no numeric noise key 1021>
<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 1018>
    <?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>
        
                <article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
                    <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
                    <div class="entry-content">
                        <?php the_excerpt(); ?>
                    </div>
                </article>
            
            <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
        <?php endif; ?>
    </main>
    <footer>
        <p>©</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Tệp tin này định nghĩa cấu trúc cơ bản của trang web và sử dụng vòng lặp để hiển thị danh sách các bài viết trong khu vực chính. Các hàm được sử dụng trong quá trình này bao gồm…the_title()、the_excerpt()Dùng để hiển thị nội dung bài viết.wp_head()和wp_footer()Đây là những “hook” vô cùng quan trọng, được sử dụng để cho phép WordPress Core, các plugin, và các script khác chèn vào những đoạn mã cần thiết.

Mẫu bài viết và trang

single.phpDùng để hiển thị một bài viết duy nhất.page.phpDùng để hiển thị một trang web duy nhất. Cấu trúc của chúng tương tự nhau, nhưng thường…single.phpNó sẽ bao gồm các yếu tố như phân loại (category), thẻ (tag), v.v.page.phpVậy thì cách diễn đạt sẽ ngắn gọn hơn nữa. Bạn có thể bắt đầu bằng việc sao chép nội dung đó.index.phpBắt đầu tạo chúng, sau đó thay thế nội dung bên trong vòng lặp bằng…the_content()(Nó sẽ hiển thị toàn bộ nội dung văn bản.)

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

Nhập các định dạng (styles) và mã nguồn (scripts)

Các chủ đề hiện đại đòi hỏi phải có giao diện đẹp mắt và các tính năng tương tác tốt. WordPress cung cấp những hàm tiêu chuẩn để thêm các tệp CSS và JavaScript một cách an toàn, thay vì sử dụng chúng trực tiếp trong mã HTML.<link>或<script>Thẻ.

Việc tạo và sử dụng các tệp chứa hàm (function files)

Bạn cần tạo một thứ có tên là…functions.phpĐây là một tệp tin đặc biệt, không phải là tệp mẫu (template file), mà là tệp dùng để “nâng cấp chức năng” (function enhancement file) cho một chủ đề (theme) trong WordPress. Tệp này được sử dụng để thêm các tính năng mới, kích hoạt những chức năng đã được tích hợp sẵn, hoặc thay đổi hành vi mặc định của WordPress. Chúng ta sẽ đăng ký các bảng định dạng (style sheets

Đưa các tài nguyên vào hệ thống một cách an toàn

在functions.phptrong đó, sử dụngwp_enqueue_style()和wp_enqueue_script()Một cách tiếp cận tiêu chuẩn là tạo ra một hàm, sau đó sử dụng nó để thực hiện các thao tác cần thiết.wp_enqueue_scriptsThis action hook is used to invoke it.

Đọc thêm Hướng dẫn tối thượng: Cách phát triển một chủ đề WordPress chuyên nghiệp từ con số 0。

<?php
function my_first_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入自定义CSS文件
    wp_enqueue_style( 'custom-style', get_template_directory_uri() . '/assets/css/custom.css', array(), '1.0' );

// 引入JavaScript文件
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Đoạn mã này đảm bảo rằng các tệp CSS và JS được tải vào đúng thời điểm thích hợp.get_stylesheet_uri()Hàm sẽ trả về chủ đề (theme) của nó.style.cssĐường dẫn tệp.get_template_directory_uri()Trong trường hợp đó, hãy trả về URL của thư mục chủ đề (theme directory).

Template Components and Theme Features

Khi các chủ đề trở nên ngày càng phức tạp hơn, việc tách các đoạn mã lặp đi lặp lại thành các thành phần riêng biệt (modules) là một thực hành rất tốt. WordPress cung cấp các tính năng như “Template Parts” (Các thành phần mẫu) và “Navigation Menus” (Các menu điều hướng) để hỗ trợ điều này.

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

Tạo các thành phần mẫu có thể được sử dụng lại (reusable template components).

Ví dụ, bạn có thể tách phần tiêu đề (header) và phần chân trang (footer) của trang web thành các tệp riêng biệt. Bạn có thể thực hiện điều này bằng cách…header.php和footer.phptệp trong thư mục gốc của WordPress, đặtindex.phpHãy cắt đoạn mã tương ứng từ nguồn và dán nó vào đây. Sau đó, hãy sử dụng các hàm sau tại vị trí ban đầu để gọi chúng:

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

Bạn cũng có thể tạo ra những thành phần (components) có tính chất tổng quát hơn, ví dụ như…content.php或post-item.phpSử dụng bên trong vòng lặp.get_template_part()Việc sử dụng các hàm để thực hiện công việc tải dữ liệu đã giúp nâng cao đáng kể mức độ tái sử dụng của mã nguồn (reusability of code).

Kích hoạt và tùy chỉnh menu điều hướng

Hệ thống menu của WordPress rất mạnh mẽ. Trước tiên, bạn cần phải…functions.phpsử dụngregister_nav_menus()hàm để đăng ký vị trí menu trong chủ đề của mình.

function my_first_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Sau đó, trong tệp mẫu (nhưheader.php）vị trí bạn muốn hiển thị menu trong đó, sử dụngwp_nav_menu()Hãy sử dụng một hàm để xuất ra kết quả đó.

<?php
wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );
?>

Bây giờ, người dùng có thể tạo các menu trong phần “Giao diện” -> “Menu” ở giao diện quản trị WordPress, sau đó gán chúng vào vị trí “Menu Chính” (Primary Menu).

Tóm lại

Thông qua hướng dẫn này, bạn đã hoàn thành toàn bộ quá trình chuyển đổi từ một thư mục trống thành một chủ đề WordPress có các chức năng cơ bản. Bạn đã học được cách tạo ra các tệp tin cần thiết.style.css和index.phpTôi đã hiểu rõ vai trò cốt lõi của vòng lặp (loop) trong WordPress và đã xây dựng được chúng.single.php和page.phpBạn cũng đã nắm được cách thực hiện điều đó thông qua…functions.phpCách thêm các phong cách (styles) và script một cách an toàn, cũng như cách sử dụng các thành phần mẫu (template components) và hệ thống menu điều hướng (navigation menu systems) để tổ chức mã nguồn và nâng cao chức năng của chủ đề (theme). Đây chỉ là bước khởi đầu thôi; sau đó bạn có thể khám phá thêm các tính năng nâng cao như thanh bên (sidebar), khu vực công cụ (toolbars), các loại bài viết tùy chỉnh (custom article types), API cho công cụ tùy chỉnh chủ đề (theme customizers), v.v., để liên tục làm phong phú và hoàn thiện chủ đề của mình.

FAQ 常见问题

Phải bắt đầu từ con số không trong quá trình phát triển chủ đề (theme development) sao?

Không nhất thiết phải như vậy. Đối với người mới bắt đầu, học từ con số không chính là cách tốt nhất để tiếp cận. Tuy nhiên, trong các dự án thực tế, bạn có thể chọn sử dụng các chủ đề trống chính thức (như Underscores), các framework (như Genesis) hoặc các chủ đề dành cho người mới bắt đầu (như _s) làm điểm khởi đầu. Những công cụ này đã được xây dựng sẵn với cấu trúc mã nguồn vững chắc, giúp bạn tập trung hơn vào việc thiết kế và phát triển logic nghiệp vụ.

Liệu file index.php có phải là file bắt buộc phải có không?

Có,index.phpĐây là tệp template bắt buộc phải có trong một theme WordPress. Nó đóng vai trò như “lớp phòng thủ cuối cùng” trong cấu trúc các tệp template; nếu các tệp template cụ thể hơn khác (ví dụ…)archive.php, search.phpNếu mục đó không tồn tại, WordPress sẽ tự động sử dụng giá trị mặc định.index.phpĐiều này nhằm đảm bảo rằng trang web luôn có nội dung được hiển thị, giúp người dùng nhận được thông tin cần thiết một cách liên tục.

Làm thế nào để gỡ lỗi các vấn đề trong quá trình phát triển chủ đề (theme) của tôi?

Trước tiên, hãy đảm bảo trongwp-config.phpChế độ WP_DEBUG đã được bật trong tệp tin này.define( ‘WP_DEBUG’, true );Dòng này được thiết lập thành “true”. Điều này sẽ khiến các lỗi của PHP và các cảnh báo từ WordPress được hiển thị trực tiếp trên trang web, giúp bạn dễ dàng xác định vấn đề. Đồng thời, việc sử dụng công cụ phát triển của trình duyệt (mở bằng phím F12) để kiểm tra lỗi trong CSS và JavaScript cũng là một bước rất quan trọng.

Tôi có thể làm bất cứ điều gì trong tệp functions.php của chủ đề không?

Về mặt lý thuyết, điều đó là khả thi, nhưng thực hành tốt nhất là chỉ thêm những đoạn mã có liên quan trực tiếp đến giao diện và chức năng của chủ đề. Những chức năng phức tạp liên quan đến logic kinh doanh cốt lõi hoặc thao tác dữ liệu nên được phát triển thành các plugin riêng biệt. Lợi ích của cách làm này là khi người dùng thay đổi chủ đề, những chức năng đó vẫn sẽ được giữ nguyên, từ đó nâng cao khả năng bảo trì và tái sử dụng mã nguồn.

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