Hướng dẫn toàn diện về phát triển theme WordPress: Xây dựng theme tùy chỉnh từ đầu

Chuẩn bị môi trường phát triển và các công cụ

Trước khi bắt đầu viết mã, việc xây dựng một môi trường phát triển địa phương hiệu quả và được cô lập là bước đầu tiên vô cùng quan trọng. Điều này không chỉ giúp bảo vệ trang web sản xuất của bạn mà còn giúp nâng cao đáng kể hiệu suất phát triển.

Cấu hình môi trường phát triển cục bộ

Chúng tôi khuyên bạn nên sử dụng các gói phần mềm máy chủ cục bộ như Local by Flywheel, MAMP hoặc XAMPP. Những công cụ này cho phép bạn cài đặt Apache/Nginx, PHP và MySQL chỉ với một cú nhấp chuột, từ đó mô phỏng môi trường máy chủ trực tuyến một cách hoàn hảo. Hãy đảm bảo rằng phiên bản PHP của bạn không thấp hơn 7.4 và các tiện ích mở rộng cần thiết (như MySQLi, PDO, thư viện hình ảnh GD) đã được kích hoạt. Ngoài ra, hãy cài đặt và kích hoạt một trình soạn thảo mã, chẳng hạn như Visual Studio Code hoặc PhpStorm – những công cụ này cung cấp hỗ trợ rất tốt về hiển thị cú pháp và gợi ý mã nguồn khi phát triển WordPress.

Giới thiệu về các công cụ và tiện ích cần thiết

Ngoài trình soạn thảo mã nguồn, bạn còn cần một hệ thống quản lý phiên bản (version control system) như Git để theo dõi các thay đổi trong mã nguồn. Trong trình duyệt, các công cụ phát triển (Chrome DevTools hoặc Firefox Developer Tools) là những công cụ hữu ích để gỡ lỗi (debug) mã HTML, CSS và JavaScript. Đối với việc phát triển WordPress, bạn nên cài đặt các tiện ích hỗ trợ phát triển sau trên trang web của mình:Query Monitor Dùng để theo dõi các truy vấn cơ sở dữ liệu, lỗi PHP và các hàm gọi (hooks).Show Current Template Có thể hiển thị tệp mẫu (template file) đang được sử dụng trên trang hiện tại.Theme Check Các plugin được sử dụng để kiểm tra xem liệu một giao diện (theme) đã được phát triển xong có tuân thủ các tiêu chuẩn phát triển giao diện WordPress hay không.

Đọc thêm 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 tùy chỉnh。

Cấu trúc của tệp chủ đề và các tệp cốt lõi

Một chủ đề WordPress tiêu chuẩn là một thư mục chứa các tệp tin cụ thể, được lưu trữ tại địa chỉ… /wp-content/themes/ Các tệp tin cốt lõi trong thư mục đóng vai trò quan trọng trong việc xây dựng nội dung của một chủ đề (theme) trang web. Việc hiểu rõ chức năng của từng tệp tin là nền tảng cơ bản để tạo ra một trải nghiệm người dùng tốt hơn.

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

Các bảng định dạng (style sheets) và thông tin về chủ đề (theme information)

style.css File là “chứng minh thư” và điểm truy cập vào các thiết lập kiểu dáng (styles) của mỗi chủ đề (theme) trong WordPress. Khối ghi chú ở phần đầu của tệp này (Stylesheet Header) không chỉ định các kiểu dáng cho chủ đề, mà quan trọng hơn, nó cung cấp những thông tin siêu dữ liệu (metadata) cần thiết để WordPress nhận diện chủ đề đó. Dưới đây là một ví dụ cơ bản:

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个从零开始构建的自定义 WordPress 主题。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Phần nội dung chính sẽ chứa các đoạn mã CSS dùng để định dạng giao diện.Text Domain Được sử dụng cho mục đích quốc tế hóa; nội dung này phải phù hợp với các vùng văn bản được sử dụng trong các lần gọi hàm dịch tiếp theo.

Các cải tiến về chức năng và tệp tin được sử dụng để đưa vào các mẫu (templates).

