Việc chuẩn bị bước vào thế giới phát triển các chủ đề (themes) cho WordPress có nghĩa là bạn sẽ sở hữu khả năng xây dựng các trang web cá nhân hóa từ con số không. Điều này không chỉ liên quan đến mã nguồn, mà còn bao gồm việc hiểu rõ cách WordPress hoạt động, cũng như cách biến những ý tưởng thiết kế của mình thành những khung trang web có tính tương tác và linh hoạt. Khác với việc sử dụng các chủ đề có sẵn, việc phát triển chủ đề tùy chỉnh cho phép bạn kiểm soát hoàn toàn mọi chi tiết trên trang web – từ từng pixel cho đến mỗi lần truy xuất dữ liệu – dù là để thể hiện đặc trưng của thương hiệu hay để đáp ứng những yêu cầu kinh doanh phức tạp.
Cấu trúc cốt lõi của một chủ đề WordPress
Một chủ đề WordPress tiêu chuẩn là một thư mục chứa các tệp tin và thư mục cụ thể. Việc hiểu rõ cấu trúc này là nền tảng cơ bản cho quá trình phát triển.
Các tệp tin cần thiết cho chủ đề này
Mỗi chủ đề cần ít nhất hai tệp tin:style.css和index.phpTrong đó,style.cssVai trò của nó vượt xa một bảng định dạng (style sheet) thông thường; nó chứa phần đầu của bảng định dạng dùng để định nghĩa các thông tin về chủ đề (theme metadata), và đây chính là yếu tố then chốt giúp WordPress nhận diện một chủ đề cụ thể.
Đọc thêm Hướng dẫn chi tiết về phát triển theme WordPress: Từ cơ bản đến nâng cao。
/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个用于学习的自定义WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/index.phpĐây là tệp mẫu chính của chủ đề (theme’s main template file), đóng vai trò là mẫu dự phòng mặc định cho tất cả các trang web. Nó chính là điểm khởi đầu trong cấu trúc phân cấp của các mẫu (template hierarchy).
Cấu trúc phân cấp mẫu
Cấu trúc phân cấp của các mẫu (template hierarchy) là một trong những tính năng mạnh mẽ nhất của WordPress. Nó quy định file mẫu nào sẽ được WordPress sử dụng để hiển thị nội dung cho từng loại yêu cầu trang khác nhau. Ví dụ, khi truy cập vào một bài viết trên blog, WordPress sẽ tìm kiếm theo thứ tự sau:single-post-{id}.php > single-post.php > single.php > singular.php > index.phpNếu bạn hiểu được cấu trúc phân cấp này, bạn sẽ có thể tạo ra các tệp mẫu cụ thể (như…)page-about.php、archive.php、single.phpĐể kiểm soát chính xác cách hiển thị các nội dung khác nhau.
Tổ chức các nguồn tài nguyên theo chủ đề
Một thư mục chủ đề được thiết kế tốt thường bao gồm:/assetsThư mục (chứa)/css、/js、/imagesThư mục con được sử dụng để lưu trữ các tài nguyên tĩnh (static resources)./template-partsThư mục được sử dụng để lưu trữ các đoạn mẫu có thể được tái sử dụng, chẳng hạn như phần tiêu đề trang (header).header.phpTrang đầu (Header), Trang chính (Main Content), Trang chân (Footer)footer.php) và thanh bên (sidebar.phpThông qua.get_header()、get_footer()、get_sidebar()Bạn có thể dễ dàng đưa các phần này vào mẫu chính (main template) thông qua các hàm (functions).
Chức năng chủ đề và API cốt lõi
Chức năng của chủ đề được thực hiện thông qua…functions.phpĐây là tệp mã nguồn liên quan đến việc triển khai chức năng “Trung tâm điều khiển” (Control Center) của bạn; tệp này được sử dụng để thêm các tính năng mới, đăng ký các đặc điểm (features) cụ thể, và tích hợp với API cốt lõi của WordPress.
Khởi tạo chủ đề và kiểu dáng kịch bản
在functions.phpTrong trường hợp này, bạn nên sử dụngwp_enqueue_style()和wp_enqueue_script()Các hàm được sử dụng để tải đúng cách các tệp CSS và JavaScript. Thực hành tốt nhất là gắn các thao tác này vào (mount these operations to)…wp_enqueue_scriptshook này.
Đọc thêm Hướng dẫn toàn diện về phát triển theme WordPress: Từ cơ bản đến nâng cao。
function my_theme_scripts() {
// 引入主样式表
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
// 引入自定义JavaScript文件
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );(Tính năng đăng ký chủ đề)
WordPress cung cấp một loạt “tính năng của các giao diện” (theme features), và bạn có thể sử dụng chúng để...add_theme_support()Bạn cần sử dụng các hàm để tuyên bố rằng chủ đề của mình hỗ trợ những tính năng đó. Đây chính là cách mà chủ đề giao tiếp với trình soạn thảo WordPress và các tính năng khác trong hệ thống.
function my_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' ) );
// 支持全站编辑器的样式
add_theme_support( 'wp-block-styles' );
}
add_action( 'after_setup_theme', 'my_theme_setup' );Menu và Bảng điều khiển bên cạnh (Menu and Sidebar)
Thông quaregister_nav_menus()Bạn có thể định nghĩa vị trí của các mục menu trong giao diện, chẳng hạn như “Menu chính” và “Menu chân trang”. Sau đó, người dùng có thể quản lý những menu này trong phần “Giao diện” -> “Menu” ở phía backend, và hiển thị chúng trên giao diện người dùng thông qua các thiết lập tương ứng ở phía frontend.wp_nav_menu()Gọi hàm.
Khu vực các công cụ nhỏ (bảng điều khiển bên cạnh) được hiển thị thông qua…register_sidebar()Đăng ký hàm. Điều này cho phép người dùng thêm nội dung động vào các khu vực này thông qua giao diện tiện ích trong bảng điều khiển.
Template Tags and Loops
Các thẻ mẫu (template tags) là những hàm PHP được tích hợp sẵn trong WordPress, dùng để hiển thị nội dung một cách động trong các tệp mẫu. Còn “vòng lặp” (loop) là cấu trúc mã PHP trong WordPress, được sử dụng để truy xuất và hiển thị các bài viết từ cơ sở dữ liệu.
Hiểu về vòng lặp chính (main loop)
Vòng lặp (loop) là thành phần cốt lõi của các chủ đề WordPress. Cấu trúc cơ bản của nó như sau:
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
<h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</article>
<?php endwhile; else : ?>
<p><?php esc_html_e( '抱歉，没有找到任何内容。', 'my-custom-theme' ); ?></p>
<?php endif; ?>Trong vòng lặp này,the_title()、the_content()、the_permalink()Những thứ đó đều là các thẻ mẫu (template tags); chúng sẽ hiển thị dữ liệu tương ứng với bài viết hiện tại.
Condition Tags
Các thẻ điều kiện (như…)is_home()、is_single()、is_page()、is_archive()Việc cho phép bạn thực thi các đoạn mã khác nhau tùy thuộc vào loại trang đang được hiển thị là yếu tố then chốt trong việc thực hiện kiểm soát logic của mẫu (template logic).
<?php if ( is_front_page() && is_home() ) : ?>
<!-- 这是博客文章索引页，同时被设置为首页 -->
<?php elseif ( is_front_page() ) : ?>
<!-- 这是静态首页 -->
<?php elseif ( is_home() ) : ?>
<!-- 这是博客文章索引页（非首页） -->
<?php endif; ?>Phát triển nâng cao và biên tập toàn trang web (Advanced Development and Full-Website Editing)
Khi trình soạn thảo Gutenberg của WordPress trở nên hoàn thiện hơn, việc phát triển các giao diện (theme) cũng bước vào kỷ nguyên của “việc soạn thảo toàn bộ trang web” (full-site editing). Điều này đòi hỏi các nhà phát triển không chỉ cần am hiểu PHP mà còn phải quen thuộc với trình soạn thảo dựa trên các khối (block editor), các giao diện được xây dựng từ các khối (block-based themes), và
Tạo chủ đề khối (Create a block theme)
Một chủ đề loại “block” là loại chủ đề được xây dựng chủ yếu bằng cách sử dụng các mẫu HTML và các tệp thành phần (template components), và được tích hợp sâu rộng với trình soạn thảo Gutenberg. Một chủ đề loại block cần phải bao gồm ít nhất:theme.jsonCác tệp tin (dùng để lưu trữ các kiểu dáng và cài đặt toàn cục – global styles and settings):templatesThư mục (chứa)index.html(Markup templates for waiting blocks) andpartsThư mục (chứa)header.htmlCác thành phần mẫu dạng khối (block template components). Những tệp này sử dụng HTML và các thẻ khối (block tags) như…LikaCloud
Sử dụng file `theme.json` để quản lý kiểu dáng (styles) trên toàn bộ ứng dụng.
theme.jsonTệp tin là yếu tố cốt lõi của chủ đề “Block Theme”. Nó cho phép bạn định nghĩa một cách tập trung các thiết lập về bảng màu, phông chữ, khoảng cách giữa các thành phần trên trang, v.v. Những thiết lập này sẽ được tự động đồng bộ hóa với công cụ biên tập block, từ đó mang lại cho người dùng trải nghi
{
"version": 2,
"settings": {
"color": {
"palette": [
{ "name": "主色", "slug": "primary", "color": "#1e73be" },
{ "name": "次要色", "slug": "secondary", "color": "#81d742" }
]
}
}
}Phát triển các khối tùy chỉnh (Custom Blocks)
Để cung cấp những tính năng độc đáo, bạn có thể cần phải phát triển các khối (blocks) tùy chỉnh. Quá trình này thường bao gồm việc sử dụng công cụ @wordpress/create-block để khởi tạo một dự án plugin khối, sau đó sử dụng JavaScript hiện đại (chẳng hạn React) để viết logic biên tập và hiển thị trang (frontend rendering logic) cho các khối đó. Mặc dù cách tiếp cận này gần giống với việc phát triển plugin thông thường, nhưng nó ngày càng trở nên quan trọng đối với các chủ đề thương mại (commercial themes) muốn cung cấp những tính năng tùy chỉnh sâu rộng.
Tóm lại
Việc phát triển các chủ đề cho WordPress là một quá trình bắt đầu từ việc hiểu rõ cấu trúc cơ bản của các tệp tin, sau đó dần đi sâu vào các API cốt lõi, hệ thống template, và cuối cùng là áp dụng các công nghệ chỉnh sửa nội dung dạng khối (block editor) hiện đại. Người mới bắt đầu nên bắt đầu với việc tạo các chủ đề theo phong cách truyền thống bằng PHP, để nắm vững cấu trúc các file template, cách sử dụng các vòng lặp (loops) và các công cụ liên quan.functions.phpViệc vận dụng các kỹ năng này ngày càng trở nên hiệu quả hơn. Khi khả năng của bạn được nâng cao, bạn sẽ có thể khám phá nhiều điều mới mẻ hơn nữa.theme.jsonViệc sử dụng các chủ đề (themes) phù hợp sẽ trở thành điều không thể tránh khỏi; điều này giúp bạn xây dựng những trang web mạnh mẽ hơn và tuân thủ các tiêu chuẩn tương lai. Hãy nhớ rằng, một chủ đề tốt không chỉ đơn thuần là về giao diện bề ngoài, mà còn bao gồm cả chất lượng mã nguồn, hiệu năng, khả năng truy cập (accessibility) và trải nghiệm người dùng (user experience). Việc liên tục học hỏi từ các hướng dẫn chính thức và nguồn tài nguyên dành
FAQ 常见问题
Để học cách phát triển các chủ đề (themes) cho WordPress, bạn cần có những kiến thức cơ bản sau:
Bạn cần nắm vững kiến thức cơ bản về HTML và CSS – những công cụ thiết yếu để xây dựng giao diện trực quan cho trang web. Ngoài ra, bạn cũng cần hiểu biết cơ bản về PHP, vì phần lớn các chức năng cốt lõi của WordPress và các giao diện truyền thống được thực hiện bằng PHP. Việc am hiểu JavaScript (đặc biệt là phiên bản ES6+) sẽ rất hữu ích, đặc biệt là khi bạn phát triển các thành phần tùy chỉnh hoặc tương tác sâu với công cụ biên tập Gutenberg.
Làm thế nào để gỡ lỗi (debug) cho theme WordPress mà tôi đang phát triển?
Trước hết, hãy đảm bảo rằng…wp-config.phptrong tệpWP_DEBUG和WP_DEBUG_LOGĐiều này sẽ ghi các lỗi và cảnh báo của PHP vào tệp nhật ký thay vì hiển thị chúng trên trang web. Thứ hai, hãy sử dụng công cụ phát triển của trình duyệt (Chrome DevTools hoặc Firefox Developer Tools) để kiểm tra cấu trúc HTML, định dạng CSS và lỗi JavaScript. Đối với các logic phức tạp, bạn có thể…error_log()Hàm sẽ ghi giá trị biến vào nhật ký lỗi của PHP để tiến hành kiểm tra và phân tích.
Khác biệt giữa chủ đề con (sub-topic) và chủ đề cha (parent-topic) là gì? Tôi nên sử dụng loại nào?
Chủ đề cha (parent theme) là một chủ đề hoàn chỉnh về mặt chức năng và có tính độc lập. Chủ đề con (child theme) kế thừa tất cả các chức năng, kiểu dáng và tệp mẫu từ chủ đề cha, đồng thời cho phép bạn thay đổi một cách an toàn một số tệp trong chủ đề cha (ví dụ:…)style.css、functions.phpHoặc các tệp mẫu cụ thể), mà không ảnh hưởng đến các tệp cốt lõi của chủ đề cha (parent theme). Đây là thực hành tốt nhất để giữ nguyên những thay đổi tùy chỉnh của bạn khi cập nhật chủ đề cha. Đối với người mới bắt đầu, việc bắt đầu bằng cách sửa đổi các chủ đề con (subthemes) của một chủ đề cha có sẵn (chẳng hạn như bộ sưu tập Twenty Twenty) là một cách học tập an toàn và hiệu quả. Hãy phát triển một chủ đề cha độc lập chỉ khi bạn cần kiểm soát toàn bộ thiết kế từ đầu.
Làm thế nào để chủ đề của tôi thân thiện với SEO?
Hãy đảm bảo rằng các nội dung bạn tạo sử dụng các thẻ HTML5 có ý nghĩa rõ ràng và mang tính ngữ nghĩa (semantic HTML5 tags).add_theme_support( 'html5' )），thêm hình ảnhaltCác thuộc tính cần được liệt kê một cách rõ ràng và có cấu trúc tiêu đề phân cấp (h1, h2, h3). Chủ đề này cần hỗ trợ các chức năng SEO cốt lõi, chẳng hạn như thông qua…add_theme_support( 'title-tag' )Hãy để WordPress tự động quản lý tiêu đề trang, đồng thời đảm bảo rằng trang web hoạt động tốt trên các thiết bị di động. Ngoài ra, hãy giữ mã nguồn gọn gàng, tối ưu hóa tốc độ tải hình ảnh và script, vì tốc độ tải trang là yếu tố quan trọng trong việc xếp hạng trang web trên các công cụ tìm kiếm.
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.
- Làm thế nào để chọn và tùy chỉnh một chủ đề WordPress phù hợp với nhu cầu của bạn?
- 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
- Từ con số không đến con số một: Hướng dẫn đầy đủ và kỹ năng thực hành để xây dựng trang web chuyên nghiệp bằng WordPress
Tiếng Việt