Hướng dẫn nhập môn phát triển theme WordPress: Xây dựng theme đầu tiên của bạn từ con số không

Các bước chuẩn bị và cấu hình môi trường

Trước khi bắt đầu viết mã, bạn cần một môi trường phát triển phù hợp. Môi trường phát triển local (trên máy tính cá nhân) cho phép bạn thực hiện các thao tác kiểm thử và gỡ lỗi mà không ảnh hưởng đến trang web trên mạng. Chúng tôi khuyến nghị sử dụng các gói phần mềm tích hợp như XAMPP, MAMP hoặc Local by Flywheel, vì chúng có thể cài đặt sẵn Apache, MySQL/MariaDB và PHP chỉ với một cú nhấp chuột.

Hãy đảm bảo rằng phiên bản PHP của bạn là 7.4 trở lên – đây là phiên bản tối thiểu được khuyến nghị bởi WordPress. Bạn cũng cần một trình soạn thảo mã, chẳng hạn như Visual Studio Code, Sublime Text hoặc PHPStorm; những công cụ này sẽ cung cấp chức năng hiển thị mã nguồn theo cú pháp và gợi ý mã (code hints), giúp nâng cao đáng kể hiệu quả trong quá trình phát triển.

Cấu trúc cơ bản của một chủ đề WordPress

Về bản chất, một chủ đề WordPress là một thư mục nằm trong wp-content/themes/ Thư mục nằm trong danh mục đó. Tên của thư mục này chính là mã định danh cho chủ đề của bạn; bạn nên sử dụng chữ cái viết thường, số và dấu gạch nối, và không được chứa khoảng trắng. Ví dụ, bạn có thể tạo một thư mục có tên là… my-first-theme Thư mục đó.

Trong thư mục này, cần có ít nhất hai tệp tin cốt lõi:style.css 和 index.php。style.css Không chỉ đơn thuần là các bảng định dạng (style sheets), vai trò quan trọng hơn của chúng là cung cấp thông tin meta về chủ đề (theme metadata). Những thông tin này sẽ được hiển thị trên trang “Nhìn” (Appearance) -> “Chủ đề” (Themes) trong giao diện quản trị WordPress.

Viết tiêu đề thông tin chủ đề (Write the topic information header)

在 style.css Ở phần đầu của tệp tin, bạn cần thêm một khối chú thích cụ thể để định nghĩa thông tin về chủ đề. Đây là một ví dụ:

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: My First Theme
Theme URI: https://example.com/my-first-theme/
Author: Your Name
Author URI: https://example.com/
Description: 一个简洁、轻量级的入门级 WordPress 主题，用于学习主题开发。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

Trong đó,Text Domain Được sử dụng cho mục đích hỗ trợ đa ngôn ngữ (internationalization), tên tệp này phải trùng khớp với tên thư mục chứa các tài liệu thiết kế (theme folder) của bạn.index.php Tệp tin này chính là mẫu mặc định cho chủ đề (theme), đồng thời cũng là mẫu dự phòng cho tất cả các trang web. Ban đầu, bạn có thể bắt đầu bằng cách viết cấu trúc HTML đơn giản vào tệp này để thử nghiệm.

Tệp mẫu cốt lõi và cấu trúc phân cấp mẫu

WordPress sử dụng một hệ thống quy tắc được gọi là “Cấu trúc phân cấp của các mẫu” (Template Hierarchy) để quyết định nên sử dụng tệp mẫu nào để hiển thị nội dung cho một 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 các giao diện (theme) cho WordPress. Ý tưởng cơ bản là: WordPress sẽ bắt đầu tìm kiếm từ tệp mẫu cụ thể nhất; nếu không tìm thấy, nó sẽ lùi về tệp mẫu có tính chất chung hơn, và cuối cùng sẽ lùi về tệp mẫu cơ bản nhất (default template). index.php。

Đọc thêm Bắt đầu phát triển theme WordPress: Xây dựng theme tùy chỉnh đầu tiên từ con số 0。