functions.php Tệp tin chính là “bộ não” của một chủ đề (theme), được sử dụng để thêm các tính năng mới hoặc đăng ký các đặc điểm cụ thể mà không cần phải thay đổi các tệp tin cốt lõi. Bạn có thể thêm các tính năng hỗ trợ cho chủ đề tại đây (chẳng hạn như ảnh thu nhỏ cho bài viết, menu tùy chỉnh), nhập các script và bảng định dạng (style sheets), định nghĩa các hàm tùy chỉnh, v.v.

index.php Đây là mẫu mặc định của chủ đề, và cũng là mẫu bắt buộc phải có. Nếu WordPress không tìm thấy tệp mẫu cụ thể hơn (ví dụ: single.php 或 page.phpNếu có sự thay đổi, hệ thống sẽ quay trở lại việc sử dụng giá trị ban đầu (hoặc phương thức ban đầu). Thông thường,index.php Nó sẽ bao gồm một vòng lặp chính, dùng để hiển thị danh sách các bài viết.

Đọc thêm Phát triển chủ đề WordPress: Hướng dẫn toàn diện để xây dựng chủ đề tùy chỉnh từ đầu。

Cấp độ của các mẫu (template levels) và tệp tin mẫu (template files)

WordPress sử dụng một bộ quy tắc được gọi là “hệ thống cấp độ template” (template hierarchy) để quyết định file template nào sẽ được tải cho từng trang cụ thể. Bằng cách hiểu rõ các quy tắc này, bạn có thể tạo ra những template giúp kiểm soát chính xác giao diện của các trang khác nhau.

Chi tiết về Mẫu Bài viết và Trang

Đối với một bài viết đơn lẻ, WordPress sẽ tìm kiếm các mẫu (templates) theo thứ tự sau:single-{post-type}-{slug}.php -> single-{post-type}.php -> single.php -> singular.php -> index.phpVí dụ, một trang có tên “about-us” (loại bài viết: post-type)… pageTrong trường hợp đó, hệ thống sẽ ưu tiên tìm kiếm những giải pháp hoặc thông tin phù hợp nhất. page-about-us.php，sau đó là page.php，cuối cùng là index.php。

single.php Thường được sử dụng để hiển thị một bài viết blog riêng lẻ. page.php Dùng để hiển thị các trang web độc lập. Trong những tệp này, bạn sẽ sử dụng vòng lặp chính để in ra tiêu đề bài viết, nội dung, thông tin meta, và các thành phần khác của trang đó.

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

Mẫu phân loại và lưu trữ

Khi người dùng truy cập danh sách bài viết trên blog, thư mục phân loại hoặc trang thẻ (tag page), WordPress sẽ sử dụng các mẫu (templates) dành riêng cho việc hiển thị nội dung đã được lưu trữ (archived content). Thứ tự truy xuất dữ liệu có thể như sau:category-{slug}.php -> category-{id}.php -> category.php -> archive.php -> index.phpBạn có thể tạo ra nó. archive.php Để kiểm soát bố cục của tất cả các trang lưu trữ, hoặc để tạo ra những thiết lập cụ thể hơn như… category-news.php Hãy thiết kế riêng một trang dành cho danh mục “Tin tức”.

Một mẫu quan trọng khác là… front-page.phpNếu trang này tồn tại, nó sẽ được sử dụng làm trang chủ tĩnh (không thay đổi) của trang web. Nếu không tồn tại, WordPress sẽ tự động chọn một trang khác để hiển thị làm trang chủ. home.php Hiển thị bài viết blog mới nhất, hoặc quay trở lại trang trước. index.php。

Chức năng chủ đề và các tính năng nâng cao

Sau khi hoàn thành việc xây dựng mẫu cơ bản, bạn có thể sử dụng các hàm và các công cụ như “hook” (khớp nối) để bổ sung những tính năng động mạnh mẽ cho nội dung trang web, biến những mẫu tĩnh này thành những giao diện ứng dụng đầy đủ chức năng.

Đọc thêm Phát triển WordPress Theme từ cơ bản đến nâng cao: Hướng dẫn toàn diện xây dựng theme tùy chỉnh。

Đăng ký khu vực menu và tiện ích nhỏ (Menu and Widgets Area Registration)

Các chủ đề hiện đại thường hỗ trợ việc tùy chỉnh menu điều hướng và khu vực công cụ bên cạnh (sidebar widgets). Điều này đòi hỏi phải… functions.php Trong quá trình đăng ký, bạn cần sử dụng một hàm cụ thể để thực hiện các thao tác cần thiết.

Trước hết, hãy sử dụng… register_nav_menus() Vị trí đăng ký hàm trong menu. Ví dụ:

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_register_menus() {
    register_nav_menus(
        array(
            'primary' => __( '主导航菜单', 'my-custom-theme' ),
            'footer'  => __( '页脚菜单', 'my-custom-theme' ),
        )
    );
}
add_action( 'init', 'mytheme_register_menus' );

Sau đó, trong tệp mẫu (ví dụ: header.php), hãy sử dụng wp_nav_menu() Gọi hàm và hiển thị menu.

Thứ hai, hãy sử dụng… register_sidebar() Khu vực tiện ích đăng ký hàm (thanh bên):

function mytheme_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>',
        )
    );
}
add_action( 'widgets_init', 'mytheme_widgets_init' );

