Hướng dẫn toàn diện: Cách tạo chủ đề WordPress tùy chỉnh từ con số 0

Công tác chuẩn bị và thiết lập môi trường

Trước khi bắt đầu viết dòng mã đầu tiên, bạn cần một môi trường phát triển phù hợp. Điều này bao gồm một máy chủ cục bộ, một trình soạn thảo mã, và sự hiểu biết về cấu trúc các tệp tin cốt lõi của WordPress. Chúng tôi khuyên bạn nên sử dụng XAMPP, MAMP hoặc Local by Flywheel để nhanh chóng thiết lập môi trường WordPress cục bộ. Những công cụ này cho phép bạn thực hiện công việc phát triển và kiểm thử trong một môi trường an toàn và được cô lập.

Một chủ đề WordPress về cơ bản là một tập hợp các tệp nằm trong thư mục `wp-content/themes/`./wp-content/themes/Các thư mục nằm trong thư mục đó. Tên của thư mục này chính là mã định danh cho chủ đề của bạn. Bạn cần tạo một thư mục mới, ví dụ như…my-custom-themeTrong thư mục này, cần có ít nhất hai tệp tin cốt lõi:style.css和index.phpPhần đầu tiên được sử dụng để lưu trữ thông tin về kiểu dáng (style) và dữ liệu meta (metadata) của chủ đề (theme), trong khi phần thứ hai là tệp mẫu (template) mặc định.

Tài liệu cung cấp thông tin cốt lõi về chủ đề được hiểu.

style.cssCác tệp tin không chỉ được sử dụng để lập trình phong cách (CSS), mà phần chú thích ở phía trên của chúng còn đóng vai trò như “chứng minh thư” của chủ đề (theme) đó. Bạn cần phải khai báo các thông tin quan trọng như tên chủ đề, tác giả, mô tả, phiên bản, v.v. tại đây. Những thông tin này sẽ được hiển thị trên trang “Nhìn” (Appearance) -> “Chủ đề” (Themes) trong giao diện quản trị WordPress.

Đọc thêm Thực hành phát triển chủ đề WordPress: Hướng dẫn toàn diện xây dựng chủ đề tùy chỉnh từ không đến có。

Một cái cơ bảnstyle.cssVí dụ về phần đầu tệp (file header) như sau:

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

/*
Theme Name: My Custom Theme
Theme URI: https://example.com/my-custom-theme
Author: Your Name
Author URI: https://example.com
Description: 这是一个为学习目的而创建的自定义WordPress主题。
Version: 1.0
License: GNU General Public License v2 or later
Text Domain: my-custom-theme
*/

Trong đó,Text DomainĐược sử dụng cho việc hóa đa ngôn ngữ (dịch thuật sang nhiều ngôn ngữ); hãy đảm bảo rằng tên tệp này phải trùng khớp với tên thư mục chứa nội dung liên quan đến chủ đề của bạn.

Xây dựng cấu trúc tệp mẫu cơ bản

WordPress sử dụng hệ thống cấp độ của các mẫu (template hierarchy) để quyết định file mẫu nào sẽ được tải cho từng loại trang khác nhau. Việc hiểu rõ và tạo ra những file mẫu này là bước cơ bản trong quá trình xây dựng giao diện (theme) cho trang web.

Tạo các tệp mẫu cần thiết.

Ngoài raindex.phpBạn nên từng bước tạo ra các tệp mẫu cụ thể hơn. Ví dụ,header.phpDùng để lưu trữ phần đầu của tất cả các trang (HTML head, bảng điều hướng trang web, v.v.)footer.phpDùng để lưu trữ phần chân trang (footer).sidebar.phpDùng cho thanh bên cạnh. Thực hiện thông qua các hàm có sẵn trong WordPress.get_header()、get_footer()和get_sidebar()Bạn có thể dễ dàng đưa các phần này vào các mẫu khác.

index.phpĐây là mẫu dự phòng cuối cùng rồi. Bạn nên tạo ra những mẫu có tính chất cụ thể hơn để nâng cao mức độ kiểm soát (control), ví dụ như:
- front-page.phpĐược sử dụng làm trang chủ tĩnh (không thay đổi nội dung).
- home.phpHiển thị danh mục các bài viết trên blog.
- single.phpHiển thị một bài viết blog riêng lẻ hoặc một loại bài viết tùy chỉnh.
- page.phpHiển thị một trang duy nhất.
- archive.phpHiển thị các trang tin tức được phân loại theo thể loại, thẻ mô tả, tác giả, ngày xuất bản, v.v.
- 404.phpHiển thị trang “Không tìm thấy”.
- search.phpHiển thị kết quả tìm kiếm.

Đọc thêm Hướng dẫn Tối thượng về Phát triển Giao diện WordPress: Tạo Giao diện Tùy chỉnh cho Website WordPress từ Con số 0。

Hiểu cơ chế của vòng lặp (understanding the loop mechanism)

