Học cách phát triển các chủ đề (theme) cho WordPress từng bước một: Xây dựng chủ đề tùy chỉnh từ con số không

Đối với nhiều người dùng WordPress muốn tùy chỉnh sâu rộng trang web của mình, những hạn chế của các chủ đề (theme) có sẵn ngày càng trở nên rõ ràng. Việc nắm vững kỹ năng phát triển chủ đề WordPress giúp bạn xây dựng trang web theo đúng ý tưởng thiết kế và yêu cầu chức năng của bản thân, đạt được sự tự chủ hoàn toàn từ giao diện đến trải nghiệm người dùng. Đây không chỉ là một kỹ năng vô cùng quý giá mà còn là con đường tuyệt vời để hiểu rõ cách thức hoạt động cơ bản của WordPress. Bài viết này sẽ hướng dẫn bạn từ cấu trúc tệp tin cơ bản nhất, từng bước xây dựng một chủ đề tùy chỉnh có đầy đủ chức năng.

Môi trường phát triển và cấu trúc tệp tin cơ bản

Trước khi bắt đầu viết mã, việc thiết lập một môi trường phát triển hiệu quả và được cô lập là điều vô cùng quan trọng. Chúng tôi khuyến nghị sử dụng các phần mềm môi trường máy chủ cục bộ như Local by Flywheel, XAMPP hoặc MAMP. Những công cụ này cho phép bạn nhanh chóng thiết lập một môi trường chạy WordPress trên máy tính của mình, bao gồm PHP, MySQL và Apache/Nginx, mà không ảnh hưởng đến trang web trên mạng.

Một giao diện WordPress cơ bản nhất chỉ yêu cầu hai tệp tin để được hệ thống nhận diện. Chúng nằm trong thư mục cài đặt WordPress của bạn. <code>wp-content/themes</code> Trong thư mục đó, hãy tạo một thư mục mới, ví dụ như đặt tên nó là… <code>my-custom-theme</code>Trong thư mục này, bạn cần tạo ra hai tệp tin cốt lõi sau:

Đọc thêm Cấu trúc cốt lõi và nguyên lý hoạt động của WordPress。

Tệp đầu tiên là tệp biểu mẫu (style sheet). style.cssTệp tin này không chỉ được sử dụng để lưu trữ các kiểu dáng CSS (CSS styles), mà phần chú thích ở phía trên còn đóng vai trò như “chứng minh thư” của chủ đề (theme), chứa đựng các thông tin meta như tên chủ đề, tác giả, mô tả, v.v.

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%

Truy cập trang

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个为学习而创建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Tệp tin bắt buộc thứ hai là index.phpNgay cả khi tệp tin này ban đầu trống rỗng, WordPress vẫn có thể nhận diện được chủ đề của bạn. Tuy nhiên, thường thì chúng ta sẽ đặt vào đó những đoạn mã PHP cơ bản và cấu trúc HTML để hiển thị nội dung trang web. Khi đó, chủ đề của bạn sẽ xuất hiện trong danh sách “Giao diện” -> “Chủ đề” trên giao diện quản trị WordPress và có thể được kích hoạt. Một chủ đề thực sự hữu ích cần nhiều tệp mẫu hơn nữa để tạo nên cấu trúc trang web hoàn chỉnh.

Các tệp mẫu cốt lõi và mối quan hệ phân cấp của chúng

WordPress sử dụng một hệ thống cấp độ template (mẫu) để quyết định file template nào sẽ được sử dụng để hiển thị nội dung cho mỗi yêu cầu trang cụ thể. Việc hiểu rõ cấu trúc này là rất quan trọng trong quá trình phát triển theme (giao diện website). Hệ thống sẽ bắt đầu tìm kiếm từ file template cụ thể nhất; nếu không tìm thấy file đó, nó sẽ lùi về file có tính chất chung hơn, và cuối cùng sẽ lùi về file template mặc định của WordPress. index.php。

Các phần khác nhau của trang web thường được xử lý bởi các tệp mẫu (template files) khác nhau. Phần đầu (header) và phần cuối (footer) chung cho tất cả các trang trên trang web có thể được lưu trữ riêng biệt. header.php 和 footer.php Trong đó, sau đó sử dụng nội dung đó trong các mẫu khác. get_header() 和 get_footer() Giới thiệu hàm. Thanh bên có thể đặt ở sidebar.php Trong đó, sử dụng… get_sidebar() Đưa vào (introduce).

