Từ con số không đến sự thành thạo: Hướng dẫn toàn diện và bài học thực hành về phát triển theme WordPress

Các khái niệm cốt lõi và nền tảng trong phát triển chủ đề WordPress

Trước khi bắt đầu viết bất kỳ đoạn mã nào, việc hiểu rõ các khái niệm cốt lõi của một chủ đề WordPress là điều vô cùng quan trọng. Một chủ đề WordPress về cơ bản là một tập hợp các tệp tin, và những tệp tin này định nghĩa giao diện trang web, bao gồm cả bố cục trang, màu sắc, kiểu chữ, v.v. Nó tuân theo một cấu trúc thư mục nhất định và tương tác với hệ thống cốt lõi của WordPress để hiển thị nội dung một cách dinh hồi.

Trọng tâm của chủ đề này là các tệp mẫu (template files). Những tệp này, được viết bằng PHP, quy định cách hiển thị các loại nội dung khác nhau. Ví dụ,index.phpĐây là tệp mẫu chính (main template file), được sử dụng khi WordPress không tìm thấy mẫu cụ thể nào khác. Nó là tệp dự phòng mặc định. Trang chủ (homepage) thường được tạo dựng dựa trên tệp mẫu này.home.php或front-page.phpQuản lý bài viết đơn lẻsingle.phpKiểm soát, trong khi trang web được tạo bởi…page.phpKiểm soát.

Một tập tin quan trọng khác làstyle.cssNó không chỉ chứa tất cả các bảng định dạng (style sheets) của chủ đề, mà còn đóng vai trò như “chứng minh thư” của chủ đề đó. Phần ghi chú ở đầu tệp (header comments) bao gồm các thông tin quan trọng về chủ đề như tên, tác giả, mô tả, và phiên bản. Nếu thiếu những thông tin này, chủ đề sẽ không thể được sử dụng đúng cách.style.cssWordPress sẽ không thể nhận diện được chủ đề (theme) của bạn. Cấu trúc cơ bản của nó như sau:

Đọc thêm Hướng dẫn Toàn diện Phát triển Chủ đề WordPress: Khóa học Thực hành Từ Cơ bản đến Nâng cao。

/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个为学习而创建的WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Xây dựng cấu trúc tệp chủ đề đầu tiên của bạn

Để tạo ra một chủ đề (theme) có chức năng đầy đủ và cấu trúc rõ ràng, bạn cần tuân theo các quy ước về thư mục và tổ chức tệp tin chuẩn. Một chủ đề cơ bản nhưng hoàn chỉnh có thể được xây dựng từ một vài tệp tin cốt lõi.

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

Ngoài những điều đã nêu ở trên…index.php和style.cssNgoài ra, một chủ đề (theme) mạnh mẽ thường bao gồm các tệp tin chính sau:
1. functions.phpĐây là “bộ não” của chủ đề (theme), được sử dụng để thêm các tính năng liên quan đến chủ đề, menu đăng ký, thanh bên (khu vực Widget), tải các tập tin script và phong cách (styles), v.v. Đây không phải là một tệp mẫu (template file), nhưng mọi chủ đề đều nên chứa tệp này.
2. header.phpĐây là cấu trúc HTML bao gồm phần đầu của tài liệu trang web, menu điều hướng, và phần bắt đầu của trang.
3. footer.phpChứa thông tin bản quyền, các tập lệnh (script) và các thẻ kết thúc (end tags) ở phía cuối trang.
4. sidebar.phpĐịnh nghĩa cấu trúc HTML cho thanh bên (sidebar).
5. page.php 和 single.phpChúng được sử dụng riêng biệt để hiển thị các trang tĩnh và từng bài viết cụ thể.

Một quy trình phát triển hiệu quả bao gồm việc tạo ra tệp mẫu chính (main template file).index.phpĐể gọi các tệp này, hãy sử dụng các hàm mẫu tích hợp sẵn của WordPress:

<?php get_header(); ?>

