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

Học phát triển chủ đề WordPress từ đầu: Hướng dẫn cốt lõi để xây dựng website cá nhân hóa

4 phút đọc
2026-03-13
2026-06-05
2,066
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 khái niệm cốt lõi trong phát triển theme WordPress

Trước khi đi sâu vào mã nguồn, việc hiểu rõ các thành phần cơ bản cấu thành một chủ đề (theme) của WordPress là điều vô cùng quan trọng. Một chủ đề không chỉ đơn thuần là tập hợp các tệp PHP và CSS; đó là một ứng dụng được xây dựng theo một cấu trúc nhất định và tương tác chặt chẽ với phần cốt lõi (core) của WordPress. Trọng tâm của một chủ đề chính là hệ thống các bộ mẫu (template hierarchy), hệ thống này quy định cách WordPress lựa chọn và hiển thị các tệp mẫu phù hợp dựa trên loại trang đang được truy cập (như trang chủ, trang bài viết, trang cá nhân, danh mục bài viết, v.v.).

Các chủ đề cơ bản nhất phải bao gồm 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 ghi chú ở đầu tệp chứa các thông tin meta như tên chủ đề, tác giả, mô tả, phiên bản, v.v.index.phpĐó là tệp mẫu mặc định; khi các tệp mẫu cụ thể hơn không tồn tại, WordPress sẽ sử dụng tệp này thay thế.

Nội dung của chủ đề được tổ chức thông qua một loạt các tệp mẫu tiêu chuẩn hóa, ví dụ như…single.phpDùng để hiển thị một bài viết duy nhất.page.phpDùng để hiển thị các trang web độc lập.archive.phpDùng để hiển thị danh sách các bài viết đã được lưu trữ (archive list). Chìa khóa trong quá trình phát triển nằm ở việc hiểu rõ và sử dụng các hàm tích hợp sẵn mà WordPress cung cấp, chẳng hạn như…the_title()、the_content()、wp_head()和wp_footer()Những hàm này trích xuất dữ liệu từ cơ sở dữ liệu và hiển thị chúng một cách an toàn trên trang web, đóng vai trò như cây cầu nối giữa giao diện trang web (thiết kế) và nội dung được trình bày trên trang.

Đọc thêm Làm thế nào để chọn và tùy chỉnh một chủ đề WordPress phù hợp với bạn?。

Xây dựng chủ đề đầu tiên của bạn: Cấu trúc tệp cơ bản

Hãy cùng bắt tay tạo một theme tối giản có tên “MyFirstTheme” để làm quen với quy trình phát triển. Đầu tiên, hãy vào thư mục cài đặt của WordPress…wp-content/themes/Hãy tạo một thư mục mới và đặt tên cho nó là…myfirsttheme。

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

Tạo tệp tin bảng định kiểu (style sheet file)

Trước tiên, hãy tạo tệp đầu tiên chứa thông tin về chủ đề (theme information header file).style.cssTệp này định nghĩa các metadata của chủ đề (metadata of the theme).

/*
Theme Name: MyFirstTheme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个用于学习WordPress主题开发的简洁主题。
Version: 1.0
License: GPL v2 or later
Text Domain: myfirsttheme
*/

Text DomainĐược sử dụng cho mục đích quốc tế hóa, nhằm chuẩn bị cho các chức năng dịch thuật trong tương lai. Sau bước này, bạn có thể bắt đầu viết mã định dạng CSS cho trang web của mình.

Tạo tệp mẫu cốt lõi (Core Template File)

Tiếp theo, hãy tạo ra những thành phần cơ bản (basic components).index.phpĐây là tệp tin chứa thông tin về toàn bộ chủ đề được thảo luận. Đây cũng là điểm khởi đầu để truy cập vào nội dung liên quan đến chủ đề đó.

<!DOCTYPE html>
<html no numeric noise key 1013>
<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 1010>
    <header>
        <h1><a href="/vi/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
    </header>

<main>
        <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
            <article>
                <h2><?php the_title(); ?></h2>
                <div><?php the_content(); ?></div>
            </article>
        <?php endwhile; endif; ?>
    </main>

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

Đoạn mã này xây dựng cấu trúc trang HTML5 hoàn chỉnh.wp_head()和wp_footer()Các “hook” (khớp nối) cho phép các plugin và theme chèn mã lệnh (chẳng hạn CSS, JS) vào phần đầu và cuối trang web.body_class()Hàm này trả về một loạt tên lớp CSS, giúp việc thiết kế kiểu dáng dựa trên các điều kiện trở nên dễ dàng hơn.the_post()Hàm đó thiết lập biến toàn cục (global variable) trong vòng lặp.$postBiến, hãy sử dụng nó.the_title()和the_content()Có thể xuất dữ liệu của bài viết hiện tại một cách chính xác.

Đọc thêm Xây dựng trang web chuyên nghiệp: Hướng dẫn tối thượng để lựa chọn và tùy chỉnh chủ đề WordPress。

Nhập tệp chứa các chức năng (Import the function file)

Mặc dù một thứ chỉ có…style.css和index.phpChủ đề đó đã có thể hoạt động được, nhưng một chủ đề hoàn chỉnh thường bao gồm nhiều thành phần khác nhau…functions.phpĐây là một tệp tin không phải là tệp mẫu (template file), mà là một “plugin chức năng” (function plugin) dành cho chủ đề (theme), được sử dụng để gắn các hàm (functions) vào các điểm kết nối (action hooks) và bộ lọc (filter hooks) của WordPress.

Tạo rafunctions.phpĐây là một tệp tin dùng để thêm các tính năng hỗ trợ chủ đề (theme support), cũng như để sắp xếp thứ tự việc đưa các bảng định dạng (style sheets) và các tập lệnh (scripts) vào hệ thống.

<?php
// 添加主题支持功能
function myfirsttheme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和评论的RSS feed链接
    add_theme_support('automatic-feed-links');
    // 启用文章缩略图（特色图像）
    add_theme_support('post-thumbnails');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('search-form', 'comment-form', 'comment-list', 'gallery', 'caption'));
    // 注册一个主导航菜单
    register_nav_menus(array('primary' => __('主导航菜单', 'myfirsttheme')));
}
add_action('after_setup_theme', 'myfirsttheme_setup');

// 排队引入样式表
function myfirsttheme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style('myfirsttheme-style', get_stylesheet_uri());
    // 可以引入Google Fonts或其他CSS
    // wp_enqueue_style('myfirsttheme-google-fonts', 'https://fonts.googleapis.com/css?family=...');
}
add_action('wp_enqueue_scripts', 'myfirsttheme_scripts');

Thông quaadd_theme_support()Chúng tôi đã kích hoạt những tính năng phổ biến được sử dụng trong các giao diện WordPress hiện đại.wp_enqueue_style()Đây là cách chuẩn để đưa các bảng định dạng (style sheets) vào trang web, giúp quản lý các thành phần phụ thuộc vào nhau và tránh tình trạng tải lại các tệp định dạng không cần thiết.

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

Phát triển nâng cao: Các thành phần mẫu và kiểm soát vòng lặp

Khi các chức năng cơ bản của chủ đề đã được hoàn thiện, để nâng cao khả năng bảo trì và tái sử dụng mã nguồn, chúng ta cần học cách sử dụng các thành phần mẫu (template components) cũng như các cơ chế kiểm soát vòng lặp (loop control) chính xác hơn.

Sử dụng các thành phần mẫu (template components) để tách mã nguồn thành các phần nhỏ hơn.

将index.phpViệc tách các phần chung như tiêu đề trang (header), chân trang (footer), và thanh bên (sidebar) thành các tệp template riêng biệt là một thực tiễn tiêu chuẩn trong lập trình web.header.php、footer.php和sidebar.php。

将index.php中<body>Di chuyển toàn bộ đoạn mã nằm trước thẻ đến…header.php。</body>和</html>Mọi đoạn mã nằm trước thẻ (bao gồm cả nội dung phần chân trang và các đoạn mã khác)…wp_footer()) Di chuyển đếnfooter.phpSau đó,index.phpsử dụngget_header()和get_footer()Chúng ta sử dụng các hàm để đưa chúng vào (tức là để sử dụng chúng trong chương trình).

