Việc phát triển một chủ đề WordPress tùy chỉnh là cách tuyệt vời để hiểu sâu hơn về cấu trúc và nguyên lý hoạt động của framework WordPress, đồng thời nâng cao kỹ năng phát triển front-end. Khác với việc sử dụng các chủ đề có sẵn, việc xây dựng từ đầu cho phép bạn nắm toàn quyền kiểm soát quá trình thiết kế và tạo ra một trang web độc đáo, hoàn toàn phù hợp với yêu cầu cụ thể của dự án. Bài viết này sẽ hướng dẫn bạn qua toàn bộ quá trình xây dựng một chủ đề WordPress có cơ sở vững chắc nhưng vẫn đầy đủ chức năng.
Cấu hình môi trường phát triển và cấu trúc chủ đề
Trước khi bắt đầu viết mã, bạn cần một môi trường phát triển cục bộ. Môi trường này thường bao gồm một bộ công cụ 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 mã (chẳng hạn như VS Code), và phiên bản mới nhất của WordPress.
Trước hết, trong WordPress… <code>wp-content/themes</code> Trong thư mục đó, hãy tạo một thư mục mới cho chủ đề mới của bạn, ví dụ như: <code>my-custom-theme</code>Một chủ đề WordPress cơ bản nhất cần ít nhất hai tệp tin cốt lõi.
Đọc thêm Hướng dẫn toàn diện phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh từ đầu。
Tạo tệp tin bảng định kiểu (style sheet file)
Tệp tin bắt buộc đầu tiên là… style.cssĐây không chỉ là tệp tin định nghĩa kiểu dáng của chủ đề, mà phần chú thích ở đầu tệp còn chứa các dữ liệu siêu dữ liệu (metadata) để mô tả chủ đề cho WordPress. Vui lòng thêm các chú thích sau đây ở phần đầu của tệp tin:
/*
Theme Name: My Custom Theme
Theme URI: https://yourwebsite.com/
Author: Your Name
Author URI: https://yourwebsite.com/
Description: 这是一个从零开始创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/“Text Domain” được sử dụng cho mục đích hỗ trợ quá trình quốc tế hóa (internationalization); vì vậy, bạn cần đảm bảo rằng tên của nó phải trùng khớp với tên thư mục chứa nội dung liên quan đến chủ đề của bạn. Sau đó, bạn có thể viết tất cả các quy tắc CSS (Cascading Style Sheets) vào tệp này.
Create a core function file
Tệp tin bắt buộc thứ hai là functions.phpĐây là “bộ não” của chủ đề (theme), có chức năng tải các tệp biểu định kiểu (style sheets), tệp JavaScript, đăng ký các tính năng như menu và sidebar, cũng như thêm các chức năng hỗ trợ khác.
Một cơ bản functions.php Phần mở đầu thường có dạng như sau, dùng để thêm bảng định dạng (style sheet) vào danh sách chờ xử lý:
<?php
// 将主题样式表加入队列
function my_custom_theme_enqueue_styles() {
wp_enqueue_style( 'my-custom-theme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue_styles' );Lúc này, mặc dù vẫn chưa có bất kỳ tệp mẫu nào, chủ đề của bạn đã có thể xuất hiện trong danh sách “Giao diện” -> “Chủ đề” trên bảng điều khiển WordPress và được kích hoạt. Sau khi được kích hoạt, trang web sẽ hiển thị một trang trống, vì thiếu các tệp mẫu để định nghĩa cấu trúc trang.
Xây dựng các tệp mẫu cốt lõi
Các tệp tin mẫu (template files) kiểm soát cách hiển thị các phần khác nhau của trang web. WordPress sử dụng cấu trúc phân cấp của các tệp tin mẫu để quyết định nên sử dụng tệp mẫu nào cho yêu cầu truy cập hiện tại.
Tạo phần đầu và phần cuối cho toàn trang web (header và footer).
Thực hành tốt nhất là tách riêng các đoạn mã dùng để hiển thị phần đầu (header) và phần cuối (footer) của trang web. Hãy tạo các tệp mã riêng biệt cho từng phần này. header.php Một tệp tin thường chứa thông tin về loại tài liệu mà nó đại diện (được gọi là “tuyên bố về loại tài liệu” – document type declaration). Khu vực và việc mở nó… Thẻ (Tags) và Bảng điều hướng chính (Main Navigation).
<!DOCTYPE html>
<html no numeric noise key 1007>
<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 1004>
<header>
<h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
<nav>
'primary' ) ); ?>
</nav>
</header>
<main>Tương ứng với đó, hãy thực hiện việc tạo ra (create). footer.php Hãy đóng nó đi. header.php The main container and tags that are opened in the middle.
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>wp_head() 和 wp_footer() Đây là những “khung” (hooks) quan trọng, cho phép phần cốt lõi của WordPress, các plugin, và chính các giao diện (themes) có thể chèn vào những vị trí này những đoạn mã cần thiết (chẳng hạn như mã định dạng (styles) hoặc mã script).
Tạo chỉ mục và mẫu bài viết
index.php Đây là tệp lưu trữ dùng để quay trở lại cấu trúc phân cấp của mẫu (template hierarchy), đồng thời cũng là điểm khởi đầu cho chủ đề (theme) của chúng ta. Nó được sử dụng để… get_header() 和 get_footer() Để đưa vào các mô-đun được tách riêng biệt…
<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>Để hiển thị một bài viết riêng lẻ, hãy thực hiện các thao tác tương ứng. single.phpCấu trúc của nó giống với… index.php Tương tự, nhưng sử dụng… the_content() (Nó sẽ hiển thị toàn bộ nội dung văn bản.)
<article>
<h1><?php the_title(); ?></h1>
<div><?php the_content(); ?></div>
</article>Nâng cao chức năng của chủ đề (Enhancing theme functionality)
Sau khi đã xây dựng xong cấu trúc cơ bản, chúng ta tiếp tục thực hiện các bước tiếp theo… functions.php Hãy thêm nhiều tính năng hữu ích hơn để làm cho chủ đề trở nên chuyên nghiệp và dễ sử dụng hơn.
Đăng ký menu điều hướng và thanh bên cạnh
在 functions.php Hãy thêm đoạn mã sau vào nội dung hiện tại để đăng ký một khu vực menu điều hướng chính và một thanh bên (khu vực công cụ phụ):
// 注册导航菜单
function my_custom_theme_register_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_custom_theme_register_menus' );
// 注册侧边栏小工具区域
function my_custom_theme_register_sidebar() {
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' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_custom_theme_register_sidebar' );Sau khi đăng ký, bạn cần sử dụng chúng trong các mẫu (templates) của mình. Ví dụ, bạn có thể thực hiện điều này bằng cách… header.php Chúng ta đã sử dụng nó trong quá trình thực hiện. wp_nav_menu Bạn đã gọi menu “primary”. Nếu muốn hiển thị các tiện ích (widgets) trên thanh bên cạnh, bạn có thể… sidebar.php Trong quá trình này, bạn sẽ tạo một mẫu thanh bên (sidebar template) và áp dụng nó vào trang web của mình. index.php 或 single.php sử dụng get_sidebar() Đưa vào (introduce).
Thêm hỗ trợ cho tính năng quản lý chủ đề (theme management).
WordPress cung cấp nhiều tính năng tích hợp sẵn, và bạn cần phải khai báo rõ ràng rằng bạn muốn sử dụng chúng trong chủ đề (theme) của mình. Ví dụ, để thêm ảnh thu nhỏ (thumbnail) cho bài viết, hỗ trợ tùy chỉnh Logo, hoặc hỗ trợ các thẻ HTML5, bạn cần phải thực hiện các bước cấu hình tương ứng.
// 添加主题功能支持
function my_custom_theme_setup() {
// 支持文章缩略图
add_theme_support( 'post-thumbnails' );
// 支持自定义Logo
add_theme_support( 'custom-logo' );
// 对搜索表单、评论表单等使用HTML5标记
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 在管理后台提供<title>标签支持
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );Sau khi bổ sung tính năng hỗ trợ “post-thumbnails”, bạn có thể sử dụng chúng trong vòng lặp hiển thị các bài viết. the_post_thumbnail() Hàm này được sử dụng để hiển thị hình ảnh đặc biệt (hình ảnh đặc trưng).
Thiết kế kiểu dáng và bố cục thích ứng (Responsive Layout)
Một chủ đề đẹp mắt và tương thích với nhiều loại thiết bị khác nhau là điều vô cùng quan trọng. Bạn có thể… style.css Tất cả các kiểu dáng (styles) nên được viết trong tập tin này. Nên áp dụng chiến lược ưu tiên cho thiết bị di động (mobile-first strategy).
Basic Styles and Formatting
Trước hết, hãy thiết lập một số kiểu dáng và cách bố trí cơ bản để đảm bảo rằng trang web hoạt động nhất quán trên các trình duyệt khác nhau.
/* style.css */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
line-height: 1.6;
color: #333;
background-color: #fff;
}
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* 头部样式 */
header {
background: #f8f9fa;
padding: 2rem 0;
border-bottom: 1px solid #dee2e6;
}
/* 导航菜单样式 */
.main-navigation ul {
list-style: none;
display: flex;
gap: 1.5rem;
}
.main-navigation a {
text-decoration: none;
color: #007bff;
}Thực hiện thiết kế thích ứng (responsive design)
Sử dụng các truy vấn phương tiện truyền thông (media queries) để điều chỉnh bố cục trên các kích thước màn hình khác nhau. Ví dụ, khi kích thước màn hình giảm xuống, hãy thay đổi menu điều hướng thành dạng sắp xếp theo chiều dọc.
/* 移动端样式 */
@media (max-width: 768px) {
.main-navigation ul {
flex-direction: column;
gap: 0.5rem;
}
.container {
padding: 0 15px;
}
article {
margin-bottom: 2rem;
padding-bottom: 2rem;
border-bottom: 1px solid #eee;
}
}Hãy đảm bảo rằng hình ảnh cũng có khả năng thích ứng với các thiết bị khác nhau (tức là hình ảnh sẽ tự động thay đổi kích thước để phù hợp với màn hình của người dùng).
img {
max-width: 100%;
height: auto;
}Tóm lại
Qua các bước trên, bạn đã thành công trong việc tạo ra một chủ đề WordPress tùy chỉnh có chức năng đầy đủ. Chúng ta sẽ bắt đầu với việc cấu hình môi trường phát triển và tạo ra những thành phần cơ bản nhất của chủ đề đó. style.css 与 functions.php Bắt đầu từ tệp tin này, chúng ta đã từng bước xây dựng các tệp mẫu cốt lõi (core template files).header.php, footer.php, index.php, single.phpChúng tôi đã cải thiện giao diện của trang web này và tăng cường các tính năng hữu ích cho nó, chẳng hạn như menu đăng ký, thanh bên cạnh, và hỗ trợ việc hiển thị hình ảnh đặc biệt. Cuối cùng, chúng tôi cũng đã áp dụng các kiểu dáng cơ bản cùng bố cục thích ứng (responsive layout) để trang web có thể hiển thị tốt trên mọi loại thiết bị. Đây chỉ là một khởi đầu; bạn có thể tiếp tục phát triển nó và tạo thêm các mẫu trang (page templates) dựa trên npage.php）、Mẫu lưu trữ (Archive Template)archive.php), mẫu tìm kiếm (search template)search.phpBạn thậm chí có thể sử dụng các chủ đề con (sub-themes) để tùy chỉnh trang web, từ đó tạo ra một trang web mạnh mẽ và chuyên nghiệp hơn.
FAQ 常见问题
Để phát triển một theme cho WordPress, bạn cần nắm vững những kỹ thuật sau:
Để phát triển một chủ đề WordPress cơ bản, bạn cần nắm vững các ngôn ngữ lập trình HTML, CSS và PHP. HTML được sử dụng để xây dựng cấu trúc trang web, CSS dùng để thiết kế giao diện và bố cục, trong khi PHP là công cụ chính để tạo ra nội dung động trên WordPress. Ngoài ra, kiến thức cơ bản về JavaScript sẽ giúp bạn thêm các tính năng tương tác vào trang web. Việc hiểu rõ các khái niệm cốt lõi của WordPress như cấu trúc template, vòng lặp (The Loop), các hook (Hooks) và hàm (Functions) là rất quan trọng để phát triển một chủ đề thành công.
File `functions.php` trong thư mục chủ đề (theme) có chức năng gì?
functions.php File là trung tâm chức năng của một theme WordPress. Những nhiệm vụ chính của nó bao gồm: thêm các tệp CSS và JavaScript vào hàng đợi xử lý, đăng ký các mục trong menu điều hướng và các công cụ (widgets) ở bên cạnh trang, chỉ định các tính năng mà theme hỗ trợ (như ảnh thu nhỏ bài viết, logo tùy chỉnh), định nghĩa các hàm tùy chỉnh, và thay đổi hành vi mặc định của WordPress thông qua các hook hành động (action hooks) và hook lọc (filter hooks). Nhờ đó, bạn có thể mở rộng và tùy chỉnh chức năng của theme một cách đáng kể mà không cần phải sửa đổi các tệp cốt lõi của WordPress.
Làm thế nào để chủ đề (theme) của tôi hỗ trợ nhiều ngôn ngữ?
Để một chủ đề hỗ trợ nhiều ngôn ngữ (hóa đa ngôn ngữ), chủ yếu cần thực hiện hai bước. Đầu tiên, style.css Vào các phần liên quan đến “Text Domain” cũng như tất cả những nơi sử dụng các hàm dịch, hãy sử dụng một “Text Domain” thống nhất; thường thì nó giống với tên thư mục chứa nội dung liên quan đến chủ đề đó. Tiếp theo, khi chuẩn bị các chuỗi văn bản cần được dịch, hãy sử dụng các hàm dịch của WordPress. __()、_e() 或 _x()Sau đó, bạn có thể sử dụng các công cụ như Poedit để tạo ra những gì bạn cần. .pot Tệp mẫu, và tạo ra những tệp tương ứng. .po 和 .mo Vui lòng đưa tệp tin cần dịch vào thư mục tương ứng của chủ đề (theme folder). /languages Trong thư mục đó, WordPress sẽ tự động tải các tệp cần thiết dựa trên cài đặt ngôn ngữ của trang web.
So với việc trực tiếp sửa đổi chủ đề cha (parent theme), việc tạo ra các chủ đề con (sub-theme) có những ưu điểm sau:
Việc tạo ra các chủ đề con (sub-templates) là một thực hành tốt nhất để chỉnh sửa hoặc mở rộng chức năng của các chủ đề cha (parent templates) hiện có. Ưu điểm chính của phương pháp này nằm ở khía cạnh bảo mật: khi chủ đề cha được cập nhật, bạn có thể thực hiện việc nâng cấp một cách an toàn mà các thay đổi tùy chỉnh mà bạn đã thực hiện trên chủ đề con (về thiết kế, chức năng, mẫu) sẽ không bị mất đi. Chủ đề con chỉ cần… (The sentence seems incomplete here; please provide the full context for a complete translation.) style.css Và một tùy chọn (optional). functions.php Tệp tin đó đã sẵn sàng để sử dụng. Trong phần con (subtopic)… style.css wp_footer() @import Hoặc bạn có thể áp dụng một cách sắp xếp hàng (queuing) tốt hơn để đưa các đặc điểm thiết kế của chủ đề cha (parent theme) vào, sau đó thêm các quy tắc CSS riêng của mình để thay đổi chúng. Điều này sẽ giúp bạn tùy chỉnh giao diện của chủ đề con (child theme) theo ý muốn. functions.php Nó sẽ được tải đồng thời với tệp có cùng tên trong chủ đề cha (parent theme), thay vì thay thế nó; điều này cho phép bạn thêm các tính năng mới một cách an toàn.
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.
- Tìm hiểu sâu về framework Tailwind CSS: Từ các công cụ hữu ích đến các thực tiễn phát triển front-end hiện đại
- Hướng dẫn tối ưu xây dựng website 2026: Quy trình hoàn chỉnh từ không đến có để tạo website hiệu suất cao
- Từ con số không đến con số một: Hướng dẫn chi tiết toàn bộ quy trình xây dựng trang web và lựa chọn công nghệ
- Các khái niệm cốt lõi và mẫu thiết kế hữu ích của Tailwind CSS: Từ các lớp nguyên tử (atomic classes) đến thiết kế thích ứng (responsive design)
- Hướng dẫn toàn diện về xây dựng trang web: Quy trình hoàn chỉnh từ ý tưởng đến ra mắt và phân tích công nghệ cốt lõi
Tiếng Việt