Đối với nội dung bài viết, tệp mẫu quan trọng nhất là… single.phpNó được sử dụng để hiển thị từng bài viết trên blog. Đối với các trang tĩnh, thì sẽ sử dụng phương pháp khác. page.phpCác mẫu (templates) dùng để hiển thị danh sách bài viết (chẳng hạn như trang chủ blog, trang danh mục, trang thẻ, v.v.) là… archive.phpTrang chủ của trang web khá đặc biệt; WordPress sẽ ưu tiên tìm kiếm các nội dung cần hiển thị trên trang chủ đó. front-page.phpNếu không tồn tại, hãy sử dụng. home.phpcuối cùng mới đến index.php。

Đọc thêm Nắm vững phát triển chủ đề WordPress: Hướng dẫn toàn diện và thực hành từ cơ bản đến thực tế。

Bằng cách phân chia các tệp mẫu một cách hợp lý, bạn có thể tối ưu hóa việc tái sử dụng mã nguồn và quản lý chúng một cách hiệu quả. Ví dụ, một trường hợp điển hình là… single.php Cấu trúc có thể được trình bày như sau:

<?php get_header(); ?>

<div id="primary" class="content-area">
    <main id="main" class="site-main">
        <?php
        while ( have_posts() ) :
            the_post();
            // 加载专门用于文章内容的模板部分
            get_template_part( 'template-parts/content', 'single' );
            // 显示文章导航（上一篇/下一篇）
            the_post_navigation();
            // 如果评论开放，则加载评论模板
            if ( comments_open() || get_comments_number() ) :
                comments_template();
            endif;
        endwhile;
        ?>
    </main>
</div>

Chức năng chủ đề và vòng lặp trong WordPress

Điểm mạnh của WordPress nằm ở hệ thống quản lý nội dung linh hoạt của nó, và cơ chế cốt lõi cho sự tương tác giữa các chủ đề (theme) và nội dung chính là “vòng lặp” (loop). Vòng lặp là một đoạn mã PHP được sử dụng để kiểm tra xem trang hiện tại có bài viết nào cần được hiển thị hay không. Nếu có, vòng lặp sẽ đi qua từng bài viết đó và sử dụng một loạt thẻ mẫu (template tags) để hiển thị nội dung của từng bài viết đó.

Cấu trúc lặp cơ bản nhất được trình bày như sau. Nó sử dụng… have_posts() 和 the_post() Các hàm được sử dụng để kiểm soát và thực hiện các vòng lặp (loop).

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%.

Truy cập trang

<h2><?php the_title(); ?></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    
    <p>Không tìm thấy bất kỳ bài viết nào.</p>
<?php endif; ?>

Bên trong vòng lặp, bạn có thể sử dụng các công cụ hoặc lệnh như… the_title()、the_content()、the_excerpt()、the_permalink()、the_post_thumbnail() Các thẻ mẫu được sử dụng để hiển thị thông tin của bài viết hiện tại. Những hàm này sẽ tự động in nội dung ra màn hình (Echo). Nếu bạn cần lấy các giá trị này để xử lý bằng logic PHP, hãy sử dụng các hàm “get_” tương ứng. get_the_title()。

Ngoài việc hiển thị nội dung, chủ đề còn cần được truyền đạt thông qua các phương tiện khác nữa. functions.php Đây là một tệp tin dùng để mở rộng chức năng của một chủ đề (theme). Tệp tin này giống như một “plugin” cho chủ đề, cho phép bạn thêm các tính năng tùy chỉnh, đăng ký các mục trong menu và khu vực công cụ bên cạnh (sidebar), cũng như thêm các tệp định dạng kiểu (style sheets) và tập lệnh (scripts). Ví dụ, đoạn mã dưới đây đã thêm hỗ trợ cho menu điều hướng và khu vực công cụ bên cạnh cho chủ đề, đồng thời thêm các tệp định dạng kiểu một cách chính xác.

