Nắm vững cốt lõi phát triển theme WordPress: Hướng dẫn thực hành tốt nhất xây dựng theme tùy chỉnh từ con số không

Cơ sở hạ tầng chủ đề WordPress và các tệp cốt lõi

Một chủ đề WordPress tiêu chuẩn không chỉ đơn thuần là tập hợp các mẫu trang (page templates), mà còn là một thư mục được tổ chức theo một cấu trúc và quy ước nhất định. Việc hiểu rõ cấu trúc nền tảng này là bước đầu tiên trong quá trình phát triển. Mỗi chủ đề WordPress đều được thiết kế theo một cấu trúc nhất quán, bao gồm các thành phần như/wp-content/themes/Nó nằm trong thư mục đó và được đặt tên là một thư mục duy nhất.

Trọng tâm của chủ đề là…style.cssĐây không chỉ là một bảng định dạng (stylesheet), mà còn là “chứng minh thư” của chủ đề (theme) trong WordPress. Phần ghi chú ở đầu tệp chứa các thông tin metadata của chủ đề, và những thông tin này sẽ được hiển thị trên trang quản lý chủ đề trong giao diện quản trị WordPress. Dưới đây là một ví dụ về thông tin cơ bản trong đầu tệp bảng định dạng:

/*
Theme Name: 我的自定义主题
Theme URI: https://example.com/my-theme
Author: 开发者名称
Author URI: https://example.com
Description: 这是一个从零开始构建的自定义主题描述。
Version: 1.0.0
License: GPL v2 or later
Text Domain: my-custom-theme
*/

Một tệp tin khác mà chắc chắn cần thiết là…index.phpĐây là mẫu thiết kế mặc định của chủ đề (theme template). Nó được sử dụng khi WordPress không tìm thấy tệp mẫu cụ thể hơn (ví dụ: một tệp mẫu được tạo riêng cho một trang cụ thể trong trang web).single.php或page.phpKhi cần sử dụng nó, bạn sẽ áp dụng tệp tin đó. Ngay cả khi tệp tin này trống, chủ đề vẫn có thể được nhận diện, nhưng thực hành tốt nhất là đảm bảo rằng nó chứa đầy đủ cấu trúc HTML và các thẻ mẫu của WordPress để hiển thị nội dung.

Đọc thêm Hướng dẫn cơ bản về phát triển theme WordPress: Xây dựng theme tùy chỉnh từ con số không。

Ngoài hai tệp tin này,functions.phpĐây chính là “bộ não” của chủ đề (theme). Nó không phải là một tệp mẫu (template file), mà là một tệp PHP được tự động tải vào khi chủ đề được khởi tạo. Tệp này được sử dụng để thêm các tính năng của chủ đề, đăng ký các mục trong menu, bổ sung các thanh bên cạnh (sidebars), cũng như thêm các script và phong cách thiết kế (styles). Bạn có thể thực hiện các thay đổi cần thiết trên tệp này để điều chỉnhadd_action()和add_filter()Chờ các công cụ hỗ trợ (hook) được phát triển để mở rộng chức năng của chủ đề (theme).

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ấp độ của các mẫu (template levels) và tệp tin mẫu (template files)

WordPress sử dụng một hệ thống cấp độ template (mẫu) phức tạp để quyết định cách hiển thị các loại nội dung khác nhau. Hệ thống này là trọng tâm của quá trình phát triển các giao diện (theme) và cho phép các nhà phát triển kiểm soát chính xác cách trình bày từng phần trên trang web bằng cách tạo ra các tệp template tương ứng.

Ví dụ, khi truy cập một bài viết trên blog, WordPress sẽ tìm kiếm các tệp template theo thứ tự sau:single-post.php -> single.php -> singular.php -> index.phpNó sẽ sử dụng tệp mẫu đầu tiên được tìm thấy. Cấu trúc phân cấp này mang lại sự linh hoạt rất lớn cho các nhà phát triển, cho phép tạo các mẫu tùy chỉnh cho các bài viết thuộc các danh mục khác nhau, có các thẻ nhất định, hoặc thậm chí có ID cụ thể.

Mẫu hiển thị nội dung

Một trong những mẫu được sử dụng phổ biến nhất là…single.phpNó được sử dụng để hiển thị một bài viết đơn lẻ hoặc các loại bài viết tùy chỉnh (nếu chúng tồn tại).single-{post-type}.phpTrọng tâm của phương pháp này là sử dụng vòng lặp (The Loop) để hiển thị nội dung bài viết.page.phpChúng được thiết kế riêng để hiển thị các trang tĩnh. Thông thường, các mẫu trang (page templates) không chứa thông tin phụ như danh mục (categories) hay thẻ (tags), mà tập trung vào việc trình bày nội dung của trang đó.

Danh sách bài viết và trang lưu trữ

archive.phpDùng để hiển thị thông tin về thể loại, thẻ, tác giả, ngày tháng, và các trang lưu trữ khác.home.php或index.phpTrang này thường được sử dụng để hiển thị danh sách các bài viết trên blog (tức là “Trang chủ” mà bạn đã thiết lập). Để có thể kiểm soát nội dung một cách chính xác hơn, bạn có thể tạo thêm các bộ lọc hoặc cơ chế quản lý chi tiết hơn.category.php、tag.php、author.phpChờ đợi các mẫu lưu trữ cụ thể được xác định.

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

Mẫu trang đặc biệt (Special Page Template)

front-page.phpĐộ ưu tiên của nó cao hơn…home.phpBạn sẽ cần đến nó khi muốn tạo trang chủ của trang web hoàn toàn tùy chỉnh, khác biệt so với danh sách blog nội bộ.404.phpDùng để xử lý trường hợp trang không được tìm thấy.search.phpDùng để hiển thị kết quả tìm kiếm.searchform.phpĐây là một mẫu biểu mẫu tìm kiếm có thể được sử dụng lại nhiều lần.

Chức năng chủ đề (Theme Features) và cơ chế hook (Hook Mechanism)

functions.phpTệp tin chính là trung tâm kiểm soát các tính năng của WordPress. Tại đây, bạn có thể sửa đổi hoặc thêm các tính năng mới thông qua hệ thống Hook mạnh mẽ của WordPress, mà không cần phải thay đổi trực tiếp các tệp tin cốt lõi của hệ thống. Hook chủ yếu được chia thành hai loại: Actions và Filters.

Khởi tạo chủ đề và hỗ trợ chức năng

Trong quá trình phát triển chủ đề (theme development), điều đầu tiên cần thực hiện là…add_theme_support()Các hàm được sử dụng để khai báo những tính năng mà chủ đề hỗ trợ. Ví dụ, kích hoạt hiển thị ảnh thu nhỏ của bài viết (hình ảnh đại diện), tùy chỉnh Logo, định dạng bài viết, v.v. Những thao tác này thường được thực hiện khi chủ đề được cài đặt (mount) vào hệ thống.after_setup_themeViệc này được thực hiện trong hàm của hook hành động (action hook).

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

function mytheme_setup() {
    // 添加文章缩略图支持
    add_theme_support( 'post-thumbnails' );
    // 添加自定义Logo支持
    add_theme_support( 'custom-logo' );
    // 注册导航菜单
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Quản lý việc đưa các tệp nguồn vào chương trình (Resource File Introduction Management)

Việc đưa các tệp CSS và JavaScript vào đúng cách là yếu tố then chốt để đảm bảo hiệu suất và tính bảo mật của trang web. Bạn phải sử dụng các phương thức chuẩn để thực hiện điều này.wp_enqueue_style()和wp_enqueue_script()Hàm, và thông quawp_enqueue_scriptsCác “hook” (móc hành động) được sử dụng để thực hiện việc tải các tài nguyên cần thiết. Điều này cho phép WordPress quản lý các phụ thuộc (dependencies) và quá trình kiểm soát phiên bản (version control), đồng thời tránh tình trạng tải các tài nguyên cùng một lần.

function mytheme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'mytheme-style', get_stylesheet_uri() );
    // 引入自定义JavaScript文件
    wp_enqueue_script( 'mytheme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Thanh bên cạnh và khu vực công cụ nhỏ (Sidebar and Widget Area)

Khu vực công cụ nhỏ (Sidebar) là một phần quan trọng của giao diện (theme). Bạn cần sử dụng nó một cách hiệu quả để tăng tính tiện lợi và tính thẩm mỹ cho trang web.register_sidebar()Hàm này được sử dụng để đăng ký một hoặc nhiều khu vực chứa các tiện ích (widgets), sau đó được áp dụng trong các tệp mẫu (templates).sidebar.php）sử dụngdynamic_sidebar()Hãy gọi nó. Điều này cho phép người dùng tạo ra bố cục trang tùy chỉnh bằng cách kéo các thành phần trên giao diện nền (backend).

Template Tags and Loops

Các thẻ mẫu (template tags) là những hàm PHP được tích hợp sẵn trong WordPress, dùng để truy xuất và hiển thị dữ liệu một cách động trong các tệp mẫu. Còn “The Loop” là cấu trúc mã PHP cốt lõi trong WordPress, được sử dụng để xử lý và hiển thị một loạt bài viết (hoặc kết quả truy vấn).

Đọ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 về quy trình xây dựng trang web cá nhân hóa。

Hiểu và xây dựng vòng lặp (Understanding and constructing loops)

Cấu trúc cơ bản của vòng lặp là: kiểm tra xem có bài viết nào không, sau đó tiến hành thực hiện các thao tác cần thiết.whileCâu lệnh này sẽ duyệt qua từng bài viết. Bên trong vòng lặp, bạn có thể sử dụng các thẻ mẫu (template tags) để hiển thị nội dung bài viết, tiêu đề, thời gian đăng, và các thông tin khác.

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><?php the_title(); ?></h2>
        <div class="entry-meta">发布于：</div>
        <div class="entry-content">
            <?php the_content(); ?>
        </div>
    </article>
<?php endwhile; endif; ?>

Các thẻ dùng để hiển thị nội dung phổ biến (Common Content Output Tags)

the_title()Dùng để hiển thị tiêu đề bài viết.the_content()Dùng để hiển thị nội dung chính của bài viết (nó sẽ tự động áp dụng định dạng như các đoạn văn, v.v.).the_excerpt()Vậy hãy trích dẫn tóm tắt nội dung bài viết.the_permalink()Lấy liên kết bài viết, thường được sử dụng kèm với tiêu đề.the_post_thumbnail()Dùng để hiển thị hình ảnh đặc sắc.

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

Cách sử dụng thẻ điều kiện (Conditional Tags)

Các thẻ điều kiện (như…)is_home()、is_single()、is_page()、is_category()Đây là những công cụ mạnh mẽ; chúng cho phép bạn thực thi các đoạn mã khác nhau tùy thuộc vào loại trang đang được hiển thị. Ví dụ, bạn có thể…header.phpsử dụngis_front_page()Hãy thiết lập một tiêu đề khác cho trang chủ.

Tóm lại

Việc phát triển một theme WordPress từ đầu là một quá trình có hệ thống, đòi hỏi người phát triển phải hiểu sâu sắc về cấu trúc cốt lõi của nó, cấu trúc các template, cơ chế hook (hook mechanism) và quy trình xử lý dữ liệu. Bắt đầu với việc tạo ra những thành phần cơ bản nhất…style.css和index.phpTừ đầu tệp tin, các mẫu trang được xây dựng dần theo các quy tắc cấu trúc của mẫu (template hierarchy rules), và sau đó…functions.phpCác tính năng và chức năng hỗ trợ mới có thể được bổ sung một cách ổn định thông qua các “hook” (các điểm kết nối trong mã nguồn). Việc nắm vững cách sử dụng các thẻ mẫu (template tags) và vòng lặp (loops) là yếu tố then chốt để hiển thị nội dung một cách dinh hồng. Bằng cách tuân theo những thực hành tốt nhất này, bạn không chỉ có thể xây dựng được các chủ đề tùy chỉnh (custom themes) hiệu quả và dễ bảo trì mà còn đảm bảo sự tương thích hoàn hảo giữa chủ đề đó với hệ sinh thái WordPress, từ đó tạo nền tảng vững chắc cho việc mở rộng

FAQ 常见问题

Để phát triển một theme cho WordPress, bạn cần nắm vững những kỹ thuật sau:

Để phát triển một chủ đề (theme) cho WordPress, bạn cần nắm vững ba công nghệ Web cốt lõi là HTML, CSS và PHP. HTML được sử dụng để xây dựng cấu trúc trang web, CSS chịu trách nhiệm về thiết kế giao diện và bố cục, trong khi PHP là ngôn ngữ lập trình giúp thực hiện các chức năng động của WordPress, truy xuất dữ liệu và xử lý logic. Ngoài ra, việc có kiến thức cơ bản về JavaScript sẽ hữu ích trong việc thêm các tính năng tương tác vào chủ đề.

Làm thế nào để thêm hỗ trợ cho các loại bài viết tùy chỉnh vào chủ đề của tôi?

Trong tập tinfunctions.phpTrong tệp functions.php, sử dụngregister_post_type()Bạn cần một hàm để đăng ký loại bài viết tùy chỉnh. Bạn cần cung cấp cho hàm này một mã định danh duy nhất cho loại bài viết (ví dụ: “portfolio”) và một mảng chứa các thông tin chi tiết như thẻ mô tả, mức độ công khai, biểu tượng menu, v.v. Đề nghị đóng gói đoạn mã này vào một module có thể được gắn (mount) vào hệ thống.initTrong hàm của hook hành động (action hook).

Tại sao thay đổi về chủ đề của tôi không được hiển thị hoặc cập nhật trong phần quản trị (backend)?

Điều này thường xảy ra do lỗi trong bộ nhớ đệm (cache) của trình duyệt hoặc máy chủ. Trước tiên, hãy thử làm mới trình duyệt một cách thủ công (Ctrl+F5). Nếu vấn đề vẫn còn tồn tại, hãy kiểm tra xem bạn có đang sử dụng bất kỳ tiện ích nào liên quan đến bộ nhớ đệm không, và thử xóa dữ liệu đệm của những tiện ích đó. Ngoài ra, hãy đảm bảo rằng bạn đang chỉnh sửa đúng tệp thể hiện chủ đề (theme file) đang được kích hoạtstyle.cssSố phiên bản ở phần đầu tệp (file header) – việc cập nhật số phiên bản này có thể buộc trình duyệt phải tải các phong cách (styles) mới.

Thế nào là sự khác biệt giữa chủ đề con (sub-topic) và chủ đề cha (parent-topic), và khi nào nên sử dụng chúng?

Chủ đề cha (parent theme) là một chủ đề chức năng hoàn chỉnh và độc lập. Các chủ đề con (child themes) thừa hưởng tất cả các chức năng, kiểu dáng và tệp mẫu từ chủ đề cha, đồng thời cho phép bạn thay đổi một cách an toàn những phần cụ thể của chủ đề cha (ví dụ:style.css(Khi bạn muốn sửa đổi một chủ đề hiện có – đặc biệt là các chủ đề do bên thứ ba cung cấp – và mong muốn có thể nâng cấp chủ đề đó một cách không gây thiệt hại trong tương lai, bạn nên tạo ra một chủ đề con để thực hiện công việc phát triển.)

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

Bạn cần sử dụng công cụ hỗ trợ quốc tế hóa (i18n – Internationalization) của WordPress để có thể thực hiện các thao tác dịch thuật và điều chỉnh nội dung theo ngôn ngữ khác nhau.functions.phptrong đó, sử dụngload_theme_textdomain()Hàm này được sử dụng để thiết lập các trường văn bản và đường dẫn tới tệp ngôn ngữ. Trong tất cả các tệp mẫu PHP của chủ đề, tất cả các chuỗi cần được dịch sẽ được thay thế bằng nội dung phù hợp.__()或_e()Các hàm liên quan đến việc dịch được đóng gói lại thành một module. Cuối cùng, sử dụng các công cụ như Poedit để tạo ra tệp .pot, sau đó dịch nội dung của tệp này sang các ngôn ngữ khác thành các tệp .po và .mo tương ứng.