Hướng dẫn thực hành đầy đủ về phát triển chủ đề WordPress: Xây dựng chủ đề tùy chỉnh từ con số 0

Thiết lập môi trường phát triển và chuẩn bị tệp cơ bản

Trước khi bắt đầu viết bất kỳ mã nào, việc thiết lập một môi trường phát triển cục bộ hiệu quả là rất quan trọng. Khuyến nghị sử dụng các công cụ như Local by Flywheel, XAMPP hoặc MAMP để nhanh chóng thiết lập một máy chủ cục bộ bao gồm PHP, MySQL và Apache/Nginx. Sau khi cài đặt WordPress trong môi trường này, bạn có thể bắt đầu tạo chủ đề của riêng mình.

Về bản chất, một chủ đề WordPress là một thư mục nằm trong /wp-content/themes/ thư mục. Tên của thư mục này là định danh chủ đề của bạn. Trong thư mục chủ đề này, hai tệp cơ bản nhất và bắt buộc phải có là style.css 和 index.php。

style.css Tệp không chỉ dùng để chứa kiểu CSS, mà phần chú thích ở đầu tệp còn đảm nhận vai trò quan trọng trong việc khai báo thông tin chủ đề cho WordPress. Dưới đây là một ví dụ tiêu chuẩn:

Đọc thêm Hướng dẫn toàn diện phát triển chủ đề WordPress: Xây dựng website tùy chỉnh từ con số không。

/*
Theme Name: 我的第一个自定义主题
Theme URI: https://example.com/my-first-theme
Author: 你的名字
Author URI: https://example.com
Description: 这是一个从零开始构建的 WordPress 自定义主题，用于学习开发。
Version: 1.0
License: GPL v2 or later
Text Domain: my-first-theme
*/

index.php là tệp mẫu mặc định của chủ đề, khi không có mẫu nào cụ thể hơn phù hợp, WordPress sẽ sử dụng nó để hiển thị trang. Bạn có thể đặt cấu trúc HTML đơn giản trong đó để kiểm tra xem chủ đề đã được WordPress nhận diện chưa.

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ấu trúc và cấp bậc của các tệp mẫu cốt lõi

WordPress sử dụng một hệ thống phân cấp mẫu chính xác để quyết định tệp mẫu nào sẽ được sử dụng cho các loại trang khác nhau. Hiểu được cấu trúc phân cấp này là chìa khóa để phát triển hiệu quả.

Thứ tự ưu tiên của mẫu trang chủ

Đối với trang chủ của trang web, WordPress sẽ tìm kiếm các tệp sau theo thứ tự:front-page.php > home.php > index.php. Thông thường,front-page.php Dùng để hiển thị một trang chủ tĩnh tùy chỉnh, trong khi home.php được sử dụng để hiển thị danh sách bài viết blog.

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

Khi truy cập một bài viết riêng lẻ, WordPress sẽ ưu tiên tìm kiếm single-post.php，nếu không tồn tại thì quay về single.php，cuối cùng là index.php。Đối với trang độc lập, sẽ tìm kiếm page-{slug}.php 或 page-{id}.php，sau đó là page.php。

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

Trang danh mục bài viết sẽ sử dụng category-{slug}.php、category-{id}.php、archive.php，cuối cùng là index.php. Các trang như thẻ, tác giả, lưu trữ theo ngày đều tuân theo quy tắc phân cấp tương tự.

Đọc thêm Bắt đầu từ con số 0 để làm chủ phát triển chủ đề WordPress: Thực hành tốt nhất và hướng dẫn xây dựng trang web tùy chỉnh。

Sau khi nắm vững bộ quy tắc này, bạn có thể tạo các tệp mẫu cụ thể để kiểm soát chính xác hiệu ứng hiển thị của từng phần trên trang web. Ví dụ, tạo một tệp có tên category-news.php cho phép bạn thiết kế riêng kiểu dáng và bố cục cho danh mục có tên “news”.

