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 chủ đề WordPress: Xây dựng chủ đề đầu tiên của bạn từ con số 0

4 phút đọc
2026-03-16
2026-06-04
2,787
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 mã, 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, MAMP hoặc Local by Flywheel), một trình soạn thảo mã (chẳng hạn như VS Code hoặc PhpStorm), và một phiên bản WordPress mới nhất. Hãy đảm bảo rằng WordPress của bạn được cập nhật đến phiên bản mới nhất để có thể sử dụng được các tính năng và API mới nhất.

Tiếp theo, bạn cần thực hiện các bước sau trong WordPress:wp-content/themesHãy tạo một thư mục mới trong thư mục đó; tên của thư mục này sẽ là “slug” tương ứng với chủ đề của bạn. Ví dụ:my-first-themeThư mục này sẽ là nơi lưu trữ tất cả các tệp liên quan đến các chủ đề (theme) của bạn. Một chủ đề WordPress cơ bản chỉ bao gồm hai tệp chính:index.php和style.cssTrong đó,style.cssKhông chỉ là một bảng định dạng (stylesheet), mà còn là một “tệp đầu” (header file) chứa các dữ liệu siêu dữ liệu (metadata) liên quan đến chủ đề (theme). Thông tin chú thích trong tệp này rất quan trọng để WordPress nhận diện được chủ đề của bạn.

Create a basic one.style.cssĐối với tệp tin này, phần chú thích ở đầu nên bao gồm các thông tin sau:

Đọc thêm Tạo chủ đề WordPress hoàn hảo: Hướng dẫn phát triển đầy đủ từ cơ bản đến thành thạo。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0.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
*/

Text DomainĐược sử dụng cho mục đích quốc tế hóa; tên tệp này nên phải trùng khớp với tên thư mục chủ đề của bạn. Đồng thời, hãy tạo một tệp có cấu trúc đơn giản nhất có thể.index.phpTệp tin chỉ cần chứa một câu thôi.<?php get_header(); ?>Và một người nữa<h1>Chào thế giới!</h1>Lúc này, trong phần “Giao diện” -> “Chủ đề” của WordPress, bạn nên có thể thấy chủ đề của mình và kích hoạt nó. Mặc dù hiện tại nó vẫn chưa hiển thị bất cứ thứ gì (vì chúng ta vẫn chưa tạo nội dung cho chủ đề đó).header.phpĐiều đó có thể không dễ dàng, nhưng điều này chứng tỏ bạn đã thực sự bắt đầu con đường của mình một cách thành cô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

Hiểu các tệp mẫu cốt lõi và cấp bậc mẫu

WordPress sử dụng một hệ thống thông minh được gọi là “hệ thống cấp độ template” (template hierarchy) để quyết định file template nào sẽ được sử dụng để hiển thị nội dung cho một yêu cầu trang cụ thể. Việc hiểu rõ cấu trú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. Hệ thống sẽ bắt đầu tìm kiếm từ file template cụ thể nhất; nếu file đó không tồn tại, nó sẽ tự động chuyển sang sử dụng file template có tính chất chung hơn (phổ quát hơn).

Các tệp mẫu cơ bản nhất bao gồm:
* index.phpĐây là mẫu dự phòng cuối cùng; tất cả các yêu cầu sẽ được xử lý bằng mẫu này nếu không tìm thấy mẫu cụ thể hơn.
* header.phpChứa tài liệu.<head>Một phần nội dung và khu vực tiêu đề của trang web.get_header()hàm để nhập.
* footer.phpBao gồm khu vực chân trang của trang web. Thông qua…get_footer()hàm để nhập.
* sidebar.phpBao gồm các thành phần của thanh bên cạnh. Thực hiện thông qua…get_sidebar()hàm để nhập.
* functions.phpĐây không phải là một tệp mẫu (template file), mà là “thư viện chức năng” (function library) của chủ đề (theme) bạn, được sử dụng để thêm các chức năng mới, đăng ký các mục trong menu, công cụ hỗ trợ (tools), v.v.