__( '主导航菜单', 'my-custom-theme' ),
            'footer'  => __( '页脚菜单', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

// 注册一个小工具侧边栏
function mytheme_widgets_init() {
    register_sidebar(
        array(
            'name'          => __( '主侧边栏', 'my-custom-theme' ),
            'id'            => 'sidebar-1',
            'description'   => __( '在此添加小工具。', 'my-custom-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', 'mytheme_widgets_init' );

// 引入主题样式表
function mytheme_enqueue_styles() {
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri(), array(), '1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_styles' );
?&gt;

Thiết kế giao diện, tính tương thích với nhiều loại thiết bị (responsive design), và tối ưu hóa hiệu suất (performance optimization)

Một chủ đề hiện đại xuất sắc phải có khả năng thích ứng với nhiều loại thiết bị khác nhau (đáp ứng tính năng responsive) và mang lại trải nghiệm người dùng tốt trên mọi kích thước màn hình. Điều này chủ yếu được thực hiện thông qua các truy vấn phương tiện (media queries) trong CSS. Bạn có thể áp dụng chiến lược ưu tiên cho thiết bị di động (mobile-first): trước tiên tạo các kiểu dáng cơ bản dành cho màn hình nhỏ, sau đó sử dụng truy vấn phương tiện để từ từ thêm hoặc thay thế các kiểu dáng đó cho màn hình lớn hơn.

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

在编写 CSS 时，建议遵循 BEM（块、元素、修饰符）等命名方法论，以保持样式代码的组织性和可维护性。同时，充分利用 WordPress 生成的丰富 body class 和 post class，可以为不同页面类型或文章类别精准地添加样式。例如，body_class() The function will… <body> Thẻ này hiển thị một loạt tên lớp (class names), ví dụ như: .home、.page、.single v.v.

Hiệu năng là một thành phần quan trọng của trải nghiệm người dùng. Đối với các tệp biểu định kiểu (style sheets) và tệp JavaScript, hãy đảm bảo sử dụng những công cụ hoặc phương pháp tối ưu để tăng tốc độ phản hồi của chúng. wp_enqueue_style() 和 wp_enqueue_script() Hàm đăng ký vùng tiện ích trong functions.php Các tệp tin cần được thêm vào đúng hàng đợi (queue). Điều này giúp WordPress quản lý các mối phụ thuộc giữa các thành phần của trang web, đồng thời tạo điều kiện thuận lợi cho việc các plugin và sub-theme có thể thay thế (overwrite) các tính năng hiện có của chủ đề. Đối với hình ảnh, bạn cần đảm bảo r add_theme_support(‘post-thumbnails’)Và khuyến khích người dùng tải lên những hình ảnh có kích thước phù hợp; đồng thời có thể xem xét sử dụng công nghệ tải chậm (lazy loading).

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.

Truy cập trang

Ngoài ra, việc cung cấp sự hỗ trợ tốt cho các khối chức năng cốt lõi và trình soạn thảo Gutenberg trong các phiên bản WordPress được phát triển vào năm 2026 đã trở thành một tiêu chuẩn phổ biến. Bằng cách… functions.php vào add_theme_support(‘wp-block-styles’) 和 add_theme_support(‘responsive-embeds’) Những tuyên bố như vậy sẽ giúp chủ đề của bạn tương thích tốt hơn với các trình soạn thảo hiện đại.

Tóm lại

Việc phát triển các chủ đề (themes) cho WordPress là một quá trình từ đơn giản đến phức tạp, diễn ra thông qua sự tích lũy dần dần kinh nghiệm. Bắt đầu từ việc tạo ra hai tệp tin cơ bản, bạn sẽ dần hiểu sâu hơn về cấu trúc các template (mẫu trang), thành thạo cách sử dụng các cơ chế lặp (loops) và hệ thống hook (hook system) của WordPress. Mỗi bước trong quá trình này đều giúp bạn nhận thức rõ hơn về cách xây dựng một trang web linh hoạt, mạnh mẽ và hiệu quả. Trọng tâm của việc phát triển chủ đề nằm ở việc hiểu rõ cách WordPress sử dụng các tệp template để tạo ra nội dung trang web, cũng như cách quản lý và tùy chỉnh chúng một cách hiệu quả. functions.php Các hàm tích hợp về bảo mật tương tác với hệ thống một cách hiệu quả. Bằng cách tuân thủ các thực hành tốt nhất như thiết kế phản ứng (responsive design), tối ưu hóa hiệu năng và tổ chức mã nguồn một cách có hệ thống, bạn sẽ có thể tạo ra những giao diện (theme) chuyên nghiệp không chỉ có vẻ ngoài độc đáo mà còn ổn định, nhanh chóng và dễ

FAQ 常见问题

Để phát triển một theme cho WordPress, bạn cần nắm vững một số ngôn ngữ lập trình sau:

Phát triển một chủ đề WordPress hoàn chỉnh về mặt chức năng chủ yếu cần nắm vững ba ngôn ngữ cốt lõi. Đầu tiên là PHP, ngôn ngữ lập trình phía máy chủ của WordPress, dùng để xử lý logic, gọi hàm, chạy vòng lặp và thao tác dữ liệu. Tiếp theo là CSS (và có thể bao gồm các bộ tiền xử lý như Sass/Less), chịu trách nhiệm kiểm soát biểu hiện hình ảnh của chủ đề, bao gồm bố cục, màu sắc, phông chữ và thiết kế đáp ứng. Cuối cùng là HTML, dùng để xây dựng bộ khung cơ bản và cấu trúc nội dung của trang web. Ngoài ra, để chủ đề có tính tương tác, kiến thức về JavaScript (có thể bao gồm jQuery) ở một mức độ nhất định cũng là cần thiết.

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

Để chủ đề của bạn hỗ trợ nhiều ngôn ngữ (quốc tế hóa và địa phương hóa), bạn cần chuẩn bị các ô văn bản trong mã nguồn và sử dụng các công cụ phù hợp để tạo ra các tệp dịch. Trước tiên, style.css Comment blocks and… functions.php hãy tải bản dịch thông qua hàm load_theme_textdomain() Hàm đã thiết lập đúng giá trị cho Text Domain (lĩnh vực văn bản, thường trùng với tên thư mục chủ đề). Sau đó, tại tất cả các đoạn văn bản cần được dịch trong thư mục chủ đề, hãy sử dụng hàm dịch của WordPress để bao bọc các đoạn văn bản đó. Ví dụ: __(‘文本’, ‘my-custom-theme’) 或 _e(‘文本’, ‘my-custom-theme’)Sau khi quá trình phát triển hoàn tất, bạn có thể sử dụng phần mềm như Poedit để quét các chuỗi có thể được dịch trong tệp chủ đề (theme file) và tạo ra bản dịch cần thiết. .pot Các tệp mẫu (template files), và dựa trên đó tạo ra các phiên bản bằng các ngôn ngữ khác nhau. .po 和 .mo Tệp.

Thế nào là sự khác biệt giữa chủ đề con (sub-topic) và chủ đề cha (parent-topic), và khi nào nên sử dụng chúng?

Chủ đề con là một chủ đề chạy độc lập nhưng phụ thuộc vào chủ đề cha. Nó kế thừa tất cả chức năng, kiểu dáng và tệp mẫu từ chủ đề cha, nhưng cho phép bạn ghi đè an toàn bất kỳ phần nào của chủ đề cha (như bảng định kiểu, tệp mẫu, hàm) mà không cần sửa đổi trực tiếp mã của chủ đề cha. Lợi ích lớn nhất của việc này là khi chủ đề cha được cập nhật, những tùy chỉnh bạn thực hiện trên chủ đề (tồn tại trong chủ đề con) sẽ không bị mất. Khi bạn cần tùy chỉnh sâu một chủ đề hiện có (đặc biệt là chủ đề phổ biến hoặc chủ đề khung), rất khuyến khích tạo chủ đề con để phát triển. Tạo chủ đề con chỉ cần một tệp style.css Tệp tin, và thông qua nó… Template: Khai báo tên thư mục của chủ đề cha được chỉ định.

Cách phát hành chủ đề lên thư mục chính thức của WordPress sau khi hoàn thành phát triển

Để đăng một chủ đề lên danh mục chủ đề chính thức của WordPress.org, bạn cần trải qua quá trình kiểm duyệt nghiêm ngặt. Đầu tiên, chủ đề của bạn phải tuân thủ giấy phép GNU GPL. Thứ hai, mã nguồn phải đáp ứng các tiêu chuẩn lập trình của WordPress, đồng thời phải đảm bảo tính bảo mật, khả dụng truy cập và chất lượng mã nguồn tốt. Bạn cần đảm bảo rằng chủ đề không chứa các liên kết được khóa cứng (hard-coded links), tuân thủ các quy tắc về cấu trúc template, xử lý tốt các yêu cầu quốc tế hóa (internationalization), và không sử dụng các hàm đã lỗi thời. Trước khi nộp, bạn nên sử dụng plugin Theme Check để kiểm tra sơ bộ chủ đề của mình. Sau đó, hãy nộp bộ mã nén của chủ đề lên trang web chính thức của WordPress.org; đội ngũ kiểm duyệt sẽ tiến hành xem xét thủ công. Nếu được chấp thuận, chủ đề của bạn sẽ có thể được người dùng trên toàn thế giới tìm kiếm, cài đặt và sử dụng.