<main id="main">
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 显示内容
            the_title( &#039;<h1>', '</h1>' );
            the_content();
        endwhile;
    else :
        echo '<p>没有找到内容。</p>';
    endif;
    ?&gt;
</main>

在functions.phpTrong đó, bạn có thể thực hiện điều đó thông qua…add_actionCác công cụ hỗ trợ việc đăng ký tính năng mới, chẳng hạn như việc thêm khả năng hiển thị ảnh thu nhỏ (hình ảnh đại diện) cho các bài viết:

<?php
// 为主题添加基本支持
function mytheme_setup() {
    // 启用文章和页面上的“特色图像”功能
    add_theme_support( 'post-thumbnails' );
    // 添加对HTML5标记的支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 注册一个主导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Sử dụng cấu trúc phân cấp của các mẫu (templates) và hệ thống lặp (loop systems)

Cấu trúc phân cấp của các mẫu (templates) trong WordPress là một hệ thống quy tắc xác định file mẫu nào sẽ được sử dụng để hiển thị nội dung cho một trang web cụ thể. Việc hiểu rõ mối quan hệ phân cấp này là yếu tố then chốt trong việc phát triển các giao diện (themes) nâng cao; nó cho phép bạn tạo ra những bố cục (layouts) được tùy chỉnh chặt chẽ cho các phần khác nhau của trang web.

Đọc thêm Học cách phát triển các chủ đề (theme) cho WordPress từ đầu: Tạo ra những trang web cá nhân hóa。

Khi người dùng truy cập trang web của bạn, WordPress sẽ tìm kiếm tệp mẫu (template file) phù hợp dựa trên loại nội dung hiện tại (chẳng hạn như bài viết trên blog, trang web, danh mục bài viết, v.v.). Thứ tự tìm kiếm được thực hiện theo nguyên tắc từ cụ thể đến tổng quát. Ví dụ, đối với một trang có ID là 5, WordPress sẽ tìm kiếm theo thứ tự sau:
1. page-5.php (Dành riêng cho ID của trang này)
2. page-sample-page.php (Sử dụng tên gọi khác của trang web)
3. page.php (Mẫu trang chung)
4. singular.php (Mẫu nội dung đơn chung)
5. index.php (Tối ưu hóa cuối cùng)

Trọng tâm của toàn bộ nội dung được trình bày là “Vòng lặp WordPress” (WordPress Loop). Đây là một đoạn mã PHP dùng để lặp qua tập hợp kết quả của truy vấn hiện tại và hiển thị từng bài viết hoặc trang. Cấu trúc cơ bản của vòng lặp này khá giống nhau trong mọi tệp mẫu (template file).

<?php
if ( have_posts() ) :
    while ( have_posts() ) : the_post();
        // 当前文章/页面的内容在这里输出
        the_title( &#039;<h2 class="entry-title"><a href="/vi/' . esc_url( get_permalink() ) . '/">', '</a></h2>' );
        the_excerpt(); // 或使用 the_content()
    endwhile;
    the_posts_navigation(); // 文章导航链接
else :
    // 如果没有找到任何内容
    _e( '抱歉，没有找到符合您要求的内容。', 'textdomain' );
endif;
?&gt;

Để nâng cao mức độ mô-đun hóa và khả năng bảo trì của các mẫu (templates), WordPress khuyến khích người dùng sử dụng các công cụ và phương pháp phù hợp.get_template_part()Đây là một hàm (function) giúp bạn tách các đoạn mã được sử dụng chung (chẳng hạn như trích dẫn bài viết, thông tin meta của bài viết) ra thành các tệp riêng biệt, từ đó có thể tái sử dụng chúng một cách dễ dàng.

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

// 在 archive.php 或 index.php 中
while ( have_posts() ) : the_post();
    get_template_part( 'template-parts/content', get_post_format() );
endwhile;

Đoạn mã này sẽ cố gắng tải dữ liệu.template-parts/content-{post-format}.php(ví dụcontent-video.phpNếu không tồn tại, hãy tải nó.template-parts/content.php。

Tính năng nâng cao: Bộ tùy chỉnh chủ đề và các trường dữ liệu tùy chỉnh

Việc phát triển các giao diện WordPress hiện đại không chỉ tập trung vào khía cạnh trình bày (display) mà còn chú trọng đến việc cung cấp cho người dùng những tùy chọn tùy chỉnh trực quan. Công cụ Tùy chỉnh WordPress (WordPress Customizer) cung cấp một giao diện xem trước (preview) theo thời gian thực, giúp người dùng có thể điều chỉnh cài đặt giao diện mà không cần phải can thiệp vào mã nguồn.

在functions.phpbạn có thể sử dụng$wp_customizeBạn có thể sử dụng các đối tượng để thêm các thiết lập, điều khiển (controls) và khối nội dung (blocks) vào trang web. Ví dụ, để thêm tùy chọn hiển thị văn bản bản quyền ở phần chân trang (footer):

Đọc thêm Từ con số không đến con số một: Hướng dẫn nắm vững các kỹ năng cốt lõi và thực hành trong việc phát triển giao diện WordPress hiện đại。

function mytheme_customize_register( $wp_customize ) {
    // 添加一个新的设置
    $wp_customize->add_setting( 'mytheme_footer_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field',
        'transport'         => 'postMessage', // 实现实时预览
    ) );

// 添加一个控件来编辑这个设置
    $wp_customize->add_control( 'mytheme_footer_text', array(
        'label'    => __( '页脚版权文本', 'my-first-theme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Sau đó, trongfooter.phpTrong đó, bạn có thể thực hiện điều đó thông qua…get_theme_mod()Hàm trả về giá trị này:

echo esc_html( get_theme_mod( 'mytheme_footer_text', '默认版权文本' ) );

Đối với các cấu trúc nội dung phức tạp hơn, metadata của bài viết (các trường tùy chỉnh) và việc mở rộng hệ thống phân loại là những công cụ rất hữu ích. Bạn có thể sử dụng các plugin như Advanced Custom Fields (ACF) hoặc các hàm gốc của WordPress để thực hiện điều này. Ví dụ, bạn có thể thêm một trường “Thời gian đọc” cho bài viết của mình.

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

// 在 single.php 中显示自定义字段
$reading_time = get_post_meta( get_the_ID(), 'reading_time_minutes', true );
if ( $reading_time ) {
    echo '<span class="reading-time">Thời gian đọc: ''. intval($reading_time).’ phút</span>';
}

Để xây dựng những trang web có tính chất động hơn, việc tạo ra các mẫu trang tùy chỉnh là một thủ thuật phổ biến. Bạn chỉ cần thêm một khối chú thích đặc biệt ở đầu tệp PHP, và mẫu đó sẽ xuất hiện trong danh sách thả xuống “Mẫu” (Templates) trên trang web.

<?php
/*
Template Name: 全宽页面模板
*/
get_header();
?>
<!-- 你的全宽内容布局代码 -->
<?php get_footer(); ?>

Tóm lại

Việc phát triển các chủ đề (themes) cho WordPress là một kỹ năng tổng hợp, kết hợp giữa thiết kế, công nghệ phía trước (front-end) và logic phía sau (back-end). Để bắt đầu, điều cơ bản nhất là bạn cần hiểu rõ cấu trúc và hoạt động của hệ thống WordPress, cũng như các thành phần cốt lõstyle.css和index.phpKhi bắt đầu với tệp tin này, việc dần dần nắm vững các quy tắc về cấu trúc các mẫu (templates) và hệ thống lặp (loop systems) là nền tảng quan trọng để xây dựng những chủ đề (themes) có chức năng hoạt động hiệu quả. Bạn có thể đạt được điều này bằng cách mô-functions.php和get_template_part()Các hàm (functions) có thể nâng cao đáng kể mức độ bảo trì (maintainability) và khả năng tái sử dụng (reusability) của mã nguồn.

Trong giai đoạn nâng cao, các công cụ tùy chỉnh chủ đề (theme customizers) tích hợp sâu có thể mang đến cho người dùng trải nghiệm thiết lập thân thiện và tức thì. Việc sử dụng linh hoạt các trường dữ liệu tùy chỉnh (custom fields) và mẫu trang (page templates) giúp tạo ra cấu trúc nội dung phù hợp với những yêu cầu phức tạp. 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 sẽ đảm bảo rằng chủ đề của bạn an toàn, hiệu quả và tương thích tốt với toàn bộ hệ sinh thái WordPress. Đây chính là yếu tố then chốt giúp bạn nâng cao kỹ năng phát triển của mình từ mức “có thể sử dụng được” lên mức “chuyên nghiệp”.

FAQ 常见问题

Sự khác biệt giữa theme (giao diện) và plugin của WordPress là gì?

Chủ đề chính là yếu tố quy định giao diện và hiển thị trang web ở phía người dùng (front-end), bao gồm bố cục trang, màu sắc, cách trình bày nội dung và các yếu tố thị giác khác. Nó tương tác trực tiếp với hệ thống các mẫu (templates) của WordPress thông qua các tệp tin chứa thông tin thiết lập chủ đề.

Các plugin được sử dụng để mở rộng chức năng của trang web, cho phép thêm những tính năng mới mà không làm thay đổi giao diện của trang web. Những tính năng này có thể bao gồm biểu mẫu liên hệ, công cụ tối ưu hóa cho công cụ tìm kiếm (SEO), chức năng thương mại điện tử, v.v. Một trang web chỉ có thể kích hoạt một giao diện (theme) tại một thời điểm, nhưng có thể cài đặt và kích hoạt nhiều plugin khác nhau.

Phương pháp đúng để đăng ký kiểu và tập lệnh trong functions.php là gì?

Cách đúng là sử dụng…wp_enqueue_scripts“Hook” (khóa móc). Điều này giúp đảm bảo rằng các mối phụ thuộc được xử lý đúng cách và tránh tình trạng tải lại dữ liệu không cần thiết. Dưới đây là một ví dụ tiêu chuẩn:

function mytheme_enqueue_assets() {
    // 注册并排队主样式表
    wp_enqueue_style( 'mytheme-main-style', get_stylesheet_uri(), array(), '1.0.0' );
    // 注册并排队一个自定义JavaScript文件
    wp_enqueue_script( 'mytheme-custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery'), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_enqueue_assets' );

Tuyệt đối không được sử dụng trực tiếp các đoạn mã trong tệp tin mẫu (template files).link或scriptViệc cố định các tham số (tag) trong mã nguồn để tải các tài nguyên (resource) không phù hợp với các thực hành tốt nhất của WordPress (best practices), và có thể dẫn đến xung đột (conflict) hoặc vấn đề về hiệu năng (performance).

Thế nào là chủ đề con (subtopic)? Tại sao và làm thế nào để sử dụng nó?

Chủ đề con (sub-topic) là một chủ đề phụ thuộc vào một chủ đề khác (gọi là chủ đề cha – parent-topic). Nó cho phép bạn thay đổi hoặc mở rộng các chức năng và kiểu dáng của chủ đề cha mà không cần phải chỉnh sửa trực tiếp các tệp tin thuộc về chủ đề cha. Lợi ích của cách làm này là khi chủ đề cha được cập nhật, những thay đổi tùy chỉnh của bạn (được thực hiện trong chủ đề con) sẽ không bị xóa đi, giúp đảm bảo tính an toàn và dễ dàng trong việc bảo trì.

Việc tạo một chủ đề con (sub-topic) rất đơn giản. Trước tiên, hãy…/wp-content/themes/Hãy tạo một thư mục mới trong thư mục hiện tại (ví dụ:…)mytheme-childSau đó, hãy tạo một thứ (đối tượng, tài liệu, v.v.) bên trong nó.style.cssĐối với tệp tin này, phần chú thích ở đầu (header) phải bao gồm những thông tin cần thiết.Template:Bạn có thể chỉ định tên thư mục chủ đề cha bằng cách sử dụng các dòng lệnh tương ứng.

/*
Theme Name: 我的主题子主题
Template: my-first-theme
*/

Sau đó, bạn có thể tiếp tục làm việc với các chủ đề con (subtopics)…style.cssBạn có thể thêm các quy tắc định dạng (style rules) vào tệp tin đó, hoặc tạo một tệp tin mẫu (template file) có cùng tên để thay thế tệp tin mẫu tương ứng trong chủ đề cha (parent theme).

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

Việc làm cho các chủ đề của bạn hỗ trợ quốc tế hóa (i18n) và địa phương hóa (localization) là một bước quan trọng trên con đường trở thành một nhà phát triển chuyên nghiệp. Bạn cần sử dụng các hàm địa phương hóa mà WordPress cung cấp để bao bọc tất cả các chuỗi văn bản được hiển thị trước người dùng ở phía trước (frontend).

Trước hết, hãy sử dụng phương pháp này ở tất cả các chuỗi có thể được dịch.__()(Dùng cho giá trị trả về) hoặc_e()(Dùng để hiển thị kết quả trực tiếp của hàm) và thiết lập một trường văn bản (Text Field).functions.phptrong đó, sử dụngload_theme_textdomain()Hàm được sử dụng để tải các tệp dữ liệu dịch.

// 在 functions.php 中
function mytheme_load_textdomain() {
    load_theme_textdomain( 'my-first-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'mytheme_load_textdomain' );

// 在模板文件中使用
_e( '阅读更多', 'my-first-theme' );
$heading = __( '最新文章', 'my-first-theme' );

Sau đó, bạn có thể sử dụng các công cụ như Poedit để quét các chuỗi ký tự trong tệp tin chủ đề (theme file) và tạo ra dữ liệu cần thiết..potTạo các tệp tin và thiết lập các phiên bản dành cho các ngôn ngữ khác nhau..po和.moTệp tin được đặt trong phần nội dung chính của chủ đề (theme content)./languages/thư mục chính xác.