Đối với các loại trang khác nhau, có những mẫu thiết kế (templates) cụ thể hơn:
* 单篇文章：查找顺序是single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.php。
* 静态页面：查找顺序是custom-template.php(Template Customization) -> page-{slug}.php -> page-{id}.php -> page.php -> singular.php -> index.php。
* 文章列表（博客首页、分类页等）：查找顺序是home.php(Dùng cho trang danh sách bài viết trên blog) -> front-page.php(Dùng để đặt trang tĩnh làm trang chủ khi sử dụng chức năng “Trang chủ”) -> index.php。

Xây dựng các mẫu cho phần đầu trang (header) và phần chân trang (footer)

Trước tiên, hãy tạo ra nó.header.phpNó phải bắt đầu bằng…<!DOCTYPE html>Bắt đầu, và bao gồm các lời gọi hàm quan trọng của WordPress, chẳng hạn như…wp_head()。

Đọc thêm Tùy chỉnh chủ đề WordPress cao cấp: Hướng dẫn toàn diện từ thiết kế, phát triển đến tối ưu hóa。

<!DOCTYPE html>
<html no numeric noise key 1007>
<head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <?php wp_head(); ?>
</head>
<body no numeric noise key 1004>
    <header>
        <h1><a href="/vi/</?php echo esc_url(home_url('/')); ?>"><?php bloginfo('name'); ?></a></h1>
        <p><?php bloginfo('description'); ?></p>
        <nav>
            'primary')); ?&gt;
        </nav>
    </header>

Tương tự như vậy, hãy thực hiện việc tạo ra (create).footer.phpVà đảm bảo rằng việc gọi (call) được thực hiện đúng cách.wp_footer()Hàm.

    <footer>
        <p>©  . All rights reserved.</p>
    </footer>
    <?php wp_footer(); ?>
</body>
</html>

Bây giờ, bạn có thể cập nhật nội dung của mình.index.phpHãy sử dụng các thành phần mẫu này.

<?php get_header(); ?>

<main>
    <h1>Chào mọi người! Đây là thông điệp “Hello World” được gửi từ phần chính (Main) của chương trình.</h1>
    &lt;?php
    if (have_posts()) :
        while (have_posts()) : the_post();
            the_title(&#039;<h2>', '</h2>');
            the_content();
        endwhile;
    else :
        echo '<p>No content found.</p>';
    endif;
    ?&gt;
</main>

Tăng cường chức năng chủ đề qua functions.php

functions.phpTệp tin chính là “bộ não” của chủ đề (theme) của bạn. Bạn có thể thêm các tính năng mới vào đây, đăng ký các thành phần cốt lõi của WordPress (như menu và các khu vực hiển thị công cụ hỗ trợ), đồng thời sắp xếp chúng vào các tệp định dạng kiểu (style sheets) và tệp lệnh (script files).

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

Thêm hỗ trợ chủ đề và đăng ký menu điều hướng

Trước tiên, hãy kích hoạt một số tính năng cơ bản của chủ đề (theme) nhé. Sử dụng…add_theme_support()Hàm này được sử dụng để tuyên bố các tính năng mà chủ đề hỗ trợ.

<?php
// functions.php
function my_first_theme_setup() {
    // 让WordPress管理文档标题
    add_theme_support('title-tag');
    // 启用文章和页面的特色图像功能
    add_theme_support('post-thumbnails');
    // 为文章中的图像添加响应式图片支持
    add_theme_support('responsive-embeds');
    // 添加对HTML5标记的支持
    add_theme_support('html5', array('comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script'));
}
add_action('after_setup_theme', 'my_first_theme_setup');

Tiếp theo, hãy đăng ký một vị trí cho mục menu trong hệ thống điều hướng. Điều này cho phép người dùng cấu hình menu trong mục “Giao diện” -> “Menu” ở phần quản trị nội dung, và sau đó sử dụng menu đó trong các mẫu thiết kế (templates).wp_nav_menu()hàm để gọi nó.

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

Đưa vào bảng định dạng (style sheet) và script

Cách đúng để tải các phong cách (styles) và script (chương trình nhỏ được sử dụng để thêm chức năng bổ sung cho trang web) là…wp_enqueue_style()和wp_enqueue_script()hàm, gắn chúng vàowp_enqueue_scriptshook.

Đọc thêm Phân Tích Toàn Diện Phát Triển Giao Diện WordPress: Hướng Dẫn Thực Hành Từ Cơ Bản Đến Nâng Cao。

function my_first_theme_scripts() {
    // 排入主样式表
    wp_enqueue_style('my-first-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version'));
    // 排入自定义JavaScript文件
    wp_enqueue_script('my-first-theme-script', get_template_directory_uri() . '/js/main.js', array(), wp_get_theme()->get('Version'), true);
}
add_action('wp_enqueue_scripts', 'my_first_theme_scripts');

