Hướng dẫn toàn diện về phát triển chủ đề WordPress: Từ con số không đến việc xây dựng chủ đề tùy chỉnh thực hành

Những kiến thức cơ bản về phát triển theme WordPress: Môi trường và các khái niệm cốt lõi

Trước khi bắt đầu lập trình, bạn cần thiết lập một môi trường phát triển phù hợp và hiểu rõ cấu trúc cơ bản của các chủ đề WordPress. Môi trường phát triển trên máy tính cá nhân là lựa chọn tiêu chuẩn; bạn có thể sử dụng các công cụ như XAMPP, MAMP, Local by Flywheel hoặc Docker. Điều này giúp bạn thực hiện công việc phát triển và thử nghiệm mà không ảnh hưởng đến trang web trên mạng.

Một chủ đề WordPress về cơ bản là một tập hợp các tệp nằm trong thư mục `wp-content/themes/`./wp-content/themes/Thư mục nằm trong danh mục này. Bên trong thư mục này phải chứa ít nhất hai tệp tin cốt lõi:style.css和index.phpTrong đó,style.cssKhông chỉ đơn thuần là một bảng định dạng (style sheet), nó còn đóng vai trò như “chứng minh thư” của chủ đề (theme). Các ghi chú trong phần đầu tệp (header comments) định nghĩa các thông tin meta như tên chủ đề, tác giả, mô tả, v.v.

Việc hiểu rõ cấu trúc các bộ thiết kế (templates) trong WordPress là yếu tố then chốt trong quá trình phát triển. WordPress sẽ tự động chọn tệp thiết kế 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, trang danh mục bài viết, v.v.) để hiển thị nội dung. Ví dụ, khi người dùng truy cập vào một bài viết cụ thể, WordPress sẽ tìm kiếm tệp thiết kế tương ứng theo thứ tự nhất định để hiển thị nội dung của bài viết đó.single-post.php、single.php，cuối cùng làindex.phpMekanisme này cho phép bạn thiết kế các bố cục độc đáo cho các phần khác nhau của trang web.

Đọc thêm Hướng dẫn tối thượng về phát triển chủ đề WordPress: Khóa học hệ thống từ cơ bản đến thực chiến。

(The cornerstone file of the theme)

functions.phpTên tệp là “Control Center” (Trung tâm điều khiển). Đây không phải là một tệp bắt buộc phải có, nhưng hầu như mọi chủ đề (theme) đều cần đến nó. Bạn có thể thêm các tính năng tùy chỉnh, đăng ký các menu, thanh bên cạnh (khu vực công cụ nhỏ), thêm các script và bảng định dạng (style sheets), cũng như gọi các chức năng khác nhau vào tệp này.add_action和add_filterCác “hook” được sử dụng để mở rộng hoặc thay đổi hành vi cốt lõi của WordPress. Tệp tin này sẽ được tải tự động khi chủ đề được kích hoạ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

Một tập tin quan trọng khác làstyle.cssPhần chú thích ở đầu tệp (header comment) là khu vực dùng để tuyên bố chủ đề của tệp đó, và có định dạng như sau:

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

Trong đóText DomainDùng để quốc tế hóa nội dung chủ đề (theme content); đây là đầu vào cho các hàm dịch (translation functions) được gọi sau đó.__()或_e()Đây là những mã định danh được sử dụng trong quá trình thời gian (thời điểm).

Cấu trúc và mẫu cơ bản để xây dựng một chủ đề (theme)

Cấu trúc của một tệp tin chủ đề (theme file) điển hình bắt đầu từ một mẫu (template) cơ bản nhất. Đầu tiên là…header.phpNó chứa phần đầu (header) của tài liệu HTML.Các khu vực trong trang web, cũng như các phần công cộng ở phía trên trang (như Logo và bảng điều hướng chính).wp_head()Điều quan trọng trong tệp này là chức năng xuất ra các script và style cần thiết cho nền tảng WordPress cũng như các plugin.

tương ứng vớifooter.phpNó bao gồm khu vực công cộng ở phía dưới của trang web, và thực hiện lệnh gọi (call) ở cuối.wp_footer()Các hàm (functions). Nội dung chính của trang web được bao bọc giữa phần “đầu” (header) và phần “cuối” (footer).

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

Mẫu trang cốt lõi để lắp ráp các trang khác nhau

