Hướng dẫn cơ bản về phát triển theme WordPress: Tạo theme tùy chỉnh từ con số không

Chuẩn bị công việc và thiết lập môi trường phát triển

Trước khi bắt đầu viết mã, việc thiết lập một môi trường phát triển địa phương hiệu quả và chuyên nghiệp là bước đầu tiên vô cùng quan trọng. Điều này không chỉ giúp bạn thử nghiệm các tính năng một cách tự do mà không ảnh hưởng đến trang web trực tuyến, mà còn cho phép bạn tận dụng các công cụ hiện đại để nâng cao hiệu suất phát triển.

Trước tiên, bạn cần cài đặt một môi trường máy chủ tích hợp trên máy tính cá nhân của mình. Đối với người dùng Windows,XAMPP或WampServerĐây là một lựa chọn phổ biến; người dùng macOS có thể xem xét điều đó.MAMP或Local by FlywheelNhững bộ công cụ này tích hợp server Apache, cơ sở dữ liệu MySQL và môi trường PHP vào một hệ thống, và có thể được cài đặt chỉ bằng một cú nhấp chuột.

Tiếp theo, hãy tải về phiên bản mới nhất của tập tin cốt lõi WordPress 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ụ:htdocsHoàn tất quy trình cài đặt “năm phút” tiêu chuẩn để tạo một trang web WordPress cục bộ dùng cho mục đích phát triển. Đồng thời, rất khuyến nghị bạn nên cài đặt một trình soạn thảo mã, chẳng hạn như…Visual Studio Code、PhpStorm或Sublime TextChúng cung cấp hiệu ứng tô điểm ngữ pháp (syntax highlighting), gợi ý mã nguồn (code hints) và hỗ trợ gỡ lỗi (debugging) tuyệt vời cho PHP, HTML, CSS và JavaScript.

Đọc thêm Hướng dẫn tối thượng về phát triển chủ đề WordPress: Thực chiến từ nhập môn đến tùy chỉnh。

Cuối cùng, để có thể theo dõi trực tiếp tác động của các thay đổi trong mã nguồn đối với giao diện trang web, bạn cần sử dụng công cụ gỡ lỗi (debugger) trong trình duyệt (mở bằng phím F12). Việc làm quen với các công cụ như “Trình kiểm tra phần tử” (Element Inspector) và “Bảng điều khiển” (Console) sẽ là những kỹ năng không thể thiếu trong quá trình phát triển sau này.

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

Hiểu rõ cấu trúc cơ bản của chủ đề và các tệp tin chính (core files)

Một chủ đề WordPress cơ bản nhất chỉ cần hai tệp tin là có thể hoạt động được, nhưng một chủ đề có chức năng đầy đủ và tuân thủ các tiêu chuẩn thì là một tập hợp có cấu trúc gồm nhiều tệp tin khác nhau. Việc hiểu rõ chức năng của từng tệp tin là yếu tố then chốt trong quá trình phát triển.

Các tệp tin cần thiết cho chủ đề này

Mỗi chủ đề đều phải bao gồm…style.css和index.phpHai tệp tin này.style.cssKhông chỉ là các bảng định dạng (style sheets), mà chúng còn đóng vai trò như “chứng minh thư” của chủ đề (theme). Khối chú thích ở đầu tệp tin chứa thông tin meta về chủ đề; WordPress sẽ sử dụng những thông tin này để nhận diện và hiển thị chủ đề của bạn ở phía sau nền (trong hệ thống).

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

index.phpĐây là tệp mẫu mặc định của chủ đề, đồng thời cũng là tệp mẫu dự phòng cho tất cả các trang. Nếu WordPress không tìm thấy tệp mẫu cụ thể hơn (ví dụ:single.phpNếu điều đó xảy ra, hệ thống sẽ tự động quay trở lại việc sử dụng phiên bản cũ (hoặc chế độ cũ).index.php。

Cấu trúc phân cấp của các tệp mẫu (template files) và các hàm (functions) được chứa bên trong chúng

WordPress sử dụng một hệ thống phân cấp các mẫu (templates) để quyết định sử dụng tệp mẫu nào cho từng loại yêu cầu khác nhau. Ví dụ, khi truy cập một bài viết trên blog, WordPress sẽ tìm kiếm theo thứ tự nhất định để xác định tệp mẫu phù hợp để hiển thị nội dung bài viết đó.single-post.php -> single.php -> index.phpViệc hiểu rõ các cấp độ (layers) trong thiết kế trang web là rất quan trọng để tạo ra một bố cục trang chính xác và hiệu quả.

Đọc thêm Hướng dẫn toàn diện xây dựng website: Quy trình hoàn chỉnh và công nghệ cốt lõi để xây dựng website chuyên nghiệp từ con số 0。

Để duy trì tính gọn gàng và dễ bảo trì của mã nguồn, các phần trang chung (như tiêu đề trang, chân trang, thanh bên cạnh) nên được tách ra thành các tệp riêng biệt, và chúng được đưa vào trang web bằng cách sử dụng các hàm chứa (include functions) mà WordPress cung cấp. Ba hàm phổ biến nhất là:
* get_header()get_header()header.phpTệp.
* get_footer()get_header()footer.phpTệp.
* get_sidebar()get_header()sidebar.phpTệp.

Trongindex.phpTrong đó, cấu trúc điển hình như sau:

<?php get_header(); ?>

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

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

Xây dựng mẫu chủ đề và vòng lặp

Đặc điểm “động” của chủ đề (theme) chủ yếu thể hiện ở khả năng trích xuất và hiển thị nội dung từ cơ sở dữ liệu, và cơ chế cốt lõi của tất cả những điều này chính là “vòng lặp WordPress” (WordPress loop).

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

Nguyên lý hoạt động của vòng lặp chính (Main Loop)

“Vòng lặp” là một đoạn mã PHP dùng để kiểm tra xem trang hiện tại có chứa các “bài viết” (bao gồm tất cả các loại bài viết, trang, hoặc loại bài viết tùy chỉnh) cần được hiển thị hay không. Nếu có, đoạn mã sẽ lặp qua từng bài viết và sử dụng dữ liệu của chúng để đặt vào các thẻ mẫu (template tags). Cấu trúc vòng lặp tiêu chuẩn được trình bày như sau:

<article id="post-<?php the_ID(); ?>" no numeric noise key 1006>
            <h2><a href="/vi/</?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            <div class="entry-content">
                <?php the_content(); ?>
            </div>
        </article>


    <p>Xin lỗi, không tìm thấy bất kỳ nội dung nào.</p>
<?php endif; ?>

Trong vòng lặp này,the_title()、the_content()、the_permalink()Các thẻ mẫu như vậy được sử dụng để hiển thị thông tin cụ thể của bài viết hiện tại.

Tạo các tệp mẫu thông dụng

Dựa trên cấu trúc phân cấp của các mẫu (templates), bạn nên tạo ra các tệp mẫu riêng biệt cho từng loại nội dung khác nhau để có thể kiểm soát chúng một cách chính xác và chi tiết hơn.
* header.phpChứa tuyên bố về loại tài liệu (document type declaration).Khu vực (thông qua)wp_head()Các hàm được sử dụng để đưa các tập tin CSS và JS cốt lõi vào trang web, cũng như các phần chung ở phía trên trang web (chẳng hạn như Logo và bảng điều hướng chính).
* footer.phpBao gồm các khu vực chung ở phía dưới trang web (chẳng hạn như thông tin bản quyền), cũng như…wp_footer()Lời gọi hàm (dùng để thực hiện việc đưa các đoạn mã cần thiết vào phần chân trang – footer).
* single.phpDùng để hiển thị một bài viết blog riêng lẻ.
* page.php: Dùng để hiển thị trang độc lập.
* front-page.phpNếu tồn tại, nó sẽ được sử dụng làm trang chủ tĩnh của trang web.
* functions.phpĐây không phải là một tệp mẫu (template file), mà là “thư viện chức năng” (function library) của một chủ đề (theme), được sử dụng để thêm các tính năng hỗ trợ cho chủ đề đó, như menu đăng ký (registration menu), thanh bên cạnh (sidebar), v.v.

Đọc thêm Bắt đầu từ con số không: Hướng dẫn toàn diện về phát triển plugin WordPress và chia sẻ các thực hành tốt nhất。

Thêm tính năng và phong cách cho chủ đề (Themes).

Sau khi xây dựng xong một khung chủ đề cơ bản, bước tiếp theo là bổ sung các chức năng và đặc trưng cụ thể cho nó. Điều này chủ yếu được thực hiện thông qua…functions.php和style.csstrong thư mục gốc của dự án.

Mở rộng chức năng thông qua tệp functions.php

functions.phpCác tệp tin được tự động tải vào khi chủ đề được khởi tạo; đây là nơi an toàn để thêm các tính năng mới hoặc thay đổi hành vi mặc định của hệ thống. Bước đầu tiên thường là kích hoạt các tính năng cốt lõi của WordPress.add_theme_support()hàm hoàn thành.

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

<?php
function my_first_theme_setup() {
    // 让主题支持文章和页面的“特色图像”
    add_theme_support( 'post-thumbnails' );
    // 让WordPress管理文档<title>标签
    add_theme_support( 'title-tag' );
    // 为主题添加HTML5标记支持
    add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) );
    // 启用自定义logo功能
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'my_first_theme_setup' );

