Trang chủ/Kiến thức/WordPress/Chi tiết nội dung

Hướng dẫn cơ bản về phát triển theme WordPress: Tạo theme đầu tiên của bạn từ con số không

Đọc trong 3 phút
2026-03-14
2026-06-05
2,378
Tôi kiếm được hoa hồng khi bạn mua sắm thông qua các liên kết dưới đây, mà không phát sinh thêm chi phí nào cho bạn.

Hiểu cấu trúc cơ bản của theme WordPress

Trước khi bắt đầu viết mã, việc hiểu rõ cấu trúc của một chủ đề WordPress là điều cực kỳ quan trọng. Một chủ đề cơ bản nhất cần ít nhất hai tệp tin: một tệp tin dùng để định nghĩa thông tin về chủ đề (các thiết lập về giao diện, màu sắc, phông chữ, v.v.), và một tệp tin PHP dùng để hiển thị nội dung trang web. Hai tệp tin này cùng nhau tạo nên “khung” của chủ đề và tuân theo những quy định cụ thể về cấu trúc thư mục và đặt tên.

The core file is…style.cssNó không chỉ chứa các định dạng CSS mà còn bao gồm một khối chú thích ở phần đầu tệp (header), vốn được coi là “giấy tờ tùy thân” của chủ đề đó. Khối chú thích này thông báo cho hệ thống WordPress biết tên chủ đề, tác giả, mô tả, phiên bản, và các thông tin metadate khác liên quan đến chủ đề. Nếu khối chú thích này không được định dạng đúng cách…style.cssWordPress sẽ không thể nhận diện và kích hoạt chủ đề của bạn.

