Việc xây dựng một chủ đề WordPress tùy chỉnh có nghĩa là bạn có thể kiểm soát hoàn toàn về giao diện, chức năng và hiệu suất của trang web. Khác với việc sử dụng các chủ đề có sẵn, việc phát triển tùy chỉnh cho phép bạn tạo ra một trang web độc đáo, hiệu quả và hoàn toàn phù hợp với thương hiệu của mình. Hướng dẫn này sẽ hướng dẫn bạn từ việc thiết lập môi trường cơ bản cho đến khi bạn phát hành một chủ đề với đầy đủ các tính năng cần thiết.
Môi trường phát triển và cấu trúc tệp tin cơ bản
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 địa phương phù hợp là rất quan trọng. Bạn có thể sử dụng các công cụ như XAMPP, MAMP, hoặc những công cụ chuyên nghiệp hơn như Valet và Local by Flywheel. Hãy đảm bảo rằng môi trường của bạn hỗ trợ PHP phiên bản 7.4 trở lên, cùng với cơ sở dữ liệu MySQL hoặc MariaDB.
Về bản chất, một chủ đề WordPress là một thư mục nằm trong wp-content/themes/ Thư mục bên trong folder này phải chứa ít nhất hai tệp tin cốt lõi: bảng định dạng (stylesheet) và mẫu chỉ mục (index template).
Đọc thêm Hướng dẫn nhập môn phát triển chủ đề WordPress: Xây dựng giao diện trang web của bạn từ con số không。
Đầu tiên, trong wp-content/themes/ Hãy tạo một thư mục mới, ví dụ như… my-custom-themeSau đó, hãy tạo tập tin đầu tiên cần thiết:style.cssTệp này không chỉ định kiểu dáng của chủ đề (theme), mà các ghi chú ở đầu tệp (header comments) còn chứa thông tin meta về chủ đề đó nữa.
/*
Theme Name: My Custom Theme
Theme URI: https://yourdomain.com/
Author: Your Name
Author URI: https://yourdomain.com/
Description: 一个从头开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/Tiếp theo, hãy tạo tệp thứ hai cần thiết:index.phpĐây là tệp mẫu mặc định của chủ đề; khi WordPress không tìm thấy mẫu cụ thể nào khác, nó sẽ sử dụng tệp này. Đây là một ví dụ về mẫu đơn giản nhất. index.php Chỉ cần sử dụng một vòng lặp duy nhất là đủ để hiển thị danh sách các bài viết.
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) :
while ( have_posts() ) : the_post(); ?>
<article>
<h2><?php the_title(); ?></h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile;
endif; ?>
</main>Hiểu về phân cấp mẫu
WordPress sử dụng cấu trúc phân cấp của các mẫu (templates) để quyết định sử dụng tệp mẫu nào cho một trang cụ thể. Ví dụ, khi truy cập vào một bài viết riêng lẻ, WordPress sẽ ưu tiên tìm kiếm mẫu dành riêng cho trang đó. single.phpnếu không tồn tại, thì sẽ quay về singular.phpcuối cùng mới đến index.phpViệc hiểu rõ mối quan hệ phân cấp này là yếu tố then chốt để phát triển các chủ đề một cách hiệu quả. Bạn nên tạo các tệp mẫu tương ứng dựa trên nhu cầu cụ thể của mình. page.php(Trang),archive.php(Trang lưu trữ) Và single.php(Một bài viết đơn lẻ.)
Tệp mẫu cốt lõi và tính năng chủ đề
Ngoài ra index.php 和 style.cssMột chủ đề có chức năng đầy đủ còn cần thêm một vài tệp mẫu cốt lõi khác để phân chia cấu trúc trang và thực hiện việc tái sử dụng mã nguồn.
Tạo ra 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).<head> Phần bản đồ khu vực, cùng với thanh điều hướng và biểu tượng ở phía trên trang web. Hãy sử dụng chúng một cách thích hợp. wp_head() Các hàm (functions) đóng vai trò vô cùng quan trọng; chúng cho phép phần cốt lõi của WordPress, các plugin, và chủ đề (theme) của bạn chèn vào đây những đoạn mã cần thiết (chẳng hạn như các liên kết đến bảng biểu định kiểu (style sheets) hoặc các thẻ meta).
<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
<header>
<h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
</header>Tạo ra footer.php Đây là đoạn mã HTML mô tả cấu trúc của một tệp tin, bao gồm nội dung phần chân trang (footer) và các thẻ HTML dùng để đóng nội dung bên trong tệp. Để sử dụng tệp tin này, cần phải thực hiện một hành động cụ thể (chẳng hạn: tải nó xuống, xử lý nội dung bên trong, v wp_footer() Đây là một hàm được sử dụng để tải các đoạn mã cần thiết cho việc thực hiện các tác vụ như khởi động script hoặc cài đặt plugin.
functions.php Tệp tin này chính là “trung tâm điều khiển” cho chủ đề (theme) của bạn. Đây không phải là một tệp tin mẫu (template), mà là một tệp PHP được tự động tải vào khi chủ đề được khởi tạo. Tại đây, bạn có thể đăng ký các menu, thanh bên cạnh (sidebar), thêm các tính năng hỗ trợ cho chủ đề, cũng như thêm các định dạng (stylesheets) và script vào tệp tin này.
<?php
// 添加主题支持
function my_theme_setup() {
add_theme_support( 'title-tag' ); // 让 WordPress 管理标题标签
add_theme_support( 'post-thumbnails' ); // 启用文章缩略图功能
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );
// 注册导航菜单
function my_theme_menus() {
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-custom-theme' ),
'footer' => __( '页脚菜单', 'my-custom-theme' ),
) );
}
add_action( 'init', 'my_theme_menus' );Tạo menu một cách động (dynamic menu generation)
在 header.php Trong đó, bạn có thể sử dụng… wp_nav_menu() Đây là một hàm được sử dụng để hiển thị các mục trong menu mà bạn đã đăng ký. Hàm này sẽ trả về một danh sách không có thứ tự (unordered list) chứa các mục menu, với đúng các lớp CSS và cấu trúc được thiết lập trong phần “Giao diện > Menu” của trang quản trị WordPress.
<nav>
<?php
wp_nav_menu( array(
'theme_location' => 'primary',
'menu_class' => 'primary-menu',
'container' => false,
) );
?>
</nav>Style, Scripts, and Responsive Design
Các chủ đề WordPress hiện đại phải tuân theo các thực tiễn tốt nhất để tải các tệp CSS và JavaScript, đồng thời đảm bảo rằng trang web hiển thị đúng cách trên mọi loại thiết bị.
在 functions.php trong đó, sử dụng wp_enqueue_style() 和 wp_enqueue_script() Các hàm được sử dụng để sắp xếp các tài nguyên. Điều này đảm bảo việc quản lý các phụ thuộc và thứ tự tải chúng một cách chính xác, đồng thời cho phép các plugin và sub-theme thay đổi (hoặc “đè lên”) các thiết lập có sẵn.
function my_theme_scripts() {
// 排入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri(), array(), '1.0.0' );
// 排入自定义 JavaScript 文件
wp_enqueue_script( 'my-theme-script', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0.0', true );
// 为脚本本地化数据（可选）
wp_localize_script( 'my-theme-script', 'myThemeData', array(
'ajax_url' => admin_url( 'admin-ajax.php' ),
) );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );Thiết kế phản ứng (responsive design) nên được coi là tiêu chuẩn mặc định. Trong trường hợp của bạn… style.css Trong thiết kế web, chúng ta sử dụng các truy vấn phương tiện (media queries) để điều chỉnh giao diện theo kích thước màn hình khác nhau. Một mô hình phổ biến là “ưu tiên cho thiết bị di động” (mobile-first), tức là trước tiên chúng ta xây dựng giao diện cơ bản dành cho thiết bị di động, sau min-width Các truy vấn truyền thông (media queries) được sử dụng để thêm các phong cách thiết kế (styles) được tối ưu hóa cho những màn hình có kích thước lớn hơn.
Đọc thêm Hướng dẫn bạn từng bước cách tạo ra một chủ đề WordPress tùy chỉnh mạnh mẽ và hiệu quả。
/* 基础移动样式 */
.container { width: 100%; padding: 0 15px; }
.menu { display: block; }
/* 平板电脑及以上 */
@media (min-width: 768px) {
.container { width: 750px; margin: 0 auto; }
.menu { display: flex; }
}
/* 桌面电脑 */
@media (min-width: 992px) {
.container { width: 970px; }
}Sử dụng các lớp và hàm tích hợp sẵn trong WordPress
WordPress cung cấp rất nhiều lớp CSS và hàm PHP hữu ích để hỗ trợ việc phát triển giao diện (style development).body_class() Hàm sẽ xuất ra một loạt các lớp CSS dựa trên loại trang hiện tại (ví dụ: home, single-post, page-id-2Bạn có thể sử dụng các lớp này trong CSS để tạo ra những phong cách (styles) phù hợp với từng trường hợp cụ thể.post_class() Các hàm sẽ tạo ra các lớp tương tự cho các phần tử chứa nội dung của mỗi bài viết.
Tính năng nâng cao và tích hợp với các thành phần nhỏ (widgets)
Để chủ đề của bạn trở nên chuyên nghiệp và dễ sử dụng hơn, bạn có thể tích hợp một số tính năng nâng cao như tùy chỉnh loại bài viết, khu vực hiển thị các tiện ích (bên cạnh) và cài đặt tùy chỉnh.
Khu vực các tiện ích nhỏ (widgets) cho phép người dùng tùy chỉnh nội dung bằng cách kéo các mô-đun từ mục “Giao diện > Tiện ích” (Appearance > Widgets) trong bảng điều khiển WordPress. functions.php Bạn có thể đăng ký một khu vực để hiển thị các tiện ích (widgets) ở thanh bên (sidebar) trong hệ thống này.
function my_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' => '<h3 class="widget-title">',
'after_title' => '</h3>',
) );
}
add_action( 'widgets_init', 'my_theme_widgets_init' );Sau khi đăng ký, bạn sẽ có thể sử dụng các tính năng được cung cấp trong các tệp mẫu (template files), chẳng hạn như… sidebar.phpSử dụng dynamic_sidebar() Hàm được sử dụng để gọi (triệu hồi) chức năng của khu vực này.
WordPress Customizer cho phép người dùng xem trước các thay đổi được thực hiện trên giao diện trang web ngay lập tức. Bạn có thể thêm một số thiết lập đơn giản cho giao diện của mình, chẳng hạn như biểu tượng trang web (Logo) hoặc văn bản bản quyền ở phần chân trang (footer). Điều này được thực hiện thông qua công cụ Customizer trong WordPress. WP_Customize_Manager Lớp, trong… functions.php Hãy thêm đoạn mã liên quan vào đó.
function my_theme_customize_register( $wp_customize ) {
// 添加一个“版权信息”设置
$wp_customize->add_setting( 'footer_copyright', array(
'default' => '© 2026 Your Site Name',
'sanitize_callback' => 'sanitize_text_field',
) );
$wp_customize->add_control( 'footer_copyright', array(
'label' => __( '页脚版权文本', 'my-custom-theme' ),
'section' => 'title_tagline', // 放在“站点身份”区域
'type' => 'text',
) );
}
add_action( 'customize_register', 'my_theme_customize_register' );Sau đó, tại phần của bạn… footer.php Trong đó, bạn có thể sử dụng… get_theme_mod() Hàm được sử dụng để hiển thị giá trị của thiết lập này:<?php echo esc_html( get_theme_mod( 'footer_copyright' ) ); ?>。
Tóm lại
Việc phát triển các chủ đề (themes) cho WordPress là quá trình kết hợp kiến thức về PHP, HTML, CSS và JavaScript với cấu trúc cốt lõi của WordPress. Quá trình này bắt đầu bằng việc thiết lập cấu trúc tệp tin một cách chính xác, sau đó từng bước triển khai các thành phần như hệ thống các mẫu (templates), các tệp tin chứa chức năng cốt lõi, hệ thống quản lý tài nguyên, và thiết kế thân thiện với mọi thiết bị (responsive design). Bằng cách tích hợp các công cụ nâng cao như widgets và customizers, bạn có thể tạo ra những chủ đề chuyên nghiệp vừa mạnh mẽ vừa dễ sử dụng. Yếu tố then chốt là phải hiểu rõ cách thức hoạt động của WordPress và tuân thủ các tiêu chuẩn lập trình cũng như thực hành tốt nhất của nó; điều này sẽ đảm bảo rằng chủ đề của bạn an toàn, hiệu quả và dễ bảo trì.
FAQ 常见问题
Để phát triển một chủ đề (theme) cho WordPress, bạn cần có những kiến thức cơ bản sau:
Bạn cần có nền tảng vững chắc về HTML và CSS – đây là những yếu tố cơ bản để xây dựng giao diện cho các trang web. Đồng thời, bạn phải nắm vững ngữ pháp cơ bản của PHP, vì cả phần lõi của WordPress lẫn các mẫu giao diện (templates) đều được viết bằng PHP. Kiến thức về JavaScript (đặc biệt là jQuery) sẽ rất hữu ích trong việc thêm các tính năng tương tác vào trang web. Cuối cùng, việc hiểu rõ các khái niệm cơ bản của WordPress như vòng lặp (loops), các hook (các hàm được gọi tự động trong quá trình thực thi), và cấu trúc của các mẫu giao diện (template hierarchy) là yếu tố then chốt để phát triển các mẫu giao diện một cách thành công.
Tệp functions.php của một chủ đề (theme) có thể dài bao nhiêu? Liệu điều đó có ảnh hưởng đến hiệu suất không?
functions.php Về mặt lý thuyết, các tệp tin có thể rất dài; tuy nhiên, vì lý do bảo trì, việc chia nhỏ chúng thành các phần riêng biệt (module hóa) là rất được khuyến nghị. Bạn có thể tách các chức năng khác nhau (chẳng hạn như các loại bài viết tùy chỉnh, mã ngắn, tiện ích nhỏ) thành các tệp tin riêng biệt, sau đó sử dụng chúng m functions.php sử dụng require_once 或 include Chỉ cần mã được viết một cách hiệu quả và không chứa các truy vấn thừa thãi, thì độ dài của mã sẽ ảnh hưởng rất ít đến hiệu năng. Đối với các dự án lớn, việc chia nhỏ các tệp mã thành các phần riêng biệt là một thực tiễn phổ biến.
Làm thế nào để chủ đề của tôi hỗ trợ dịch đa ngôn ngữ?
Việc hỗ trợ quốc tế hóa (i18n) cho các chủ đề là một bước quan trọng khi nhắm đến người dùng trên toàn thế giới. Trong mã PHP của bạn, tất cả các chuỗi văn bản dành cho người dùng đều nên được bao bọc bằng các hàm dịch của WordPress. Ví dụ: __()(Dùng để hiển thị văn bản) hoặc _e()(Dùng để hiển thị văn bản trực tiếp.) Bạn cần phải... style.css và trong load_theme_textdomain() Điều chỉnh chính xác trong lời gọi hàm Text DomainSau đó, các nhà phát triển có thể sử dụng các công cụ như Poedit để tạo ra (generate) những tài liệu cần thiết. .pot Tệp mẫu (template file), và tạo ra những tệp tương ứng (corresponding files). .po 和 .mo tệp dịch.
Làm thế nào để tôi gửi chủ đề (theme) mà tôi đã phát triển lên danh mục chủ đề chính thức của WordPress?
Việc gửi mã nguồn lên danh mục chính thức của WordPress yêu cầu phải tuân thủ những quy định nghiêm ngặt. Mã nguồn của bạn phải đáp ứng các tiêu chuẩn lập trình của WordPress; không được sử dụng bất kỳ mã rút gọn (shortcodes) hay các thành phần (widgets) nào để cố định nội dung một cách thủ công. Đảm bảo rằng tất cả các chức năng đều an toàn và tuân thủ giấy phép GPL. Giao diện (theme) phải vượt qua bài kiểm tra của plugin Theme Check, đồng thời phải có thiết kế thích ứng tốt với nhiều loại thiết bị (responsive design), tính khả dụng cao (accessibility), và đi kèm với tài liệu hướng dẫn đầy đủ. Quá trình gửi mã nguồn được thực hiện thông qua trang gửi lên trang web chính thức của WordPress; sau đó, một nhóm người kiểm duyệt sẽ xem xét nội dung đó.
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 xây dựng trang web hiện đại: Quy trình hoàn chỉnh từ đầu đến khi trang web đi vào hoạt động và lựa chọn công nghệ phù hợp
- Phân tích quy trình cốt lõi và công nghệ then chốt trong xây dựng website
- 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
- Hướng dẫn dành cho người mới bắt đầu xây dựng trang web: Cẩm nang toàn diện để xây dựng một trang web hiệu suất cao từ con số không
- 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
Tiếng Việt