在 sidebar.php Trong mẫu, hãy sử dụng (Use in the template). dynamic_sidebar( 'sidebar-1' ) Hãy hiển thị nó.

Hình ảnh đặc trưng của bài viết và khả năng sử dụng nền tùy chỉnh được hỗ trợ.

Thông qua add_theme_support() Với các hàm này, bạn có thể dễ dàng kích hoạt nhiều tính năng cốt lõi cho một chủ đề. Tính năng được sử dụng phổ biến nhất là “Hình ảnh đại diện cho bài viết” (Post Thumbnail), cho phép người dùng thiết lập hình ảnh thu nhỏ (thumbnail) cho các bài viết của họ.

add_theme_support( 'post-thumbnails' );
// 你还可以为特定文章类型启用，或定义缩略图尺寸
set_post_thumbnail_size( 1200, 630, true ); // 设置默认尺寸和裁剪模式
add_image_size( 'mytheme-featured-image', 800, 400 ); // 添加自定义图片尺寸

Trong mẫu, hãy sử dụng… the_post_thumbnail() Hàm này được sử dụng để hiển thị các hình ảnh đặc biệt (hình ảnh đặc trưng, hình ảnh nổi bật).

Bạn cũng có thể kích hoạt các tính năng như tiêu đề tùy chỉnh, màu nền hoặc hình ảnh bằng chỉ một dòng mã. Những thiết lập này sẽ xuất hiện trong giao diện “Nhìn” -> “Tùy chỉnh” trên bảng điều khiển WordPress, cho phép người dùng có nhiều quyền kiểm soát hơn.

add_theme_support( 'custom-background' );
add_theme_support( 'custom-header' );

Tóm lại

Việc phát triển một theme WordPress từ đầu là một quá trình mang tính hệ thống và đòi hỏi người phát triển không chỉ nắm vững các công nghệ front-end như PHP, HTML, CSS, JavaScript, mà còn cần hiểu sâu về cơ chế hoạt động cốt lõi của WordPress, chẳng hạn như cấu trúc các template, vòng lặp chính (main loop), và hệ thống hook (hooks). Điều này được thực hiện thông qua việc thiết lập một môi trường phát triển chuyên nghiệp trên máy tính, lập kế hoạch cấu trúc các tệp tin theme một cách rõ ràng, tạo các file template theo đúng quy tắc cấu trúc, và sử dụng các công cụ phù hợp để quản lý và phát triển theme. functions.php Bằng cách đăng ký chức năng tạo chủ đề (theme creation) và tích hợp các tính năng nâng cao, bạn có thể xây dựng những chủ đề tùy chỉnh hoàn toàn phù hợp với yêu cầu thiết kế, có mã nguồn rõ ràng và dễ bảo trì. Mặc dù quá trình này đầy thách thức, nhưng nó giúp bạn nắm toàn quyền kiểm soát về giao diện và chức năng của trang web, đây chính là con đường bắt buộc để trở thành một nhà phát triển WordPress chuyên nghiệp.

