Từ Không Đến Có: Hướng Dẫn Chi Tiết Nắm Vững Kỹ Năng Cốt Lõi Phát Triển Chủ Đề WordPress Hiện Đại

Các khái niệm cơ bản trong phát triển giao diện WordPress hiện đại

Cấu trúc chủ đề WordPress hiện đại có những khác biệt đáng kể so với các phương pháp truyền thống. Thay đổi chính nằm ở việc áp dụng rộng rãi các chủ đề dạng khối (Block Themes) và chế độ biên tập toàn trang (Full Site Editing – FSE). Điều này có nghĩa là giao diện và bố cục của chủ đề, từ tiêu đề trang, chân trang cho đến nội dung bài viết, đều có thể được xây dựng và chỉnh sửa thông qua trình soạn thảo Gutenberg bằng các “khối” (blocks), mà không cần phải viết trực tiếp các mã PHP phức tạp.

Cấu trúc tệp tin cốt lõi của một chủ đề hiện đại đã được đơn giản hóa một cách căn bản. Trong số đó, tệp tin mẫu (template file) là yếu tố quan trọng nhất.theme.jsonNó định nghĩa các thiết lập toàn cục như phong cách trình bày, bảng màu, và cách sắp xếp nội dung của chủ đề. Một tệp tin quan trọng khác là…index.htmlNó đã thay thế phương pháp truyền thống.index.phpLàm mẫu mặc định, hãy sử dụng các khối HTML tĩnh, có thể được trình soạn thảo phân tích (parsed by editors) để xây dựng cấu trúc cơ bản của trang web. Đồng thời,style.cssTệp tin vẫn còn tồn tại, chủ yếu được sử dụng để chỉ định thông tin về chủ đề (theme information), tuy nhiên hầu hết các định nghĩa về kiểu dáng (CSS styles) đã được chuyển sang nơi khác.theme.jsonHoặc được quản lý bởi trình biên tập.

Để đảm bảo tính tương thích ngược (backward compatibility), WordPress sẽ kiểm tra xem thư mục gốc của theme (theme root directory) có chứa các tệp cần thiết hay không.block-templates或templatesCác thư mục này được sử dụng để lưu trữ các tệp mẫu HTML dựa trên cấu trúc block (block-based HTML templates).single.html或page.htmlChúng sẽ được sử dụng ưu tiên hơn các tệp mẫu PHP. Đồng thời, cách thức xử lý các phong cách (styles) và tài nguyên phía trước (front-end resources) đến từ chủ đề (theme) phụ thuộc vào…wp_enqueue_style和wp_enqueue_scriptHàm thường được đặt trong tệp chính (main file).functions.phpBạn cần thực hiện việc đăng ký và xếp hàng tại đây.

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

Việc hiểu được sự thay đổi trong cách tiếp cận này – từ việc viết các mẫu PHP cố định sang việc sử dụng JSON và các thẻ khối (block tags) để định nghĩa kiểu dáng và cấu trúc – là bước đầu tiên trong việc nắm vững các kỹ thuật phát triển giao diện người dùng (user interface) hiện đại

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

Việc tạo và cấu hình các tệp tin cốt lõi của chủ đề (theme core files)

Để tạo một theme WordPress hiện đại, trước tiên bạn cần phải…wp-content/themesHãy tạo một thư mục chủ đề mới trong thư mục đó. Điều này cũng áp dụng cho cả các chủ đề dạng khối (block themes).style.cssTệp tin vẫn là tệp “thẻ nhận dạng” bắt buộc phải có; phần chú thích ở đầu tệp phải chứa thông tin cụ thể.

/*
Theme Name: 我的现代主题
Theme URI: https://example.com/my-theme
Author: Your Name
Author URI: https://example.com
Description: 一个使用全站编辑的现代WordPress主题。
Version: 1.0
License: GPL v2 or later
Text Domain: my-modern-theme
*/

Ngay sau đó, bạn cần tạo ra “bộ não” cho chủ đề hiện đại này…theme.jsonĐây là một tệp JSON nằm trong thư mục gốc của chủ đề (theme root directory), được sử dụng để kiểm soát toàn bộ các thiết lập về phong cách (styles) và cài đặt chủ đề một cách trung tâm. Thông qua tệp này, bạn có thể định nghĩa các hệ thống định dạng (ví dụ: kích thước chữ, bộ chữ), bảng màu, kiểu mặc định của các khối nội dung, v.v. Các plugin và chủ đề con (sub-themes) cũng có thể áp dụng các thay đổi riêng lên nó để tùy chỉnh phong cách theo nhu cầu. Đây là một tệp cơ bản (basic file) dùng đểtheme.jsonCấu trúc như sau:

{
  "version": 2,
  "settings": {
    "color": {
      "palette": [
        { "name": "黑色", "slug": "black", "color": "#000000" },
        { "name": "白色", "slug": "white", "color": "#ffffff" }
      ]
    },
    "typography": {
      "fontSizes": [
        { "name": "小", "slug": "small", "size": "14px" },
        { "name": "中", "slug": "medium", "size": "20px" }
      ]
    }
  },
  "styles": {
    "color": {
      "background": "white",
      "text": "black"
    },
    "typography": {
      "fontSize": "var(--wp--preset--font-size--medium)"
    }
  },
  "customTemplates": [
    {
      "name": "宽幅页面",
      "title": "宽幅页面",
      "postTypes": [ "page" ]
    }
  ]
}

Mẫu chính cho chủ đề (Main template for the theme)index.htmlCấu trúc trang mặc định đã được định nghĩa. Nó hoàn toàn bao gồm các thẻ khối được bao bọc bởi các chú thích HTML mà trình soạn thảo có thể nhận diện được, ví dụ như:

<!-- wp:template-part {"slug":"header","tagName":"header"} /-->
<!-- wp:group {"tagName":"main","layout":{"type":"constrained"}} -->
<main class="wp-block-group">
    <!-- wp:post-content {"layout":{"type":"constrained"}} /-->
</main>
<!-- /wp:group -->
<!-- wp:template-part {"slug":"footer","tagName":"footer"} /-->

Cấu trúc này phân chia rõ ràng các phần như tiêu đề trang (header), nội dung chính (main content) và chân trang (footer), và thông qua…wp:post-contentNội dung bài viết được tải động theo từng phần (block). Cuối cùng, cần tạo thư mục chứa các thành phần mẫu (Template Parts) tại thư mục gốc của chủ đề (theme).partsVà đặt nó bên trong đó.header.html和footer.htmlCác tệp tin liên quan đến các bộ phận khác nhau.

Đọc thêm Hướng dẫn Nhập môn Nổi bật 2026: Cách Tạo Chủ đề WordPress Đầu tiên Từ Con số 0。

Sử dụng các mẫu (templates) và thành phần mẫu (template components) để xây dựng trang web.

Trong các chủ đề dạng khối (block themes), cấu trúc bố cục của trang được xây dựng chủ yếu thông qua các mẫu (Templates) và các thành phần mẫu (Template Parts). Các mẫu được sử dụng để định nghĩa khung tổng thể cho các loại trang cụ thể (chẳng hạn như một bài viết đơn lẻ, trang danh mục), trong khi các thành phần mẫu là những module có thể được sử dụng lại nhiều lần, như tiêu đề trang (header) và chân trang (footer).

Các tệp mẫu thường được lưu trữ trong thư mục thuộc chủ đề (theme).templatesTrong thư mục đó, WordPress sẽ tự động tìm và sử dụng các tệp mẫu (template files) phù hợp với từng loại truy vấn (query type) khác nhau. Ví dụ,single.htmlDùng để hiển thị một bài viết duy nhất.page.htmlDùng cho các trang web tĩnh (static pages).home.html或index.htmlDùng cho trang chủ của blog. Bạn có thể…theme.json的customTemplatesMột số biểu ngữ cung cấp các mẫu tùy chỉnh, và người dùng có thể chọn chúng trong trình biên tập trang.

Các thành phần mẫu được lưu trữ tại…partsTrong thư mục này, nó đã giúp tăng đáng kể tỷ lệ tái sử dụng mã nguồn và sự thuận tiện trong việc bảo trì. Hãy tạo tệp chứa tiêu đề trang (header file).header.htmlBạn có thể sử dụng khối tiêu đề trang (site title block), khối điều hướng (navigation block), v.v. để xây dựng phần trên cùng của trang web. Hãy tạo tệp chứa nội dung phần chân trang (footer file) nữa.footer.htmlBạn có thể sử dụng không gian này để hiển thị thông tin bản quyền và các công cụ hỗ trợ (như công cụ nhỏ, tiện ích bổ sung).

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ột mẫu điển hìnhheader.htmlCó thể trông như thế này:

<!-- wp:group {"tagName":"header","layout":{"type":"flex","flexWrap":"nowrap","justifyContent":"space-between"}} -->
<header class="wp-block-group">
    <!-- wp:site-title /-->
    <!-- wp:navigation {"ref":4} /-->
</header>
<!-- /wp:group -->

Trong ví dụ này,wp:navigationCác khối (blocks) được xác định thông qua những đặc điểm riêng của chúng.refThuộc tính này trích dẫn một menu điều hướng được tạo và lưu trữ trong mục “Giao diện” -> “Trình soạn thảo” (với ID là 4), điều này thể hiện rõ sức mạnh của việc tách biệt nội dung soạn thảo khỏi cấu trúc trang web trên toàn hệ thống. Bằng cách sử dụng những thành phần này trong mẫu trang chính,Bạn chỉ cần làm như vậy là có thể chèn chúng vào trang web.

Đối với những bố cục phức tạp hơn, chúng ta có thể sử dụng các công cụ hoặc kỹ thuật phù hợp để xử lý chúng.wp:group、wp:columns、wp:querySử dụng các khối (blocks) để xây dựng các dòng (rows), cột (columns) và nội dung lặp (looping content). Ví dụ:wp:queryCác khối (blocks) có thể hiển thị danh sách các bài viết mới nhất một cách dinh hồng; điều này tương đương với vòng lặp chính (main loop) trong các chủ đề (themes) truyền thống. Tuy nhiên, hiện nay tất cả các thiết lập đều được thực hiện thông qua trình soạn thảo trực quan (visual editor).

Đọc thêm Từ con số không đến sự thành thạo: Hướng dẫn toàn diện và bài học thực hành về phát triển theme WordPress。

Thêm chức năng và kiểu dáng thông qua tệp hàm

Mặc dù các chủ đề khối phụ thuộc rất nhiều vào…theme.jsonVà các mẫu HTML, nhưng…functions.phpTệp tin vẫn là trọng tâm của chức năng mở rộng chủ đề (theme extension). Đây là một tệp PHP không trả về giá trị nào, được sử dụng để thêm các chức năng mới, đăng ký các tập lệnh thiết kế (style scripts), định nghĩa các khả năng hỗ trợ cho chủ đề, v.v.

Một thao tác cơ bản là đăng ký và xếp hàng các bảng định dạng (style sheets) cũng như các tập lệnh (scripts) liên quan đến chủ đề (theme). Ngay cả khi phần lớn nội dung về định dạng được tạo ra bởi…theme.jsonQuản trị viên, có thể bạn vẫn cần thêm các đoạn CSS tùy chỉnh nữa.

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 my_modern_theme_setup() {
    // 添加对特定功能的支持，例如自定义标志
    add_theme_support('custom-logo');
    // 通过区块编辑器添加主题样式
    add_theme_support('wp-block-styles');
    // 添加对全站编辑器的支持
    add_theme_support('editor-styles');
}
add_action('after_setup_theme', 'my_modern_theme_setup');

function my_modern_theme_scripts() {
    // 排队主题的主样式表
    wp_enqueue_style(
        'my-modern-theme-style',
        get_stylesheet_uri(),
        array(),
        wp_get_theme()->get('Version')
    );
    // 排队编辑器样式
    add_editor_style('style-editor.css');
}
add_action('wp_enqueue_scripts', 'my_modern_theme_scripts');

functions.phpĐây cũng là địa điểm lý tưởng để thêm các tính năng tùy chỉnh. Ví dụ, bạn có thể sử dụng…register_block_styleHàm này đăng ký một biến thể trực quan tùy chỉnh cho các khối cốt lõi hiện có (chẳng hạn như các đoạn văn bản), để chúng xuất hiện trong bảng điều khiển “Stylistic” của trình soạn thảo và người dùng có thể lựa chọn chúng.

// 为段落块注册一个“特别提示”样式
register_block_style(
    'core/paragraph',
    array(
        'name'         => 'notice',
        'label'        => __( '特别提示', 'my-modern-theme' ),
        'inline_style' => '.is-style-notice { padding: 1em; border-left: 4px solid #00a0d2; background-color: #f0f8ff; }',
    )
);

Ngoài ra, bạn cũng có thể sử dụng các công cụ hoặc “hook” (như…) để tăng cường hiệu quả của quá trình thực hiện công việc.wp_head、wp_footerChèn mã tùy chỉnh, hoặc thông qua…add_filterBạn có thể thay đổi hành vi truy vấn mặc định, nội dung được hiển thị, v.v. Đối với những yêu cầu tùy chỉnh phức tạp, việc tạo một tiện ích mở rộng (plugin) nhỏ có thể là một lựa chọn mang tính mô-đun hơn.

Chủ đề về kiểm thử và gỡ lỗi (Testing and Debugging)

Sau khi quá trình phát triển hoàn tất, việc thực hiện các bài kiểm thử toàn diện đối với chủ đề là điều vô cùng quan trọng. Đầu tiên, bạn nên kích hoạt chủ đề trong môi trường cục bộ hoặc môi trường tạm thời, để kiểm tra cách bố cục trang web hiển thị trên giao diện người dùng, tính tương thích với các thiết bị khác nhau (thiết kế đáp ứng), và đảm bảo rằng tất cả các thành phần cốt lõi như tiêu đề, đoạn văn bản, hình ảnh, gallerie, nút bấm, v.v. đ

Thứ hai, cần tiến hành kiểm thử kỹ lưỡng bằng trình soạn thảo Gutenberg. Hãy tạo các trang và bài viết mới, thử sử dụng các khối (blocks) khác nhau để xây dựng các bố cục phức tạp, và kiểm tra xem công cụ bar và bảng điều khiển (setting panel) của các khối có hoạt động bình thường không, cũng như xem các phong cách tùy chỉnh (custom styles) có được áp dụng đúng cách hay không (ví dụ: thông qua các tùytheme.jsonKiểm tra xem các bảng màu hoặc kích thước phông chữ đã được định nghĩa có được áp dụng đúng vào các khối nội dung hay không. Đặc biệt, hãy thử sử dụng trình soạn thảo toàn trang (mục “Nhìn” -> “Trình soạn thảo”), thay đổi nội dung của tiêu đề trang, chân trang, mẫu trang chủ, v.v., và đảm bảo rằng những thay đổi đó được lưu trữ sẽ được hiển thị chính x

Kiểm tra lỗi là một khâu cốt lõi trong quá trình phát triển phần mềm hiện đại. Hãy mở công cụ phát triển của trình duyệt (thường bằng phím F12) và kiểm tra xem có lỗi JavaScript hay xung đột trong mã CSS nào không.wp-config.phpthiết lậpdefine('WP_DEBUG', true);Bạn có thể hiển thị các cảnh báo và lỗi PHP trên trang web, giúp bạn nhanh chóng xác định vấn đề trong mã nguồn. Đồng thời, hãy đảm bảo rằng giao diện (theme) của bạn tuân thủ các tiêu chuẩn mã hóa của WordPress, và kiểm tra xem có lỗi cấu trúc HTML nào không bằng công cụ W3C Validator trong console.

Cuối cùng, hãy thực hiện các bài kiểm thử tính tương thích giữa các nền tảng trên nhiều trình duyệt khác nhau (Chrome, Firefox, Safari, Edge) và các loại thiết bị (máy tính để bàn, máy tính bảng, điện thoại di động) để đảm bảo rằng tất cả người dùng đều có được trải nghiệm nhất quán.

Tóm lại

Việc phát triển các giao diện (theme) cho WordPress hiện đại chính là một bước đột phá về mặt triết lý: chúng ta đã chuyển từ việc viết các mẫu PHP theo cách thức thủ công, dựa trên các quy trình cụ thể, sang phương pháp sử dụng các công cụ và ngôn ngữ lập trình hiện đại hơn.theme.jsonPhát triển theo nguyên lý khai báo (declarative development), với sự tập trung vào các thẻ khối (block tags) và khả năng biên tập toàn trang (full-site editing). Các nhà phát triển cần nắm vững các công cụ và kỹ thuật liên quan một cách thành thạo.theme.jsonSử dụng cấu hình để định nghĩa phong cách toàn cục (global style), áp dụng các mẫu khối HTML (HTML block templates) để xây dựng cấu trúc trang (page structure), và thông qua…functions.phpViệc tăng cường các tính năng (function enhancement) giúp giảm đáng kể rào cản trong việc tạo ra các bố cục tùy chỉnh (custom layouts), mang lại cho những người tạo nội dung (content creators) sự tự do thiết kế rất lớn. Tuy nhiên, điều này cũng đòi hỏi các nhà phát triển (developers) phải hiểu sâu về hệ thống trình soạn thảo dựa trên các khối (block editor systems). Bằng cách tuân theo con đường học tập nêu trên, bạn sẽ có thể xây dựng được những giao diện WordPress (WordPress themes) linh hoạt, mạnh mẽ và phù hợp với xu hướng phát triển

FAQ 常见问题

Liệu chủ đề phát triển ### có cần kiến thức về PHP không?
Vâng, vẫn cần thiết. Mặc dù cấu trúc chính của trang được định nghĩa bởi các mẫu HTML, nhưng…functions.phpCác tệp tin vẫn rất cần thiết để thêm chức năng thêm chủ đề (theme), đăng ký các script kiểu dáng (style scripts), và thực hiện việc tùy chỉnh sâu rộng bằng cách sử dụng các hook (khóa lệnh) và filter (bộ lọc). Ngoài ra, kiến thức về PHP là yếu tố then chốt khi tạo ra các thành phần mẫu (template components) động, dựa trên các truy vấn tùy chỉnh (custom queries), hoặc khi xử lý các logic kinh doanh phức tạp.

Các chủ đề theo kiểu “block” và các chủ đề truyền thống có thể tồn tại song song với nhau không?

Được. WordPress sẽ tự động xác định loại theme. Nếu thư mục gốc của theme bạn chứa…theme.jsonTệp vàtemplates/partsCác mẫu khối (block templates) nằm trong thư mục sẽ được WordPress nhận diện là các chủ đề dạng khối (block themes), và chức năng chỉnh sửa toàn trang (full-site editing) sẽ được kích hoạt. Tuy nhiên, ngay cả khi những tệp này tồn tại, hệ thống vẫn giữ nguyên hệ thống mẫu PHP của chủ đề truyền thống để sử dụng như phương án dự phòng. Nếu mẫu khối tương ứng với một yêu cầu không được tìm thấy, hệ thống sẽ tự động chuyển sang sử dụng mẫu PHP tương ứng thay thế.single.php）。

Làm thế nào để thêm CSS tùy chỉnh cho chủ đề của tôi?

Có ba phương pháp chính. Phương pháp được khuyến nghị nhất là thông qua…theme.jsonphầnstylesMột số đoạn mã CSS được thêm vào để áp dụng cho toàn bộ trang web hoặc cho các phần cụ thể trên trang web. Ngoài ra, chúng cũng có thể được đặt trong tệp thiết lập chủ đề (theme settings).style.cssHãy thêm các quy tắc định dạng bổ sung vào tệp tin. Đối với những trường hợp cần thiết lập định dạng một cách linh hoạt hơn hoặc cho các trang web cụ thể, bạn cũng có thể làm điều tương tự.functions.phpsử dụngwp_add_inline_styleBạn có thể thêm các định dạng (styles) tùy chỉnh bằng cách đặt chúng ngay bên trong hàm (inline within functions), hoặc đăng ký chúng trực tiếp cho các khối (blocks) cần được thiết lập.

Chế độ chỉnh sửa toàn trang có gây rủi ro cho trang web hiện có không?

Đối với các trang web đã có nội dung sẵn, việc chuyển sang một chủ đề mới cần được thực hiện một cách thận trọng. Đề nghị bạn thử nghiệm chủ đề đó kỹ lưỡng trong môi trường thử nghiệm (chẳng hạn như môi trường phát triển cục bộ hoặc trang web tạm thời) để đảm bảo rằng tất cả nội dung hiện có đều được hiển thị đúng cách và bố cục không bị lỗi. Trước khi thực hiện quá trình chuyển đổi, hãy sao lưu toàn bộ nội dung trang web (bao gồm cả các tệp tin và cơ sở dữ liệu). Mặc dù công cụ chỉnh sửa toàn trang web rất mạnh mẽ, nhưng việc thay đổi trực tiếp vào các mẫu (templates) có thể ảnh hưởng đến tất cả các trang sử dụng mẫu đó nếu thao tác không đúng cách.