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 máy chủ cục bộ (chẳng hạn như XAMPP, MAMP hoặc Local), cùng với một trình soạn thảo mã (chẳng hạn như VS Code, PhpStorm). Hãy đảm bảo rằng PHP (phiên bản 7.4 hoặc mới hơn được khuyến nghị) và MySQL đã được cài đặt trong môi trường của bạn.
Một chủ đề WordPress tiêu chuẩn là một thư mục chứa tập hợp các tệp tin nhất định. Trước tiên, hãy thực hiện các bước cần thiết trên hệ thống WordPress cài đặt tại máy tính của bạn.wp-content/themesHãy tạo một thư mục mới trong thư mục hiện tại, ví dụ như đặt tên nó là “NewFolder”.my-first-theme。
Tiếp theo, hãy tạo hai tệp tin cơ bản và thiết yếu nhất:style.css和index.phpTrong đó,style.cssKhông chỉ là một bảng định dạng (stylesheet), mà còn là “chứng minh thư” của một chủ đề (theme) trong WordPress; khối chú thích ở phần đầu tệp (header) được sử dụng để thông báo cho WordPress về đặc điểm và cấu hình của chủ đề đó.
Đọc thêm Hướng dẫn cơ bản về phát triển theme WordPress: Tạo ra trang web cá nhân hóa từ con số không。
在style.cssTrong tệp tin, bạn cần thêm phần thông tin tiêu đề theo định dạng sau:
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的自定义WordPress入门主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Những thông tin này sẽ được hiển thị trên trang “Giao diện” -> “Chủ đề” trong giao diện quản trị của WordPress.index.phpTệp tin này là mẫu mặc định của chủ đề (theme); ngay cả khi nó hiện tại chưa chứa bất kỳ nội dung nào, nó vẫn phải tồn tại để WordPress có thể nhận diện được rằng đây là một chủ đề hợp lệ.
Xây dựng các tệp template cơ bản
Sau khi đã có các tệp cơ bản, chủ đề của bạn vẫn chưa thể hiển thị bất kỳ nội dung nào. WordPress sử dụng một hệ thống cấp độ template (mẫu) để quyết định tải tệp template nào cho từng loại trang khác nhau. Tiếp theo, chúng ta sẽ tạo một số tệp template cốt lõi.
Tạo các mẫu đầu trang (header) và cuối trang (footer).
Để đảm bảo tính tái sử dụng và tính nhất quán của mã nguồn, chúng ta thường tách phần đầu trang (Header) và phần cuối trang (Footer) thành các tệp riêng biệt. Hãy bắt đầu bằng việc tạo các tệp này trước tiên.header.phpTệp tin này chứa phần đầu (header) của tài liệu HTML.<body>Các thẻ (tags) cũng như khu vực công cộng ở phía trên trang web (chẳng hạn như Logo và menu điều hướng).
Một cái đơn giản nhấtheader.phpVí dụ có thể bao gồm nội dung sau:
Đọc thêm Xây dựng website chuyên nghiệp: Cẩm nang toàn diện về phát triển và tùy chỉnh chủ đề WordPress。
<!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>
<header>
<h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>Hãy chú ý đến những điều được nêu trong đó.wp_head()Đây là một hàm cần được gọi, nhằm giúp phần cốt lõi của WordPress, các plugin, và chính các giao diện (theme) có thể chèn các đoạn mã cần thiết (như CSS và JS) vào phần đầu trang (header).
Tiếp theo, tạofooter.phpFile: Nó được sử dụng để đóng (các thứ được mở bằng file đó).<body>和<html>Thẻ (tags), và nội dung phần chân trang (footer content).
<footer>
<p>© . All rights reserved.</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Tương tự như vậy,wp_footer()Các hàm cũng là điều cần thiết.
Bây giờ, chúng ta có thể cập nhật.index.phpSử dụngget_header()和get_footer()Hãy sử dụng một hàm để đưa hai phần này vào.
<?php get_header(); ?>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) : the_post();
// 文章内容将在这里显示
endwhile;
else :
// 没有找到文章时的内容
endif;
?>
</main>
<?php get_footer(); ?>Tạo vòng lặp bài viết và mẫu nội dung
Trên đóindex.phpTrong đó, chúng ta đã tìm hiểu được bộ phận cốt lõi của WordPress: The Loop (Vòng lặp). Nó được sử dụng để duyệt qua tất cả các bài viết trên trang hiện tại (hoặc chỉ một bài viết cụ thể). Để nội dung các bài viết được trình bày một cách có cấu trúc rõ ràng hơn, chúng ta thường tách logic hiển thị từng bài viết ra thành các tệp riêng biệt.
Tạo racontent.php或template-parts/content.phpTệp tin, sau đó được xử lý trong vòng lặp.get_template_part()hàm để gọi nó.
Đọc thêm Hướng dẫn Toàn diện Phát triển Chủ đề WordPress: Khóa học Thực hành Từ Cơ bản đến Nâng cao。
// 在 index.php 的循环中
while ( have_posts() ) : the_post();
get_template_part( 'template-parts/content', get_post_format() );
endwhile;Sau đó, hãy tạo ra nó.template-parts/content.php：
<article id="post-<?php the_ID(); ?>" no numeric noise key 1005>
<h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-meta">
by
</div>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>Như vậy, tiêu đề bài viết, phần tóm tắt, metadata, v.v. sẽ được hiển thị theo định dạng tiêu chuẩn hóa.
Nhập các định dạng (styles) và mã nguồn (scripts)
Một chủ đề hiện đại không thể thiếu CSS và JavaScript. WordPress cung cấp các hàm tiêu chuẩn để xếp hàng (enqueue) các tệp định dạng style sheet và script một cách an toàn, thay vì sử dụng chúng trực tiếp trong các mẫu (templates).<link>或<script>Thẻ.
Thiết lập kiểu dáng chính cho quá trình đăng ký và xếp hàng
Mặc dù chúng ta đã có…style.cssNhưng thường thì chúng ta thực hiện điều đó thông qua…functions.phpBạn cần sử dụng một tệp tin để tải nội dung đó. Trước tiên, hãy tạo tệp tin đó trong thư mục gốc của chủ đề (theme root directory).functions.phpTệp.
Sau đó, hãy sử dụng nó.wp_enqueue_style()Chúng ta cần một hàm để tải các bảng định dạng (style sheets).functions.phpHãy tạo một hàm trong đó, và sau đó liên kết (hook) nó với…wp_enqueue_scriptsVề hành động này…
function my_first_theme_scripts() {
// 加载主样式表
wp_enqueue_style( 'my-first-theme-style', get_stylesheet_uri(), array(), '1.0' );
// 加载Google Fonts示例
wp_enqueue_style( 'my-first-theme-google-fonts', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );get_stylesheet_uri()Hàm sẽ tự động lấy thông tin về chủ đề (theme) cần sử dụng.style.cssĐường dẫn tệp.
Thêm script cho menu điều hướng thích ứng với các thiết bị khác nhau (responsive navigation menu script).
Để thêm các tính năng tương tác, chẳng hạn như menu thích ứng trên thiết bị di động, chúng ta cần sử dụng JavaScript. Giả sử chúng ta có một script đơn giản để chuyển đổi trạng thái hiển thị/hide của menu.
Trước tiên, hãy tạo một…js/navigation.jsFile. Sau đó,functions.phpTrong cùng một hàm đó, sử dụng…wp_enqueue_script()Hãy tải nó về.
function my_first_theme_scripts() {
// ... 之前的样式代码 ...
// 加载导航脚本
wp_enqueue_script( 'my-first-theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0', true );
}Tham số cuối cùngtrueĐiều này có nghĩa là bạn muốn đặt script (đoạn mã lập trình) ở phía cuối trang web.</body>(Nằm trước các thẻ tag), điều này thường giúp cải thiện hiệu suất tải trang.
Thực hiện các chức năng cốt lõi của chủ đề.
functions.phpĐây là “bộ não” của chủ đề (theme), được sử dụng để thêm các tính năng và cung cấp hỗ trợ cần thiết. Ngoài việc tải các tài nguyên, chúng ta cũng cần tuyên bố những tính năng mà chủ đề hỗ trợ tại đây.
Thêm hỗ trợ cho tính năng quản lý chủ đề (theme management).
WordPress cung cấp một loạt “tính năng chủ đề” (theme features), và bạn cần phải tuyên bố rõ ràng rằng bạn hỗ trợ chúng để có thể sử dụng chúng. Các tính năng cơ bản bao gồm ảnh thu nhỏ cho bài viết (hình ảnh đại diện), menu tùy chỉnh, và hỗ trợ các thẻ HTML5.
在functions.phpHãy thêm đoạn mã sau vào đó:
function my_first_theme_setup() {
// 让主题支持文章和评论的RSS feed链接自动添加到head中
add_theme_support( 'automatic-feed-links' );
// 让文章和页面支持“特色图像”
add_theme_support( 'post-thumbnails' );
// 启用对HTML5标记的支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 启用标题标签支持，WordPress会自动管理文档标题
add_theme_support( 'title-tag' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );after_setup_themeĐây là một hook hành động được thực thi khi chủ đề được khởi tạo (theme initialization), và đây là vị trí tiêu chuẩn để thiết lập các tính năng của chủ đề.
Đăng ký menu điều hướng
Hầu hết các trang web đều cần có menu điều hướng. Hệ thống menu của WordPress cho phép người dùng tự định hình các mục menu trong phần “Giao diện” -> “Menu” ở phía sau trang. Bạn cần phải đăng ký vị trí của các mục menu cho chủ đề (theme) mà bạn đang sử dụng trước.
Trong phần vừa rồi…my_first_theme_setupTrong hàm, tiếp tục thêm các đoạn mã sau:
function my_first_theme_setup() {
// ... 之前的 add_theme_support 代码 ...
// 注册一个主菜单位置
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}Sau khi đăng ký, bạn có thể trong tệp mẫu (ví dụ nhưheader.php）sử dụngwp_nav_menu()Đã có một hàm được tạo ra để hiển thị menu này:
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
) );
?>
</nav>Tạo ra thanh bên cạnh và khu vực công cụ nhỏ (sidebar and gadget area)
Widget là một tính năng mạnh mẽ khác của WordPress. Để sử dụng nó, bạn cần đăng ký một thanh bên (khu vực dành cho các Widget).
在functions.phpTrong đó, hãy tạo một hàm mới và liên kết nó với các thành phần khác của chương trình.widgets_initVề mặt hành động:
function my_first_theme_widgets_init() {
register_sidebar( array(
'name' => __( '主侧边栏', 'my-first-theme' ),
'id' => 'sidebar-1',
'description' => __( '在此添加小工具。', 'my-first-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_first_theme_widgets_init' );Sau khi đăng ký, bạn có thể truy cập mục “Nhìn ngoài” -> “Tiện ích” ở phần quản trị để xem khu vực “Thanh bên trái chính” và thêm các tiện ích vào đó bằng cách kéo chúng vào vị trí mong muốn. Nếu bạn muốn hiển thị tiện ích này trong giao diện chính của trang web (thông qua một chủ đề csidebar.phpĐược gọi trong (…)dynamic_sidebar( 'sidebar-1' )Hàm.
Tóm lại
Thông qua hướng dẫn này, chúng ta đã hoàn thành quy trình phát triển một theme WordPress với thiết kế đơn giản nhưng đầy đủ chức năng. Chúng ta bắt đầu từ việc thiết lập môi trường và tạo các tệp cơ bản, sau đó từng bước xây dựng cấu trúc của các template, tách biệt phần đầu (header) và phần cuối (footer), và triển khai cơ chế hiển thị nội dung bài viết một cách hiệu quả. Tiếp theo, chúng ta học cách thêm các phong cách (styles) và script vào theme theo cách chuẩn, nhằm đảm bảo tính tương thích và hiệu suất tốt nhất. Cuối cùng,functions.phpTrong quá trình này, chúng tôi đã kích hoạt các tính năng chính của chủ đề, chẳng hạn như hình ảnh nổi bật, menu điều hướng và khu vực công cụ nhỏ, giúp chủ đề trở nên cực kỳ dễ tùy chỉnh.
Đây chỉ là một điểm khởi đầu thôi. Dựa trên nền tảng này, bạn có thể tiếp tục tạo ra các tệp mẫu chuyên nghiệp hơn (như…)single.php、page.php、archive.phpBạn có thể khám phá các API phức tạp hơn của WordPress, chẳng hạn như API để tạo các loại bài viết tùy chỉnh, hệ thống phân loại (taxonomy), và API của công cụ Tùy chỉnh (Customizer), từ đó tạo ra những chủ đề website riêng biệt với nhiều tính năng nổi bật và thiết kế độc đáo.
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 theme cho WordPress, bạn cần nắm vững một số công nghệ cốt lõi. Đầu tiên là PHP, vì chính WordPress được viết bằng PHP; tất cả các tệp mẫu (templates) và logic chức năng đều phụ thuộc vào ngôn ngữ lập trình này. Bạn cần hiểu cơ bản về ngữ pháp PHP, các hàm, vòng lặp, và câu lệnh điều kiện.
Tiếp theo là HTML và CSS, được sử dụng để xây dựng cấu trúc và thiết kế giao diện của trang web. Việc nắm vững các nguyên tắc thiết kế trang web thích ứng (responsive web design) cùng các công nghệ bố trí hiện đại trong CSS (như Flexbox, Grid) là rất quan trọng. Cuối cùng, bạn cần có kiến thức cơ bản về JavaScript để triển khai các chức năng tương tác trên phía trình duyệt (frontend). Việc làm quen với các hàm PHP đặc trưng của WordPress và hệ thống Hook sẽ giúp bạn phát triển các giao diện (theme) một cách hiệu quả.
style.css 和 functions.php 文件哪个更重要？
Hai tệp tin này đóng vai trò hoàn toàn khác nhau nhưng đều vô cùng quan trọng trong quá trình phát triển các chủ đề WordPress; do đó, không thể đơn giản so sánh xem cái nào quan trọng hơn cái nào.style.cssTệp tin chính là “định danh” của một giao diện (theme), và khối chú thích ở phần đầu tệp tin là yếu tố cần thiết để WordPress nhận diện được giao diện đó. Nếu thiếu khối chú thích này, giao diện sẽ không thể hiển thị trong danh sách các giao diện ở phía sau hậu trường (backend).
而functions.phpTệp tin chính là “trung tâm chức năng” của một giao diện (theme); hầu hết các đoạn mã được sử dụng để nâng cao chức năng của giao diện đều được viết bên trong tệp tin này, chẳng hạn như mã xử lý menu đăng ký, cơ chế hỗ trợ thêm các giao diện mới, việc tải các tập tin script và kiểu dáng (styles), cũng như việc định nghĩa các hàm tùy chỉnh (custom functions), v.v. Nếu thiếu tệp tin này, giao diện sẽ mất đi phần lớn các chức năng động (dynamic functions) và khả năng mở rộng (scalability
Tại sao lại phải sử dụng các hàm wp_head() và wp_footer()?
wp_head()和wp_footer()Đây là những “hook” (khớp nối) quan trọng trong hệ thống WordPress, đảm nhiệm việc truyền thông tin giữa phần lõi của hệ thống (core), các giao diện (themes), và các tiện ích mở rộng (plugins).header.php的</head>Gọi trước nhãnwp_head()Đây là phương thức tiêu chuẩn cho phép WordPress chính thức, các plugin bạn đã cài đặt, và các thành phần khác của giao diện (theme) của bạn thêm các đoạn mã cần thiết vào phần đầu trang (header) – chẳng hạn như các thẻ meta, liên kết đến bảng định dạng kiểu (style sheets), tham chiếu đến các tập lệnh (scripts), dữ liệu được cấu trúc hóa theo định dạng JSON-LD, v.v.
Tương tự như vậy,footer.php的</body>Gọi trước nhãnwp_footer()Các đoạn mã này được sử dụng để chèn các script cần được tải vào phía cuối trang (chẳng hạn như mã phân tích dữ liệu, JS được tải chậm) hoặc các phần HTML khác. Nếu bỏ qua những đoạn mã này, có thể dẫn đến tình trạng plugin không hoạt động đúng chức năng, thanh công cụ quản lý không hiển thị, cũng như nhiều vấn đề về tính tương thích khác.
Làm thế nào để chủ đề (theme) của tôi tuân thủ các tiêu chuẩn chính thức của WordPress?
Để đảm bảo chủ đề của bạn tuân thủ các tiêu chuẩn chính thức của WordPress và có chất lượng cao, bạn cần thực hiện theo “Hướng dẫn phát triển chủ đề WordPress” (WordPress Theme Development Guide) cũng như các yêu cầu kiểm duyệt chủ đề (Theme Review Requirements). Điều này bao gồm việc sử dụng các thực hành lập trình an toàn, và áp dụng các hàm mã hóa (escape functions) cho tất cả dữ liệu được hiển thị một cách động (dynamic data).esc_html(), esc_url()Sử dụng các hàm quốc tế hóa (internationalization functions) cho tất cả các chuỗi được dịch.__(), _e()Và tải dữ liệu từ trường văn bản (text field) vào.
Thiết kế của chủ đề phải mang tính phản ứng (responsive), đảm bảo rằng nó hiển thị tốt trên mọi loại thiết bị. Mã nguồn phải được viết rõ ràng, kèm theo chú thích, và tuân thủ các tiêu chuẩn lập trình của WordPress. Ngoài ra, chủ đề cần cung cấp nhiều tùy chọn tùy chỉnh thông qua công cụ WordPress Customizer, đồng thời triển khai đúng đắn tất cả các chức năng và hook cốt lõi của WordPress. Trước khi phát hành, việc sử dụng plugin Theme Check để kiểm thử là một thói quen tốt.
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.
- 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
- Phát triển chủ đề WordPress từ đầu: Tạo ra giao diện trang web độc đáo
- Tại sao lại chọn WordPress làm nền tảng trang web ưu tiên?
- Hướng dẫn cơ bản về WordPress: Xây dựng trang web chuyên nghiệp đầu tiên của bạn từ con số không
- Giải pháp xây dựng trang web toàn diện: Hướng dẫn thực hiện từ đầu đến khi trang web đi vào hoạt động
Tiếng Việt