Một tệp tin không thể thiếu khác là…index.phpĐây là tệp mẫu chính của chủ đề (theme template file). Khi WordPress không thể tìm thấy tệp mẫu cụ thể hơn (ví dụ:single.php或page.phpKhi không có tùy chọn nào khác được chỉ định, nó sẽ được sử dụng mặc định để hiển thị trang web. Đây là lựa chọn dự phòng cho tất cả các tệp mẫu (template files).

Đọc thêm Bật mí phát triển chủ đề WordPress: Công nghệ then chốt để xây dựng trang web tùy chỉnh từ con số không。

(Topic Information Declaration File)

Style sheet for the themestyle.cssPhần đầu (header) phải chứa các ghi chú (annotations) cụ thể. Dưới đây là một ví dụ cơ bản nhất:

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%
Logo UltaHost Truy cập trang 
/*
Theme Name: 我的第一个主题
Theme URI: https://example.com/my-first-theme/
Author: 你的名字
Author URI: https://example.com/
Description: 这是一个用于学习的简单WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-first-theme
*/

Trong đó,Text DomainĐược sử dụng cho mục đích quốc tế hóa; đây là những mã định danh (identifiers) dùng trong quá trình dịch thuật sau này. Tệp tin này thường cũng chứa toàn bộ mã stile CSS của bạn.

Tệp mẫu cốt lõi

index.phpTệp tin chính là “cửa ngõ” dẫn đến nội dung liên quan đến một chủ đề cụ thể. Đây là ví dụ đơn giản nhất về cách sử dụng tệp tin như vậy.index.phpChỉ cần sử dụng vòng lặp cơ bản để gọi các hàm cốt lõi của WordPress là có thể lấy và hiển thị danh sách bài viết.

<!DOCTYPE html>
<html no numeric noise key 1005>
<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 1002>
    &lt;?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            the_title( &#039;<h2>', '</h2>' );
            the_content();
        endwhile;
    endif;
    ?&gt;
</body>
</html>

Trong đoạn mã này,wp_head()和wp_footer()Đó là hai “hook” quan trọng; chúng cho phép WordPress Core, các plugin, và các script khác chèn những đoạn mã cần thiết vào đầu hoặc cuối trang, bao gồm các đoạn mã tạo kiểu dáng (styles), script, và meta tags.

Xây dựng môi trường phát triển cục bộ

Trước khi triển khai chủ đề lên máy chủ trực tuyến, việc thiết lập một môi trường phát triển cục bộ là cách hiệu quả và an toàn nhất. Môi trường cục bộ cho phép bạn tự do kiểm thử mã nguồn, gỡ lỗi mà không ảnh hưởng đến trang web trực tuyến.

Đọc thêm Nắm vững toàn diện phát triển chủ đề WordPress: Hướng dẫn đầy đủ từ cơ bản đến nâng cao。

Chọn phần mềm máy chủ cục bộ

Đối với người mới bắt đầu, các phần mềm máy chủ địa phương tích hợp là lựa chọn tốt nhất. Chúng kết hợp sẵn Apache/Nginx, PHP và cơ sở dữ liệu MySQL, và bạn có thể cài đặt chúng chỉ với một cú nhấp chuột là sử dụng được ngay. Các công cụ như XAMPP, Local by Flywheel hoặc DevKinsta đều là những lựa chọn phổ biến. Những công cụ này mô phỏng môi trường máy chủ mạng thực tế, cho phép bạn vận hành WordPress trên máy tính của mình.

Cài đặt WordPress và tạo thư mục chứa các theme (giao diện)

Sau khi chạy ứng dụng trên máy chủ cục bộ, bạn cần cài đặt một phiên bản WordPress mới. Hãy tải gói WordPress mới nhất về, giải nén nó vào thư mục gốc của trang web trên máy chủ cục bộ (ví dụ: thư mục htdocs trong XAMPP). Sau đó, truy cập địa chỉ cục bộ (như http://localhost) bằng trình duyệt và thực hiện quy trình cài đặt đơn giản trong vòng “năm phút”.

Sau khi quá trình cài đặt hoàn tất, hãy truy cập vào trang quản trị của WordPress.wp-content/themesMục lục. Tại đây, hãy tạo một thư mục mới cho chủ đề bạn sắp phát triển, ví dụ như đặt tên nó là “my-first-theme”. Những thư mục mà bạn đã tạo trước đó…style.css和index.phpTệp tin nên được đặt trong thư mục này. Bây giờ, hãy đăng nhập vào giao diện quản trị WordPress, chọn mục “Nhìn” (Appearance) -> “Chủ đề” (Themes), và bạn sẽ thấy chủ đề của mình; mặc dù chức năng của nó vẫn còn rất đơn giản.

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%.
Logo của Hosting.com Truy cập trang

Xây dựng hệ thống tệp mẫu cơ bản

Chỉ cóindex.phpChủ đề (theme) mà bạn đang sử dụng là chưa đủ để đáp ứng các nhu cầu sử dụng cơ bản. Một chủ đề hoàn chỉnh cần phải bao gồm một bộ các tệp template (mẫu thiết kế) để phù hợp với nhiều loại trường hợp hiển thị khác nhau, chẳng hạn như bài viết đơn lẻ, trang độc lập, danh mục bài viết, v.v. Hệ thống phân cấp template của WordPress sẽ tự động chọn tệp template phù hợp nhất để hiển thị trang được yêu cầu.

Mẫu bài viết và trang

single.phpMẫu này được sử dụng để hiển thị từng bài viết trên blog. Khi người dùng nhấp vào nút “Đọc toàn bộ bài viết”, WordPress sẽ sử dụng mẫu này để hiển thị nội dung bài viết đó. Mẫu này thường bao gồm các thông tin chi tiết hơn về bài viết, như danh mục, thẻ tag, tác giả và phần bình luận.

page.phpCác mẫu (templates) được sử dụng để hiển thị các trang tĩnh độc lập (chẳng hạn như trang “Về chúng tôi” hoặc trang “Liên hệ”). Sự khác biệt giữa chúng và các mẫu bài viết (article templates) nằm ở chỗ các mẫu này thường không hiển thị các thông tin như thời gian đăng bài, thể loại, hoặc các yếu tố khác thuộc v

Đọ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。

Mẫu đầu trang và mẫu chân trang

Để tuân theo nguyên tắc DRY (Don’t Repeat Yourself – Đừng lặp lại bản thân), các chủ đề WordPress thường tách phần tiêu đề (Header) và phần chân trang (Footer) của trang thành các tệp riêng biệt.

header.phpTệp tin chứa toàn bộ mã nguồn từ đầu đến trước khu vực nội dung chính của trang, bao gồm các phần như các khung nội dung (sections), biểu tượng trang web (site logo), menu điều hướng chính (main navigation menu), v.v.index.php、single.phpTrong các mẫu khác, hãy sử dụng nó.get_header()hàm để nhập nó.

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.
Logo của InterServer Truy cập trang

Tương tự như vậy,footer.phpTệp tin chứa toàn bộ nội dung của phần chân trang, bao gồm thông tin bản quyền, các liên kết điều hướng hỗ trợ, v.v., và được truyền tải thông qua…get_footer()Function introduction. In addition,sidebar.php(Nhãn cạnh bên) Thường cũng được tách ra và sử dụng riêng biệt.get_sidebar()Gọi.

Đã được tái cấu trúcindex.phpNó sẽ trở nên rất ngắn gọn và súc tích.

<?php get_header(); ?>

<main>
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 文章内容输出
        endwhile;
    endif;
    ?>
</main>

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Tích hợp kiểu dáng và tập lệnh

Các thiết kế theo phong cách hiện đại yêu cầu việc tải các bảng định dạng CSS và các tập lệnh JavaScript một cách chính xác và hiệu quả. WordPress cung cấp các hàm chuyên dụng để quản lý những tài nguyên này, đảm bảo rằng chúng được tải theo đúng thứ tự phụ thuộc và tránh tình trạng tải lại hoặc xung đột giữa chúng.

Sử dụng hàng đợi hàm để thêm phong cách (styles)

Cách đúng đắn là thông qua…wp_enqueue_style()Hàm này sẽ thêm bảng định dạng (stylesheet) vào hàng đợi (queue). Bạn cần tạo một tệp trong chủ đề (theme) có tên là…functions.phpĐây là tệp tin chứa các tính năng cốt lõi của chủ đề (theme), được sử dụng để thêm các đặc điểm, chức năng mới, hoặc thay đổi hành vi mặc định của ứng dụng.

在functions.phpTrong đó, bạn có thể gắn (mount) một hàm vào…wp_enqueue_scriptsTrên cái móc hành động này:

function my_first_theme_scripts() {
    // 为主题的主样式表排队
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 引入一个Google字体
    wp_enqueue_style( 'google-font', 'https://fonts.googleapis.com/css2?family=Roboto&display=swap', array(), null );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

get_stylesheet_uri()Hàm sẽ tự động lấy thông tin về chủ đề (theme) cần sử dụng.style.cssĐường dẫn tệp tin. Bằng cách tải các tệp tin theo cách này, WordPress có thể quản lý các tài nguyên một cách hiệu quả hơn.

Sử dụng hàng đợi hàm để thêm script

Việc tải các script JavaScript cũng cần sử dụng hàng đợi (queue); hàm tương ứng là… (The process of loading JavaScript scripts also requires using a queue; the corresponding function is…)wp_enqueue_script()Bạn có thể thêm chúng vào cùng một hàm.

function my_first_theme_scripts() {
    // ... 加载样式的代码同上 ...

// 加载主题的主JavaScript文件，依赖于jQuery，并放在页脚
    wp_enqueue_script( 'main-js', get_template_directory_uri() . '/js/main.js', array( 'jquery' ), '1.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_first_theme_scripts' );

Ở đây,array( 'jquery' )Đã được khai báo rằng script này phụ thuộc vào thư viện jQuery cốt lõi; WordPress sẽ đảm bảo rằng jQuery được tải trước. Tham số cuối cùng…trueĐiều này có nghĩa là việc đặt script ở phía cuối trang (trước các nội dung khác) sẽ giúp tăng tốc độ tải trang.

Tóm lại

Việc phát triển một theme WordPress từ đầu là một quá trình học tập có hệ thống, bao gồm nhiều bước quan trọng như hiểu rõ cấu trúc tệp tin cơ bản, thiết lập môi trường phát triển trên máy tính, xây dựng hệ thống các mẫu (templates), và tích hợp các thành phần cần thiết một cách chính xác. Bằng cách tự mình thực hiện từng bước này, bạn sẽ tích lũy được nhiều kiến thức và kstyle.css、index.php、header.php、footer.phpvàfunctions.phpNhững tệp tin cốt lõi này cho thấy bạn không chỉ đã xây dựng được một giao diện (theme) có thể hoạt động được mà còn hiểu sâu sắc về cấu trúc các thành phần trong mẫu (template) của WordPress và cách thức hoạt động của hệ thống các “hook” (các điểm kết nối giữa các thành phần trong hệ thống). Hãy nhớ rằng, yếu tố then chốt trong việc phát triển giao diện WordPress là tuân thủ các quy ước và tiêu chuẩn của nó; điều này sẽ đảm bảo rằng giao diện của bạn tương thích tốt với hệ thống, hoạt động hiệu quả và dễ bảo trì. Từ đây, bạn có thể tiếp tục khám phá các tính năng nâng cao hơn như tùy chỉnh loại bài viết (article types), công cụ tùy chỉnh giao diện (theme customizers), khu vực hiển thị các tiện ích (widget areas), v.v., để từng bước tạo ra một giao diện cá nhân hóa mạnh

FAQ 常见问题

Có phải để phát triển các chủ đề (themes) thì nhất thiết phải biết PHP không?

Đúng vậy, việc nắm vững PHP là điều kiện cần thiết để phát triển các chủ đề (themes) cho WordPress. Bởi vì chính WordPress được viết bằng PHP, và tất cả các tệp mẫu (templates) của nó đều được tạo ra bằng ngôn ngữ lập trình này.index.php、single.phpTất cả đều là các tệp PHP; chúng sử dụng mã PHP để gọi các hàm cốt lõi của WordPress nhằm tạo ra nội dung trang web một cách dinh hồng. Đồng thời, những tệp này cũng được dùng để thêm các tính năng mới vào trang web.functions.phpTệp tin hoàn toàn được tạo thành từ mã PHP. HTML và CSS được sử dụng để định nghĩa cấu trúc và kiểu dáng, trong khi PHP chính là yếu tố then chốt để thực hiện các chức năng động và tương tác dữ liệu.

Tệp functions.php của chủ đề có tác dụng gì

functions.phpTệp tin này chính là “trung tâm chức năng” của chủ đề bạn đang sử dụng. Đây không phải là một tệp mẫu (template file); nó không trực tiếp tạo ra bất kỳ phần nào trên trang web. Thay vào đó, tệp này dùng để lưu trữ toàn bộ mã PHP cần thiết để chỉnh sửa và mở rộng các chức năng của chủ đề. Một số ứng dụng phổ biến bao gồm: định vị các mục trong menu điều hướng, xác định vị trí của các khu vực hiển thị công cụ hỗ trợ (widgets), và…wp_enqueue_scriptsHook này được sử dụng để thêm các tệp CSS và JavaScript vào trang web, cung cấp các tính năng hỗ trợ cho chủ đề (chẳng hạn như ảnh thu nhỏ bài viết, nền tùy chỉnh), và định nghĩa các hàm tùy chỉnh khác nhau. Tệp này sẽ được tự động tải vào khi chủ đề được kích hoạt.

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

Việc triển khai hỗ trợ nhiều ngôn ngữ (quốc tế hóa và địa phương hóa) cho một theme chủ yếu bao gồm hai bước. Bước đầu tiên là sử dụng các hàm dịch của WordPress tại tất cả các đoạn văn bản cần được dịch trong theme.__('文本', 'text-domain')或_e('文本', 'text-domain')Trong đótext-domainPhải được kết hợp với…style.cssĐược tuyên bố trong…Text DomainĐúng vậy. Bước thứ hai là sử dụng các công cụ như Poedit để quét mã nguồn của chủ đề (theme) và tạo ra các tệp cần thiết..potTemplate files: The translator uses these files to create the corresponding language versions (such as Chinese)..povà đã biên dịch.moTệp tin đó, hãy đặt nó vào phần liên quan đến chủ đề (theme)./languages/Nó nằm trong thư mục tương ứng. WordPress sẽ tự động tải các bản dịch phù hợp dựa trên cài đặt ngôn ngữ của trang web.

Sự khác biệt giữa “chủ đề” (theme) và “tiện ích mở rộng” (plugin) là gì?

Trong WordPress, chủ đề (Theme) và plugin đảm nhận những nhiệm vụ hoàn toàn khác nhau. Chủ đề chủ yếu kiểm soát giao diện trước mặt của trang web, tức là vẻ ngoài thị giác, bố cục, phong cách thiết kế và cấu trúc của trang web mà người dùng nhìn thấy; nó quyết định “trang web trông như thế nào”. Ngược lại, plugin được sử dụng để thêm các tính năng cụ thể cho trang web, và những tính năng này vẫn hoạt động bình thường bất kể chủ đề được sử dụng là gì – ví dụ như tạo biểu mẫu liên hệ, tối ưu hóa SEO, thêm giỏ mua sắm điện tử, v.v. Plugin quyết định “trang web có thể làm được những gì”. Một nguyên tắc thực hành tốt là: mã liên quan đến giao diện và bố cục nên được đặt trong chủ đề, trong khi mã liên quan đến các tính năng cốt lõi nên được tạo thành plugin; điều này giúp đảm bảo rằng các tính năng quan trọng của trang web sẽ không bị mất đi khi người dùng thay đổi chủ đề.

Bước tiếp theo, chúng ta nên làm gì tiếp theo?

Nếu bạn đang xây dựng hoặc tối ưu hóa trang web WordPress của mình, bước tiếp theo là tiếp tục đọc về tối ưu hóa hiệu năng, cấu hình plugin và tùy chỉnh chủ đề.

Đọ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.

Thẻ: