Các chủ đề (themes) của WordPress là yếu tố then chốt quyết định giao diện và chức năng của một trang web. Việc tự phát triển chủ đề không chỉ giúp bạn tạo ra thiết kế hoàn toàn tùy chỉnh theo ý muốn mà còn giúp bạn hiểu sâu hơn về cách thức hoạt động của WordPress, từ đó nâng cao kỹ năng lập trình của mình. Hướng dẫn này sẽ hướng dẫn bạn từ đầu, từng bước xây dựng một chủ đề cơ bản đáp ứng các tiêu chuẩn của WordPress.
Thiết lập môi trường phát triển và cấu trúc cơ bản
Trước khi bắt đầu viết mã, bạn cần một môi trường phát triển địa phương phù hợp. Bạn có thể sử dụng XAMPP, MAMP hoặc các ứng dụng máy tính để bàn như Local by Flywheel. Hãy đảm bảo rằng PHP, MySQL và Apache/Nginx đã được cài đặt trong môi trường đó.
Tạo thư mục chủ đề và các tệp cốt lõi
Một chủ đề WordPress cơ bản nhất chỉ cần hai tệp tin. Đầu tiên, hãy tìm đến thư mục cài đặt WordPress của bạn…wp-content/themesTrong thư mục đó, hãy tạo một thư mục mới, ví dụ như:my-first-theme。
Đọc thêm Hướng dẫn phát triển theme WordPress: Tạo ra trang web cá nhân hóa từ con số không。
Trong thư mục đó, hãy tạo tập tin cốt lõi đầu tiên:style.cssTệp này không chỉ là một bảng định dạng (stylesheet) mà còn chứa thông tin meta về chủ đề (theme) được sử dụng. Phần đầu của tệp phải có một đoạn chú thích được định dạng đúng cách.
/*
Theme Name: My First Theme
Theme URI: https://example.com/my-first-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个用于学习的入门级WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/Tệp tin cốt lõi thứ hai là…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. Ban đầu, nó có thể rất đơn giản.
<!DOCTYPE html>
<html no numeric noise key 1010>
<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 1007>
<header>
<h1><a href="/vi/</?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></h1>
<p><?php bloginfo( 'description' ); ?></p>
</header>
<main>
<?php
if ( have_posts() ) :
while ( have_posts() ) :
the_post();
the_content();
endwhile;
endif;
?>
</main>
<footer>
<p>©</p>
</footer>
<?php wp_footer(); ?>
</body>
</html>Bây giờ, chủ đề của bạn đã có thể xuất hiện trong danh sách “Giao diện” -> “Chủ đề” trên giao diện quản trị WordPress và đã được kích hoạt.
Tệp mẫu cốt lõi và hệ thống phân cấp mẫu
WordPress sử dụng một hệ thống các quy tắc được gọi là “hệ thống cấp độ template” (template hierarchy) để quyết định file template nào sẽ được sử dụng cho một trang cụ thể. Việc hiểu rõ cấu trúc này là yếu tố then chốt trong quá trình phát triển các giao diện (theme) cho WordPress.
Mẫu bài viết và trang
Khi truy cập vào một bài viết cụ thể, WordPress sẽ ưu tiên tìm kiếm thông tin liên quan đến bài viết đó.single.phpNếu không tồn tại, hãy quay lại trạng thái ban đầu.index.phpBạn có thể tạo ra nó.single.phpBạn có thể tùy chỉnh cách hiển thị trang đơn của bài viết.
Đọc thêm Hướng dẫn nhập môn phát triển chủ đề WordPress: Tạo ra chủ đề website riêng của bạn từ con số không。
<?php get_header(); ?>
<article id="post-<?php the_ID(); ?>" no numeric noise key 1007>
<header class="entry-header">
<h1 class="entry-title"><?php the_title(); ?></h1>
<div class="entry-meta">
发布于： | 作者：
</div>
</header>
<div class="entry-content">
<?php the_content(); ?>
</div>
<footer class="entry-footer">
<?php the_tags( '标签：', ', ', '<br />' ); ?>
</footer>
</article>Đối với các trang web độc lập (không thuộc hệ thống WordPress), WordPress sẽ tự động tìm kiếm và xử lý chúng theo cách thích hợp.page.phpBạn cũng có thể tạo các mẫu (templates) cho ID trang cụ thể hoặc tên trang (page aliases), ví dụ như:page-about.phpNó sẽ được sử dụng riêng biệt cho trang “Về” (About page).
Mẫu tin lưu trữ và trang chủ
Trang danh sách bài viết blog (như theo danh mục, thẻ, hoặc danh mục tác giả)archive.php。Bạn có thể sử dụng hàmis_category()、is_tag()Các thẻ điều kiện được phân biệt với nhau bên trong.
Trang chủ của trang web mặc định được tạo bởi…index.phpKiểm soát… Nhưng bạn có thể tạo ra nó.front-page.phpHãy định nghĩa một trang chủ tĩnh, hoặc tạo ra một trang chủ tĩnh.home.phpĐây là cách để định nghĩa trang chủ của blog hiển thị các bài viết mới nhất.
Chức năng chủ đề (Theme Features) và cơ chế hook (Hook Mechanism)
Sự linh hoạt và khả năng mở rộng của WordPress phần lớn nhờ vào hệ thống Hook của nó, bao gồm Action và Filter. Các giao diện (Theme) có thể tận dụng những hệ thống này để tùy chỉnh và mở rộng chức năng của trang web một cách dễ dàng.functions.phpNgười dùng cần tải về tệp tin để sử dụng hệ thống này.
Khởi tạo chủ đề và hỗ trợ chức năng
functions.phpCác tệp tin này được sử dụng để thêm các tính năng như chủ đề (theme), menu đăng ký (registration menu), thanh bên (sidebar), v.v. Thông thường, người ta sẽ bắt đầu bằng cách…after_setup_themeAction hook này được sử dụng để khởi tạo các chức năng cơ bản của chủ đề (theme).
<?php
function my_theme_setup() {
// 让WordPress管理文档标题
add_theme_support( 'title-tag' );
// 启用文章和页面的特色图像功能
add_theme_support( 'post-thumbnails' );
// 启用HTML5标记支持
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
// 注册一个导航菜单
register_nav_menus( array(
'primary' => __( '主导航菜单', 'my-first-theme' ),
) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );Khu vực đăng ký tiện ích nhỏ (Registration for Small Tools)
Các khu vực chứa công cụ nhỏ như thanh bên cạnh (sidebar) hoặc phần chân trang (footer) cũng cần được thiết kế và bổ sung vào trang web.functions.phpĐăng ký tại đây. Sử dụng nó.widgets_initMóc.
Đọ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。
function my_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_theme_widgets_init' );Sau khi đăng ký, bạn có thể trong tệp mẫu (ví dụ nhưsidebar.php）sử dụngdynamic_sidebar( 'sidebar-1' )Đã đến lúc gọi chức năng liên quan đến khu vực này rồi.
Template Components and Loop Optimization
Để duy trì tính gọn gàng và khả năng tái sử dụng của mã nguồn, WordPress khuyến khích việc tách các phần mẫu được sử dụng lặp đi lặp lại (như tiêu đề trang, chân trang, bên cạnh trang) thành các tệp riêng biệt.
Split template components
Tạo raheader.php、footer.php和sidebar.phpTệp tin.index.phpDi chuyển đoạn mã tương ứng vào vị trí mới. Sau đó, hãy sử dụng nó tại vị trí ban đầu.get_header()、get_footer()和get_sidebar()Hãy sử dụng các hàm để chứa chúng.
Cách xử lý nâng cao cho vòng lặp các bài viết
Cách sử dụng vòng lặp cơ bảnwhile ( have_posts() ) : the_post(); ... endwhile;Nhưng trên trang lưu trữ, bạn thường cần hiển thị tóm tắt bài viết thay vì toàn bộ nội dung. Lúc này, bạn có thể sử dụng công cụ hoặc cách thức phù hợp để thực hiện điều đó.the_excerpt()Hàm.
Để có thể kiểm soát các vòng lặp một cách tốt hơn, đặc biệt là đối với các truy vấn tùy chỉnh, bạn cần hiểu rõ các nguyên lý và cơ chế hoạt động của chúng.WP_QueryLớp (class). Ví dụ, trên trang chủ chỉ hiển thị các bài viết thuộc một danh mục nhất định:
<?php
$custom_query = new WP_Query( array(
'category_name' => 'featured',
'posts_per_page' => 3,
) );
if ( $custom_query->have_posts() ) :
while ( $custom_query->have_posts() ) : $custom_query->the_post();
// 显示文章内容
endwhile;
wp_reset_postdata(); // 重置主查询数据
endif;
?>Hãy nhớ rằng, sau khi thực hiện các truy vấn tùy chỉnh, hãy sử dụng…wp_reset_postdata()Để khôi phục trạng thái toàn cục…$postBiến rất quan trọng; nếu không, chúng có thể ảnh hưởng đến việc hiển thị bình thường của các thành phần mẫu sau này (chẳng hạn như thanh bên cạnh).
Tóm lại
Từ khi được tạo ra…style.css和index.phpBắt đầu, tiến đến việc hiểu cấu trúc của các mẫu (templates), và sau đó là cách sử dụng chúng một cách hiệu quả.functions.phpBạn đã hoàn thành quy trình phát triển một chủ đề WordPress cơ bản nhưng đầy đủ bằng cách thêm các tính năng mới, sau đó phân tách các thành phần của mẫu chủ đề và tối ưu hóa các vòng lặp trong mã nguồn. Điều quan trọng nhất là tuân thủ các tiêu chuẩn và quy định của WordPress; điều này sẽ đảm bảo rằng chủ đề của bạn tương thích tốt với nhiều nền tảng khác nhau và dễ bảo trì. Bước tiếp theo, bạn có thể thử thêm nhiều thông tin meta phong phú hơn cho các bài viết, tích hợp các loại bài viết tùy chỉnh, hoặc sử dụng các công cụ xử lý mã nguồn trước (như Sass) để quản lý phong cách thiết kế, giúp chủ đề trở nên chuyên nghiệp và mạnh mẽ hơn.
FAQ 常见问题
Phát triển chủ đề WordPress có bắt buộc phải thành thạo PHP không
Đúng vậy, PHP là ngôn ngữ lập trình cốt lõi của WordPress. Các tệp mẫu (tệp có phần mở rộng .php) của các giao diện (theme) chủ yếu sử dụng PHP để tạo ra nội dung HTML một cách dinh hồi, gọi các hàm của WordPress và xử lý dữ liệu. Ngay cả khi sử dụng các công cụ xây dựng trang (page builders), việc hiểu biết về PHP vẫn rất cần thiết để có thể tùy chỉnh nâng cao và giải quyết các vấn đề phát sinh trong quá trình sử dụng WordPress.
Tệp functions.php của chủ đề có tác dụng gì
functions.phpĐây là “Trung tâm Chức năng” (Function Center) của giao diện thiết kế (theme) bạn đang sử dụng. Nó được dùng để kích hoạt các tính năng đặc biệt của giao diện (như menu, hình ảnh thu nhỏ), thiết lập khu vực hiển thị tiện ích (widgets), quản lý việc tải các tập tin script và style một cách có tổ chức, định nghĩa các hàm tùy chỉnh (custom functions), và thay đổi hành vi mặc định của WordPress thông qua các công cụ hook (Actions và Filters). Trung tâm Chức năng sẽ được tự động tải vào khi giao diện được khởi động (initiated).
Làm thế nào để chủ đề của tôi hỗ trợ dịch đa ngôn ngữ
Bạn cần thực hiện hai việc. Đầu tiên, hãy sử dụng hàm dịch của WordPress để bao quanh tất cả các chuỗi cần được dịch. Ví dụ:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )và trongstyle.css和functions.phpTrước hết, hãy thiết lập đúng thông tin về “Text Domain” (tên miền dùng để hiển thị nội dung văn bản trong ứng dụng). Tiếp theo, sử dụng các công cụ như Poedit để tạo tệp mẫu có định dạng .pot, sau đó tạo các tệp ngôn ngữ tương ứng có định dạng .mo và đặt chúng vào thư mục chứa các tài liệu ngôn ng/languagesthư mục chính xác.
Trong quá trình phát triển ứng dụng, làm thế nào để đưa các tệp CSS và JavaScript vào đúng cách?
Tuyệt đối không được sử dụng trực tiếp hoặc đưa các thẻ (tags) vào tệp template. Cách đúng đắn là phải sử dụng chúng thông qua các quy trình được thiết lập sẵn.wp_enqueue_style()和wp_enqueue_script()hàm, và gắn các lệnh gọi này vàowp_enqueue_scriptsAction hook này được thiết kế để đảm bảo rằng các mối phụ thuộc giữa các thành phần của hệ thống được xử lý một cách chính xác, tránh tình trạng tải lại dữ liệu không cần thiết, đồng thời tương thích với hệ thống quản lý script của WordPress.
php
function my_theme_scripts() {
wp_enqueue_style( 'my-theme-style', get_stylesheet_uri() );
wp_enqueue_script( 'my-theme-navigation', get_template_directory_uri() . 'https://www.likacloud.com/js/navigation.js', array(), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );
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 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
- Lời nói đầu: Tại sao chọn WordPress để phát triển?
- Cách chọn và tùy chỉnh giao diện WordPress phù hợp với bạn: Hướng dẫn đầy đủ từ người mới đến chuyên gia
- Hướng dẫn toàn diện xây dựng website: Quy trình hoàn chỉnh từ con số 0 đến tạo ra website chuyên nghiệp
Tiếng Việt