Một nhiệm vụ quan trọng khác là đăng ký menu điều hướng và thanh bên (khu vực công cụ phụ). Hãy sử dụng…register_nav_menus()Bạn có thể sử dụng một hàm để xác định vị trí của các mục trong thực đơn, sau đó áp dụng kết quả đó trong mẫu (template).wp_nav_menu()Hãy gọi nó.

function my_first_theme_menus() {
    register_nav_menus( array(
        'primary' => __( '主导航菜单', 'my-first-theme' ),
        'footer'  => __( '页脚菜单', 'my-first-theme' ),
    ) );
}
add_action( 'after_setup_theme', 'my_first_theme_menus' );

Viết mã định dạng (styles) và mã lệnh (scripts)

在style.cssTrong đó, ngoại trừ khối chú thích ở phía trên, bạn có thể thêm các kiểu dáng (styles) cho cấu trúc HTML của mình giống như khi bạn viết CSS bình thường. Để thực hiện thiết kế phản ứng với các thiết bị khác nhau (responsive design), nhất định phải sử dụng các truy vấn phương tiện truyền thông (Media Queries).

Để đưa các tệp JavaScript tùy chỉnh hoặc tệp CSS bổ sung vào trang web một cách chính xác, thực hành tốt nhất là sử dụng các phương thức được khuyến nghị bởi các công cụ phát triển web chuẩn.wp_enqueue_scriptsĐây là công cụ được sử dụng để thực hiện các thao tác cần thiết. Nó đảm bảo rằng các mối phụ thuộc giữa các thành phần được thiết lập đúng cách và ngăn chặn tình trạng tải lại các tài nguyên không cần thiết, từ đó giúp cải thiện hiệu suất hệ thống.

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

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình từng bước, từ cấu trúc tổng thể đến những chi tiết nhỏ nhất. Đầu tiên, bạn cần xây dựng một môi trường phát triển cục bộ vững chắc và hiểu rõ cấu trúc tệp tin cũng như hệ thống cấp độ của các mẫu (templates) trong chủ đề đó. Sau đó, bằng cách nắm vững cơ chế cốt lõi là “WordPress loops”, bạn sẽ có thể hiển thị nội dung trang web một cách linh hoạt. Cuối cùng, hãy sử dụng những công cụ và kỹ thuật phù hợp để hoàn thiện chủ đề của mình.functions.phpTệp tin này được thiết kế để bổ sung nhiều tính năng hỗ trợ cho chủ đề của bạn, đồng thời mang lại cho nó một giao diện trực quan và trải nghiệm tương tác độc đáo nhờ vào mã hóa CSS và JavaScript chuyên nghiệp. Bằng cách làm theo các bước này, bạn sẽ có thể biến một chủ đề đơn giản thành một chủ đề có chức năng đầy đủ và hấp dẫn hơn.index.php和style.cssBắt đầu xây dựng dần dần một chủ đề WordPress tùy chỉnh có đầy đủ chức năng và tuân thủ các tiêu chuẩn.

FAQ 常见问题

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

Đúng vậy, việc nắm vững kiến thức cơ bản về PHP là rất cần thiết. WordPress được xây dựng trên nền tảng PHP, và các tệp mẫu (theme templates) chủ yếu được tạo thành từ mã PHP, dùng để điều khiển logic, truy xuất và hiển thị dữ liệu. Bạn cần hiểu ít nhất các khái niệm cơ bản như biến (variables), hàm (functions), câu lệnh điều kiện (conditional statements), và vòng lặp (loops). HTML và CSS là những công cụ cơ bản để xây dựng giao diện người dùng (frontend).

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

functions.phpCác tính năng trong tệp tin được liên kết chặt chẽ với chủ đề hiện tại của trang web. Khi bạn thay đổi chủ đề, những tính năng này cũng sẽ bị vô hiệu hóa. Chúng thích hợp để lưu trữ những công cụ liên quan trực tiếp đến giao diện và bố cục của chủ đề (chẳng hạn như menu đăng ký, tùy chọn thiết lập thanh bên cạnh, các tùy chọn hỗ trợ chủ đề). Ngược lại, các tính năng do plugin cung cấp thường độc lập với chủ đề và nhằm mục đích bổ sung những chức năng cụ thể cho trang web (chẳng hạn như biểu mẫu liên hệ, tối ưu hóa SEO); vì vậy, chúng vẫn hoạt động bình thường ngay cả khi bạn thay đổi chủ đề. Một quy tắc hữu ích là: Nếu một tính năng chỉ nhằm mục đích thay đổi giao diện của trang web, hãy đặt nó vào chủ đề; còn nếu nó nhằm bổ sung những chức năng chung cho toàn bộ trang web, hãy xem xét việc tạo nó thành một plugin.

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

Việc làm cho các chủ đề hỗ trợ quốc tế hóa (i18n) là một bước quan trọng trong quá trình phát triển chuyên nghiệp. Bạn cần sử dụng các hàm dịch để bao bọc tất cả các chuỗi văn bản dành cho người dùng trong mã nguồn của mình.__('文本', 'text-domain')或_e('文本', 'text-domain')… trong…style.cssComment blocks and…functions.phpTrong hàm liên quan đến trường văn bản, bạn cần thiết lập các thông số một cách chính xác.Text Domain(Nhập liệu văn bản): Khu vực nhập liệu 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. Sau khi hoàn tất việc chuẩn bị mã nguồn, bạn có thể sử dụng các công cụ như Poedit để tạo ra tài liệu cần thiết..potCác tệp mẫu (template files) được tạo ra bởi những người dịch, và những người dịch này cũng sẽ tạo ra các nội dung tương ứng (corresponding content) dựa trên những tệp mẫu đó..po和.moTệp ngôn ngữ.

Trong quá trình phát triển, làm thế nào để gỡ lỗi các lỗi PHP có thể xuất hiện?

Trong giai đoạn phát triển, bạn nên bật chế độ gỡ lỗi (debug mode) của WordPress. Điều này sẽ giúp bạn nhanh chóng xác định được nguyên nhân của các lỗi. Hãy mở tập tin cấu hình WordPress (wp-config.php) tại thư mục gốc của trang web của bạn.wp-config.phpTìm tệp tin liên quan, sau đó tìm các thiết lập cần thay đổi và chỉnh sửa chúng theo những hướng dẫn được cung cấp.

define( 'WP_DEBUG', true ); // 开启调试模式
define( 'WP_DEBUG_LOG', true ); // 将错误日志记录到 /wp-content/debug.log 文件
define( 'WP_DEBUG_DISPLAY', false ); // 不在页面上显示错误（避免用户看到）

Sau khi thiết lập, các lỗi, cảnh báo và thông báo của PHP sẽ được ghi lại.wp-content/debug.logTệp đã được lưu vào hệ thống. Vui lòng nhớ tắt chế độ gỡ lỗi (debug mode) trước khi chủ đề được đăng lên.