index.phpĐây là mẫu cơ bản nhất dành cho chủ đề của bạn, và cũng là lựa chọn cuối cùng khi các mẫu cụ thể hơn không có sẵn. Nhiệm vụ chính của nó là kết hợp các thành phần lại với nhau. Đây là một ví dụ điển hình.index.phpCấu trúc như sau:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) :
            the_post();
            // 展示每篇文章的内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation();
    else :
        get_template_part( 'template-parts/content', 'none' );
    endif;
    ?>
</main>

<?php get_sidebar(); // 如果不需要侧边栏，可以删除此行 ?>
<?php get_footer(); ?>

Mẫu này sử dụng cơ chế lặp (The Loop) có sẵn trong WordPress để duyệt và hiển thị danh sách các bài viết. Nhằm đảm bảo tính mô-đun hóa và dễ bảo trì của mã nguồn, chúng tôi đã…get_template_part()Hàm được sử dụng để gọi các tệp mẫu nội dung độc lập.

Tạo các mẫu nội dung có thể được sử dụng lại

Thông thường, chúng ta sẽ tạo một thư mục mới trong thư mục chứa các chủ đề (theme directory).template-partsThư mục, và lưu trữ những thứ như…content.phpĐây là loại tệp tin chuyên dụng để hiển thị phần tóm tắt hoặc toàn văn của một bài viết hoặc trang web.

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

<article id="post-<?php the_ID(); ?>" no numeric noise key 1003>
    <header class="entry-header">
        <h2 class="entry-title">
            <a href="/vi/</?php the_permalink(); ?>" rel="bookmark"><?php the_title(); ?></a>
        </h2>
    </header>
    <div class="entry-content">
        <?php the_excerpt(); ?>
    </div>
</article>

Bằng cách này, bạn có thể dễ dàng áp dụng các quy trình tương tự cho các loại bài viết khác nhau (chẳng hạn như…).post、pageTạo các mẫu nội dung khác nhau (ví dụ:content-post.php、content-page.phpHệ thống sẽ tự động tìm kiếm và ghép nối các phần cần thiết.

Hãy thêm các tính năng chính cho chủ đề của bạn.

Các tệp chức năng (function files) chính là công cụ giúp chủ đề (theme) của bạn chuyển đổi từ một mẫu tĩnh (static template) thành một ứng dụng động (dynamic application).functions.phpTrong đó, bạn cần phải gắn (mount) các tính năng khác nhau một cách có hệ thống vào hệ thống.

Các hỗ trợ cốt lõi cho việc khởi tạo chủ đề (theme initialization)

Bước đầu tiên là sử dụng…after_setup_themeCác “hook” (móc) được sử dụng để tuyên bố những tính năng mà giao diện (theme) của bạn hỗ trợ. Chúng thông báo cho WordPress biết rằng giao diện của bạn có thể sử dụng những tính năng nào.

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

add_action( 'after_setup_theme', 'my_theme_setup' );
function my_theme_setup() {
    // 让主题支持自动生成<title>标签
    add_theme_support( 'title-tag' );
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5的语义化标记
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo', array(
        'height'      => 100,
        'width'       => 400,
        'flex-height' => true,
        'flex-width'  => true,
    ) );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'menu-1' => esc_html__( '主导航', 'my-custom-theme' ),
    ) );
}

Quản lý các script và bảng định dạng (style sheets)

Việc thêm các tệp CSS và JavaScript vào đúng hàng đợi (queue) là một yêu cầu cơ bản trong quá trình phát triển chuyên nghiệp. Bạn nên sử dụng các công cụ hoặc quy trình được thiết kế riêng để thực hiện điều này một cách hiệu quả và chính xác.wp_enqueue_scriptsHãy sử dụng các “hook” (các công cụ hoặc lệnh được định nghĩa sẵn) để thực hiện công việc này, thay vì viết mã trực tiếp vào template.Thẻ:

add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
function my_theme_scripts() {
    // 引入主题的主样式表
    wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get('Version') );

// 引入自定义的JavaScript文件
    wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), wp_get_theme()->get('Version'), true );

// 如果需要使用jQuery（通常由WordPress核心提供），可以声明依赖
    wp_enqueue_script( 'my-theme-custom', get_template_directory_uri() . '/js/custom.js', array('jquery'), wp_get_theme()->get('Version'), true );
}

