Hướng dẫn nhập môn phát triển chủ đề WordPress: Xây dựng chủ đề của bạn từ con số 0

Khi bạn quyết định bước sâu vào thế giới WordPress và tự phát triển các chủ đề (theme) cho trang web của mình, điều đó đồng nghĩa với việc bạn đang chuyển từ người tiêu thụ nội dung thành người đặt ra các quy tắc (người quy định cách thức trang web hoạt động). Một chủ đề không chỉ đơn thuần là giao diện bề ngoài của trang web, mà còn là yếu tố then chốt ảnh hưởng đến chức năng, trải nghiệm người dùng và hiệu suất của nó. Hướng dẫn này sẽ hướng dẫn bạn qua toàn bộ quy trình từ việc thiết lập môi trường phát triển cho đến khi chủ đề được phát hành, giúp bạn nắm vững những kiến thức cơ bản nhưng thiết yếu để tạo ra một chủ đề WordPress có cấu trú

Môi trường phát triển và cơ sở hạ tầng

Trước khi bắt đầu viết dòng code đầu tiên, bạn cần một môi trường phát triển phù hợp. Điều này bao gồm một máy chủ cục bộ (chẳng hạn như XAMPP, MAMP hoặc Local by Flywheel), một trình soạn thảo code (như VS Code hoặc PhpStorm), và một phiên bản WordPress đã được cài đặt để thử nghiệm. Việc phát triển trên máy cục bộ cho phép bạn thực hiện các thử nghiệm và gỡ lỗi trong một môi trường an toàn.

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 hai tệp tin cốt lõi:style.css和index.phpTrong đó,style.cssKhông chỉ chứa các định dạng kiểu CSS, điều quan trọng hơn là phần chú thích ở phía trên, nơi mà các thông tin metadata của chủ đề được định nghĩa.

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

Dưới đây là một ví dụ về cấu trúc cơ bản nhất… style.css Ví dụ về phần đầu (Header example):

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
*/

Text DomainĐược sử dụng cho mục đích quốc tế hóa; đây là yếu tố then chốt để tải các tệp dịch về sau.index.phpĐây là tệp mẫu mặc định của chủ đề (theme template file), đóng vai trò là tệp “dự phòng” cho tất cả các trang không được chỉ định mẫu cụ thể. Ban đầu, nó có thể rất đơn giản, chỉ chứa cấu trúc HTML cơ bản nhất và các lệnh gọi hàm của WordPress.

Core template files and hierarchy

WordPress sử dụng hệ thống cấp độ của các mẫu (template hierarchy) để quyết định tải file mẫu nào cho một 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 theme. Hệ thống sẽ bắt đầu tìm kiếm từ file mẫu cụ thể nhất; nếu file đó không tồn tại, nó sẽ lùi lại theo từng cấp độ cho đến khi tìm thấy file mẫu phù hợp để hiển thị nội dung trindex.php。

Ưu tiên của mẫu trang (Page Template Priority)

Đối với trang bài viết blog (đơn lẻ), WordPress sẽ tìm kiếm theo thứ tự sau:single-post-{slug}.php、single-post-{id}.php、single-post.php、single.php，cuối cùng làsingular.phpChỉ khi tất cả những thứ đó đều không tồn tại, thì phương án đó mới được sử dụng.index.phpĐiều này có nghĩa là bạn có thể tạo ra một mẫu riêng biệt, độc đáo cho một bài viết cụ thể.

Mẫu lưu trữ và trang chủ

Đối với trang danh sách bài viết, chẳng hạn như trang chủ của một blog, thứ tự cần được xác định như sau:front-page.php、home.php，sau đó làindex.phpTrong khi đó, trang phân loại và lưu trữ sẽ thực hiện công việc tìm kiếm (tức là sẽ thu thập và phân loại các thông tin cần thiết).category-{slug}.php、category-{id}.php、category.php、archive.phpcuối cùng quay vềindex.phpBằng cách tạo ra những tệp tin này, bạn có thể kiểm soát chính xác cách bố trí và thiết kế của các phần khác nhau trên trang web.

Đọc thêm WordPress Theme Development là gì。

WordPress Theme Functions and Loops

Chức năng của các chủ đề (themes) phụ thuộc rất nhiều vào các hàm PHP và các cấu trúc lặp (loops) mà WordPress cung cấp. Những thứ này đóng vai trò như những “cây cầu” kết nối giữa các mẫu HTML (templates) của bạn với nội dung trong cơ sở dữ liệu (database).

Nhập các tệp chứa thành phần quan trọng (key component files).

Một chủ đề được chuẩn hóa thường sẽ được thể hiện thông qua…functions.phpĐây là tệp tin được sử dụng để quản lý các tính năng một cách tập trung. Tệp tin này được tải tự động khi chủ đề được khởi tạo, và có chức năng thêm hỗ trợ cho chủ đề, đăng ký các mục trong menu, thanh bên cạnh, v.v. Ví dụ, bạn có thể thêm đoạn mã sau vào tệp tin này để kích hoạt tính năng hiển thị ảnh thu nhỏ của bài viết và các mục trong menu:

<?php
function my_theme_setup() {
    // 添加文章和页面支持特色图像
    add_theme_support('post-thumbnails');

// 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __('主菜单', 'my-first-theme'),
    ) );
}
add_action('after_setup_theme', 'my_theme_setup');
?>

Hiểu và vận dụng vòng lặp chính (main loop)

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

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 if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    </article>
<?php endwhile; else : ?>
    <p><?php _e('抱歉，没有找到任何文章。', 'my-first-theme'); ?></p>
<?php endif; ?>

Trong vòng lặp, bạn có thể sử dụng các công cụ hoặc lệnh như…the_title()、the_content()、the_permalink()Các thẻ mẫu được sử dụng để hiển thị thông tin bài viết. Việc hiểu và sử dụng vòng lặp một cách chính xác là nền tảng cho việc trình bày nội dung động.

Thiết kế giao diện (Style), mã nguồn (Script), và hỗ trợ đa ngôn ngữ (Internationalization) của chủ đề (Theme)

Các chủ đề WordPress hiện đại yêu cầu phải quản lý CSS và JavaScript theo cách mô-đun hóa và dễ bảo trì, đồng thời hỗ trợ nhiều ngôn ngữ.

Thêm các phong cách (styles) và script một cách an toàn

Đừng bao giờ đặt liên kết trực tiếp (hard link) đến các tệp CSS hoặc JS trong tệp mẫu (template file). Cách thức đúng đắn là sử dụng các công cụ hoặc kỹ thuật phù hợp để đưa các tệp này vào tệp mẫu một cách có tổ chức và dễ quản lý.wp_enqueue_style()和wp_enqueue_script()Hàm đăng ký vùng tiện ích trongfunctions.phpĐăng ký và xếp hàng tại đây giúp đảm bảo rằng các mối phụ thuộc giữa các thành phần được thiết lập đúng cách, đồng thời tránh tình trạng tải lại các tài nguyên không cần thiết.

Đọc thêm Bắt đầu từ con số không: Cấu trúc cốt lõi trong việc phát triển giao diện WordPress。

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(), '1.0.0', true);
}
add_action('wp_enqueue_scripts', 'my_theme_scripts');

Thực hiện quốc tế hóa chủ đề (Implementing theme internationalization)

Để chủ đề của bạn có thể được sử dụng bởi người dùng trên toàn thế giới, tất cả các chuỗi ký tự dành cho người dùng đều cần được bao bọc bằng hàm dịch. Cách phổ biến nhất là…()(Dùng cho giá trị trả về) và_e()(Dùng để hiển thị trực tiếp kết quả.) Trong ví dụ trước đó…('主菜单', 'my-first-theme')Chỉ cần sử dụng tính năng này thôi. Bạn cần phải áp dụng nó.load_theme_textdomain()Các hàm được sử dụng để tải các tệp dịch, và sau đó sử dụng các công cụ như Poedit để thực hiện quá trình tạo bản dịch..po和.moTệp.

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình từng bước, từ việc xây dựng cấu trúc tổng thể cho đến các chi tiết nhỏ nhất. Bạn bắt đầu bằng cách tạo ra phiên bản chủ đề cơ bản nhất…style.css和index.phpBắt đầu từ đó, hãy từng bước hiểu rõ cấu trúc các cấp độ của mẫu (templates) và tạo ra các tệp mẫu riêng biệt cho trang chính (core page).functions.phpHãy tích hợp các tính năng cần thiết và nắm vững cách sử dụng cấu trúc “vòng lặp” (loop) để hiển thị nội dung một cách dinh hồi. Cuối cùng, hãy tuân theo các thực tiễn tốt nhất để quản lý các tập lệnh thiết kế (style scripts) và chuẩn bị cho việc hỗ trợ nhiều ngôn ngữ (internationalization). Quá trình này sẽ giúp bạn nắm toàn quyền kiểm soát về giao diện và chức năng của trang web, đây là một cột mốc quan trọng trên con đường trở thành một nhà phát triển

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

FAQ 常见问题

Có phải để phát triển các chủ đề (themes) thì nhất thiết phải biết PHP không?

Đúng vậy, PHP là nền tảng cơ bản cho việc phát triển các giao diện (theme) cho WordPress. Mặc dù bạn có thể sử dụng các công cụ xây dựng trang (page builders) hoặc các giao diện con (subthemes) để thực hiện một số tùy chỉnh, nhưng để tạo ra một giao diện hoàn chỉnh, hiệu quả và tuân thủ các tiêu chuẩn của WordPress từ đầu, việc hiểu sâu về PHP là điều không thể thiếu. Bạn cần sử dụng PHP để xử lý logic, gọi các hàm của WordPress và thao tác với dữ liệu.

Có thể để tệp `style.css` trống không?

Không được. Mặc dù phần mã CSS có thể để trống (nhưng điều đó sẽ khiến chủ đề không có bất kỳ hiệu ứng định dạng nào), nhưng khối chú thích ở đầu tệp là bắt buộc phải có; WordPress dựa vào khối chú thích này để nhận diện chủ đề của bạn. Nếu khối chú thích này bị thiếu, hệ thống sẽ không thể xác định được chủ đề đang được sử dụng.Theme NameNhững khối chú thích chứa thông tin như vậy sẽ không được hiển thị trong danh sách “Thiết kế” -> “Chủ đề” ở phía sau hậu trường (backend).

Làm thế nào để tạo một mẫu tùy chỉnh cho một trang web cụ thể?

Bạn có thể thực hiện điều này bằng cách tạo một tệp PHP có đầu mục bắt đầu bằng một tiền tố cụ thể. Ví dụ, để tạo một mẫu có tên “Trang có độ rộng đầy đủ” (Full-width page), hãy tạo một tệp mới với tên như sau:template-fullwidth.phpHãy thêm ghi chú về tên mẫu cụ thể ở phần đầu của tệp tin. Sau đó, khi bạn chỉnh sửa trang, bạn có thể chọn mẫu đó từ danh sách thả xuống “Mẫu” trong mục “Thuộc tính trang”.

<?php
/**
 * Template Name: 全宽页面
 */
?>

Cách phát hành sau khi hoàn thành phát triển chủ đề

Đối với mục đích sử dụng cá nhân, bạn có thể trực tiếp tải thư mục chứa các chủ đề lên máy chủ./wp-content/themes/Chỉ cần tạo một thư mục chứa tất cả các tệp liên quan đến chủ đề là được. Nếu bạn muốn nộp chủ đề của mình vào danh mục chính thức của WordPress, hãy đảm bảo rằng chủ đề đó tuân thủ nghiêm ngặt các tiêu chuẩn kiểm duyệt của WordPress, bao gồm chất lượng mã nguồn, bảo mật, tính hỗ trợ đa ngôn ngữ và khả năng truy cập dễ dàng cho mọi người. Sau đó, hãy thực hiện thủ tục nộp thông qua hệ thống trên trang web chính thức của WordPress. Vào năm 2026, các tiêu chuẩn này có thể sẽ trở nên nghiêm ngặt hơn nữa; vì vậy, tôi khuyên bạn nên phát triển chủ đề theo những tiêu chuẩn cao nhất từ đầu.