Chức năng chủ đề và gọi nội dung động

Một trang HTML tĩnh không phải là chủ đề WordPress. Chủ đề phải có khả năng gọi nội dung động từ cơ sở dữ liệu WordPress. Điều này chủ yếu được thực hiện thông qua các thẻ mẫu và vòng lặp (The Loop) của WordPress.

Hiểu vòng lặp chính của WordPress

Vòng lặp là cơ chế cốt lõi của chủ đề WordPress, được dùng để truy xuất bài viết từ cơ sở dữ liệu và hiển thị chúng trên trang. Một cấu trúc vòng lặp cơ bản nhất như sau, thường được đặt trong index.php、single.php 或 page.php Việt：

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

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    <article>
        <h2><?php the_title(); ?></h2>
        <div><?php the_content(); ?></div>
    </article>
<?php endwhile; else : ?>
    <p>Xin lỗi, không tìm thấy bài viết nào.</p>
<?php endif; ?>

Trong vòng lặp này,the_title() 和 the_content() Đó là các thẻ mẫu, chúng sẽ xuất ra tiêu đề và nội dung của bài viết hiện tại.

Nhập tệp chức năng chủ đề

Để tách biệt chức năng và giao diện, thực hành tốt nhất là đặt mã hàm PHP trong một tệp functions.php riêng biệt. Tệp này nằm trong thư mục gốc của chủ đề, dùng để thêm các chức năng hỗ trợ chủ đề, đăng ký menu, thanh bên, v.v.

Ví dụ, trong functions.php thêm đoạn mã sau để kích hoạt tính năng ảnh đặc trưng bài viết và menu tùy chỉnh:

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