Các tệp mẫu thường được sử dụng và mục đích của chúng

• header.phpPhần tiêu đề của trang web thường bao gồm thông tin về khu vực, biểu tượng của trang web, và menu điều hướng chính.
• footer.phpPhần chân trang của trang web thường chứa thông tin bản quyền, các liên kết hỗ trợ, v.v.
• sidebar.phpKhu vực bên cạnh (sidebar area).
• index.phpMẫu chính (Main Template) đóng vai trò là nguồn dữ liệu dự phòng cuối cùng cho tất cả các trang web.
• single.php: dùng để hiển thị một bài viết blog đơn lẻ.
• page.phpDùng để hiển thị một trang cụ thể (chẳng hạn như “Về chúng tôi”, “Liên hệ”).
• archive.phpDùng để hiển thị danh sách các bài viết đã được lưu trữ (theo thể loại, thẻ, tác giả, ngày lưu trữ).
• front-page.phpDùng để định nghĩa trang chủ của trang web (nếu đã thiết lập một trang tĩnh làm trang chủ).
• home.phpĐược sử dụng để hiển thị trang chỉ mục các bài viết trên blog (nếu đã thiết lập trang chủ tĩnh, mẫu này sẽ hiển thị danh sách các bài viết mới nhất).
• 404.phpDùng để hiển thị trang lỗi “404 Không tìm thấy”.
• search.php"": Dùng để hiển thị kết quả tìm kiếm.",
• functions.phpĐây không phải là một tệp mẫu (template file), mà là tệp chứa các chức năng (function file) của chủ đề (theme), được sử dụng để thêm các tính năng mới, đăng ký các mục trong menu, bổ sung các thành phần vào thanh bên cạnh (sidebar), v.v.

Template Tags and Loops

Trong các tệp mẫu (template files), bạn thường xuyên sử dụng các “thẻ mẫu” (template tags). Đây là những hàm PHP do WordPress cung cấp, được dùng để hiển thị nội dung động, chẳng hạn như… bloginfo('name') Xuất tiêu đề trang web,the_title() Xuất tiêu đề bài viết.

Khái niệm cốt lõi nhất là “vòng lặp WordPress” (WordPress Loop). Đây là một cấu trúc mã PHP dùng để kiểm tra xem trang hiện tại có bài viết (hoặc danh sách bài viết) nào cần được hiển thị hay không, sau đó lặp lại quá trình hiển thị chúng. Một ví dụ về vòng lặp cơ bản như sau:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div class="entry-content">
        <?php the_content(); ?>
    </div>
<?php endwhile; else : ?>
    <p><?php _e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>

这段代码的意思是：如果有文章，就循环（while）每一篇，在循环中显示文章标题和内容；如果没有文章，则显示一条错误信息。`_e()` 是一个用于国际化的翻译函数。

Tích hợp chức năng và kiểu dáng cho giao diện

functions.php Đây là “bộ não” của chủ đề (theme) bạn; tất cả các chức năng không thuộc về quá trình render của template (mẫu hiển thị) đều nên được thêm vào đây. Tệp tin này sẽ được tự động tải vào khi chủ đề được khởi tạo (initiated).

Chức năng đăng ký chủ đề

在 functions.php Trong WordPress, bạn có thể mở rộng chức năng của trang web bằng các “hook” (các điểm kết nối trong hệ thống) được cung cấp bởi nền tảng này, chẳng hạn như Action Hooks và Filter Hooks. Đầu tiên, bạn thường cần tuyên bố rằng giao diện (theme) của mình hỗ trợ một số chức năng nhất định. Ví dụ, để thêm ảnh thu nhỏ (thumbnail) cho bài viết hoặc hỗ trợ các menu trong 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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面使用“特色图像”
    add_theme_support( 'post-thumbnails' );

// 注册导航菜单位置
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-first-theme' ),
        'footer'  => __( 'Footer Menu', 'my-first-theme' ),
    ) );

// 让 WordPress 管理文档标题标签
    add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
?>

`add_action()` 将你的函数 my_first_theme_setup Được cài đặt và sử dụng trên WordPress after_setup_theme Trên “hook” này, hãy đảm bảo rằng hành động được thực hiện vào thời điểm thích hợp.

Nhập các định dạng (styles) và mã nguồn (scripts)

Các chủ đề hiện đại nên đảm bảo rằng các tệp biểu định phong cách (CSS) và JavaScript được tải xuống và sử dụng một cách chính xác. wp_enqueue_style() 和 wp_enqueue_script() Hãy thêm các hàm vào hàng đợi (queue) thay vì viết trực tiếp các thẻ `` hoặc `` trong tệp template. Lợi ích của cách làm này là giúp quản lý các phụ thuộc giữa các thành phần của trang web, tránh tình trạng tải lại cùng một nội dung nhiều lần, và tuân thủ các thực hành tốt nhất của WordPress.

function my_first_theme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri() );

// 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Hàm `getstylesheet_uri()` trỏ đến tệp định dạng CSS (Cascading Style Sheets) của bạn. style.css Hàm `get_template_directory_uri()` trả về địa chỉ URL của thư mục chứa các mẫu (templates) cho chủ đề (theme) hiện tại.

Đọc thêm Hướng dẫn nhập môn phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh của bạn từ con số không。

Xây dựng bố cục trang và các thành phần mẫu (page layout and template components)

Một trang web tiêu chuẩn thường bao gồm phần đầu trang (header), nội dung chính (body) và phần chân trang (footer). WordPress khuyến khích bạn tách các thành phần có thể được sử dụng lại thành các tệp riêng biệt, sau đó đưa chúng vào mẫu trang chính (main template) thông qua các hàm cụ thể.

Split template components

Tạo ra header.php、footer.php 和 sidebar.php… trong… header.php Trong đó, bạn cần bao gồm đầy đủ phần `` và kết thúc bằng một bộ chứa đầu rõ ràng (như thẻ ``). Trong footer.php Trong đó, nội dung thường được kết thúc bằng các thẻ `` và ``.

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

Assemble the complete page.

Trong mẫu trang (ví dụ: index.php、single.phpTrong đó, bạn có thể sử dụng các hàm sau để đưa các thành phần này vào:

<?php get_header(); ?>

<main id="primary" class="site-main">
    <?php
    // 这里放置 WordPress 循环
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

`get_header()`、`get_sidebar()` 和 `get_footer()` 会分别加载对应的模板文件。你还可以使用 `get_template_part()` 函数来加载更细粒度的模板部件，例如 `get_template_part( 'template-parts/content', 'page' );` 会尝试加载 template-parts/content-page.php Nếu tệp không tồn tại, hãy tải nó về. template-parts/content.phpĐiều này đã giúp nâng cao đáng kể mức độ tái sử dụng và khả năng bảo trì của mã nguồn.

Tóm lại

Việc xây dựng một theme WordPress từ đầu là một quá trình học tập có hệ thống. Đầu tiên, bạn cần thiết lập môi trường phát triển địa phương (local development environment) đúng cách và hiểu rõ cấu trúc các tệp cơ bản của một theme. Điều quan trọng nhất là nắm vững cấu trúc phân cấp của các template trong WordPress, vì nó quy định cách các nội dung khác nhau được hiển thị trên trang web. functions.php Đối với các tệp tin liên quan đến thiết kế giao diện (theme files), bạn có thể bổ sung những tính năng mạnh mẽ và đặc biệt cho chủ đề (theme) của mình, đồng thời tuân theo các thực hành tốt nhất (best practices) để quản lý phong cách trình bày (styles) và các đoạn mã script (scripts). Cuối cùng, bằng cách chia trang web thành các thành phần như tiêu đề trang (header), chân trang (footer), thanh bên (sidebar) dưới dạng các mẫu (templates), và sử dụng các hàm (functions) mà WordPress cung cấp để kết hợp chúng lại với nhau, bạn có thể tạo ra mã nguồn cho chủ đề có cấu trúc rõ ràng và dễ bảo trì. Bằng cách làm theo những bước này, bạn không chỉ có thể tạo ra chủ đề đầu tiên của mình mà còn xây dựng nền tảng vững chắc cho việc phát triển những dự án phức tạp và chuyên nghiệp hơn trong tương lai.

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

FAQ 常见问题

Có phải để phát triển một theme cho WordPress, bạn nhất định phải biết PHP không?

Đúng vậy, PHP là ngôn ngữ lập trình cốt lõi của WordPress. Các tệp mẫu (templates) của các giao diện (themes) trong WordPress được viết bằng PHP. index.php、page.php) và các tệp chứa thông tin chức năng (function files).functions.phpTất cả đều là các tệp PHP. Bạn cần nắm vững ngữ pháp cơ bản của PHP, các cấu trúc điều kiện, vòng lặp, và cách sử dụng hàm để có thể xuất dữ liệu một cách động và thao tác với dữ liệu trong WordPress.

Phát triển chủ đề, `page.php` và `front-page.php` có gì khác nhau?

page.php Dùng để hiển thị các trang riêng lẻ được tạo trong WordPress, chẳng hạn như “Về chúng tôi”, “Liên hệ” v.v. front-page.php Đây là một mẫu được thiết kế riêng để hiển thị trang “Trang chủ” của trang web. Trong phần “Cài đặt” -> “Đọc” của WordPress, nếu bạn chọn tùy chọn “Một trang tĩnh” và đặt trang “Trang chủ” làm trang tĩnh cụ thể nào đó, WordPress sẽ ưu tiên sử dụng mẫu đó để hiển thị trang chủ. front-page.php Để hiển thị trang này, hãy thực hiện các bước cần thiết. Nếu có bất kỳ thắc mắc nào, vui lòng hỏi. front-page.php Nếu không tồn tại, thì sẽ sử dụng giá trị mặc định. page.php。

为什么推荐使用 `wp_enqueue_style()` 来加载 CSS，而不是直接在 HTML 中写 `` 标签？

Sử dụng wp_enqueue_style() Đây là phương pháp được chính thức khuyến nghị bởi WordPress. Nó đảm bảo rằng bảng định dạng (stylesheet) chỉ được tải một lần duy nhất, ngay cả khi nhiều plugin hoặc theme khác nhau đều trích dẫn cùng một tệp đó. Phương pháp này giúp xử lý các mối phụ thuộc giữa các bảng định dạng một cách dễ dàng (ví dụ: bảng định dạng của bạn có thể phụ thuộc vào một framework cơ bản nào đó). Ngoài ra, nó còn tương thích tốt hơn với hệ thống lưu trữ dữ liệu (cache) và các plugin, đồng thời cho phép các theme con dễ dàng thay thế các thiết lập về giao diện của theme cha.

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

Để một chủ đề hỗ trợ nhiều ngôn ngữ, chủ yếu cần thực hiện hai bước. Đầu tiên, trong tất cả các chuỗi văn bản của chủ đề, hãy sử dụng các hàm dịch của WordPress, chẳng hạn như… ()、_e() 或 esc_html()Và hãy chỉ định vị trí (hoặc thời điểm) mà chúng sẽ được sử dụng. style.css Được định nghĩa trong… Text DomainVí dụ:_e( 'Hello World', 'my-first-theme' )Thứ hai, hãy sử dụng các công cụ như Poedit để quét mã nguồn của chủ đề (theme) bạn đang sử dụng, và công cụ này sẽ tự động tạo ra các tệp cần thiết. .pot các tệp mẫu, từ đó các dịch giả có thể tạo ra các tệp .po và đã biên dịch .mo Tệp tin: Hãy đặt các tệp ngôn ngữ vào thư mục thuộc chủ đề (theme). /languages/ Trong thư mục đó, WordPress sẽ tự động tải các bản dịch tương ứng dựa trên cài đặt ngôn ngữ của trang web.