Công tác chuẩn bị và thiết lập môi trường
Trước khi bắt đầu viết mã, một môi trường phát triển địa phương hiệu quả là điều cực kỳ quan trọng. Chúng tôi khuyến nghị sử dụng các gói phần mềm tích hợp Apache/Nginx, PHP và MySQL, chẳng hạn như Local by Flywheel, MAMP hoặc XAMPP. Hãy đảm bảo rằng phiên bản PHP của bạn là 7.4 trở lên, phiên bản MySQL là 5.6 trở lên, và nên sử dụng phiên bản mới nhất của mã nguồn WordPress.
Về cơ bản, một chủ đề WordPress là một tập hợp các tệp nằm trong thư mục/wp-content/themes/Các thư mục trong danh mục đó chỉ cần có hai tệp tin cơ bản là đủ. Bạn cần tạo một thư mục mới trong môi trường cục bộ của mình, ví dụ như…my-professional-themeVà tạo ra tệp tin quan trọng đầu tiên bên trong đó.
Tạo thông tin cấu hình cốt lõi cho chủ đề
Mỗi chủ đề đều phải có một…style.cssĐây là một tệp tin chứa các thông tin cơ bản về chủ đề (theme) dành cho WordPress. Phần ghi chú ở đầu tệp tin được sử dụng để cung cấp những thông tin quan trọng về chủ đề đó cho hệ thống WordPress. Tên của tệp tin này là cố định, và WordPress sẽ đọc nội dung phần đầu tệp để nhận diện và liệt kê các chủ đề có sẵn.
Đọc thêm Thành thạo phát triển chủ đề WordPress: Hướng dẫn toàn diện từ cơ bản đến nâng cao。
/*
Theme Name: My Professional 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
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-professional-theme
*/Text DomainĐược sử dụng cho mục đích quốc tế hóa; nó sẽ đóng vai trò là định danh để gọi các hàm dịch tiếp theo.
Tạo tệp khởi động cốt lõi cho chủ đề
Tệp tin bắt buộc thứ hai là…index.phpĐó là mẫu trang quay lại mặc định cho tất cả các trang. Tuy nhiên, tệp khởi động quan trọng hơn là…functions.phpBạn cần tạo tệp này trong thư mục chứa các chủ đề (theme directory). Đây chính là “trung tâm điều khiển” của toàn bộ chủ đề, dùng để đưa vào các tệp biểu mẫu (style sheets), mã JavaScript, menu đăng ký (registration menu), thanh bên cạnh (sidebar), và các thành phần khác.
<?php
// 安全措施：防止直接访问文件
if ( ! defined( 'ABSPATH' ) ) {
exit;
}
// 1. 引入样式表和脚本
function my_theme_enqueue_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义样式
wp_enqueue_style( 'my-theme-custom-style', get_template_directory_uri() . '/assets/css/main.css' );
// 引入JavaScript
wp_enqueue_script( 'my-theme-main-js', get_template_directory_uri() . '/assets/js/main.js', array('jquery'), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_scripts' );
?>Xây dựng cấu trúc phân cấp của mẫu chủ đề (Theme Template Hierarchy)
Cấu trúc phân cấp của các mẫu (templates) trong WordPress là triết lý thiết kế cốt lõi của nó. Khi truy cập một trang, WordPress sẽ tìm kiếm tệp mẫu tương ứng theo thứ tự ưu tiên được quy định. Việc hiểu rõ và tạo ra những tệp mẫu quan trọng này là nền tảng để xây dựng các giao diện (themes) linh hoạt.
Xây dựng mẫu thiết kế giao diện trang web chung (universal website layout template)
header.php和footer.phpChúng tạo nên phần đầu (header) và phần cuối (footer) cho tất cả các trang trên trang web. Chúng ta có thể sử dụng chúng để hiển thị thông tin nhất quán, như logo, tiêu đề trang, hoặc các nút điều hướng trên mọi trang. get_header() 和 get_footer() Các hàm có thể được sử dụng trong bất kỳ mẫu (template) nào. Hãy tạo chúng đi!header.phpTrong đó cần phải bao gồm tài liệu HTML.<head>Các phần và khu vực hiển thị ở phía trên trang web (chẳng hạn như Logo, menu điều hướng).
<!DOCTYPE html>
<html no numeric noise key 1006>
<head>
<meta charset="<?php bloginfo( 'charset' ); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<?php wp_head(); ?>
</head>
<body no numeric noise key 1003>
<header id="masthead" class="site-header">
<div class="site-branding">
<h1 class="site-title"><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</div>
<nav id="site-navigation" class="main-navigation">
'menu-primary',
'menu_id' => 'primary-menu',
) );
?>
</nav>
</header>footer.phpNội dung này bao gồm thông tin ở phần cuối trang web, cũng như các đoạn mã được thêm vào trang web (thông qua việc sử dụng các tập tin script). wp_footer()Các thẻ mở (``) tương ứng, cùng với các thẻ đóng cuối cùng.
Tạo vòng lặp nội dung bài viết và mẫu trang chủ
index.phpĐây là mẫu dự phòng chung cho tất cả các trang, nhưng để có thể kiểm soát tốt hơn, nên tạo ra các mẫu cụ thể hơn. Ví dụ, trang danh sách bài viết trên blog thường được thiết kế theo những quy tắc khác biệt so với các trang khác.home.php或index.php“Control.” Trong khi đó, mẫu trang chi tiết của một bài viết đơn lẻ là…single.phpTrọng tâm của những mẫu này là “The Loop” (vòng lặp), đó là cơ chế mà WordPress sử dụng để duyệt qua và hiển thị nội dung các bài viết.
Tạo rahome.phpĐây là danh sách các bài viết trên blog:
<?php get_header(); ?>
<main id="primary" class="site-main">
<article id="post-<?php the_ID(); ?>" no numeric noise key 1010>
<header class="entry-header">
<h2 class="entry-title"><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
</header>
<div class="entry-content">
<?php the_excerpt(); ?>
</div>
</article>
<p><?php esc_html_e( 'No posts found.', 'my-professional-theme' ); ?></p>
<?php endif; ?>
</main>Thực hiện việc tạo các mẫu trang (page templates) và mẫu thanh bên cạnh (sidebar templates).
Sử dụng cho trang web tĩnh (static websites).page.phpMẫu này là lựa chọn lý tưởng để hiển thị các trang như “Về chúng tôi” và “Liên hệ với chúng tôi”. Cấu trúc của nó rất…single.phpTương tự, nhưng thường không chứa các thông tin phụ như phân loại, thẻ mô tả (tags), v.v.
Thanh bên được tạo thành từ…sidebar.phpĐịnh nghĩa về tệp tin: Thông thường, nó bao gồm một khu vực dành cho các tiện ích (các công cụ nhỏ được sử dụng trong tệp tin đó).functions.phptrong đó, bạn cần sử dụng register_sidebar() Hàm này được sử dụng để đăng ký một hoặc nhiều khu vực chứa các tiện ích (widgets), sau đó…sidebar.phpsử dụng dynamic_sidebar() Để gọi nó.
// 在functions.php中注册侧边栏
function my_theme_widgets_init() {
register_sidebar( array(
'name' => esc_html__( 'Main Sidebar', 'my-professional-theme' ),
'id' => 'sidebar-1',
'description' => esc_html__( 'Add widgets here.', 'my-professional-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_theme_widgets_init' );Thực hiện các tính năng chủ đề nâng cao
Một chủ đề chuyên nghiệp không chỉ cần có cấu trúc rõ ràng, mà còn cần phải được trang bị nhiều tính năng hữu ích và mang lại trải nghiệm tốt cho người dùng lẫn nhà phát triển. Điều này bao gồm khả năng tùy chỉnh chủ đề, hệ thống menu, hình ảnh đặc sắc, hỗ trợ hiển thị ảnh
Tích hợp hệ thống menu của WordPress
在functions.phptrong đó, sử dụng register_nav_menus() Hàm này được sử dụng để đăng ký vị trí của các mục ăn (đơn hàng) được hỗ trợ bởi chủ đề (theme) cụ thể.header.phpTrong ví dụ đã có lời gọi đến một hàm (function) có tên là…menu-primaryVị trí của đơn vị món ăn.
Đọ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。
function my_theme_register_menus() {
register_nav_menus(
array(
'menu-primary' => esc_html__( 'Primary Menu', 'my-professional-theme' ),
'menu-footer' => esc_html__( 'Footer Menu', 'my-professional-theme' ),
)
);
}
add_action( 'init', 'my_theme_register_menus' );Thêm hỗ trợ cho việc thêm hình ảnh đặc trưng và ảnh thu nhỏ cho bài viết.
Hình ảnh nổi bật (Featured Image) là một thành phần tiêu chuẩn trong thiết kế trang web hiện đại. add_theme_support() Bạn có thể kích hoạt tính năng này cho chủ đề của mình và định nghĩa nhiều kích thước khác nhau cho ảnh thu nhỏ bài viết.
function my_theme_setup() {
// 支持特色图片
add_theme_support( 'post-thumbnails' );
// 为特色图片添加自定义尺寸
add_image_size( 'my-theme-blog-thumbnail', 800, 400, true ); // 裁剪模式
}
add_action( 'after_setup_theme', 'my_theme_setup' );Trong tệp mẫu, sử dụng the_post_thumbnail( 'my-theme-blog-thumbnail' ) Hãy hiển thị hình ảnh này.
Kết nối với bộ công cụ tùy chỉnh của WordPress để tăng cường khả năng kiểm soát.
WordPress Customizer cho phép người dùng xem trước và thay đổi cài đặt của giao diện (theme) một cách thời gian thực. Bạn có thể thêm các tùy chọn (settings) mới vào công cụ này để tùy chỉnh giao diện theo ý muốn.settings), các thành phần điều khiển (controls)controlsVà logic xử lý dữ liệu đầu ra. Ví dụ, thêm một tùy chọn để hiển thị thông tin bản quyền ở phần chân trang:
function my_theme_customize_register( $wp_customize ) {
// 添加一个设置
$wp_customize->add_setting( 'footer_copyright_text', array(
'default' => '© 2026 Your Company Name. All rights reserved.',
'sanitize_callback' => 'sanitize_text_field',
) );
// 添加一个控件（输入框）到该设置
$wp_customize->add_control( 'footer_copyright_text', array(
'label' => __( 'Footer Copyright Text', 'my-professional-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );在footer.phptrong đó, sử dụng get_theme_mod( 'footer_copyright_text' ) Hãy lấy và hiển thị giá trị này.
Tối ưu hóa chủ đề và chuẩn bị phát hành
Sau khi quá trình phát triển hoàn tất, việc đảm bảo rằng sản phẩm (thema) của bạn hoạt động trơn tru, an toàn và dễ dàng được phân phối là bước quan trọng cuối cùng.
Đảm bảo rằng chủ đề hỗ trợ quốc tế hóa (internationalization).
Quá trình quốc tế hóa (i18n – Internationalization) cho phép chủ đề của bạn được dịch sang bất kỳ ngôn ngữ nào.functions.phpBước đầu tiên là tải dữ liệu văn bản cho phần hiển thị chủ đề (theme text).
function my_theme_load_theme_textdomain() {
load_theme_textdomain( 'my-professional-theme', get_template_directory() . '/languages' );
}
add_action( 'after_setup_theme', 'my_theme_load_theme_textdomain' );Sau đó, tất cả các chuỗi cần được dịch trong chủ đề đều phải được thay thế bằng ký hiệu %s. ()、_e() 或 esc_html() Các hàm như vậy được “bọc” (wrapped) bằng các lớp mã bảo vệ (wrapper functions).
Tiến hành đánh giá mã nguồn theo các tiêu chuẩn mã hóa đã được quy định.
WordPress có các tiêu chuẩn chính thức cho việc lập trình bằng PHP, CSS, và JavaScript. Việc tuân theo những tiêu chuẩn này giúp nâng cao độ đọc hiểu và khả năng bảo trì mã nguồn, đồng thời giúp mã nguồn được cộng đồng người dùng WordPress chấp nhận dễ dàng hơn. Bạn có thể sử dụng các công cụ như PHP_CodeSniffer kết hợp với các quy tắc lập trình của WordPress để kiểm tra mã nguồn của mình một cách tự động.
Tiến hành tăng cường bảo mật và dọn dẹp hoàn tất các thao tác cần thiết.
An toàn là ưu tiên hàng đầu. Ngoài việc…functions.phpKiểm tra ban đầuABSPATHNgoại trừ các hằng số, mọi dữ liệu do người dùng nhập vào và kết quả hiển thị một cách động (dynamic) đều phải được xác thực (validate), làm sạch (clean), và xử lý bằng các thao tác đặc biệt (escape). Một số hàm thường được sử dụng để thực hiện những công việc này bao gồm:
- Thoát ký tự: esc_html(), esc_attr(), esc_url()
- Dọn dẹp: sanitize_text_field(), sanitize_email()
- Xác thực: is_email(), absint()
Trước khi công bố, hãy loại bỏ tất cả các đoạn mã được sử dụng để gỡ lỗi (như…) var_dump()， print_r()Đảm bảo rằng tất cả các tính năng đều hoạt động đúng như mong đợi và được kiểm thử kỹ lưỡng trong nhiều môi trường khác nhau.
Tóm lại
Việc xây dựng một chủ đề WordPress chuyên nghiệp từ đầu là một quá trình có hệ thống, đòi hỏi người phát triển không chỉ cần hiểu biết về PHP/HTML/CSS/JavaScript mà còn phải nắm vững các nguyên lý cốt lõi của WordPress, chẳng hạn như cấu trúc các template, cơ chế lặp lại (looping), hệ thống hook và các tính năng hỗ trợ chủ đề. Nhờ vào hướng dẫn này, bạn đã hoàn thành một cách có tổ chức toàn bộ quá trình từ việc thiết lập môi trường phát triển, tạo template, triển khai các chức năng đến việc tối ưu hóa và phát hành chủ đề. Điều quan trọng nhất là một chủ đề tốt cần phải cung cấp cả những tính năng mạnh mẽ và thiết kế đẹp mắt, đồng thời giữ cho mã nguồn luôn rõ ràng, hiệu quả và an toàn, đồng thời tạo điều kiện thuận lợi cho người dùng và các nhà phát triển sau này trong việc mở rộng chức năng của chủ đề. Việc liên tục thực hành, tham khảo mã nguồn gốc và các chủ đề xuất sắc là con đường tốt nhất để nâng cao kỹ năng phát triển của bạn.
FAQ 常见问题
Phát triển WordPress Theme bắt buộc phải thành thạo những ngôn ngữ lập trình nào?
Để phát triển các chủ đề (themes) cho WordPress, PHP là ngôn ngữ cốt lõi mà bạn nhất định phải nắm vững, bởi vì đây chính là ngôn ngữ được sử dụng để viết mã nguồn cho chính WordPress cũng như hầu hết các thẻ (tags) trong các mẫu (templates) của nó. Đồng thời, bạn cũng cần thành thạo HTML và CSS để kiểm soát cấu trúc và thiết kế trang web. Việc am hiểu JavaScript cơ bản (đặc biệt là jQuery) rất quan trọng để tạo ra các hiệu ứng tương tác trên giao diện người dùng (frontend). Việc có kiến thức về SQL sẽ giúp bạn hiểu rõ hơn về cơ chế truy vấn dữ liệu trong WordPress.
Tại sao chủ đề mới của tôi không hiển thị trong danh sách “Chủ đề” trên giao diện quản trị WordPress?
Điều này thường xảy ra do…style.cssThông tin chú thích ở phần đầu tệp không đúng định dạng hoặc tệp bị thiếu. Vui lòng đảm bảo: 1) Thư mục chủ đề của bạn được đặt đúng/wp-content/themes/đường dẫn; 2) Tồn tại trong thư mụcstyle.cssTệp tin; 3) Thông tin chú thích ở phần đầu của tệp tin (Tên Chủ đề, Tác giả, v.v.) có định dạng hoàn toàn đúng và không chứa lỗi ngữ pháp. Nếu thiếu bất kỳ thông tin bắt buộc nào, WordPress sẽ không thể nhận diện được chủ đề đó.
Làm thế nào để tạo một mẫu trang tùy chỉnh cho chủ đề của tôi?
Để tạo một mẫu trang tùy chỉnh, bạn cần tạo một tệp PHP mới trong thư mục gốc của chủ đề (theme) và thêm một khối ghi chú chứa tên mẫu tương ứng ở đầu tệp đó. Ví dụ, để tạo một mẫu trang có độ rộng toàn màn hình, tên tệp có thể là…template-fullwidth.phpNó phải bắt đầu bằng:<?php /* Template Name: 全宽页面 */ ?>Sau đó, khi người dùng chỉnh sửa trang, họ có thể chọn tùy chọn “Trang có độ rộng đầy đủ” (Full-width page) từ danh sách thả xuống “Mẫu” (Template) trong mục “Thuộc tính trang” (Page Properties). Trong tệp này, bạn có thể viết nội dung hoàn toàn khác biệt so với những gì đã được định nghĩa trướcpage.phpCấu trúc và logic của nó.
Hooks đóng vai trò gì trong quá trình phát triển các chủ đề (themes)?
Các “hook” (được chia thành Action Hooks và Filter Hooks) là nền tảng cơ bản cho khả năng mở rộng của cấu trúc plugin và giao diện người dùng (theme) trong WordPress. Trong quá trình phát triển theme, bạn chủ yếu sử dụng Action Hooks để thực hiện các thao tác cụ thể. add_action()Bạn có thể chèn mã chức năng của mình vào những thời điểm cụ thể, chẳng hạn như lúc khởi tạo ứng dụng, tải các tập tin script, hoặc hiển thị phần chân trang (footer). Đồng thời, bạn cũng có thể sử dụng các hook (các điểm kết nối trong hệ thống) để thực hiện những thao tác cần thi add_filter()Bạn có thể sử dụng các hook (các hàm được gọi tự động trong quá trình thực thi WordPress) để thay đổi nội dung được hiển thị bởi WordPress hoặc các plugin khác (ví dụ: điều chỉnh độ dài tóm tắt bài viết, tùy chỉnh tên loại bài viết). Việc sử dụng hook một cách hợp lý sẽ giúp mã nguồn của bạn trở nên có cấu trúc hơn, dễ bảo trì và mở r
Sau khi hoàn thành việc phát triển giao diện (theme), làm thế nào để nộp nó vào danh mục chính thức của WordPress?
Việc gửi một theme lên danh mục chính thức của WordPress.org là một quy trình khá nghiêm ngặt. Đầu tiên, bạn cần đăng ký một tài khoản SVN trên WordPress.org. Tiếp theo, theme của bạn phải tuân thủ giấy phép GPL phiên bản 2 (GPL v2) hoặc các phiên bản mới hơn, và phải được đội ngũ kiểm duyệt theme chính thức của WordPress.org phê duyệt. Các tiêu chí kiểm duyệt bao gồm chất lượng mã nguồn, tính bảo mật, không chứa lỗi, tuân thủ các tiêu chuẩn lập trình, và cung cấp đủ hỗ trợ về khả năng truy cập (accessibility). Trước khi gửi, chúng tôi khuyên bạn nên đọc kỹ hướng dẫn phát triển theme chính thức và hướng dẫn gửi theme, đồng thời sử dụng plugin Theme Check để tự kiểm tra xem theme của bạn có đáp ứng đầy đủ các yêu cầu hay không.
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.
- 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
- Hướng dẫn toàn diện về phát triển theme WordPress: Từ con số không đến thành thục thông qua các bài học thực hành
- Hướng dẫn đầy đủ về phát triển chủ đề WordPress: Xây dựng các mẫu trang web chuyên nghiệp từ con số không
- Thực hành phát triển theme WordPress: Xây dựng từ đầu một trang web doanh nghiệp thích ứng với mọi thiết bị
Tiếng Việt