<?php
function my_theme_setup() {
    // 添加文章和页面的文章特色图片支持
    add_theme_support( 'post-thumbnails' );
    // 注册一个导航菜单位置
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_theme_setup' );

Gọi menu và sidebar

Trong tệp mẫu, bạn có thể sử dụng wp_nav_menu() hàm để hiển thị menu đã đăng ký. Ví dụ, trong header.php gọi điều hướng chính:

<nav>
    <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav>

Tương tự, bạn có thể thông qua register_sidebar() Hàm đăng ký vùng tiện ích trong functions.php sau đó trong sidebar.php sử dụng dynamic_sidebar() Để gọi 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.

Truy cập trang

Kiểu dáng chủ đề, tập lệnh và tối ưu hóa hiệu suất

Phát triển chủ đề hiện đại không chỉ tập trung vào giao diện mà còn chú trọng đến hiệu suất, khả năng truy cập và thiết kế đáp ứng.

Nhập đúng cách các tệp kiểu dáng và tập lệnh

Không bao giờ liên kết trực tiếp các tệp CSS và JavaScript trong tệp mẫu. Cách làm đúng là thông qua functions.php tệp, sử dụng wp_enqueue_style() 和 wp_enqueue_script() Các hàm sẽ thêm chúng vào hàng đợi. Điều này đảm bảo các phụ thuộc chính xác và tránh tải trùng lặp.

function my_theme_scripts() {
    // 引入主题主样式表
    wp_enqueue_style( 'main-style', get_stylesheet_uri() );
    // 引入自定义 JavaScript 文件
    wp_enqueue_script( 'my-script', get_template_directory_uri() . '/js/main.js', array(), null, true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

Xây dựng bố cục đáp ứng

在 style.css , sử dụng truy vấn phương tiện (Media Queries) để tạo kiểu dáng phù hợp với các kích thước màn hình khác nhau. Bắt đầu viết kiểu dáng cho thiết bị di động (màn hình nhỏ) trước, sau đó dần cải thiện kiểu dáng cho máy tính bảng và máy tính để bàn, đây là một chiến lược phát triển hiện đại được gọi là “ưu tiên di động”.

Thực hiện tối ưu hóa hiệu suất cơ bản

Tối ưu hóa kích thước hình ảnh, giảm yêu cầu HTTP và sử dụng plugin bộ nhớ đệm WordPress là những phương pháp phổ biến để cải thiện hiệu suất chủ đề. Ở cấp độ phát triển, đảm bảo tập lệnh và kiểu chỉ được tải trên các trang cần thiết (ví dụ: sử dụng thẻ điều kiện is_page()、is_single()), có thể giảm đáng kể tiêu hao tài nguyên không cần thiết.

Tóm lại

Từ việc thiết lập môi trường, tạo tệp cơ bản, đến hiểu sâu về cấp bậc mẫu, nắm vững cách gọi nội dung động và vòng lặp, rồi thông qua functions.php mở rộng chức năng và tối ưu hóa hiệu suất, bạn đã hoàn thành một hành trình phát triển chủ đề tùy chỉnh WordPress đầy đủ. Cốt lõi nằm ở việc hiểu luồng dữ liệu và hệ thống mẫu của WordPress, đồng thời tuân thủ các tiêu chuẩn mã hóa của nó. Tách biệt rõ ràng chức năng, kiểu dáng và cấu trúc là chìa khóa để xây dựng chủ đề có thể bảo trì và hiệu suất cao. Tiếp theo, bạn có thể khám phá các chủ đề nâng cao hơn như phát triển chủ đề con, loại bài đăng tùy chỉnh, trình tùy chỉnh chủ đề để mở rộng thêm khả năng chủ đề của mình.

FAQ 常见问题

Chủ đề phát triển có bắt buộc phải thành thạo PHP không?
Vâng, PHP là ngôn ngữ lập trình cốt lõi của WordPress, là kỹ năng cần thiết để phát triển chủ đề (đặc biệt là xử lý nội dung động và mở rộng chức năng). Bạn cần hiểu cú pháp PHP cơ bản, hàm và các hàm PHP đặc thù của WordPress (template tags).

Tác dụng của tệp functions.php là gì?

functions.php Tệp này là “trung tâm chức năng” của chủ đề của bạn. Nó được sử dụng để thêm hỗ trợ chức năng chủ đề (như menu, thumbnail), đăng ký khu vực widget, xếp hàng tải kiểu và tập lệnh, định nghĩa các hàm tùy chỉnh, v.v. Mã trong tệp này sẽ tự động tải khi chủ đề được khởi tạo.

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

Bạn cần làm hai việc. Đầu tiên, sử dụng tên miền văn bản (Text Domain) trong phần chú thích đầu của style.css và tất cả các hàm PHP sử dụng văn bản (như __() 或 _e()), ví dụ như ‘my-first-theme’ trong mẫu. Thứ hai, sử dụng các công cụ như Poedit để tạo tệp dịch .pot và tạo tệp .po và .mo cho các ngôn ngữ khác nhau. Điều này được gọi là quốc tế hóa (i18n) và bản địa hóa.

Làm thế nào để gỡ lỗi lỗi WordPress trong quá trình phát triển?

Khuyến nghị bật chế độ gỡ lỗi WordPress trong tệp wp-config.php Đặt giá trị của hằng số WP_DEBUG thành true. Điều này sẽ hiển thị lỗi PHP, cảnh báo và thông báo trên trang, giúp ích rất nhiều cho việc xác định vấn đề trong quá trình phát triển. Nhớ tắt nó trước khi triển khai lên môi trường sản xuất.

Làm thế nào để chủ đề của tôi thông qua kiểm duyệt chính thức và được đưa lên cửa hàng?

Thư mục chủ đề chính thức của WordPress có các yêu cầu kiểm duyệt nghiêm ngặt. Chủ đề của bạn phải tuân theo quy tắc mã hóa của WordPress, đảm bảo an toàn mã, không có lỗi, hỗ trợ truy cập không rào cản (a11y), quốc tế hóa văn bản chính xác và không khuyến khích sử dụng các hàm đã lỗi thời. Tiêu chuẩn chi tiết có thể tìm thấy trong sổ tay của WordPress Theme Review Team.