Các chủ đề WordPress là yếu tố then chốt quyết định giao diện và chức năng của một trang web. Bằng cách phát triển chủ đề theo yêu cầu, các nhà phát triển có thể hoàn toàn kiểm soát logic thiết kế, hiệu năng hoạt động và khả năng mở rộng chức năng của trang web, từ đó thoát khỏi những hạn chế của các chủ đề được cung cấp sẵn bởi bên thứ ba. Hướng dẫn này sẽ hướng dẫn bạn từ cấu trúc thư mục cơ bản nhất, từng bước xây dựng một chủ đề WordPress tùy chỉnh với đầy đủ chức năng và tuân thủ các tiêu chuẩn phát triển hiện đại. Bạn sẽ nắm được những ý tưởng cốt lõi về cấu trúc chủ đề, logic tổ chức các tệp mẫu, và học cách chèn nội dung động thông qua các hàm PHP và các hook (cơ chế kết nối giữa các thành phần của chủ đề).
Cơ sở và chuẩn bị môi trường cho việc phát triển theme
Trước khi bắt đầu viết mã, việc thiết lập một môi trường phát triển đúng đắn và hiểu rõ cấu trúc cơ bản của chủ đề là điều vô cùng quan trọng. Điều này sẽ giúp công việc phát triển của bạn diễn ra hiệu quả hơn và tuân thủ các quy định của hệ sinh thái WordPress.
Thiết lập môi trường phát triển cục bộ
Chúng tôi khuyến nghị bạn sử dụng các môi trường phát triển cục bộ như Local, XAMPP hoặc MAMP. Những công cụ này cho phép bạn cài đặt PHP, MySQL và Apache/Nginx chỉ với một cú nhấp chuột. Hãy tạo một bản cài đặt WordPress mới trong môi trường đó để sử dụng làm nền tảng thử nghiệm cho các chủ đề (theme) của bạn.
Đọc thêm Hướng dẫn phát triển theme WordPress: Xây dựng một theme chuyên nghiệp từ con số không。
Cấu trúc thư mục tiêu chuẩn để hiểu rõ chủ đề
Một chủ đề được đơn giản hóa tối đa và có thể được WordPress nhận diện chỉ cần hai tệp tin:style.css 和 index.phpTuy nhiên, một thư mục chủ đề tùy chỉnh có cấu trúc tốt nên sắp xếp các loại tệp tin một cách hợp lý. Cấu trúc thư mục chủ đề điển hình như sau:
your-theme/
├── style.css (必需，主题样式表和信息头)
├── index.php (必需，主模板文件)
├── functions.php (主题功能增强文件)
├── header.php (头部模板)
├── footer.php (底部模板)
├── sidebar.php (侧边栏模板)
└── assets/ (静态资源目录)
├── css/
├── js/
└── images/Tạo tệp biểu định kiểu cốt lõi
style.css File không chỉ là tệp chứa các thiết lập về giao diện (style files), mà còn là “chứng minh thư” của chủ đề (theme). Phần ghi chú (comment block) ở đầu tệp chứa đầy đủ các thông tin meta mà WordPress cần để nhận diện chủ đề đó.
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-custom-theme
Author: 你的名字
Author URI: https://example.com
Description: 一个从零开始开发的自定义WordPress主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Trong đó,Text Domain Được sử dụng cho mục đích quốc tế hóa; đây là một mã định danh (identifier) bắt buộc phải được sử dụng khi gọi các hàm dịch (translation functions) sau này.
Xây dựng hệ thống các tệp mẫu cốt lõi
WordPress sử dụng hệ thống cấp độ template (mẫu) để quyết định file template nào sẽ được sử dụng cho từng loại trang khác nhau. Việc xây dựng các file template này là công việc cốt lõi trong quá trình phát triển giao diện (theme) cho WordPress.
Tạo tệp mẫu cơ bản
Trước tiên, hãy tạo các mẫu phần đầu (header) và phần cuối (footer) được tách riêng biệt. Tệp tin… header.php Nội dung cần bao gồm phần tiêu đề (header) của tài liệu HTML.Ở phần bắt đầu của khu vực và nội dung chính trang, thường sử dụng… wp_head() Các hàm được sử dụng để cho phép các plugin và các tính năng cốt lõi có thể chèn mã vào chương trình chính.
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<?php wp_body_open(); ?>
<header>
<h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>file footer.php Nếu nội dung bao gồm phần chân trang (footer), thì nó sẽ được hiển thị ở cuối trang. wp_footer() Hàm kết thúc.
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Thực hiện tệp mẫu chính (main template file)
index.php Là tệp lưu trữ dùng để quay lại (fallback file) cho mẫu cuối cùng, trách nhiệm cơ bản của nó là đưa vào các phần đầu (header) và cuối (footer), đồng thời xây dựng vòng lặp chính (main loop) để hiển thị danh sách các bài viết.
<?php get_header(); ?>
<main>
<article>
<h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_excerpt(); ?></div>
</article>
<p>Chưa có bài viết nào.</p>
<?php endif; ?>
</main>Phát triển các mẫu trang web chuyên dụng
Dựa trên cấu trúc các mẫu (templates), bạn có thể tạo ra những mẫu cụ thể hơn cho từng trang web cụ thể. Ví dụ, bạn có thể tạo… single.php Dùng để hiển thị một bài viết duy nhất.page.php Dùng để hiển thị các trang web độc lập.archive.php Dùng để hiển thị các danh mục được sắp xếp theo thể loại. WordPress sẽ tự động ưu tiên sử dụng những mẫu (templates) cụ thể hơn này.
Tăng cường chức năng của chủ đề thông qua tệp lệnh (function file)
functions.php Tệp tin này liên quan đến chủ đề của bạn là “Trung tâm điều khiển” (Control Center), dùng để thêm các tính năng mới, đăng ký các mục trong menu, hỗ trợ việc sử dụng hình ảnh đặc biệt, v.v. Bạn không cần phải thay đổi các tệp tin cốt lõi (core files) của ứng dụng.
Thêm hỗ trợ cơ bản cho các chủ đề (themes).
在 functions.php trong đó, sử dụng add_theme_support() Hàm được sử dụng để tuyên bố các tính năng mà chủ đề hỗ trợ. Đây là điểm khởi đầu tiêu chuẩn.
function my_custom_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 注册导航菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
// 支持HTML5标记
add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Khu vực công cụ bên cạnh trang đăng ký
Sử dụng register_sidebar() Một hàm được sử dụng để định nghĩa khu vực chứa các tiện ích nhỏ (widgets), cho phép người dùng thêm nội dung một cách dinh hồi (động) ở phía sau hậu trường (background).
function my_custom_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-custom-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-custom-theme' ),
'before_widget' => '<section id="%1$s" class="widget %2$s">',
'after_widget' => '</section>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_widgets_init' );Nhập script và kiểu dáng một cách an toàn
Đừng bao giờ đặt các liên kết trực tiếp (hard links) đến các tệp CSS và JS trong template. Thay vào đó, hãy sử dụng các phương pháp khác để đưa chúng vào template một cách có tổ chức và linh hoạt. wp_enqueue_style() 和 wp_enqueue_script() Hàm đó, và hãy gắn nó vào (mount it). wp_enqueue_scripts hook.
function my_custom_theme_scripts() {
// 引入主题主样式表
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri(), array(), wp_get_theme()->get( 'Version' ) );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-custom-theme-script', get_template_directory_uri() . '/assets/js/main.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );Thực hiện các thẻ mẫu và vòng lặp
Các thẻ mẫu (template tags) là một loạt hàm PHP do WordPress cung cấp, được sử dụng để hiển thị nội dung một cách dinh hình trong các mẫu (templates), chẳng hạn như tiêu đề bài viết, nội dung bài viết, ngày tháng, v.v. Chúng thường được sử dụng bên trong vòng lặp chính (main loop).
Hiểu và vận dụng vòng lặp chính (main loop)
Vòng lặp chính (main loop) là khái niệm cốt lõi nhất trong các mẫu WordPress; nó sử dụng các biến toàn cục (global variables) để thực hiện các thao tác xử lý cần thiết. $wp_query Để duyệt qua các bài viết cần được hiển thị trên trang hiện tại, cấu trúc cơ bản như sau:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<!-- 在这里使用模板标签 -->
<?php endwhile; else : ?>
<!-- 没有找到文章时的内容 -->
<?php endif; ?>Trong quá trình gọi (calling)… the_post() Sau đó, dữ liệu bài viết (article data) ở cấp độ toàn hệ thống (global) đã được thiết lập xong, và bạn có thể sử dụng các thẻ mẫu (template tags) khác nhau để tạo nội dung.
Sử dụng các thẻ mẫu phổ biến để hiển thị nội dung.
Bên trong vòng lặp, bạn có thể gọi một loạt hàm để hiển thị thông tin bài viết. Ví dụ:
- the_title(): xuất tiêu đề bài viết.
- the_permalink()Tạo liên kết vĩnh cửu cho bài viết.
- the_content()Nội dung bài viết không được cung cấp. Bạn vui lòng cung cấp đầy đủ nội dung bài viết để tôi có thể thực hiện công việc dịch.
- the_excerpt(): Xuất tóm tắt bài viết.
- the_post_thumbnail()：Xuất hình ảnh đặc trưng của bài viết.
- the_date() 和 the_author()Ngày xuất bản và tác giả.
Thực hiện tính năng điều hướng trang cho bài viết
Sau khi việc hiển thị danh sách các bài viết (chẳng hạn trên trang chủ hoặc trang lưu trữ) kết thúc, cần phải cung cấp công cụ điều hướng trang (pagination). Điều này có thể được thực hiện bằng nhiều cách khác nhau, tùy thuộc vào nền tảng và thiết kế của trang web. the_posts_pagination() Hàm này được thiết kế để tạo ra một danh sách liên kết trang (pagination links) có giao diện đẹp mắt và dễ sử dụng.
the_posts_pagination( array(
'mid_size' => 2,
'prev_text' => __( '上一页', 'my-custom-theme' ),
'next_text' => __( '下一页', 'my-custom-theme' ),
) );Tóm lại
Từ khi tạo ra tệp tin chứa các tiêu đề thông tin chính xác… style.css và kiến thức cơ bản về index.php Bắt đầu thôi, bạn đã hoàn thành những bước cơ bản trong quá trình xây dựng một chủ đề WordPress tùy chỉnh. Chúng ta đã cùng tìm hiểu chi tiết về hệ thống cấu trúc các template (mẫu trang), và phân tích cách chúng được tổ chức thành các tầng lớp khác nhau. header.php 和 footer.php Nhằm nâng cao tính tái sử dụng của mã nguồn (code reusability), và thông qua… functions.php Các tệp tin đã được cập nhật một cách ổn định, bao gồm các tính năng liên quan đến chủ đề (theme) và các nguồn tài nguyên (resources) cần thiết. Việc hiểu rõ và sử dụng đúng cách “vòng lặp chính” (main loop) cùng với “thẻ mẫu” (template tags) là yếu tố then chốt để hiển thị nội dung động trên trang web. Bằng cách tuân theo những bước hướng dẫn này và các thực tiễn tốt nhất, bạn không chỉ tạo ra một chủ đề hoạt động hiệu quả mà còn xây dựng nền tảng cho dự án của mình một cách dễ bảo trì, dễ mở r
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à một ngôn ngữ lập trình cần được nắm vững. Bản thân nền tảng WordPress được viết bằng PHP; tất cả các tệp mẫu (templates), logic chức năng, và các thao tác tương tác với cơ sở dữ liệu đều phụ thuộc vào PHP. HTML, CSS, và JavaScript được sử dụng để xây dựng giao diện người dùng và tạo ra các hiệu ứng tương tác, nhưng PHP chính là nền tảng cơ bản để đưa dữ liệu động vào phía trước (front-end) của trang web.
Tại sao chủ đề của tôi không hiển thị trong giao diện quản trị (backend) hoặc không thể được kích hoạt?
Nguyên nhân phổ biến nhất là style.css Định dạng chú thích thông tin tiêu đề ở đầu tệp không đúng, thiếu thông tin cần thiết, hoặc có vấn đề với mã hóa tệp. Vui lòng điền thông tin tiêu đề theo đúng quy định và đảm bảo rằng mã hóa tệp là UTF-8 (không chứa BOM – Byte Order Mark). Tiếp theo, hãy kiểm tra xem thư mục chứa các tệp tiêu đề đã được đặt đúng chỗ hay chưa./wp-content/themes/thư mục chính xác.
Có gì khác biệt giữa tệp `functions.php` và các plugin?
functions.php Các tính năng trong tệp tin này được liên kết chặt chẽ với chủ đề hiện tại; do đó, khi bạn thay đổi chủ đề, những tính năng đó sẽ không còn hoạt động nữa. Chúng thích hợp để thêm những tính năng có mối liên hệ mật thiết với giao diện và bố cục của chủ đề (chẳng hạn như menu đăng ký, khu vực hiển thị các tiện ích, tùy chọn hỗ trợ cho chủ đề). Ngược lại, các tính năng được cung cấp bởi plugin thường hoạt động độc lập với chủ đề, vì vậy chúng vẫn có thể sử dụng được ngay cả sau khi bạn thay đổi chủ đề, và thích hợp để thêm những tính năng mang tính chất chung (chẳng hạn như biểu mẫu li
Làm thế nào để chủ đề của tôi hỗ trợ đa ngôn ngữ (quốc tế hóa)?
Bạn cần sử dụng các hàm quốc tế hóa (internationalization) của WordPress để bao bọc tất cả các văn bản dành cho người dùng. Trong mã nguồn, hãy áp dụng chúng như sau: () 或 _e() Chức năng “đợi” (waiting function), và chỉ định rằng nó sẽ được thực hiện tại… style.css Được định nghĩa trong… Text DomainVí dụ:echo ( ‘阅读更多’, ‘my-custom-theme’ );. Sau đó, sử dụng công cụ như Poedit để tạo.potTệp mẫu dịch thuật, dùng để giúp người dịch tạo ra các tài liệu dịch mới..po和.moTệp ngôn ngữ.
Khi phát triển, có nên trực tiếp sửa đổi các tệp mẫu cốt lõi không?
Tuyệt đối không được trực tiếp sửa đổi các tệp cốt lõi của WordPress, cũng không nên trực tiếp sửa đổi các tệp cốt lõi của các chủ đề mẹ (parent themes) mà bạn đang sử dụng (trừ khi bạn đang tạo một chủ đề con – subtheme). Mọi thay đổi đều sẽ bị xóa đi khi có bản cập nhật tiếp theo được phát hành. Việc phát triển tùy chỉnh nên được thực hiện trên các chủ đề độc lập của bạn hoặc trên các chủ đề con; đây là nguyên tắc cơ bản trong quá trình phát triển WordPress.
Bước tiếp theo, chúng ta nên làm gì tiếp theo?
Đọc thêm và kiến thức thực tế
Những nội dung sau đây liên quan đến chủ đề của bài viết này, thích hợp để tiếp tục đọc sâu hơn. Ưu tiên bắt đầu với bài viết gần nhất với vấn đề hiện tại của bạn, rồi dần dần mở rộng sang các chủ đề xung quanh, hiệu quả thường sẽ tốt hơn.
- 10 kỹ năng cần thiết: Tạo ra một theme WordPress chuyên nghiệp và hiệu quả
- Hướng dẫn tối thượng để chọn chủ đề WordPress hoàn hảo: Phân tích toàn diện từ khung đến tùy chỉnh
- Phát triển chủ đề WordPress từ cơ bản đến nâng cao: Hướng dẫn toàn diện để xây dựng trang web cá nhân hóa
- Phát triển chủ đề WordPress từ đầu: Tạo ra giao diện trang web độc đáo
- Hướng dẫn phát triển chủ đề WordPress: Xây dựng trang web tùy chỉnh từ con số không
Tiếng Việt