Bắt đầu từ con số không: Hướng dẫn đầy đủ và chia sẻ thực tiễn tốt nhất về phát triển WordPress Theme

Chuẩn bị môi trường phát triển và hiểu rõ cấu trúc của chủ đề.

Trước khi bắt đầu viết bất kỳ dòng mã nào, việc cấu hình môi trường phát triển một cách chính xác là bước đầu tiên vô cùng quan trọng. Một môi trường phát triển địa phương hiệu quả sẽ giúp bạn nhanh chóng xem trước những thay đổi bạn thực hiện, mà không cần phải triển khai mã chưa hoàn thành lên máy chủ trực tuyến. Bạn nên sử dụng các công cụ như Local by Flywheel, XAMPP hoặc MAMP để thiết lập một môi trường tích hợp bao gồm Apache, MySQL và PHP trên máy tính cá nhân của mình. Đồng thời, một trình soạn thảo mã chuyên nghiệp (chẳng hạn như VS Code, PHPStorm) cùng các công cụ phát triển trình duyệt sẽ trở thành những công cụ không thể thiếu trong quá trình làm việc của bạn.

Tiếp theo, bạn cần hiểu rõ cấu trúc cơ bản của một giao diện (theme) WordPress. Một giao diện cơ bản nhất chỉ yêu cầu hai tệp tin:style.css 和 index.phpTuy nhiên, một chủ đề có chức năng đầy đủ và cấu trúc rõ ràng sẽ bao gồm nhiều tệp mẫu (template files) và thư mục (directories).

Core File and Directory Parsing

Nằm trong thư mục gốc của chủ đề (theme root directory) style.css Tệp tin không chỉ chứa các bảng định dạng (style sheets) mà còn là “chứng minh thư” của chủ đề (theme). Phần ghi chú ở đầu tệp (file header) bao gồm tất cả các thông tin metadata của chủ đề, như tên chủ đề, tác giả, mô tả, phiên bản, v.v. WordPress sử dụng những thông tin này để nhận diện chủ đề của bạn trong nền.

Đọc thêm Hướng dẫn phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh hiệu suất cao từ con số không。

/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: A custom theme built from scratch.
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Một tệp tin quan trọng khác là… functions.phpĐây không phải là một tệp mẫu (template file), mà là một “bộ công cụ mở rộng chức năng” (feature enhancer) dành cho các chủ đề (themes) trong WordPress. Bạn có thể sử dụng nó để thêm các tính năng tùy chỉnh, thiết lập menu và thanh bên (sidebars), cũng như đưa vào các tệp script và tệp định dạng kiểu (style files). Về bản chất, đây là nơi bạn có thể thêm mã PHP vào chủ đề mà không cần phải sửa đổi các tệp cốt lõi của WordPress.

Cấp độ của các mẫu (templates) và cách tổ chức các tệp tin (files)

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 tải tệp template nào cho một trang cụ thể. Việc hiểu rõ cấu trúc của hệ thống này là yếu tố then chốt để phát triển nhanh chóng và hiệu quả. Ví dụ, khi truy cập vào một bài viết riêng lẻ, WordPress sẽ tìm kiếm theo thứ tự nhất định để xác định tệp template phù hợp để hiển thị nội dung của bài viết đó. single-post.php、single.php，cuối cùng là index.phpCác tệp mẫu thường được sử dụng bao gồm:
* header.phpTrang đầu của trang web.
* footer.phpPhần chân trang của trang web.
* sidebar.php:Bên cạnh.
* page.php:Dùng cho các trang web riêng lẻ.
* single.php:Dùng cho các bài viết riêng lẻ.
* archive.php:Dùng để phân loại, đánh dấu, hoặc lưu trữ các trang nội dung.
* 404.phpTrang lỗi 404.
* front-page.phpTrang chủ của trang web (có độ ưu tiên cao hơn các thiết lập liên quan đến trang chủ).

Hãy chia nhỏ các tệp mẫu này và sau đó sử dụng chúng theo cách thích hợp. get_header(), get_footer(), get_sidebar() Việc gọi các hàm như vậy khi cần thiết là một thực hành tốt nhất để giữ cho mã nguồn luôn DRY (Don’t Repeat Yourself – tránh lặp lại cùng một mã nguồn).

Xây dựng mẫu chủ đề và vòng lặp

Động lực cốt lõi của tất cả các chủ đề WordPress đều đến từ “vòng lặp chính” (main loop). Vòng lặp này là cơ chế mà WordPress sử dụng để truy xuất nội dung (bài viết, trang, v.v.) từ cơ sở dữ liệu và hiển thị chúng trên trang web. Việc hiểu rõ và sử dụng đúng cách các vòng lặp là kỹ năng cơ bản trong quá trình phát triển chủ đề WordPress.