Đọc thêm Từ phát triển đến triển khai: Làm thế nào để xây dựng và tối ưu hóa một chủ đề WordPress chuyên nghiệp。

Đã được sửa đổi.index.phpNội dung chính như sau:

<?php get_header(); ?>
<main>
    <?php if (have_posts()) : while (have_posts()) : the_post(); ?>
        <article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>
    <?php endwhile; else : ?>
        <p><?php _e('抱歉，没有找到任何内容。', 'myfirsttheme'); ?></p>
    <?php endif; ?>
</main>

Tạo mẫu trang tùy chỉnh

WordPress cho phép bạn tạo các mẫu tùy chỉnh cho các trang cụ thể. Ví dụ, bạn có thể tạo một mẫu trang có kích thước toàn màn hình. Hãy tạo một tệp PHP mới, ví dụ như…template-fullwidth.phpĐể thêm ghi chú về tên mẫu ở đầu tệp, hãy thực hiện theo các bước sau:

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
/**
 * Template Name: 全宽页面模板
 * Description: 一个没有侧边栏的全宽页面模板
 */
get_header(); ?>
<main class="full-width">
    <?php while (have_posts()) : the_post(); ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1004>
            <h1><?php the_title(); ?></h1>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    <?php endwhile; ?>
</main>
<?php get_footer(); ?>

Khi bạn tạo hoặc chỉnh sửa một trang, trong hộp thoại “Thuộc tính trang” (Page Properties), bạn có thể chọn “Mẫu trang toàn chiều” (Full-width Page Template) từ danh sách thả xuống “Mẫu” (Template). Điều này cho thấy tính linh hoạt của hệ thống mẫu.

Kiểm soát vòng lặp chính và truy vấn tùy chỉnh

在archive.phpTrong trang phân loại hoặc các trang tương tự, bạn có thể cần phải thay đổi cách thức hoạt động của vòng lặp chính (main loop). Hãy sử dụng các công cụ hoặc lệnh phù hợp để thực hiện điều này.WP_QueryCác lớp có thể tạo ra các truy vấn tùy chỉnh.

// 示例：在模板中查询特定分类下的 sticky 文章
 'news',
    'post__in' =&gt; get_option('sticky_posts'),
    'posts_per_page' =&gt; 3
));
if ($sticky_query-&gt;have_posts()) :
    while ($sticky_query-&gt;have_posts()) : $sticky_query-&gt;the_post();
        // 输出文章内容
        the_title('<h3>', '</h3>');
        the_excerpt();
    endwhile;
    wp_reset_postdata(); // 重置全局$post数据
endif;
?&gt;

Hãy chắc chắn sử dụng nó sau khi vòng lặp truy vấn tùy chỉnh kết thúc.wp_reset_postdata()Điều này nhằm đảm bảo rằng các biến toàn cục được khôi phục về trạng thái ban đầu trong vòng lặp chính, giúp tránh các lỗi có thể xảy ra trong các chức năng tiếp theo.

Tối ưu hóa chủ đề và các thực tiễn tốt nhất

Sau khi quá trình phát triển hoàn tất, việc đảm bảo độ ổn định (robustness), tính bảo mật (security) và hiệu suất (performance) của ứng dụng là bước cuối cùng trước khi nó được phát hành.

Đảm bảo an ninh và tính quốc tế hóa (Ensuring security and internationalization)

Mọi nội dung được hiển thị một cách động (dynamic content) đều cần được tiến hành xử lý để tránh các lỗi liên quan đến ký tự đặc biệt. Bạn có thể sử dụng các hàm xử lý ký tự được cung cấp bởi WordPress để thực hiện điều này. Ví dụ:esc_html()、esc_attr()、esc_url()Đối với việc dịch, hãy sử dụng…__()Để thực hiện việc dịch chuỗi, hãy sử dụng công cụ hoặc phương thức phù hợp. Ví dụ, trong Python, bạn có thể sử dụng hàm `str.translate()` để dịch chuỗi._e()Trước đây chúng ta đã…functions.phpTrong đó, các trường văn bản (text fields) đã được thiết lập sẵn.myfirsttheme。

// 正确示例
echo '<a href="/vi/' . esc_url($user_profile_link) . '/">'`. esc_html($user_name)`.'</a>';
// 国际化示例
submit_button(__('保存更改', 'myfirsttheme'));

Thêm khu vực công cụ nhỏ (Add a small tools area)

Khu vực công cụ nhỏ (Sidebar) là một tính năng cổ điển của WordPress.functions.phpBạn có thể đăng ký một khu vực công cụ bên cạnh (sidebar) trên trang web của mình.

function myfirsttheme_widgets_init() {
    register_sidebar(array(
        'name' =&gt; __('主侧边栏', 'myfirsttheme'),
        'id' =&gt; 'sidebar-1',
        'description' =&gt; __('在此添加小工具。', 'myfirsttheme'),
        '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', 'myfirsttheme_widgets_init');

Sau đó, trongsidebar.phptrong đó, sử dụngdynamic_sidebar()Hãy sử dụng một hàm để gọi nó.

<?php if (is_active_sidebar('sidebar-1')) : ?>
    <aside>
        <?php dynamic_sidebar('sidebar-1'); ?>
    </aside>
<?php endif; ?>

Những yếu tố cần xem xét khi tối ưu hóa hiệu suất

Việc tối ưu hóa tốc độ tải trang (tức là tốc độ hiển thị nội dung trang web) là rất quan trọng. Bạn cần đảm bảo rằng các tệp CSS và JavaScript được kết hợp (merge) và nén (compress) một cách chính xác – thường được thực hiện trong giai đoạn phát triển bằng các công cụ xây dựng như Webpack hoặc Gulp. Hãy sử dụng những công cụ này để giúp giảadd_image_size()Hãy thêm kích thước hình ảnh phù hợp để tránh việc tải những hình ảnh gốc có kích thước quá lớn vào giao diện người dùng. Đối với các script (chương trình nhỏ được thực thi trên trang web), hãy sử dụng chúng chỉ khi thực sự cần thiết.wp_dequeue_script()Hãy loại bỏ nó và đảm bảo rằng đoạn mã được tải vào phần chân trang (footer) của trang web (bằng cách đặt nó ở đó).wp_enqueue_script()Đặt tham số cuối cùng thành…true）。

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình có hệ thống, bắt đầu từ việc hiểu rõ các khái niệm cốt lõi (như cấu trúc các template, các hàm hook), tiếp theo là xây dựng cấu trúc tệp tin cơ bản, sau đó sử dụng các thành phần template và các truy vấn tùy chỉnh để thiết kế các mô-đun một cách có tổ chức, và cuối cùng là tăng cường tính bảo mật và nâng cao hiệu suất của chủ đề đó. Bằng cách tuân theo các tiêu chuẩn lập trình chính thức của WordPress cùng các thực hành tốt nhất, các nhà phát triển có thể tạo ra những chủ đề vừa đẹp mắt, vừa hiệu quả, vừa an toàn và dễ bảo trì. Yếu tố then chốt là sự thực hành liên tục, bắt đầu từ những điều đơn giản…index.php和style.cssBắt đầu từ những thứ đơn giản, sau đó từ từ thử nghiệm với các tệp mẫu (template files) phức tạp hơn.functions.phpVới các tính năng có sẵn, cuối cùng bạn sẽ có thể tạo ra một trang web cá nhân hóa hoàn toàn phù hợp với nhu cầu của mình.

FAQ 常见问题

Có thể học cách phát triển các giao diện (theme) cho WordPress ngay cả khi không có kiến thức lập trình nào trước đó không?

Được chứ, nhưng bạn sẽ cần dành thời gian để học các kiến thức cơ bản. Tôi khuyên bạn nên bắt đầu bằng việc nắm vững HTML và CSS – đây là những công cụ cơ bản để thiết kế giao diện trang web. Sau đó, hãy từ từ học ngữ pháp PHP, vì phần lõi của WordPress được viết bằng ngôn ngữ này. Cuối cùng, hãy kết hợp các hàm và hook đặc trưng của WordPress để thực hiện việc phát triển trang web. Việc bắt đầu bằng cách sửa đổi các chủ đề (theme) có sẵn là một cách tuyệt vời để học.

Sự khác biệt giữa tệp `functions.php` của chủ đề (theme) và các plugin là gì?

functions.phpĐây là một phần quan trọng của giao diện người dùng (UI); chức năng của nó có mối liên hệ mật thiết với vẻ ngoài và cách thức hiển thị của giao diện đó. Khi người dùng thay đổi giao diện (theme),functions.phpCác tính năng có trong giao diện chính của trang web có thể bị vô hiệu hóa khi bạn thay đổi chủ đề (theme). Ngược lại, các tính năng được cung cấp bởi các plugin thường hoạt động độc lập với chủ đề và được thiết kế để bổ sung những chức năng cụ thể cho trang web (chẳng hạn như biểu mẫu liên hệ, tối ưu hóa SEO), vì vậy chúng vẫn sẽ hoạt động ngay cả sau khi bạn thay đổi chủ đề. Nếu một tính nào đó không liên quan đến

Tại sao mẫu trang tùy chỉnh của tôi không hiển thị trong danh sách thả xuống?

Vui lòng kiểm tra xem tệp mẫu tùy chỉnh của bạn có nằm trong thư mục gốc của chủ đề (theme root directory) hay không, và đảm bảo rằng định dạng của khối ghi chú chứa tên mẫu ở đầu tệp phù hợp. Khối ghi chú đó phải là một ghi chú PHP, và dòng “Template Name:” phải được viết chính xác. Ngoài ra, hãy đảm bảo rằng tệp có đầy đủ nội dung cần thiết..phpSử dụng phần mở rộng (suffix), và đã làm mới bộ đệm (cache) thông qua giao diện quản trị của WordPress.

Làm thế nào để chủ đề (Theme) của tôi hỗ trợ các chủ đề con (Child Theme)?

Để cho chủ đề của bạn có thể được tùy chỉnh một cách an toàn thông qua các tiểu chủ đề (subtopics), bạn cần tuân theo một số quy ước trong quá trình phát triển: hãy sử dụng…get_template_directory_uri()Để trích dẫn các nguồn từ chủ đề cha (parent topic), chúng ta sẽ sử dụng cách thức nhất định; trong khi đó, khi ở trong chủ đề con (child topic), chúng ta sẽ áp dụng những quy tắc khác.get_stylesheet_directory_uri()Hãy bao bọc các hàm có thể sao chép vào một lớp (class) hoặc một đối tượng (object) để tạo sự thuận tiện trong việc sử dụng và quản lý chúng.if (!function_exists(‘…’))Trong các câu lệnh điều kiện (conditional statements), tài liệu cần giải thích rõ ràng rằng chủ đề chính hỗ trợ các chủ đề con (sub-topics), đồng thời cung cấp thông tin cơ bản về các chủ đề con đó.style.cssVí dụ.

Khi phát triển theme, có những quy tắc mã hóa bắt buộc nào phải tuân thủ?

Được khuyến nghị mạnh mẽ nên tuân theo.Tiêu chuẩn mã hóa PHP chính thức của WordPress和Tiêu chuẩn mã hóa CSSĐiều này bao gồm việc sử dụng dấu nháy đơn để định nghĩa chuỗi (trừ khi cần phân tích các biến), sử dụng khoảng trắng để thụt lề, phong cách viết dòng cho các cặp dấu ngoặc đơn và ngoặc vuông, cũng như việc đặt tên hàm và biến bằng chữ thường kết hợp với dấu gạch dưới. Tuân theo những quy ước này sẽ giúp mã nguồn của bạn dễ dàng hơn để các nhà phát triển khác hiểu và chấp nhận, đặc biệt là khi bạn cân nhắc việc gửi nó lên các thư mục chính thứ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ẻ: