Từ nhập môn đến thành thục: Hướng dẫn toàn diện và bài học thực hành về phát triển theme WordPress

Việc phát triển các chủ đề (theme) cho WordPress là kỹ năng cốt lõi để tùy chỉnh giao diện và chức năng của trang web. Điều này không chỉ đơn thuần là thay đổi các định dạng CSS, mà còn đòi hỏi sự hiểu biết sâu rộng về cấu trúc cốt lõi của WordPress, bao gồm cấu trúc các mẫu (templates), các hàm (functions) trong chủ đề, các hook (cơ chế kết nối giữa các thành phần của chủ đề), và các vòng lặp (loops). Việc nắm vững kỹ năng phát triển chủ đề giúp bạn có thể xây dựng một trang web hoàn toàn phù hợp với yêu cầu của dự án, với hiệu suất cao và dễ bảo trì, từ con số không; đồng thời giúp bạn loại bỏ sự phụ thuộc vào các chủ đề có sẵn. Hướng dẫn này sẽ hướng dẫn bạn một cách có hệ thống về quy trình phát triển chủ đề

Những kiến thức cơ bản về chủ đề (theme) và cấu trúc của WordPress

Một chủ đề WordPress tiêu chuẩn là một thư mục chứa các tệp tin cụ thể, nằm tại…/wp-content/themes/Trong thư mục đó, ngay cả với các chủ đề đơn giản nhất, cũng phải có hai tệp tin cốt lõi.

Các tệp cấu thành cốt lõi của giao diện

Tệp tin bắt buộc đầu tiên là bảng định dạng (stylesheet).style.cssChức năng của tệp tin này vượt xa việc định nghĩa các kiểu trình bày (styles); phần chú thích ở đầu tệp tin chính là “giấy tờ tùy thân” của chủ đề, được sử dụng để thông báo các thông tin meta về chủ đề đó cho hệ thống WordPress.

Đọc thêm Khám phá phát triển chủ đề WordPress: Hướng dẫn toàn diện từ nhập môn đến tinh thông。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Tệp tin bắt buộc thứ hai là tệp tin mẫu chính (main template file).index.phpĐây là tệp lưu trữ dùng để khôi phục cấu trúc phân cấp của các mẫu (templates) trong WordPress. Khi WordPress không tìm thấy tệp mẫu cụ thể nào, nó sẽ sử dụng tệp này thay thế.index.phpĐây là đoạn mã được sử dụng để hiển thị nội dung trang web. Nó sẽ thực hiện quá trình “rendering” (hiển thị nội dung trang trên trình duyệt).

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

Hiểu về cấu trúc phân cấp của các mẫu (templates)

Cấu trúc phân cấp của các mẫu (templates) là nền tảng cơ bản trong quá trình phát triển các chủ đề (themes) cho WordPress. Đây là một bộ quy tắc xác định xem hệ thống sẽ ưu tiên sử dụng tệp mẫu nào cho từng loại yêu cầu trang khác nhau. Ví dụ, khi truy cập một bài viết trên blog, WordPress sẽ tìm kiếm theo thứ tự sau:single-post.php -> single.php -> singular.php -> index.phpKhi bạn nắm vững cấu trúc này, bạn sẽ có thể tạo ra các tệp mẫu tương ứng (chẳng hạn như…)page.phpDùng cho trang web.archive.phpDùng cho trang lưu trữ.front-page.php(Dùng cho trang chủ) Để kiểm soát chính xác cách hiển thị các nội dung khác nhau.

Tạo tệp mẫu chủ đề (Theme Template File)

Các tệp tin mẫu (template files) được tạo thành từ sự kết hợp giữa cấu trúc HTML và mã PHP, được sử dụng để trích xuất và hiển thị nội dung từ cơ sở dữ liệu. Một chủ đề (theme) hoàn chỉnh thường được xây dựng bằng sự phối hợp của nhiều tệp tin mẫu khác nhau.

Cấu trúc vòng lặp chính được sử dụng để hiển thị nội dung bài viết

“Loop” là đoạn mã PHP trong WordPress dùng để lấy các bài viết, trang web, v.v. từ cơ sở dữ liệu. Đây là yếu tố cốt lõi trong việc hiển thị tất cả nội dung trên trang web. Một cấu trúc vòng lặp điển hình như sau:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
        <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
<?php endwhile; else : ?>
    <p><?php _e( '抱歉，没有找到任何内容。', 'my-first-theme' ); ?></p>
<?php endif; ?>

Đoạn mã này sử dụng các công cụ hoặc thư viện như… (The code utilizes tools/libraries such as…)the_title()、the_content()Các thẻ mẫu được sử dụng để hiển thị thông tin cụ thể của bài viết.

Đọc thêm Hướng dẫn thực hành phát triển theme WordPress: Khóa học đầy đủ từ cơ bản đến nâng cao。

Phân tách các mẫu (templates) để tối ưu hóa việc tái sử dụng mã nguồn (code reuse).

Để nâng cao khả năng bảo trì và tái sử dụng của mã nguồn, những phần chung cần được tách ra thành các tệp riêng biệt. Hai tệp quan trọng nhất cần được tách ra là các mẫu đầu (header templates).header.phpVà mẫu thiết kế phần dưới (bottom template)footer.php… trong…index.phpwp_footer()get_header()和get_footer()hàm để nhập chúng. Tương tự, thanh bên có thể được đặt trongsidebar.phpTrong đó, sử dụng…get_sidebar()Một phần mẫu nội dung bài viết (chẳng hạn như thông tin meta của bài viết) có thể được phân tích chi tiết hơn nữa.template-parts/content.phpvà sử dụngget_template_part()Gọi hàm.

Chức năng chủ đề và các tính năng nâng cao

functions.phpTệp tin chính là “bộ não” của giao diện (theme), được sử dụng để thêm các tính năng mới, đăng ký các đặc điểm cụ thể, và thay đổi hành vi mặc định của WordPress. Đây không phải là một tệp tin mẫu (template file), mà là một tệp PHP được tự động tải vào khi giao diện được khởi tạo (initialized).

Thêm hỗ trợ cho các chủ đề thông qua tệp chứa hàm (function files)

在functions.phpbạn có thể sử dụngadd_theme_support()Các hàm được sử dụng để khai báo các tính năng khác nhau mà chủ đề hỗ trợ. Ví dụ, việc kích hoạt tính năng hiển thị ảnh thu nhỏ (hình ảnh đại diện) cho bài viết là một yêu cầu cơ bản đối với các chủ đề hiện đại.

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

function my_theme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持在后台自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持HTML5的语义化标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 支持标题标签功能
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Ở đây,after_setup_themeĐây là một “hook” quan trọng, được sử dụng để thực thi mã khởi tạo một cách an toàn sau khi chủ đề (theme) được tải vào hệ thống.

Đăng ký menu điều hướng và script định dạng (Register Navigation Menu and Style Script)

Menu điều hướng là một thành phần quan trọng của trang web. Bạn cần phải…functions.phpĐăng ký vị trí của đơn vị cung cấp món ăn vào hệ thống, sau đó sử dụng thông tin đó trong mẫu (template).wp_nav_menu()Hiển thị.

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

Đồng thời, cần phải sử dụng chúng một cách chính xác.wp_enqueue_style()和wp_enqueue_script()Các hàm được sử dụng để tải các tệp biểu mẫu (stylesheet) và tệp JavaScript của chủ đề là phương pháp tốt nhất được WordPress khuyến nghị. Điều này giúp quản lý các phụ thuộc giữa các thành phần của trang web một cách hiệu quả và tránh xung đột giữa các tệp mã nguồn.

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

Tùy chỉnh chủ đề và kỹ thuật thực hành

Một chủ đề (theme) xuất sắc không chỉ cần có đầy đủ chức năng, mà còn phải cung cấp cho người dùng (bao gồm cả người dùng cuối cùng và nhà phát triển) những tùy chọn tùy chỉnh linh hoạt.

Tích hợp bộ tùy chỉnh WordPress

WordPress Customizer cung cấp một giao diện để xem trước các tùy chọn thiết kế của chủ đề một cách thời gian thực. Bạn có thể sử dụng công cụ này để…functions.phpHãy thêm các thiết lập và điều khiển của riêng bạn vào đó. Ví dụ, hãy thêm tùy chọn để hiển thị thông tin bản quyền ở phần chân trang (footer).

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

function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置
    $wp_customize->add_setting( 'footer_copyright', array(
        'default' => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
    ) );
    // 添加一个控件到现有板块
    $wp_customize->add_control( 'footer_copyright', array(
        'label' => __( '页脚版权文本', 'my-first-theme' ),
        'section' => 'title_tagline',
        'type' => 'text',
    ) );
}
add_action( 'customize_register', 'my_theme_customize_register' );

Sau đó, trongfooter.phptrong đó, sử dụngget_theme_mod( 'footer_copyright' )để xuất giá trị này.

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

Các mẫu trang tùy chỉnh cho phép bạn tạo ra một bố cục độc đáo cho từng trang cụ thể. Bạn chỉ cần thêm một đoạn mã chú thích đặc biệt ở đầu bất kỳ tệp mẫu nào để tạo ra một mẫu mới.

<?php
/**
 * Template Name: 全宽页面布局
 * Description: 一个没有侧边栏的全宽度页面模板
 */
get_header(); ?>
// ... 全宽布局的循环代码 ...
<?php get_footer(); ?>

Sau khi tạo trang, khi bạn chỉnh sửa trang ở phía backend, bạn có thể chọn “Bố cục trang toàn chiều rộng” (Full-width page layout) từ danh sách thả xuống “Mẫu” (Template) trong mục “Thuộc tính trang” (Page Properties).

Thực hiện thiết kế thích ứng và tối ưu hóa hiệu năng

Các thiết kế theo phong cách hiện đại phải có khả năng thích ứng với nhiều loại thiết bị khác nhau (điện thoại, máy tính bảng, máy tính xách tay, v.v.). Điều này chủ yếu được thực hiện thông qua các truy vấn truyền thông (media queries) trong CSS, nhằm đảm bảo rằng giao diện trang web hiểnstyle.cssCó thể thích ứng với mọi kích thước màn hình, từ điện thoại đến máy tính bàn. Về mặt hiệu năng, ngoài việc đảm bảo hình ảnh được tối ưu hóa và mã nguồn gọn gàng, cũng cần xem xét việc sử dụng các công cụ hoặc kỹ thuật phù hợp để nâng cao hiadd_image_size()Hãy đăng ký kích thước hình ảnh phù hợp và kết hợp chúng lại với nhau.srcsetViệc triển khai các thuộc tính để tạo ra những hình ảnh có khả năng thích ứng với kích thước màn hình (responsive images) là rất quan trọng đối với cả SEO và tốc độ tải trang web.

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình tiến dần, bắt đầu từ việc hiểu rõ cấu trúc cơ bản của các tệp tin, sau đó dần đi sâu vào các khía cạnh như cấu trúc của các mẫu (templates), các hook (hàm được gọi tự động trong quá trình thực thi chủ đề), và các API tùy chỉnh. Trọng tâm chính là nắm vững cách các tệp tin mẫu hoạt động – cụ thể là cách chúng hiển thị nội dungfunctions.phptệp mở rộng chức năng chủ đề. Bằng cách tách mẫu, tích hợp bộ tùy chỉnh, tạo mẫu tùy chỉnh và chú trọng thiết kế đáp ứng, bạn có thể xây dựng một chủ đề chuyên nghiệp vừa mạnh mẽ vừa linh hoạt. Thực hành là chìa khóa để học hỏi, bắt đầu từ việc tạo mộtstyle.css和index.phpBắt đầu bằng cách từng bước thêm vào nhiều tính năng và mẫu (templates) hơn là con đường tốt nhất để nắm vững kỹ năng này.

FAQ 常见问题

Phát triển chủ đề WordPress cần những kiến thức tiên quyết nào?

Bạn cần nắm vững kiến thức cơ bản về HTML và CSS – đây là những yếu tố then chốt để tạo nên giao diện cho trang web. Ngoài ra, bạn cũng cần có hiểu biết cơ bản về PHP, vì phần lớn mã nguồn của WordPress (bao gồm cả phần cốt lõi và các tệp mẫu) được viết bằng PHP. Việc có kiến thức sơ lược về JavaScript sẽ hữu ích khi bạn muốn thêm các tính năng tương tác vào trang web, nhưng đây không phải là điều bắt buộc đối với người mới bắt đầu.

Tại sao sau khi kích hoạt, giao diện của chủ đề tôi trở nên lộn xộn về mặt thiết kế hoặc các chức năng hoạt động bất thường?

Điều này thường xảy ra do lỗi trong mã nguồn hoặc thiếu các tệp tin quan trọng. Hãy kiểm tra trước tiên console và panel mạng trong công cụ phát triển của trình duyệt để xem có lỗi JavaScript nào không, hoặc liệu các tệp CSS có được tải xuống thành công hay không. Sau đó, hãy đảm bảo rằng…functions.phpTrong đoạn mã không có lỗi về ngữ pháp PHP, và cũng đã được kiểm tra xem liệu các thư viện/công cụ cần thiết có được đưa vào đúng cách hay không.header.php和footer.phpCác thành phần mẫu như vậy… Được khuyến nghị nên luôn bật chức năng liên quan đến WordPress trong quá trình phát triển.WP_DEBUGMô hình (Pattern).

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

Bạn cần chuẩn bị tốt cho việc hỗ trợ các ngôn ngữ quốc tế (internationalization) cho chủ đề (theme) của ứng dụng. Trong mã nguồn, tất cả các chuỗi dữ liệu được hiển thị cho người dùng (user-facing strings) phải được bao bọc bởi các hàm dịch (translation functions). Ví dụ:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )… trong…style.cssvà trongfunctions.phpHãy đảm bảo rằng hàm tải (loading function) được thiết lập đúng cách trong mã nguồn.Text Domainvà sử dụngload_theme_textdomain()Chức năng này được thiết kế để tải các tệp ngôn ngữ cần thiết vào chương trình. Cuối cùng, các công cụ như Poedit được sử dụng để thực hiện quá trình tạo (xây dựng) các tệp ngôn ngữ đó..potTệp mẫu (Template file).po/.moTệ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ủ đề cha (parent theme) là một chủ đề chức năng hoàn chỉnh và độc lập. Chủ đề con (child theme) phụ thuộc vào chủ đề cha; nó chỉ chứa những tệp tin mà bạn muốn sửa đổi hoặc thay thế.style.css、functions.phpHoặc các tệp mẫu cụ thể). Khi bạn muốn tùy chỉnh dựa trên một chủ đề hiện có (chẳng hạn như một framework phổ biến) nhưng vẫn muốn giữ lại khả năng nâng cấp độc lập cho chủ đề gốc, bạn nên tạo ra một chủ đề con. Điều này sẽ đảm bảo rằng các thay đổi tùy chỉnh của bạn không bị ghi đè khi chủ đề gốc được cập nhật.