Trái tim của WordPress chính là “The Loop” (Vòng lặp). Đây là một đoạn mã PHP dùng để kiểm tra xem có bài viết nào không, và nếu có điều kiện thích hợp, nó sẽ lặp lại để hiển thị nội dung của mỗi bài viết đó. Cấu trúc vòng lặp cơ bản nhất như sau, thường được đặt ở…single.php或home.phpViệt：

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <h2><?php the_title(); ?></h2>
    <div><?php the_content(); ?></div>
<?php endwhile; else : ?>
    <p><?php esc_html_e( 'Sorry, no posts matched your criteria.', 'my-custom-theme' ); ?></p>
<?php endif; ?>

Trong đó,the_title()和the_content()Các thẻ mẫu như `` và `` được sử dụng để hiển thị dữ liệu cụ thể của bài viết.

Tích hợp các chức năng cốt lõi của WordPress

Một chủ đề đủ tiêu chuẩn phải tích hợp đúng cách các tính năng khác nhau của WordPress, bao gồm menu, khu vực công cụ (widgets), hình ảnh nổi bật cho bài viết, và các tính năng hỗ trợ chủ đề (theme support features).

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

Đăng ký menu điều hướng và khu vực công cụ nhỏ (Register Navigation Menu and Small Tools Area)

Bạn cần sử dụng…register_nav_menus()hàm trong tệpfunctions.phpVị trí đăng ký các mục trong tệp tin. Ví dụ, để đăng ký một menu “Đầu trang” (Main Navigation):

function my_custom_theme_setup() {
    register_nav_menus( array(
        'primary' => __( 'Primary Menu', 'my-custom-theme' ),
        'footer'  => __( 'Footer Menu', 'my-custom-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_custom_theme_setup' );

Sau đó, trongheader.phptrong đó, sử dụngwp_nav_menu()Hàm được sử dụng để gọi menu này.

Tương tự, sử dụngregister_sidebar()Các hàm có thể được sử dụng để tạo ra các khu vực chứa công cụ nhỏ (như thanh bên cạnh).functions.phpSau khi đăng ký, bạn có thể quản lý các tiện ích (widgets) bằng cách kéo chúng vào vị trí mong muốn trong giao diện “Nhìn” (Appearance) -> “Tiện ích” (Widgets) ở phần quản trị nền (backend), và sau đó sử dụng chúng trong các mẫu (templates).dynamic_sidebar()hàm để hiển thị nó.

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

Thêm tính năng hỗ trợ thêm chủ đề (Add theme support feature)

Thông quaadd_theme_support()Bạn có thể kích hoạt một loạt tính năng cốt lõi cho chủ đề của mình. Các tính năng được sử dụng phổ biến nhất bao gồm:
- post-thumbnailsKích hoạt tính năng hiển thị hình ảnh đặc biệt cho bài viết.
- title-tagHãy để WordPress tự động quản lý tiêu đề của các tài liệu.<title>Đây là một trong những thực hành tốt nhất trong thiết kế các chủ đề (templates) hiện đại.
- html5Kích hoạt hỗ trợ HTML5 cho các thẻ cốt lõi liên quan đến chủ đề (chẳng hạn như biểu mẫu bình luận, biểu mẫu tìm kiếm, v.v.).

Đoạn mã để kích hoạt các tính năng này cũng nên được đặt ở cùng nơi.functions.phpphầnafter_setup_themeĐang trong trạng thái “Hooked” (đã được kích hoạt hoặc liên kết).

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

Styling, Scripting, and Performance Optimization

Các thiết kế theo phong cách hiện đại đòi hỏi phải xử lý việc tải các tập tin CSS và JavaScript một cách chính xác, đồng thời cần quan tâm đến hiệu suất và tính thích ứng (responsive design) của trang web.

Cách thêm CSS và JavaScript một cách chính xác:

Đừng bao giờ đặt các liên kết trực tiếp (hard links) đến các tệp CSS và JS trong tệp mẫu (template file). Thay vào đó, hãy sử dụng các phương pháp khác để đưa chúng vào tệp mẫu một cách có tổ chức và linh hoạt.wp_enqueue_style()和wp_enqueue_script()Hàm, thông quawp_enqueue_scriptsCác công cụ “hook” được sử dụng để thêm chúng vào hàng đợi (queue). Điều này giúp đảm bảo rằng các thành phần được quản lý đúng cách theo thứ tự phụ thuộc và thứ tự tải, từ đó tránh được xung đột giữa chúng.

在functions.phpVí dụ trong đó:

function my_custom_theme_scripts() {
    // 加载主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );

// 加载自定义JavaScript文件
    wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/js/script.js', array('jquery'), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_custom_theme_scripts' );

Lưu ý,get_stylesheet_uri()Điều được trả về là nội dung liên quan đến chủ đề (theme).style.cssĐối với các tệp JS, chúng ta sẽ…trueLàm tham số cuối cùng, điều này có nghĩa là nội dung sẽ được tải vào phần chân trang (footer), giúp cải thiện hiệu suất tải trang.

Thực hiện tính năng thích ứng với các thiết bị khác nhau (responsive design) và thiết lập các kiểu dáng cơ bản (basic styling) cho trang web.

Của bạnstyle.cssNên bao gồm những yếu tố cơ bản của thiết kế thích ứng (responsive design). Áp dụng chiến lược “Mobile First” (ưu tiên thiết kế cho màn hình di động), tức là viết mã định dạng trước cho các màn hình nhỏ, sau đó sử dụng các câu lệnh truy vấn phương tiện truyền thông (Media Queries) để điều chỉnh giao diện dần dần cho các màn hình lớn hơn. Đồng thời, đảm bảo rằng các yếu tố truyền thông như hình ảnh có kích thước phù hợp với mọi loại màn hình.max-width: 100%;Thuộc tính này được thiết kế để ngăn nội dung bên trong tràn ra khỏi phạm vi container (khung chứa nội dung đó).

Tóm lại

Việc tạo một chủ đề WordPress tùy chỉnh từ đầu là một quá trình học tập đa dạng và phức tạp, đòi hỏi bạn phải hiểu rõ cả PHP, HTML, CSS, JavaScript cũng như API cốt lõi của WordPress. Chúng ta sẽ bắt đầu với việc chuẩn bị môi trường và các tệp tin cơ bản của WordPress.style.cssChúng ta bắt đầu bằng cách xây dựng dần dần cấu trúc các tầng lớp của mẫu (template hierarchy) và hiểu rõ cơ chế hoạt động của các vòng lặp (loops). Sau đó, chúng ta tích hợp các tính năng cốt lõi như menu điều hướng, công cụ hỗ trợ (tools), hình ảnh đặc sắc, v.v., đồng thời học cách thêm các tệp biểu định kiểu (style sheets) và tệp mã nguồn (script files) một cách chính xác và hiệu quả. Bằng cách tuân theo những bước này cùng các thực tiễn tốt nhất, chúng ta không chỉ có thể tạo ra những chủ đề (themes) có chức năng đầy đủ mà còn đảm bảo được chất lượng mã nguồn, khả năng bảo trì và hiệu suất của chúng. Hãy nhớ rằng, việc phát triển các chủ đề là một quá trình liên tục được cải tiến; việc thường xuyên kiểm thử và thu thập phản hồi trong m

FAQ 常见问题

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

Bạn cần có kiến thức cơ bản và khả năng sử dụng PHP, vì WordPress được xây dựng bằng PHP, và các tệp mẫu chủ đề (theme templates) chủ yếu được tạo thành từ mã PHP. Bạn cần hiểu các khái niệm như biến (variables), hàm (functions), vòng lặp (loops), và câu lệnh điều kiện (conditional statements), đồng thời biết cách sử dụng các thẻ và hàm của WordPress. Việc phát triển chủ đề ở mức độ sâu hơn sẽ yêu cầu kiến thức về lập trình hướng đối tượng (object-oriented programming) trong PHP.

Có thể chỉnh sửa các chủ đề hiện có để tạo ra những chủ đề mới không?

Được chứ, đây là một phương pháp học tập và bắt đầu phổ biến, đặc biệt là khi sử dụng chủ đề chính thức của “Underscores” làm điểm khởi đầu. Tuy nhiên, nếu bạn muốn phát hành chủ đề đó cho công chúng, bạn cần đảm bảo rằng mình có quyền sửa đổi và phân phối nó, đồng thời tuân thủ giấy phép sử dụng (thường là GPL). Một cách tốt hơn là hiểu rõ nguyên lý hoạt động của chủ đề đó, sau đó xây dựng cấu trúc và giao diện của riêng mình từ đầu.

Sự khác biệt giữa tệp functions.php của chủ đề (theme) và plugin là gì?

functions.phpCác tệp tin (files) là một phần không thể tách rời của giao diện thiết kế (theme), và chức năng của chúng có mối liên hệ mật thiết với vẻ ngoài cũng như cách trình bày của giao diện đó. Các plugin (plugins) được sử dụng để bổ sung những tính năng cụ thể cho trang web, những tính năng này không phụ thuộc vào giao diện thiết kế nào cụ thể. Một quy tắc đơn giản là: Nếu một tính năng nhằm thay đổi vẻ ngoài hoặc cấu trúc của trang web, thì nó thường được đặt bên trong giao diện thiết kế; ngược lại, nếu một tính năng nhằm mục đích bổ sung (chẳng hạn như biểu mẫu liên hệ, tối ưu hóa SEO), thì nó sẽ được tạo thành một plugin. Nhờ đó, ng

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

Bạn cần chuẩn bị tốt cho việc hỗ trợ ngôn ngữ quốc tế (Internationalization – i18n). Điều này có nghĩa là tất cả các chuỗi văn bản dành cho người dùng trong chủ đề (theme) đều phải được bao bọc bằng các hàm dịch của WordPress. Ví dụ:esc_html_e(‘Read More’， ‘my-custom-theme’);Bạn đã làm xong rồi.style.cssĐã được tuyên bố trong…Text DomainVăn bản được sử dụng ở đây phải phù hợp với các yêu cầu đã định. Sau đó, người dịch có thể sử dụng các tệp `.po` và `.mo` để dịch những chuỗi văn bản này.