FAQ 常见问题

Phát triển chủ đề WordPress có bắt buộc phải thành thạo PHP không?

Vâng, việc nắm vững PHP một cách sâu rộng là điều cần thiết. Bản thân nền tảng WordPress được viết bằng PHP, và các tệp mẫu (templates) của các giao diện (themes) cũng được tạo bằng PHP.header.php, page.php) và các tệp chứa thông tin chức năng (function files).functions.phpTất cả những điều đó đều yêu cầu sử dụng ngôn ngữ PHP để tạo ra nội dung một cách dinh hồi, gọi các hàm của WordPress và thao tác với dữ liệu. Mặc dù bạn có thể sao chép các chủ đề hiện có và chỉ chỉnh sửa phần CSS và HTML, nhưng để triển khai các logic và chức năng tùy chỉnh, kiến thức về PHP là điều không thể thiếu.

Làm thế nào để chủ đề (theme) của tôi đáp ứng các yêu cầu chính thức của WordPress?

Để đảm bảo rằng chủ đề của bạn an toàn, hiệu quả và có khả năng được đưa vào danh mục chính thức của WordPress, bạn cần tuân thủ một loạt các tiêu chuẩn nhất định. Các tiêu chuẩn này bao gồm: sử dụng các thực hành lập trình an toàn (chẳng hạn như việc tiêu đề hóa dữ liệu đầu ra, xác thực dữ liệu đầu vào), tuân theo cấu trúc phân cấp của các tệp mẫu (templates), và triển khai chức năng hỗ trợ đa ngôn ngữ một cách chính xác (sử dụng các công c__()和_e()Sử dụng các hàm như (ví dụ: các hàm liên quan đến hiển thị nội dung theo thiết bị), đảm bảo rằng mã phía trước (frontend code) có tính thích ứng với nhiều loại thiết bị và dễ truy cập; đồng thời không nên mã hóa các chức năng cốt lõi trực tiếp vào chủ đề (theme)Theme CheckSử dụng các tiện ích mở rộng (plugin) để thực hiện quét là một phương pháp hiệu quả để kiểm tra tính tuân thủ các quy định.

Có thể đổi tên tệp style.css trong chủ đề được không?

Không được.style.cssTên tệp này là yêu cầu bắt buộc để WordPress nhận diện một giao diện (theme). Không gian chú thích ở đầu tệp phải được tạo ra và chứa đúng thông tin cần thiết. WordPress sẽ đọc dữ liệu meta trong tệp này để hiển thị tên giao diện, hình ảnh minh họa, mô tả, và các thông tin khác trong mục “Nhìn” -> “Giao diện” (Appearance) trên trang quản trị. Tuy nhiên, bạn có thể chia mã CSS chính ra các tệp khác để tăng tính tổ chức và dễ bảo trì hơn..cssTrong tệp tin đó, sau đó…functions.phpLǐ yòngwp_enqueue_style()Các hàm được tải vào khi cần thiết.

Thế nào là chủ đề con (subtopic), và trong những trường hợp nào chúng nên được sử dụng?

“Sub-topic” (tiểu chủ đề) là một chủ đề phụ thuộc vào một chủ đề khác (gọi là “parent-topic” – chủ đề mẹ), nó kế thừa tất cả các chức năng, kiểu dáng và tệp mẫu của chủ đề mẹ, nhưng cho phép bạn thay đổi một số phần trong đó một cách an toàn. Bạn chỉ cần thực hiện các thay đổi cần thiết trong tệp cấu hình của sub-topic mstyle.cssTrong đó, hãy chỉ định tên mẫu của chủ đề cha, sau đó chỉ cần đặt những tệp cần được sửa đổi (chẳng hạn như các tệp đã được chỉnh sửa).style.css、functions.phpHoặc một tệp mẫu nào đó). Khi chủ đề cha được cập nhật, các thay đổi tùy chỉnh mà bạn thực hiện trên chủ đề con sẽ không bị ghi đè. Điều này rất hữu ích khi bạn cần tùy chỉnh các chủ đề phổ biến hiện có, và đây là thực hành tốt nhất được khuyến nghị.