Bắt đầu từ con số không: Hiểu cấu trúc cơ bản của chủ đề WordPress

Bắt đầu từ con số không: Hiểu cấu trúc cơ bản của 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ể. Những tệp tin này cùng nhau xác định giao diện và chức năng của trang web. Một chủ đề cơ bản nhất chỉ cần hai tệp tin là có thể hoạt động, nhưng một chủ đề đầy đủ chức năng và tuân thủ các tiêu chuẩn phát triển hiện đại sẽ chứa nhiều tệp tin hơn.

The core file is…style.css和index.phpTrong đó,style.cssKhông chỉ là các bảng định dạng (style sheets), mà chúng còn đóng vai trò như “chứng minh thư” của một giao diện (theme). Phần ghi chú ở đầu tệp tin chứa các thông tin meta về giao diện đó, như tên giao diện, tác giả, mô tả, phiên bản, v.v. Chính những thông tin này được WordPress sử dụng để nhận diện và hiển thị giao diện trên trang quản trị của nó.

Một tệp tin bắt buộc khác là…index.phpĐây là tệp mẫu chính (main template file) của chủ đề (theme). Khi WordPress không thể tìm thấy tệp mẫu cụ thể hơn (ví dụ:single.php或page.phpKhi đó, nó sẽ được sử dụng mặc định để render trang web.

Đọc thêm Làm chủ phát triển chủ đề WordPress: Từ tùy chỉnh cá nhân hóa đến hiện thực hóa chức năng nâng cao。

Ngoài hai tệp tin này, một chủ đề có cấu trúc tốt thường còn bao gồm các thư mục và tệp tin sau:
* 模板文件：如用于渲染单篇文章的single.phpDùng để hiển thị nội dung trang web.page.php…và những thứ được sử dụng để tạo danh sách bài viết.archive.phpVà trang chủhome.php或front-page.php。
* 模板部件：存放于/template-parts/Trong thư mục này, có các đoạn mã có thể được sử dụng lại, chẳng hạn như các đoạn trích từ bài viết (article excerpts).content.php）、Tiêu đề trang (Header)header.phpPhần đầu trang (header) và phần chân trang (footer)footer.php）。
* 函数文件：functions.phpĐây là trọng tâm chính của các tính năng liên quan đến chủ đề (theme). Nó được sử dụng để thêm các chức năng hỗ trợ chủ đề, tạo menu đăng ký và thanh bên cạnh (sidebar), đưa vào các tập lệnh (script) và bảng định dạng (stylesheet), cũng như định nghĩa các hàm tùy chỉnh khác nhau.
* 资源目录：通常包括/assets/Mục lục; bên dưới mục lục còn có nhiều nội dung khác nữa./css/、/js/、/images/Các thư mục con được sử dụng để lưu trữ các tài nguyên tĩnh một cách có tổ chức.

UltaHost – Nhà cung cấp dịch vụ máy chủ WordPress chuyên nghiệp

Bảo đảm hoàn tiền trong 30 ngày, băng thông và cơ sở dữ liệu không giới hạn, bảo vệ DDoS miễn phí, mua 3 năm ưu đãi 50%

Truy cập trang

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 thông minh được gọi là “hệ thống cấp độ template” (template hierarchy) để quyết định file template nào sẽ được sử dụng để hiển thị cho mỗi yêu cầu trang cụ thể. Việc hiểu rõ các quy tắc của hệ thống 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.

Nguyên lý hoạt động của nó như sau: Khi người dùng truy cập một URL, WordPress sẽ xác định trước loại trang đang được yêu cầu (chẳng hạn: trang chủ, một bài viết cụ thể, trang danh mục, v.v.), sau đó sẽ tìm kiếm tệp template tương ứng theo một danh sách ưu tiên đã được thiết lập sẵn. Nếu tìm thấy tệp template phù hợp nhất, WordPress sẽ sử dụng nó; nếu không tìm thấy, quá trình tìm kiếm sẽ tiếp tục diễn ra cho đến khi tìm được tệp template dự phòng.index.php。

Phân tích các tệp mẫu thường được sử dụng (Analysis of commonly used template files)

Lấy trang của một bài viết riêng lẻ làm ví dụ, thứ tự tìm kiếm trong WordPress thường là:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpĐiều này có nghĩa là bạn có thể tạo ra các mẫu riêng biệt cho các loại bài viết cụ thể, hoặc thậm chí cho từng bài viết riêng lẻ.

Một tệp tin quan trọng khác là…functions.phpMặc dù nó không phải là một phần của cấu trúc các mẫu (templates), nhưng nó cung cấp hỗ trợ nền tảng (backend support) cho tất cả các mẫu. Bạn có thể sử dụng nó trong quá trình phát triển hoặc vận hành các ứng dụng dựa trên các mẫu đó.add_theme_support()Các hàm được sử dụng để khai báo những tính năng mà chủ đề hỗ trợ, chẳng hạn như hình ảnh đặc trưng của bài viết, logo tùy chỉnh, định dạng bài viết, v.v.

Đọc thêm Hướng dẫn toàn diện phát triển website WordPress: Từ cơ bản đến thành thạo thực chiến。

// 在 functions.php 中添加主题支持
function mytheme_setup() {
    // 支持特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
    // 支持HTML5的标记格式
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption' ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Ứng dụng của các tính năng chủ đề và hệ thống hook

Sự linh hoạt và khả năng mở rộng của WordPress phần lớn là nhờ vào hệ thống “hook” (khớp nối) của nó. Có hai loại hook: hook hành động (action hooks) và hook bộ lọc (filter hooks). Hook hành động cho phép bạn chèn mã tùy chỉnh vào các điểm thực thi cụ thể, trong khi hook bộ lọc cho phép bạn thay đổi dữ liệu được truyền qua trong quá trình xử lý.

Sử dụng action hook để thêm tính năng

Action hooks are composed of…do_action()Tạo và sử dụng hàmadd_action()Hàm này sẽ gắn (mount) hàm gọi lại (callback function) vào các “hook” (điểm kết nối trong hệ thống). Trong quá trình phát triển các chủ đề (themes), các hook này thường được sử dụng để chèn nội dung vào những vị trí cụ thể hoặc thực hiện các thao tác vào những thời điểm nhất định.

Ví dụ,wp_enqueue_scriptsĐây là một hook hành động quan trọng, được sử dụng để đăng ký và xếp hàng các tệp biểu mẫu (style sheets) cũng như tệp JavaScript một cách an toàn. Bạn luôn nên tải các tài nguyên phía trước (front-end resources) từ đây, thay vì viết chúng trực tiếp trong các tệp mẫu (template files).或Thẻ.

Hosting.com - lưu trữ chia sẻ

Hiệu năng cao, được trang bị CPU AMD EPYC, lưu trữ SSD NVMe và LiteSpeed, hỗ trợ chuyên gia nội bộ 24 giờ/ngày, các biện pháp bảo mật tiên tiến bao gồm SSL, chống brute force, phần mềm độc hại và bảo vệ DDoS, tiết kiệm tới 73%.

Truy cập trang

// 在 functions.php 中正确引入样式和脚本
function mytheme_scripts() {
    // 引入主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/assets/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Sử dụng các hook của bộ lọc để chỉnh sửa nội dung được hiển thị.

Các hook (khớp nối) của bộ lọc được thiết kế để…apply_filters()Tạo và sử dụng hàmadd_filter()Hàm được sử dụng để gắn các hàm gọi lại (callback functions). Ví dụ, bạn có thể thay đổi độ dài của phần tóm tắt bài viết, hoặc thêm một tiền tố cho tất cả các tiêu đề bài viết.

// 修改摘要字数长度
function mytheme_excerpt_length( $length ) {
    return 30; // 将摘要字数限制为30字
}
add_filter( 'excerpt_length', 'mytheme_excerpt_length' );

Thực hiện thiết kế thích ứng và các tính năng tùy chỉnh

Các chủ đề WordPress hiện đại phải có khả năng thích ứng với nhiều kích thước màn hình khác nhau, từ máy tính để bàn đến điện thoại di động. Điều này chủ yếu được thực hiện thông qua các truy vấn phương tiện (media queries) trong CSS. Ngoài ra, kết hợp với các tính năng tùy chỉnh của WordPress, người dùng có thể được cung cấp những tùy chọn cấu hình trực quan và dễ sử dụng.

Xây dựng bố cục đáp ứng

Một phương pháp phổ biến là áp dụng chiến lược CSS dựa trên nguyên tắc “di động trước” (mobile-first). Đầu tiên, bạn viết các kiểu dáng cơ bản dành cho thiết bị di động, sau đó sử dụng các truy vấn phương tiện truyền thông (media queries) để thêm hoặc thay thế các kiểu dáng đó cho những màn hình

Đọc thêm Xây dựng website chuyên nghiệp: Hướng dẫn toàn diện tạo theme WordPress tùy chỉnh từ con số 0。

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 10px;
}

/* 平板设备及以上 */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 桌面设备 */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Tích hợp công cụ tùy chỉnh (customizer) để thực hiện việc xem trước (preview) ngay lập tức.

WordPressCustomizerĐây là một công cụ mạnh mẽ, cho phép quản trị viên trang web xem trước và thay đổi một số cài đặt của chủ đề (theme) một cách thời gian thực. Bạn có thể sử dụng nó để…functions.phphãy tải bản dịch thông qua hàm$wp_customizeThêm các thiết lập và điều khiển cho đối tượng.

Ví dụ, hãy thêm một tùy chọn để chỉnh sửa thông tin bản quyền ở phần chân trang của trang web:

Máy chủ chia sẻ của InterServer

Lưu trữ chia sẻ với mức phí $2,50 USD mỗi tháng, giảm giá $0,1 USD trong tháng đầu tiên, mã giảm giá tryinterserver, với 461 ứng dụng đám mây và cài đặt chỉ bằng một cú nhấp chuột.

Truy cập trang

function mytheme_customize_register( $wp_customize ) {
    // 添加一个“版权文本”设置
    $wp_customize->add_setting( 'footer_copyright_text', array(
        'default'           => '© 2026 我的网站。保留所有权利。',
        'sanitize_callback' => 'sanitize_text_field', // 对输入进行净化
        'transport'         => 'postMessage', // 支持实时预览
    ) );

    // 为上述设置添加一个文本框控件
    $wp_customize->add_control( 'footer_copyright_text', array(
        'label'    => __( '页脚版权文本', 'mytheme' ),
        'section'  => 'title_tagline', // 放在“站点身份”区域
        'type'     => 'text',
    ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Sau đó, trongfooter.phpTrong tệp mẫu, hãy sử dụng…get_theme_mod()Hàm trả về giá trị này:
echo esc_html( get_theme_mod( 'footer_copyright_text', '默认版权文本' ) );

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một kỹ năng tổng hợp yêu cầu sự am hiểu về PHP, HTML, CSS, JavaScript, cũng như kiến thức về cấu trúc cốt lõi của WordPress. Bắt đầu từ việc nắm vững những kiến thức cơ bản nhất…style.css和index.phpTừ việc học cách sử dụng các mẫu (templates) đơn giản, qua việc nắm vững cấu trúc phức tạp của các mẫu và hệ thống các thành phần liên kết (hook systems), cho đến khi có thể triển khai thiết kế thích ứng (responsive design)…CustomizerViệc tích hợp các thành phần vào một chủ đề là một quá trình quan trọng, trong đó mỗi bước đều góp phần xây dựng nên một chủ đề chuyên nghiệp, hiệu quả và dễ sử dụng. Việc tuân thủ cấu trúc tệp tin và quy tắc lập trình chuẩn không chỉ giúp chủ đề bạn phát triển dễ bảo trì hơn, mà còn đảm bảo tính tương thích tốt với hệ sinh thái WordPress cũng như các plugin khác. Hãy nhớ rằng, việc phát triển một chủ đề xuất sắc bắt đầu từ sự quan tâm đến trải nghiệm của cả người dùng lẫn người phát triển.

FAQ 常见问题

Một chủ đề WordPress đơn giản nhất cần những tệp tin nào?

Một chủ đề WordPress tối giản có thể được kích hoạt và sử dụng chỉ cần hai tệp tin:style.css和index.php。style.cssPhần đầu của tài liệu phải chứa khối ghi chú thông tin chủ đề (topic information) chính xác.index.phpĐiều này đòi hỏi phải sử dụng các vòng lặp cơ bản của WordPress cùng với cấu trúc HTML.

Làm thế nào để thêm menu điều hướng cho chủ đề (theme) của tôi?

Trước hết, bạn cần phải…functions.phpsử dụngregister_nav_menus()Hàm này được sử dụng để đăng ký một hoặc nhiều vị trí của mục ăn (menu items). Sau đó, thông tin về các vị trí này sẽ được thêm vào mẫu chủ đề (theme template) – thường là trong phần thiết lập giao diện của ứng dụng hoặc trang web.header.phpBạn muốn biết vị trí mà menu sẽ được hiển thị trên trang web, hãy sử dụng các thuộc tính liên quan để chỉ định điều đó.wp_nav_menu()Hàm này được sử dụng để gọi và hiển thị các mục trong menu đã được đăng ký.

Thế nào là chủ đề con (subtopic), và tại sao chúng ta nên sử dụng chúng?

Chủ đề con (sub-topic) là một chủ đề phụ thuộc vào một chủ đề khác (chủ đề cha – parent topic). Nó cho phép bạn sửa đổi hoặc mở rộng các chức năng và kiểu dáng của chủ đề cha mà không cần phải thay đổi trực tiếp các tệp liên quan đến chủ đề cha. Ưu điểm của cách làm này là khi chủ đề cha được cập nhật, những thay đổi cá nhân hóa của bạn (thực hiện trong chủ đề con) sẽ không bị mất đi, từ đó đảm bảo tính an toàn và sự thuận tiện trong quá trình cập nhật.

Làm thế nào để chủ đề của tôi hỗ trợ đa ngôn ngữ?

Việc hỗ trợ nhiều ngôn ngữ (quốc tế hóa) cho một ứng dụng hoặc trang web chủ yếu bao gồm hai bước. Đầu tiên, trong quá trình phát triển, tất cả các chuỗi văn bản cần được dịch phải được lưu trữ một cách rõ ràng và có cấu trúc. Cụ thể, chúng nên được đặt trong các t__()或_e()Trước tiên, cần đóng gói các hàm dịch. Sau đó, sử dụng công cụ như Poedit để trích xuất những chuỗi này từ mã nguồn và tạo ra các tệp cần thiết..potTệp tin, sau đó tạo ra các bản dịch tương ứng cho mỗi ngôn ngữ..po和.moCuối cùng,functions.phptrongload_theme_textdomain()hàm để tải bản dịch.