Tạo vòng lặp và mẫu nội dung

“Loop” là cấu trúc mã PHP trong WordPress dùng để truy xuất và hiển thị các bài viết từ cơ sở dữ liệu. Nó được coi là “trái tim” của hầu hết các tệp mẫu (template files) trong WordPress.

Hiểu cấu trúc của vòng lặp chính (main loop)

Trên đóindex.phpTrong ví dụ đó, chúng ta đã thấy một vòng lặp cơ bản. Hãy cùng phân tích nó chi tiết:

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 
<!-- 对于循环中的每一篇文章，我们在这里输出内容 -->
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1012>
            <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <?php the_post_thumbnail(); ?>
            <div class="entry-content">
                <?php the_excerpt(); ?>
            </div>
        </article>
    <?php endwhile; ?>
    <!-- 分页链接 -->
    
    <!-- 如果没有文章 -->
    <p><?php _e('Sorry, no posts matched your criteria.', 'my-first-theme'); ?></p>
<?php endif; ?>

Xây dựng mẫu bài viết đơn lẻ

Bây giờ, hãy cùng tạo một mẫu dành riêng để hiển thị một bài viết duy nhất.single.phpNó chi tiết hơn nhiều so với việc lặp lại các mục trên trang danh sách.

<?php get_header(); ?>

