Trang chủ/Kiến thức/WordPress/Chi tiết nội dung

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 trong 3 phút
2026-03-10
2026-06-03
2,536
Tôi kiếm được hoa hồng khi bạn mua sắm thông qua các liên kết dưới đây, mà không phát sinh thêm chi phí nào cho bạn.

Đối với bất kỳ nhà phát triển nào muốn tùy chỉnh sâu diện mạo và chức năng của trang web, việc học phát triển chủ đề WordPress là một kỹ năng cực kỳ giá trị. Khác với việc sử dụng chủ đề có sẵn, tự xây dựng chủ đề có nghĩa là bạn có toàn quyền kiểm soát, có thể tạo ra một trang web độc đáo, hiệu suất vượt trội và phù hợp với nhu cầu cụ thể. Bài viết này sẽ hướng dẫn bạn hoàn thành các bước cốt lõi để xây dựng chủ đề WordPress tùy chỉnh đầu tiên, từ thiết lập môi trường đến việc tạo các tệp mẫu cơ bản.

Chuẩn bị môi trường phát triển và các công cụ

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ộ phù hợp. Điều này cho phép bạn kiểm tra và gỡ lỗi mà không ảnh hưởng đến trang web trực tuyến.

Cấu hình môi trường máy chủ cục bộ

Khuyến nghị sử dụng các gói phần mềm máy chủ cục bộ tích hợp, như XAMPP, MAMP (dành cho Mac) hoặc Local by Flywheel. Những công cụ này cài đặt sẵn máy chủ Apache, cơ sở dữ liệu MySQL và PHP chỉ với một cú nhấp chuột, giúp loại bỏ quá trình cấu hình phức tạp. Lấy XAMPP làm ví dụ, sau khi cài đặt và khởi động dịch vụ Apache và MySQL, bạn đã có một môi trường máy chủ cục bộ.

Lựa chọn trình soạn thảo mã

Một trình soạn thảo mã mạnh mẽ là công cụ thiết yếu cho phát triển hiệu quả. Visual Studio Code (VS Code) hiện là lựa chọn rất phổ biến, nó miễn phí, nhẹ và có kho tiện ích mở rộng phong phú, như PHP Intelephense (dùng cho gợi ý thông minh mã PHP), WordPress Snippet (đoạn mã) và Live Server (xem trước thời gian thực)..., có thể nâng cao đáng kể hiệu suất phát triển.

Cài đặt tệp lõi WordPress

Trong thư mục gốc máy chủ cục bộ của bạn (ví dụ: thư mục `htdocs` của XAMPP), tạo một thư mục dự án mới, chẳng hạn `my-first-theme`. Sau đó, truy cập trang web chính thức WordPress.org để tải xuống gói nén WordPress mới nhất, giải nén và đặt tất cả các tệp vào thư mục `my-first-theme`. Tiếp theo, truy cập `http://localhost/my-first-theme` qua trình duyệt và hoàn tất cài đặt WordPress theo hướng dẫn nổi tiếng “cài đặt năm phút”. Hãy nhớ tên cơ sở dữ liệu, tên người dùng và mật khẩu bạn đã đặt, chúng sẽ được sử dụng sau này khi kết nối cơ sở dữ liệu.

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%
Logo UltaHost Truy cập trang

Tạo cấu trúc cơ bản và tệp cho chủ đề

Một chủ đề WordPress về cơ bản là một thư mục nằm trong thư mục `wp-content/themes/`, chứa một loạt các tệp mẫu PHP, bảng định kiểu và tệp script có chức năng cụ thể.

Thư mục chủ đề và bảng định kiểu

Đầu tiên, đi vào thư mục `wp-content/themes/` trong thư mục cài đặt WordPress cục bộ của bạn, tạo một thư mục mới và đặt tên theo tên chủ đề của bạn, ví dụ `mycustomtheme`. Trong thư mục này, tệp đầu tiên và quan trọng nhất bạn phải tạo là `style.css`. Phần chú thích đầu tệp này không chỉ dùng để khai báo thông tin chủ đề, mà còn là chìa khóa để WordPress nhận diện một chủ đề.