Cách viết tiêu chuẩn cho vòng lặp chính (main loop)

一个典型的循环结构包含在 if 语句中，该语句检查当前查询是否有文章可以显示。我们使用 while Lặp lại quá trình này để duyệt qua từng bài viết.

Đọc thêm Từ không đến có: Hướng dẫn toàn diện và thực hành phát triển chủ đề WordPress。

<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
            <header class="entry-header">
                <h2 class="entry-title"><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            </header>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>
    
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

Bên trong vòng lặp, bạn có thể sử dụng một loạt thẻ mẫu (template tags) để hiển thị thông tin bài viết, ví dụ như: the_title(), the_content(), the_permalink(), the_post_thumbnail() v.v.

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

Ngoài các tệp cấu trúc mẫu tiêu chuẩn, bạn cũng có thể tạo ra các mẫu trang tùy chỉnh để mang lại cho từng trang một thiết kế độc đáo. Chỉ cần thêm các ghi chú vào phần đầu của tệp mẫu là được. Template Name: Chỉ cần tuyên bố là được.

<?php
/*
Template Name: 全宽页面布局
*/
get_header(); ?>
<div id="primary" class="full-width-content">
    <main id="main">
        <?php
        while ( have_posts() ) : the_post();
            get_template_part( 'template-parts/content', 'page' );
        endwhile;
        ?>
    </main>
</div>
<?php get_footer(); ?>

Sau khi được tạo ra, mẫu này sẽ xuất hiện trong danh sách các mẫu có sẵn (templates) trên trang quản trị WordPress, dưới mục “Properties” (Thuộc tính), để các biên tập viên có thể chọn và sử dụng. Để tổ chức mã nguồn một cách tốt hơn, khuyến nghị nên đặt các đoạn nội dung có thể được sử dụng lại (như tóm tắt bài viết, thông tin meta của bài viết) vào những nơi thích hợp trong hệ thống. template-parts Nằm trong thư mục, và hãy sử dụng nó. get_template_part() Gọi hàm.

Thêm tùy chọn chức năng và chủ đề

Một chủ đề hiện đại không nên chỉ đơn thuần là một bộ mẫu tĩnh; nó cần phải cung cấp khả năng tùy chỉnh vừa phải, giúp người dùng có thể thay đổi giao diện trang web mà không cần phải tiếp xúc với mã nguồn. Điều này chủ yếu được thực hiện thông qua… functions.php Thực hiện việc xử lý các tệp tin và các giao diện lập trình ứng dụng (APIs) của WordPress.

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

Sử dụng add_theme_support() Các hàm có thể được sử dụng để chỉ định những tính năng cốt lõi của WordPress mà chủ đề của bạn hỗ trợ. Đây là cách tiêu chuẩn để kích hoạt các tính năng như hình ảnh đặc biệt cho bài viết, logo tùy chỉnh, định dạng bài viết, v.v.

function my_theme_setup() {
    // 启用文章和评论的 RSS feed 链接
    add_theme_support( 'automatic-feed-links' );
    // 启用文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 启用自定义 logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 启用标题标签功能（WordPress 自动管理 `<title>` 标签）
    add_theme_support( 'title-tag' );
    // 启用 HTML5 标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Tạo menu và khu vực công cụ nhỏ (Create a menu and a small tools area)

Menu điều hướng và các tiện ích nhỏ (widgets) là yếu tố then chốt để người dùng có thể tự định hình giao diện theo ý muốn của mình. Bạn cần phải thực hiện điều này trước tiên… functions.php Bạn cần đăng ký chúng trước, sau đó mới có thể sử dụng chúng trong các mẫu (templates).

Đọc thêm Hướng dẫn dành cho người mới bắt đầu với WordPress: Xây dựng trang web đầu tiên của bạn chỉ trong năm phút。

function my_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_menus' );

Khu vực đăng ký tiện ích (Thanh bên):

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

Trong mẫu, hãy sử dụng… wp_nav_menu() Hiển thị menu, sử dụng dynamic_sidebar() Hiển thị khu vực công cụ nhỏ (widget area).

Cách đưa các tập lệnh (script) và phong cách trình bày (style) vào trang web một cách an toàn:

Không bao giờ mã hóa cứng trực tiếp trong tệp mẫu <link> 或 <script> Nhãn. Nên sử dụng chúng. wp_enqueue_script() 和 wp_enqueue_style() hàm, và gắn chúng vào wp_enqueue_scripts hook.

function my_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
    // 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '', true );
    // 如果需要，引入 jQuery（注意：WordPress 默认已包含）
    // wp_enqueue_script( 'jquery' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Tối ưu hóa hiệu năng và các tính năng nâng cao

Các chủ đề đã được phát triển cần được tối ưu hóa để đảm bảo chúng hoạt động nhanh chóng, an toàn và dễ bảo trì. Dưới đây là một số thực tiễn tốt nhất ở cấp độ nâng cao.

Áp dụng các thực tiễn tối ưu hóa hiệu suất

* Quản lý script và style: Chỉ tải script và style trên các trang cần thiết. Sử dụng wp_enqueue_scripts Các “hook” (móc) được kết hợp với các điều kiện để thực hiện phân tích hoặc xử lý dữ liệu (ví dụ: is_front_page(), is_page()）。
* Tối ưu hóa hình ảnh: Đảm bảo kích thước hình ảnh do theme tạo ra là hợp lý. Sử dụng add_image_size() Hãy xác định kích thước hình ảnh phù hợp và sử dụng chính xác kích thước đó ở phía trước (frontend), để tránh việc hình ảnh bị phóng to hoặc thu nhỏ một cách tự động.
* Tối thiểu hóa yêu cầu HTTP: Hợp nhất hợp lý các file CSS và JavaScript (mặc dù plugin WordPress thường xử lý vấn đề này, nhưng nhà phát triển nên có ý thức).
* Tận dụng bộ nhớ cache: Ở cấp độ mã, có thể lưu cache kết quả truy vấn cơ sở dữ liệu phức tạp thông qua Transients API.

Đảm bảo tính bảo mật và tính quốc tế hóa của chủ đề (theme).

An toàn là yếu tố vô cùng quan trọng. Hãy luôn tiến hành xử lý (định dạng lại) hoặc kiểm tra dữ liệu do người dùng nhập vào. WordPress cung cấp rất nhiều hàm hữu ích để hỗ trợ bạn trong việc này.
*Khi hiển thị nội dung động, hãy sử dụng…* esc_html(), esc_attr(), esc_url() Và các ký tự khác cũng cần được “đánh dấu đặc biệt” (escape) để chúng được xử lý đúng cách trong chương trình.
Khi dịch văn bản, hãy sử dụng __(), _e() Các hàm như vậy, và cung cấp một trường văn bản (Text Domain) cho việc gọi các hàm đó.
Khi xây dựng các tùy chọn chủ đề (theme options), hãy nhớ sử dụng các công cụ do WordPress cung cấp như Nonce và kiểm tra quyền (permission checks) để ngăn chặn các cuộc tấn công kiểu CSRF (Cross-Site Request Forgery) và truy cập trái phép.

Tìm hiểu về các công cụ tùy chỉnh (customizers) và khả năng hỗ trợ các khối nội dung (block support)

Đối với những yêu cầu tùy chỉnh nâng cao hơn, WordPress Customizer là một công cụ mạnh mẽ với API hiển thị trực tiếp (real-time preview API). Bạn có thể sử dụng nó để… $wp_customize Thêm các thiết lập và điều khiển cho đối tượng.

Đồng thời, với sự phổ biến của trình soạn thảo khối Gutenberg, việc bổ sung hỗ trợ cho “phong cách khối” (block style) và “phong cách trình soạn thảo” (editor style) trở nên rất quan trọng. Điều này giúp đảm bảo rằng giao diện trực quan của nội dung được thể hiện một cách nhất quán trên cả trình soạn thảo phía trước (frontend) và phía sau (backend), từ đó mang lại trải nghiệm người dùng mượt mà và liền mạch.

Tóm lại

Việc phát triển các chủ đề (themes) cho WordPress bắt đầu bằng việc hiểu rõ cấu trúc cốt lõi của nó (các cấp độ của các tệp mẫu, vòng lặp chính – main loop), sau đó từng bước xây dựng các tệp mẫu, thêm các tính năng như menu, tiện ích (widgets), hình ảnh đặc trưng, và cuối cùng là tăng cường hiệu suất cũng như bảo mật cho chủ đề đó. Việc tuân theo các thực hành tốt nhất, chẳng hạn như phân chia các tệp mẫu thành các phần nhỏ, tải các tài nguyên một cách chính xác, và triển khai các biện pháp hỗ trợ đa ngôn ngữ (internationalization) cũng như bảo mật (security measures), là yếu tố then chốt để tạo ra những chủ đề chuyên nghiệp. Bằng cách phát triển trong môi trường cục bộ (local environment), sử dụng các công cụ mạnh mẽ như các hook và hàm (functions), bạn có thể tạo ra những chủ đề WordPress không chỉ có giao diện đẹp mắt mà còn có mã nguồn vững chắc, dễ bảo trì và mở rộng. Hãy nhớ rằng, việc học hỏi và thực hành liên tục, bắt đầu với những chủ đề đơn giản và dần dần thử sức với những dự án phức tạp hơn, là con đường hiệu quả nhất để nắm vững kỹ năng này.

FAQ 常见问题

Để phát triển một chủ đề (theme) cho WordPress, bạn cần nắm vững một số kiến thức cơ bản sau:

Bạn cần nắm vững các kiến thức cơ bản về HTML, CSS và PHP. Việc am hiểu JavaScript (đặc biệt là khi sử dụng để tương tác với REST API của WordPress hoặc phát triển các module mở rộng cho WordPress) sẽ giúp bạn được đánh giá cao hơn. Việc hiểu rõ cách thức hoạt động cơ bản của WordPress, chẳng hạn như các loại bài viết (article types), hệ thống phân loại (categories), và cách thực hiện các truy vấn vào cơ sở dữ liệu (database queries), cũng là những yếu tố quan trọng để bắt đầu làm việc với WordPress.

Làm thế nào để chủ đề (theme) của tôi đáp ứng các tiêu chuẩn nạp lên của danh mục chính thức WordPress?

Để chủ đề của bạn đủ điều kiện được đăng lên danh mục chủ đề chính thức của WordPress.org, bạn phải tuân thủ nghiêm ngặt các “Yêu cầu kiểm duyệt chủ đề” (Theme Review Requirements) của họ. Các yêu cầu này bao gồm: sử dụng các thực hành lập trình an toàn (như việc mã hóa dữ liệu đầu ra, xác thực dữ liệu đầu vào), triển khai hỗ trợ đa ngôn ngữ đầy đủ (sử dụng các hàm dịch và các trường văn bản phù hợp), đảm bảo rằng mã nguồn chủ đề không chứa lỗi hay cảnh báo nào, cung cấp hỗ trợ truy cập dành cho người khuyết tật, và không kèm theo bất kỳ đoạn mã hay tài nguyên nào không tương thích với giấy phép GPL. Được khuyến nghị nên đọc các tiêu chuẩn này ngay từ giai đoạn đầu của quá trình phát triển chủ đề.

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ủ đề cha (parent theme) là một chủ đề độc lập, hoàn chỉnh về mặt chức năng, bao gồm tất cả các tệp mẫu và tính năng cần thiết. Chủ đề con (child theme) phụ thuộc vào chủ đề cha; nó kế thừa toàn bộ các chức năng của chủ đề cha và cho phép bạn chỉ cần thêm hoặc sửa đổi một số ít tệp tin để tùy chỉnh chủ đề con theo nhu cầu. style.css 和 functions.phpBạn có thể sử dụng các công cụ như này để tùy chỉnh giao diện và chức năng của một chủ đề (theme). Khi bạn muốn thay đổi một chủ đề hiện có (đặc biệt là những chủ đề thuộc các framework phổ biến hoặc chủ đề thương mại), nhưng vẫn muốn có thể cập nhật chủ đề gốc một cách an toàn trong tương lai mà không mất đi những thay đổi tùy chỉnh của mình, thì bạn nên

Kiểm thử đơn vị chủ đề là gì? Tại sao nó quan trọng?

“Thử nghiệm đơn vị chủ đề” (Theme Unit Tests) thường là một tập hợp dữ liệu thử nghiệm dành cho WordPress (dưới dạng tệp XML) chứa đựng nhiều loại nội dung khác nhau. Bạn sẽ nhập tập dữ liệu này vào trang web phát triển của mình để kiểm tra toàn diện cách thức chủ đề hoạt động trong các tình huống khác nhau, chẳng hạn như các bài viết dài, bài viết ngắn, bình luận nhiều cấp độ, các định dạng phương tiện truyền thông (hình ảnh, video, âm thanh), tiện ích, menu, v.v. Điều này rất quan trọng vì nó giúp bạn phát hiện các vấn đề tiềm ẩn về giao diện, bố cục và chức năng của chủ đề, đảm bảo rằng chủ đề hoạt động tốt trong môi trường nội dung thực tế và phức tạp, tránh tình trạng người dùng phàn nàn sau khi chủ đề được phát hành.