<main id="primary">
    <?php
    while (have_posts()) : the_post();
    ?>
        <article id="post-<?php the_ID(); ?>" no numeric noise key 1011>
            <header>
                <h1><?php the_title(); ?></h1>
                <div class="entry-meta">
                    <?php
                    printf(
                        __('Posted on %s by %s', 'my-first-theme'),
                        get_the_date(),
                        get_the_author_posts_link()
                    );
                    ?>
                </div>
                <?php the_post_thumbnail('large'); ?>
            </header>
            <div class="entry-content">
                &lt;?php
                // 分页，适用于使用 <!--nextpage--> 标签的长文章
                wp_link_pages(array(
                    'before' =&gt; '<div class="page-links">' . __('Pages:', 'my-first-theme'),
                    'after'  =&gt; '</div>',
                ));
                ?&gt;
            </div>
            <footer>
                &lt;?php the_tags(&#039;<span class="tags-links">' . __('Tagged: ', 'my-first-theme'), ', ', '</span>'); ?&gt;
            </footer>
        </article>
        
</main>

Tóm lại

Thông qua hướng dẫn này, bạn đã hoàn thành hành trình xây dựng một chủ đề WordPress cơ bản từ con số không. Chúng ta bắt đầu với việc thiết lập môi trường phát triển và tạo các tệp cơ bản, sau đó dần đi sâu vào hệ thống cấu trúc các template trong WordPress – đây chính là nền tảng để tạo ra những chủ đề linh hoạt. Bạn đã học được cách xây dựng những thành phần có thể được sử dụng lại (reusable components) trong các chủ đề khác.header.php和footer.phpTemplate components, and through powerful…functions.phpTệp tin đã bổ sung các tính năng quan trọng cho chủ đề của bạn, chẳng hạn như menu điều hướng và việc tải các phong cách (styles). Cuối cùng, chúng ta đã tìm hiểu cơ chế “lặp lại” (loop) trong WordPress và tạo ra các mẫu (templates) để hiển thị danh sách bài viết cũng như nội dung của từng bài viết riêng lẻ.

Đây chỉ là một điểm khởi đầu thôi. Tiếp theo, bạn có thể khám phá cách tạo thêm nhiều mẫu cụ thể hơn (ví dụ:…)page.php, archive.phpTrong khu vực đăng ký các tiện ích nhỏ (small tools), hãy thêm các loại bài viết và hệ thống phân loại tùy chỉnh, đồng thời triển khai thiết kế thích ứng (responsive design) ở cấp độ nâng cao cùng các tương tác bằng JavaScript. Hãy nhớ rằng, việc tham khảo tài liệu phát triển chính thức của nhà phát triển và liên tục thực hành là con đường tốt nhất để nâng cao kỹ năng của bạn.

FAQ 常见问题

Sau khi chủ đề của tôi được kích hoạt, trang web hiển thị một màn hình trắng (không có gì cả). Tôi phải làm gì?

Điều này thường xảy ra do lỗi nghiêm trọng trong PHP. Hãy kiểm tra mã nguồn của bạn trước tiên.functions.phpLiệu trong tệp tin có lỗi ngữ pháp không, chẳng hạn như thiếu dấu chấm phẩy hoặc dấu ngoặc? Hãy mở trang cài đặt của WordPress để kiểm tra.WP_DEBUGChế độ này có thể giúp bạn xem thông tin lỗi chi tiết.wp-config.phptệp, đặt giá trị của hằng sốdefine('WP_DEBUG', false);Đổi thànhdefine('WP_DEBUG', true);。

Làm thế nào để thêm chức năng Logo tùy chỉnh cho chủ đề (theme) của tôi?

Trongfunctions.phpphầnadd_theme_supportMột phần nội dung được bổ sung thêm một dòng:add_theme_support('custom-logo');Bạn cũng có thể truyền một tham số dạng mảng để xác định kích thước của Logo cũng như tính linh hoạt về chiều cao của nó. Sau đó, người dùng có thể tải Logo lên thông qua mục “Trang chủ” -> “Tùy chỉnh” -> “Thông tin trang web”, và sử dụng Logo đó trong các mẫu thiết kế.the_custom_logo();hàm để gọi nó.

Tại sao menu điều hướng mà tôi đã đăng ký không hiển thị trong phần quản trị (backend)?

Vui lòng kiểm tra các điểm sau: Thứ nhất, hãy đảm bảo rằng mã đăng ký của bạn là hợp lệ và chưa từng được sử dụng trước đó.functions.phpVà nó đã được gắn (mount) đúng cách vào hệ thống.initHook hoặcafter_setup_themeTrên chiếc móc đó. Thứ hai, hãy đảm bảo rằng bạn đã định nghĩa rõ các thành phần cần thiết.theme_location(ví dụ'primary'Trong quá trình gọi (during the calling process)…wp_nav_menu()Thời điểm phải hoàn toàn trùng khớp với yêu cầu. Thứ ba, sau khi tạo menu, bạn cần phải gán menu đó cho vị trí mà bạn đã đăng ký bằng cách truy cập vào mục “Ngoại thất” -> “Menu” -> “Quản lý vị trí” ở phía sau hệ thống.

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

Đầu tiên, trongfunctions.phpsử dụngregister_sidebar()Hàm này dùng để đăng ký một công cụ nhỏ (widget) vào trang web. Bạn cần cung cấp một mảng dữ liệu chứa các thông tin như ID, tên, mô tả, v.v. của công cụ đó. Sau đó, hàm sẽ thêm công cụ này vào tệp mẫu (template file) nơi bạn muốn hiển thị thanh bên cạnh (sidebar).sidebar.php), hãy sử dụngdynamic_sidebar()Hãy sử dụng hàm đó và truyền vào ID của tiện ích (widget) để gọi nó. Cuối cùng,index.php或single.phpTrong các mẫu như vậy, hãy sử dụng nó.<?php get_sidebar(); ?>Thêm mẫu bảng điều khiển bên cạnh (sidebar template).

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