Khu vực đăng ký tiện ích nhỏ (Registration for Small Tools)

Các công cụ nhỏ trong thanh bên cạnh hoặc phần chân trang cũng cần được bổ sung.functions.phpĐăng ký tại đây. Sử dụng nó.widgets_initHook:

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

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

Sau khi đăng ký, bạn sẽ có thể sử dụng các công cụ có sẵn trong các mẫu (templates) để thực hiện công việc của mình.dynamic_sidebar( 'sidebar-1' )或get_sidebar()Hàm đã được gọi để thực hiện nó.

Phát triển nâng cao và tùy chỉnh chức năng (Advanced Development and Customization Features)

Sau khi cấu trúc chủ đề cơ bản được xây dựng xong, bạn có thể sử dụng các công nghệ nâng cao hơn để nâng cao mức độ chuyên nghiệp và tính linh hoạt của nó.

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

Mẫu trang (page template) cho phép bạn tạo ra một bố cục độc đáo cho từng trang cụ thể. Hãy tạo một tệp tin, ví dụ như…page-fullwidth.phpThêm ghi chú tên mẫu sau đây ở phần đầu của tệp tin:

<?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, bạn có thể chọn mẫu “Trang toàn màn hình” này trong phần “Thuộc tính trang”.

Triển khai hỗ trợ tùy chỉnh chủ đề

WordPress Customizer cung cấp cho người dùng một giao diện cấu hình với chức năng xem trước (preview) theo thời gian thực. Bạn có thể sử dụng nó để…customize_registerCác công cụ như “hook” cho phép thêm các tùy chọn cấu hình một cách dễ dàng; ví dụ như việc thêm văn bản bản quyền vào phần chân trang (footer).

add_action( 'customize_register', 'my_theme_customize_register' );
function my_theme_customize_register( $wp_customize ) {
    // 添加一个设置项
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站. 保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 支持实时预览
    ) );

// 为设置项添加一个控件（输入框）
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'my-custom-theme' ),
        'section'  => 'title_tagline', // 放到“站点身份”区域
        'type'     => 'text',
    ) );
}

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

Đưa công việc phát triển giao diện người dùng (front-end) theo phong cách hiện đại vào quy trình làm việc

Đối với các chủ đề phức tạp, việc quản lý thủ công các tệp CSS và JS sẽ trở nên kém hiệu quả. Bạn có thể xem xét việc áp dụng Node.js và các công cụ xây dựng như Webpack hoặc Vite vào dự án của mình để gói các tài nguyên, biên dịch mã Sass/Less, tự động thêm các tiền tố cần thiết cho trình duyệt, nén mã nguồn, v.v. Thông thường, bạn sẽ cần tạo các tệp cấu hình tương ứng trong thư mục gốc của chủ đề (theme root directory).package.jsonTạo và xây dựng các tệp cấu hình, sau đó xuất tệp được tạo ra cuối cùng vào thư mục cụ thể của chủ đề (ví dụ:/assets/dist/Trong đó, sau đó…functions.phpBạn cần nhập các tệp đã được xây dựng (builded files) vào đây.

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress bắt đầu bằng việc hiểu rõ cấu trúc các mẫu (templates) cốt lõi và cấu trúc tệp tin của hệ thống, sau đó từng bước xây dựng các tệp mẫu, tích hợp các chức năng cần thiết, và cuối cùng hoàn thiện chúng thông qua các tùy chỉnh nâng cao và sử dụng các công cụ hỗ trợ để đạt được mức độ chuyên nghiệp hóa tối đa. Yếu tố then chốt là phải tuân thủ các tiêu chuẩn lập trình và thực hành tốt nhất của WordPress, chẳng hạn như sử dụng đúng các hàm hook (hook functions), đưa các đoạn mã và phong cách thiết kế vào đúng quy trình xử lý (queue), và sử dụng các thành phần mẫu (template components) để giữ cho mã nguồn gọn gàng và dễ bảo trì. Quá trình này bindex.php和style.cssBắt đầu, thêm từng bước một.header.php、footer.php, trongfunctions.phpTừ việc kích hoạt các tính năng cốt lõi, đến việc tạo ra các mẫu thiết kế tùy chỉnh và các tùy chọn điều chỉnh, mỗi bước đều giúp cho chủ đề (theme) của bạn trở nên mạnh mẽ và dễ sử dụng hơn. Sau khi nắm vững những kỹ năng này, bạn sẽ có thể tạo ra những chủ đề WordPress chất lượng cao, phù hợp với mọi nhu cầu khác nhau.

FAQ 常见问题

Phát triển chủ đề WordPress có bắt buộc phải thành thạo PHP không?

Đúng vậy, PHP là ngôn ngữ cơ bản để phát triển các giao diện (theme) cho WordPress. Bạn cần ít nhất nắm vững ngữ pháp PHP cơ bản và hiểu cách sử dụng các hàm cốt lõi của WordPress (như…).the_post()、the_title()Các biến cục bộ (local variables) và biến toàn cục (global variables)$post) Tương tác giữa người dùng và trang web, cũng như cách sử dụng các hook (khóa lệnh) liên quan đến hành động (action hooks) và các hook liên quan đến bộ lọc (filter hooks). HTML và CSS là những công cụ cần thiết để xây dựng giao diện trang web, trong khi JavaScript được sử dụng để thực hiện các chức năng tương tác.

