Hiểu cấu trúc cơ bản của theme WordPress
Một chủ đề WordPress không chỉ đơn thuần là một bộ các bảng định dạng (style sheets) dùng để điều chỉnh giao diện của trang web; đó thực chất là một tập hợp các tệp tin được thiết kế theo những tiêu chuẩn nhất định. Những tệp tin này hoạt động cùng nhau để hướng dẫn WordPress cách hiển thị nội dung trên trang web. Chủ đề đơn giản nhất thường chỉ bao gồm hai tệp tin:style.css 和 index.phpTuy nhiên, những chủ đề có tính năng mạnh mẽ thường chứa hàng chục tệp mẫu (template files), tệp hàm (function files) và tệp tài nguyên (asset files).
Các tệp tin cốt lõi và chức năng của chúng
Mọi chủ đề WordPress đều phải chứa một… style.css Đây là một tệp tin quan trọng: không chỉ đóng vai trò cốt lõi trong việc định nghĩa giao diện trang web, mà phần chú thích ở đầu tệp tin còn chứa các thông tin meta về chủ đề (metadata) như tên chủ đề, tác giả, mô tả và phiên bản. Những thông tin này là yếu tố then chốt giúp WordPress nhận diện một chủ đề hợp lệ.
Một tệp tin cơ bản khác là… index.phpĐây là tệp mẫu mặc định cho chủ đề (theme). Khi WordPress không thể tìm thấy tệp mẫu phù hợp hơn cho yêu cầu hiện tại, nó sẽ tự động sử dụng tệp mẫu mặc định này. index.php。
Cấu trúc phân cấp mẫu
Hệ thống chủ đề của WordPress tuân theo một quy tắc “cấu trúc phân cấp của các mẫu” (template hierarchy) rất rõ ràng. Điều này có nghĩa là khi truy cập một trang cụ thể, WordPress sẽ tìm kiếm tệp mẫu phù hợp nhất theo một thứ tự đã được định trước. Ví dụ, khi truy cập một bài viết trên blog, WordPress sẽ ưu tiên tìm kiếm tệp mẫu dùng để hiển thị nội dung bài viết đó. single-post.php, nếu không tồn tại, thì tìm kiếm single.phpCuối cùng mới sử dụng. index.phpViệc hiểu rõ cấu trúc phân cấp này là nền tảng cơ bản để thực hiện các tùy chỉnh nâng cao.
Tạo ra chủ đề cơ bản đầu tiên của bạn.
Việc tạo một chủ đề (theme) từ đầu là cách tốt nhất để hiểu rõ cách thức nó hoạt động. Đầu tiên, chúng ta sẽ bắt đầu trong WordPress… wp-content/themes Hãy tạo một thư mục mới trong thư mục đó, ví dụ như đặt tên nó là “my-first-theme”.
Viết thông tin phần đầu của bảng định dạng (style sheet header)
Trong thư mục này, hãy tạo… style.css Tệp tin, và hãy nhập các thông tin tiêu đề cơ bản sau:
/*
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
*/Xây dựng mẫu chỉ mục cơ bản
Tiếp theo, tạo index.php Đây là một mẫu cơ bản nhất; nó sử dụng các hàm cốt lõi của WordPress để lấy và hiển thị tiêu đề trang web cũng như danh sách các bài viết.
<!DOCTYPE html>
<html no numeric noise key 1014>
<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 1011>
<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(); ?>
<article>
<h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>
</main>
<?php wp_footer(); ?>
</body>
</html>Lúc này, bạn có thể truy cập vào mục “Giao diện > Chủ đề” trong phần quản trị WordPress để xem và kích hoạt chủ đề cơ bản này.
Đọc thêm Hướng dẫn thực hành đầy đủ về phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh từ con số 0。
Sử dụng các tệp mẫu (template files) và các công cụ hook để thực hiện việc tùy chỉnh.
Để các tính năng của chủ đề trở nên phong phú và có cấu trúc rõ ràng hơn, bạn cần sử dụng tốt các tệp mẫu (template files) cùng hệ thống hook của WordPress.
Phân chia mẫu thành các thành phần mô-đun hóa
Một chủ đề chuyên nghiệp sẽ không đưa toàn bộ đoạn mã lập trình vào cùng một nơi. Thay vào đó, các đoạn mã sẽ được sắp xếp một cách có tổ chức, theo từng phần chức năng cụ thể. index.php Đúng vậy. Chúng tôi sử dụng nó. get_header()， get_footer()， get_sidebar() Sử dụng các hàm như vậy để phân tách template. Trước tiên, hãy… index.php Các phần HTML ở phần giữa và cuối của trang đã được chuyển vào các tệp được tạo mới. header.php 和 footer.php Tải xuống tệp tin, sau đó thực hiện việc sửa đổi. index.php Như sau:
<?php get_header(); ?>
<main>
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
<article>
<h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<div><?php the_content(); ?></div>
</article>
<?php endwhile; else : ?>
<p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-first-theme' ); ?></p>
<?php endif; ?>
</main>Thêm chức năng thông qua tệp hàm
functions.php Tệp tin chính là “bộ não” của trang web, được sử dụng để thêm các tính năng đặc biệt, menu đăng ký, khu vực công cụ nhỏ (widgets), cũng như các định dạng (stylesheets) và mã lệnh (scripts). Hãy tạo tệp tin này và thêm đoạn mã cơ bản sau để đăng ký một menu điều hướng:
<?php
function my_first_theme_setup() {
// 注册一个导航菜单位置
register_nav_menus( array(
'primary' => __( 'Primary Menu', 'my-first-theme' ),
) );
// 添加文章缩略图支持
add_theme_support( 'post-thumbnails' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );
// 排入样式表和脚本
function my_first_theme_scripts() {
wp_enqueue_style( 'main-style', get_stylesheet_uri() );
wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );
?>Sau đó, bạn có thể… header.php sử dụng wp_nav_menu() Hàm được sử dụng để hiển thị menu này.
Thực hiện thiết kế thích ứng (responsive design) và phát triển các chủ đề con (subthemes).
Các trang web hiện đại phải tương thích với mọi loại màn hình thiết bị khác nhau. Đồng thời, để có thể cập nhật giao diện chính một cách an toàn mà không làm mất đi các thay đổi được tùy chỉnh, việc sử dụng các giao diện con (sub-themes) là một kỹ năng cực kỳ quan trọng.
Áp dụng các nguyên tắc thiết kế phản ứng (responsive design) cho ứng dụng.
在 style.css Trong đó, bạn sử dụng CSS Media Queries để tạo ra một bố cục thích ứng với các thiết bị khác nhau. Ví dụ, bạn có thể thiết lập các quy tắc định dạng khác nhau cho máy tính bảng và điện thoại di động:
Đọc thêm Hướng dẫn toàn diện phát triển chủ đề WordPress: Xây dựng website tùy chỉnh từ con số không。
/* 基础样式 */
.container { width: 100%; max-width: 1200px; margin: 0 auto; }
/* 平板设备 (宽度小于 768px) */
@media (max-width: 768px) {
.container { padding: 0 15px; }
.sidebar { display: none; }
}
/* 手机设备 (宽度小于 480px) */
@media (max-width: 480px) {
h1 { font-size: 1.5em; }
}Tạo chủ đề con để thay thế chủ đề cha
Các chủ đề con (sub-templates) cho phép bạn sửa đổi hoặc mở rộng chức năng của một chủ đề khác (chủ đề cha – parent template). Hãy tạo một thư mục mới, ví dụ như “my-first-theme-child”, và sau đó thực hiện các thao tác cần thiết bên trong thư mục đó. style.cssThông tin ở phần đầu phải chứa dòng “Template” để chỉ định tên thư mục chủ đề cha (parent theme directory).
/*
Theme Name: My First Theme Child
Template: my-first-theme
Version: 1.0
*/Sau đó, trong phần nội dung liên quan đến chủ đề con (sub-topic)… functions.php Trong đó, bạn cần đưa các bảng định dạng (style sheets) của chủ đề cha (parent theme) và chủ đề con (child theme) vào đúng vị trí.
<?php
add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
// 排入父主题样式表
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
// 排入子主题样式表，位于父主题样式之后
wp_enqueue_style( 'child-style', get_stylesheet_uri(), array( 'parent-style' ) );
}
?>Sau đó, bạn có thể tạo một tệp mẫu có cùng tên trong chủ đề con (ví dụ: header.phpBạn có thể sử dụng các tệp CSS con để thay thế các tệp tương ứng trong chủ đề cha, hoặc thêm các quy tắc CSS mới nhằm thay đổi giao diện.
Tóm lại
Việc phát triển các chủ đề (theme) cho WordPress bắt đầu bằng việc hiểu rõ cấu trúc cốt lõi của hệ thống, sau đó từng bước thực hành để tạo ra những chủ đề cơ bản, và cuối cùng là sử dụng các tính năng nâng cao (như cấu trúc template phức tạp, các hook (mã được gọi tự động trong quá trình xử lý nội dung), thiết kế thân thiện với mọi thiết bị (responsive design), và các chủ đề con (subthemes) để tùy chỉnh chúng một cách sâu rộng. Bằng cách tuân theo các cấu trúc tệp tin và quy trình phát triển được tiêu chuẩn hóa, bạn có thể tạo ra những chủ đề mạnh mẽ về chức năng, dễ bảo trì, và có giao diện chuyên nghiệp. Điều quan trọng nh index.php 和 style.css Hãy bắt đầu và dần dần nắm vững toàn bộ các khía cạnh của hệ thống chủ đề (theme) trong WordPress.
FAQ 常见问题
Một chủ đề WordPress cần ít nhất bao nhiêu tệp tin?
Một chủ đề WordPress cần ít nhất hai tệp tin:style.css 和 index.php。
Trong đó,style.css Các ghi chú ở phần đầu của chủ đề (header comments) phải chứa đúng dữ liệu siêu dữ liệu (metadata) về chủ đề; đây là yếu tố then chốt để WordPress nhận diện và áp dụng chủ đề đó một cách chính xác. index.php Là tệp mẫu mặc định, nó có trách nhiệm xử lý các yêu cầu không tìm thấy phù hợp với bất kỳ tệp mẫu cụ thể nào khác.
Làm thế nào để tùy chỉnh cách hiển thị trang của một bài viết cụ thể?
Để tùy chỉnh cách hiển thị của một bài viết cụ thể, bạn cần tạo một tệp tin phù hợp dựa trên cấu trúc mẫu (template) của WordPress. Cấu trúc mẫu trong WordPress được tổ chức theo các cấp độ khác nhau, và bạn có thể thay đổi nội dung hiển thị của một bài viết bằng cách sửa đổi các t single.php Các tệp tin, hoặc để có thể kiểm soát chính xác hơn, có thể tạo ra các mẫu (templates) dành riêng cho từng loại bài viết cụ thể. single-post.php。
Trong tệp này, bạn có thể tự do sắp xếp bố cục của các tiêu đề bài viết, nội dung, thông tin meta (như tác giả, thời gian đăng, thể loại) và khu vực bình luận. Bạn có thể sử dụng các thẻ mẫu mà WordPress cung cấp để thực hiện điều này. the_title()， the_content()， the_author() Chờ đợi để hiển thị nội dung.
Tác dụng của tệp functions.php là gì?
functions.php Đây là tệp tin chứa các chức năng cốt lõi của chủ đề (theme), và nó đóng vai trò tương tự như một plugin, được sử dụng để thêm các tính năng, các cơ chế kết nối (hooks) và các bộ lọc (filters) vào chủ đề đó.
Các chức năng chính của nó bao gồm: khởi tạo các tính năng của giao diện (như menu đăng ký, khu vực công cụ, hỗ trợ thêm hình ảnh đặc biệt), đưa các định dạng CSS và mã JavaScript vào hệ thống, định nghĩa các mã ngắn tùy chỉnh, thay đổi hành vi mặc định của WordPress (thông qua các hook), cũng như thiết lập các tùy chọn cấu hình đặc thù cho giao diện đó. Nó sẽ được WordPress tự động gọi khi giao diện được tải vào hệ thống.
Sử dụng các chủ đề con (subtopics) có những lợi ích gì?
Lợi ích lớn nhất của việc sử dụng các chủ đề con (sub-templates) là cho phép bạn thay đổi và tùy chỉnh một chủ đề cha (parent template) một cách an toàn, mà không cần phải trực tiếp sửa đổi các tệp nguồn của chủ đề cha đó.
Điều này có nghĩa là khi chủ đề cha (parent theme) được cập nhật với các bản cải tiến về bảo mật hoặc tính năng mới, bạn có thể trực tiếp cập nhật chủ đề đó mà tất cả các thay đổi tùy chỉnh mà bạn đã thực hiện thông qua chủ đề con (child theme) – bao gồm việc thay đổi giao diện, tệp mẫu, hoặc bổ sung các tính năng mới – sẽ được giữ nguyên và không bị xóa đi. Điều này giúp nâng cao đáng kể hiệu quả và tính bảo mật trong việc bảo trì trang web, và được coi là một thực hành tốt nhất trong quá trình phát triển WordPress.
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 tối thượng để phát triển chủ đề WordPress: Xây dựng trang web tùy chỉnh từ con số 0
- Hướng dẫn cần tham khảo cho việc phát triển tùy chỉnh WordPress: Thực hành toàn diện từ việc xây dựng giao diện (theme) đến việc lập trình plugin
- 10 kỹ năng cần thiết: Tạo ra một theme WordPress chuyên nghiệp và hiệu quả
- 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
- 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