Đọ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。

css
/*
Tên chủ đề: Chủ đề tùy chỉnh của tôi
URI chủ đề: https://example.com/mycustomtheme
Tác giả: Tên của bạn
Tác giả URI: https://example.com
Mô tả: Đây là chủ đề WordPress tùy chỉnh đầu tiên của tôi, dùng để học phát triển.
Phiên bản: 1.0.0
Giấy phép: GPL v2 hoặc mới hơn
Tên miền văn bản: mycustomtheme
*/
```

Tệp mẫu cốt lõi: index.php và functions.php

Tạo tệp `index.php`. Đây là tệp mẫu mặc định và dự phòng của chủ đề, WordPress sẽ sử dụng nó để hiển thị trang nếu không có tệp mẫu cụ thể hơn nào tồn tại. Ban đầu, nó có thể rất đơn giản.

php
<!DOCTYPE html>
<html no numeric noise key 1000>
<head>
<meta charset="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1000>


<h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>


<?php
if ( have_posts() ) :
while ( have_posts() ) :
`the_post();`;
// 暂时简单输出文章标题
tiêu đề( '<h2>', '</h2>' );
the_content();
`endwhile;`;
else :
echo '<p>Chưa có bài viết nào.</p>';
endif;
?>


<p>©</p>

<?php wp_footer(); ?>
</body>
</html>
```

Tiếp theo, tạo tệp `functions.php`. Đây là “bộ máy” của chủ đề của bạn, dùng để thêm chức năng, bật các tính năng (như hình thu nhỏ bài viết) và xếp hàng tải kiểu dáng và tập lệnh.

php
<?php
// 启用文章特色图像功能
`add_theme_support('post-thumbnails');`;

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%.
Logo của Hosting.com Truy cập trang

// 添加菜单支持
`add_theme_support('menus');`;

// 注册一个导航菜单位置
`register_navMenus(array(...));`
'primary' => __( '主导航菜单', 'mycustomtheme' ),
) );