Tại sao thay đổi về chủ đề của tôi không hiển thị sau khi tôi làm mới trang web?

Điều này thường xảy ra do lỗi đệm (cache) của trình duyệt hoặc lỗi đệm các đối tượng trong WordPress. Trước hết, hãy thử làm mới trang web bằng cách nhấn Ctrl+F5 (hoặc Cmd+Shift+R) trên trình duyệt. Nếu vấn đề vẫn không được giải quyết, hãy kiểm tra xem bạn có đang sử dụng phiên bản WordPress mới nhất không, hoặc xem có bất kỳ cài đặt nào trong WordPress gây ảfunctions.phpPhiên bản mới đã được triển khai, trong đó có việc áp dụng các công cụ kiểm soát phiên bản (version control).wp_get_theme()->get('Version')Vui lòng đảm bảo rằng mọi thay đổi đều được cập nhật sau mỗi lần chỉnh sửa.style.cssPhiên bản số trong phần tiêu đề tệp (file header). Ngoài ra, hãy kiểm tra xem mã của bạn có chứa lỗi ngữ pháp nào không.functions.phpLệnh thực thi tệp đã thất bại.

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

Bạn cần thực hiện hai việc: thứ nhất là “quốc tế hóa” (internationalization), và thứ hai là “địa phương hóa” (localization). Trước hết, tại tất cả các đoạn văn bản cần được dịch trong chủ đề (theme), hãy sử dụng các hàm dịch của WordPress, chẳng hạn như…esc_html__(‘文本’, ‘my-text-domain’)或_e(‘文本’, ‘my-text-domain’)Và đảm bảo rằng…style.cssĐược định nghĩa trong…Text DomainHãy đảm bảo rằng nội dung của các trường văn bản ở đây phù hợp với yêu cầu. Sau đó, sử dụng các công cụ như Poedit để quét nội dung của chủ đề (theme) bạn đang sử dụng, và công cụ này sẽ tạo ra các tệp cần thiết..pot“Translate the template file; the translator can use it to create the corresponding language versions.”.povà đã biên dịch.moTệp tin được đặt trong phần nội dung chính của chủ đề (theme content)./languages/Nó sẽ có hiệu lực ngay trong thư mục đó.

Làm thế nào để phân chia chức năng giữa các chủ đề (themes) và các tiện ích mở rộng (plugins) một cách hợp lý?

Một nguyên tắc đơn giản là: Chủ đề quy định giao diện và cách trình bày của trang web, trong khi các tiện ích mở rộng (plugin) quy định chức năng và hành vi của trang web. Cụ thể hơn, những yếu tố liên quan trực tiếp đến trình bày thị giác (như bố cục, màu sắc, phông chữ, mẫu thiết kế) nên được đặt trong chủ đề. Ngược lại, những chức năng có thể tồn tại độc lập với chủ đề (như biểu mẫu liên hệ, tối ưu hóa SEO, thương mại điện tử, lưu trữ dữ liệu để tăng tốc hiệu suất) nên được tạo thành các tiện ích mở rộng. Nhờ đó, khi người dùng thay đổi chủ đề, các chức năng cốt lõi vẫn được giữ nguyên, từ đó nâng cao tính linh hoạt và khả năng tái sử dụng mã nguồn.