// 正确引入主样式表
function mycustomtheme_enqueue_styles() {
wp_enqueue_style( 'mycustomtheme-style', get_stylesheet_uri() );
}
add_action( 'wp_enqueue_scripts', 'mycustomtheme_enqueue_styles' );
```

Đọ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。

Sau khi hoàn thành các bước trên, hãy đăng nhập vào trang quản trị WordPress của bạn, trong phần “Giao diện” -> “Chủ đề”, bạn nên thấy “My Custom Theme” xuất hiện, nhấp vào để kích hoạt nó.

Cấp bậc mẫu và các tập tin mẫu thông dụng

Hiểu cấp bậc mẫu của WordPress là cốt lõi của việc phát triển chủ đề. Nó quyết định WordPress sẽ ưu tiên sử dụng tập tin mẫu nào cho các loại yêu cầu trang khác nhau.

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.
Logo của InterServer Truy cập trang

Khái niệm cấp bậc mẫu

WordPress sẽ tìm kiếm các tệp mẫu dựa trên loại trang đang xem theo một thứ tự ưu tiên cụ thể. Ví dụ, khi truy cập một bài viết blog riêng lẻ, WordPress sẽ lần lượt tìm: `single-post.php` -> `single.php` -> `singular.php` -> `index.php`. Chỉ cần tìm thấy tệp tồn tại đầu tiên, nó sẽ sử dụng tệp đó.

Tạo các tệp mẫu thông dụng

Dựa trên cấp bậc này, bạn có thể bắt đầu tạo các tệp mẫu cụ thể hơn để làm phong phú chủ đề của mình.

  • `header.php` và `footer.php`: Tách mã đầu trang và chân trang từ `index.php` vào hai tệp này, sau đó sử dụng các hàm `get_header()` và `get_footer()` để nhập chúng vào `index.php`. Điều này giúp tái sử dụng mã.
  • `page.php`: Dùng để hiển thị trang tĩnh. Bạn có thể sao chép nội dung của `index.php` để tạo ra nó, sau đó chỉnh sửa theo ý muốn cá nhân.
  • `single.php`: Dùng để hiển thị một bài viết đơn lẻ. Thông thường ở đây sẽ bao gồm các thông tin như tiêu đề bài viết, nội dung, ngày đăng, tác giả, danh mục và thẻ.
  • `archive.php`: Dùng để hiển thị danh sách lưu trữ bài viết, như trang lưu trữ theo danh mục, thẻ, tác giả hoặc ngày tháng.
  • `front-page.php`: Nếu tệp này tồn tại, nó sẽ được sử dụng làm trang chủ của trang web, có mức độ ưu tiên cao hơn `home.php` và `index.php`. Bạn có thể thiết kế bố cục trang chủ độc đáo ở đây.

Sau khi tạo các tệp này, cấu trúc chủ đề của bạn sẽ trở nên rõ ràng và chuyên nghiệp hơn.

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

Thêm kiểu dáng và chức năng cơ bản

Một chủ đề không có kiểu dáng là thô sơ, trong khi một số chức năng cơ bản có thể cải thiện đáng kể tính hữu ích và trải nghiệm người dùng của chủ đề.

Viết kiểu CSS cơ bản

Bên dưới phần chú thích đầu `style.css`, hãy bắt đầu viết các quy tắc kiểu dáng của bạn. Đầu tiên, bắt đầu với việc đặt lại kiểu mặc định của trình duyệt, thiết lập font chữ và màu sắc toàn cục, sau đó từng bước thiết kế kiểu dáng cho phần đầu, điều hướng, khu vực nội dung chính, thanh bên (nếu sau này được thêm) và chân trang. Sử dụng truy vấn phương tiện thiết kế đáp ứng để đảm bảo trang web hiển thị tốt trên điện thoại, máy tính bảng và máy tính.

css
/* Đặt lại cơ bản và kiểu toàn cục */
* {
`margin: 0;`;
`padding: 0;`;
`box-sizing: border-box;`;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
`line-height: 1.6;`;
màu sắc: #333;
màu nền: #f4f4f4;
}
.container {
chiều rộng: 90%;
`max-width: 1200px;`;
`margin: 0 auto;`;
padding: 20px;
}
/* Kiểu dáng phần đầu */
header {
background: #333;
màu: #fff;
`padding: 1rem 0;`;
`text-align: center;`;
}
/* Kiểu dáng menu điều hướng */
.menu-chính {
/* Kiểu dáng menu điều hướng của bạn */
}
```

Thực hiện menu điều hướng và thanh bên

Tại vị trí menu bạn đã dành sẵn trong `header.php`, hãy sử dụng hàm `wp_nav_menu()` để gọi menu đã đăng ký trong `functions.php`.

php


```

Để thêm thanh bên, trước tiên bạn cần đăng ký một vùng widget thanh bên trong `functions.php`.

php
function mycustomtheme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'mycustomtheme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'mycustomtheme' ),
'before_widget' => '

',
'after_widget' => '</section>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'mycustomtheme_widgets_init' );
```

然后，在你希望侧边栏出现的位置（例如`index.php`或`single.php`的主内容区旁边），使用`dynamic_sidebar( 'sidebar-1' )`函数来显示它。

Tóm lại

Thông qua các bước trong bài viết này, bạn đã hoàn thành hành trình xây dựng một chủ đề tùy chỉnh WordPress cơ bản từ con số không. Chúng tôi đã giới thiệu cách thiết lập môi trường phát triển cục bộ, tạo các tệp chủ đề cốt lõi bao gồm `style.css`, `index.php` và `functions.php`, hiểu được cấp bậc mẫu và mở rộng các mẫu thường dùng, cuối cùng là thêm kiểu cơ bản và các chức năng như menu điều hướng, sidebar cho chủ đề. Đây chỉ là điểm khởi đầu, tiếp theo bạn có thể tiếp tục khám phá các mẫu nâng cao hơn (như trang tìm kiếm `search.php`, trang 404 `404.php`), học cách sử dụng nhiều chức năng hơn của Vòng lặp WordPress (The Loop), tích hợp framework JavaScript, hoặc gửi chủ đề của bạn lên thư mục chủ đề chính thức của WordPress. Thực hành liên tục và khám phá sổ tay phát triển chính thức là con đường tốt nhất để nâng cao kỹ năng.

FAQ 常见问题

Phát triển chủ đề WordPress cần những kiến thức tiên quyết nào?

Bạn cần có kiến thức cơ bản về HTML và CSS để xây dựng cấu trúc và kiểu dáng trang web. Đồng thời, hiểu biết cơ bản về PHP là rất quan trọng vì chủ đề WordPress chủ yếu được cấu thành từ các tệp mẫu PHP. Hiểu một chút về JavaScript sẽ hữu ích cho việc thêm các tính năng tương tác, nhưng ở giai đoạn bắt đầu thì không bắt buộc.

Tại sao chủ đề mới của tôi không hiển thị trong danh sách chủ đề ở khu vực quản trị WordPress?

Trước tiên, hãy kiểm tra xem thư mục chủ đề của bạn có được đặt đúng trong thư mục `wp-content/themes/` hay không. Sau đó, xác nhận xem tệp `style.css` có tồn tại trong thư mục gốc của thư mục đó không và định dạng thông tin chú thích ở đầu tệp (như Theme Name, v.v.) có chính xác không. Bất kỳ lỗi nào cũng có thể khiến WordPress không nhận diện được chủ đề của bạn.

Tệp functions.php có tác dụng gì?

Tệp `functions.php` là trung tâm chức năng cho chủ đề của bạn. Nó được sử dụng để kích hoạt hoặc sửa đổi các chức năng cốt lõi của WordPress (như thêm các tùy chọn hỗ trợ chủ đề), đăng ký menu điều hướng, khu vực tiện ích sidebar, tải an toàn các bảng định kiểu CSS và tập lệnh JavaScript, cũng như định nghĩa các hàm và bộ lọc tùy chỉnh. Đây là tệp quan trọng để mở rộng khả năng của chủ đề.

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

让主题支持多语言（国际化与本地化）是一项重要实践。你需要在`style.css`的头部和`functions.php`中设置正确的`Text Domain`（文本域），然后在代码中所有需要翻译的字符串处使用`__()`或`_e()`等翻译函数进行包裹。之后，可以使用像Poedit这样的工具生成`.po`和`.mo`语言文件，供翻译者使用。

Sau khi phát triển xong, làm thế nào để triển khai chủ đề lên trang web trực tuyến?

Có hai cách chính để triển khai chủ đề. Một là sử dụng ứng dụng khách FTP/SFTP (như FileZilla) để tải trực tiếp thư mục chủ đề từ máy cục bộ lên thư mục `wp-content/themes/` của trang web trực tuyến. Cách khác chuyên nghiệp hơn là đóng gói chủ đề thành tệp ZIP, sau đó cài đặt thông qua tính năng “Giao diện” -> “Chủ đề” -> “Thêm chủ đề mới” -> “Tải chủ đề lên” trong bảng điều khiển WordPress. Dù chọn cách nào, đều nên thử nghiệm kỹ lưỡng trong môi trường thử nghiệm của trang web trực tuyến trước khi triển khai.

Bước tiếp theo, chúng ta nên làm gì tiếp theo?

Nếu bạn đang xây dựng hoặc tối ưu hóa trang web WordPress của mình, bước tiếp theo là tiếp tục đọc về tối ưu hóa hiệu năng, cấu hình plugin và tùy chỉnh chủ đề.

Đọ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.

Thẻ: