Nhập môn phát triển chủ đề WordPress: Bắt đầu từ con số không để tạo chủ đề tùy chỉnh đầu tiên của bạn

Khi bạn bắt đầu học cách phát triển trang web bằng WordPress, việc tạo ra chủ đề (theme) riêng của mình là một cột mốc thú vị và đáng tự hào. Điều này không chỉ giúp bạn kiểm soát hoàn toàn về giao diện và chức năng của trang web mà còn là cách tuyệt vời để hiểu sâu hơn về cấu trúc cốt lõi của WordPress. Bài viết này sẽ hướng dẫn bạn qua toàn bộ quy trình, từ việc thiết lập môi trường phát triển đến việc tạo ra một chủ đề cơ bản, giúp bạn bước đầu trên con đường trở thành một nhà phát triển WordPress chuyên nghiệp.

Các công việc chuẩn bị trước khi phát triển

Trước khi bắt đầu viết bất kỳ đoạn mã nào, việc thiết lập một môi trường phát triển địa phương (local development environment) hiệu quả là điều vô cùng quan trọng. Điều này giúp bạn có thể thực hiện các thao tác kiểm thử và gỡ lỗi mà không ảnh hưởng đến trang web trên mạng.

Xây dựng môi trường phát triển cục bộ

Trước tiên, chúng ta cần cài đặt phần mềm máy chủ trên máy tính của mình. Bạn có thể chọn các công cụ như XAMPP, MAMP hoặc Local by Flywheel. Những công cụ này tích hợp sẵn máy chủ Apache, cơ sở dữ liệu MySQL và ngôn ngữ lập trình PHP, và là những yếu tố cần thiết để vận hành WordPress. Lấy XAMPP làm ví dụ: sau khi cài đặt xong, hãy khởi động các dịch vụ Apache và MySQL. Lúc này, máy tính của bạn sẽ trở thành một máy chủ cục bộ (local server).

Đọc thêm Bắt đầu phát triển theme WordPress: Xây dựng theme tùy chỉnh đầu tiên từ con số 0。

Tiếp theo, hãy tải phiên bản mới nhất của WordPress về 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ụ: thư mục gốc của XAMPP).htdocsSau đó, bằng cách truy cập vào thư mục đó…http://localhost/your-wordpress-folderĐể hoàn thành quá trình cài đặt nổi tiếng này (còn được gọi là “Cài đặt trong 5 phút”), bạn sẽ cần tạo một cơ sở dữ liệu, đồng thời thiết lập tên người dùng và mật khẩu cho quản trị viên trang web.

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

Chuẩn bị trình soạn thảo mã và các công cụ cần thiết.

Một trình soạn thảo mã nguồn chất lượng cao có thể giúp nâng cao đáng kể hiệu suất phát triển phần mềm. Visual Studio Code, PhpStorm hoặc Sublime Text đều là những lựa chọn tuyệt vời. Đặc biệt là Visual Studio Code, với nhiều tiện ích mở rộng dành cho WordPress và PHP như PHP Intelephense, cho phép tự động hoàn thành dòng mã và kiểm tra ngữ pháp một cách thông minh.

Ngoài ra, bạn nên cài đặt một tiện ích mở rộng (plugin) cho công cụ phát triển trình duyệt, chẳng hạn như tiện ích “Theme Check” do WordPress cung cấp, để kiểm tra xem giao diện (theme) có tuân thủ các tiêu chuẩn hay không vào giai đoạn cuối của quá trình phát triển. Bạn cũng có thể sử dụng tính năng “Kiểm tra phần tử” (Inspect Elements) của trình duyệt để gỡ lỗi (debug) mã HTML và CSS một cách thời gian thực.

Hiểu cấu trúc cơ bản của theme WordPress

Một chủ đề WordPress được đơn giản hóa nhất chỉ cần hai tệp tin, nhưng một cấu trúc đầy đủ chức năng và tuân thủ các tiêu chuẩn thường bao gồm nhiều tệp tin khác nhau, mỗi tệp tin đảm nhận một nhiệm vụ cụ thể.

Tệp biểu mẫu định dạng cốt lõi

Mỗi chủ đề WordPress đều phải có một…style.cssĐây là một tệp tin CSS dùng để định nghĩa giao diện (theme) của trang web. Phần ghi chú ở đầu tệp tin không chỉ đơn thuần là những thông tin hỗ trợ việc hiểu cấu trúc của tệp tin mà còn đóng vai trò như “thẻ căn cước” của giao diện đó, chứa đựng tất cả các thông tin meta cần thiết để WordPress nhận diện và sử dụng giao diện đó một cách chính xác. Một ví dụ về phần ghi chú đầu tệp tin cơ

Đọc thêm Phát triển chủ đề WordPress: Hướng dẫn toàn diện về cách xây dựng chủ đề tùy chỉnh từ đầu。

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

Trong đó,Text DomainDùng cho mục đích quốc tế hóa; đây là đối tượng được truyền vào các hàm dịch sau này.__()或_e()Đây là những mã định danh được sử dụng trong quá trình thời gian (thời điểm).

Các tệp mẫu cơ bản

Một tệp tin bắt buộc khác là…index.phpĐây là mẫu thiết kế mặc định của chủ đề (theme template). Khi WordPress không tìm thấy bất kỳ tệp mẫu cụ thể nào khác (ví dụ:single.php或page.phpKhi cần thiết, nó sẽ được sử dụng để hiển thị nội dung trang web.

Chỉ cần có hai tệp tin này, chủ đề của bạn đã có thể xuất hiện trong danh sách “Giao diện” -> “Chủ đề” trên giao diện quản trị WordPress và có thể được kích hoạt. Tất nhiên, hiện tại nó vẫn chỉ là một khung trống. Để chủ đề hoạt động thực sự, chúng ta cần tạo thêm một số tệp tin mẫu (template) quan trọng nữa.

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

Trước tiên, hãy tạo ra nó.header.phpNó chứa phần đầu (header) của tài liệu HTML, ví dụ như…<doctype>Tuyên bố,<head>Khu vực (trong đó nên sử dụng…)wp_head()Các hàm này được sử dụng để đưa các tập lệnh và phong cách (styles) cốt lõi của WordPress vào trang web, đồng thời tạo ra các thẻ (markup) cho phần tiêu đề (header) của trang web.

Tiếp theo, hãy thực hiện việc tạo ra (create).footer.phpNó chứa nội dung phần chân trang (footer) của trang web và được thực thi trước khi kết thúc trang web.wp_footer()Đây là một hàm (function) – một thành phần thiết yếu mà nhiều plugin sử dụng để thêm mã lệnh vào phần cuối trang web.

Cuối cùng, hãy thực hiện việc tạo ra (create).functions.phpTệp này không phải là bắt buộc, nhưng nó chính là “bộ não” của chủ đề (theme). Bạn có thể thêm vào đây các tính năng hỗ trợ cho chủ đề, menu đăng ký và thanh bên cạnh, các tệp kiểu dáng (styles) và script, cũng như định nghĩa các hàm tùy chỉnh khác nhau.

Đọc thêm Làm thế nào để phát triển một chủ đề WordPress tùy chỉnh từ đầu?。

Các chức năng cốt lõi của việc xây dựng một chủ đề (theme) bao gồm:

Sau khi có được các tệp cơ bản, chúng ta có thể bắt đầu “thổi hồn” vào chủ đề (theme) để nó sở hữu những chức năng cơ bản của một trang web.

Thực hiện menu điều hướng

Các trang web hiện đại thường đều có menu điều hướng. Trước tiên, bạn cần…functions.phpsử dụngregister_nav_menus()hàm để đăng ký vị trí menu trong chủ đề của mì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

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

Đoạn mã này đăng ký hai vị trí cho menu: “Menu điều hướng chính” và “Menu chân trang”. Sau đó, tại những vị trí trong template mà bạn muốn hiển thị menu (ví dụ:header.phptrong), sử dụngwp_nav_menu()hàm để gọi nó.

wp_nav_menu( array(
    'theme_location' => 'primary',
    'menu_class'     => 'primary-menu',
) );

Người dùng có thể tạo menu ngay trong phần “Giao diện” -> “Menu” của giao diện quản trị WordPress, sau đó gán menu đó vào vị trí “Menu điều hướng chính” (Main Navigation Menu).

Bật hình ảnh đặc trưng cho bài viết và thanh bên cạnh

Nhiều chủ đề hỗ trợ việc hiển thị ảnh thu nhỏ (hình ảnh đại diện) cho bài viết và thanh bên cạnh chứa các tiện ích (widgets). Cũng vậy…functions.php的my_first_theme_setupTrong hàm, hãy thêm đoạn mã sau để kích hoạt các tính năng này:

add_theme_support( 'post-thumbnails' ); // 启用文章特色图像
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list', 'gallery', 'caption' ) ); // 启用HTML5标记支持

Để đăng ký một khu vực công cụ bên cạnh (sidebar tool), hãy sử dụng…register_sidebar()Hàm:

function my_first_theme_widgets_init() {
    register_sidebar( array(
        'name'          => __( '主侧边栏', 'my-first-theme' ),
        'id'            => 'sidebar-1',
        'description'   => __( '在这里添加小工具。', 'my-first-theme' ),
        'before_widget' =&gt; '<section id="%1$s" class="widget %2$s">',
        'after_widget'  =&gt; '</section>',
        'before_title'  =&gt; '<h2 class="widget-title">',
        'after_title'   =&gt; '</h2>',
    ) );
}
add_action( 'widgets_init', 'my_first_theme_widgets_init' );

Sau đó, trong tệp mẫu (ví dụ:sidebar.php）sử dụngdynamic_sidebar( 'sidebar-1' )Để hiển thị khu vực này.

Tích hợp mẫu và thêm kiểu dáng

Bây giờ, chúng ta sẽ kết nối các phần của các mẫu lại với nhau và thêm vào chúng những kiểu dáng cơ bản, để trang web có được hình thức trực quan (có thể nhìn thấy được).

Sử dụng mẫu để đưa vào hàm

WordPress cung cấp một số hàm cốt lõi để đưa các tệp mẫu khác vào, điều này giúp đảm bảo tính mô-đun hóa và khả năng bảo trì của mã nguồn. Trong trường hợp của bạn…index.phpTrong đó, cấu trúc nên được thiết kế như sau:

<?php get_header(); ?>

<main id="main" class="site-main">
    <?php
    if ( have_posts() ) :
        while ( have_posts() ) : the_post();
            // 循环输出文章内容
            get_template_part( 'template-parts/content', get_post_type() );
        endwhile;
        the_posts_navigation(); // 文章导航
    else :
        get_template_part( 'template-parts/content', 'none' ); // 没有找到内容时的模板
    endif;
    ?>
</main>

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

get_header(), get_sidebar(), get_footer()Các hàm tương ứng sẽ được thiết lập để đọc (import) các tệp mẫu (template files) tương ứng.get_template_part()Đây là một hàm linh hoạt hơn; nó khuyến khích bạn tách những đoạn nội dung được sử dụng nhiều lần (chẳng hạn như tóm tắt bài viết) ra thành các phần riêng biệt.template-partsTrong các tệp tin độc lập nằm bên trong thư mục, ví dụ như…content.php。

Viết mã định dạng cơ bản và thiết kế thích ứng (responsive design)

Bây giờ, hãy mở nó ra.style.cssBắt đầu thêm phong cách cho chủ đề của bạn. Trước hết, hãy thiết lập một số phong cách toàn cục, như mô hình khung (box model), phông chữ và màu sắc.

* {
    box-sizing: border-box;
}
body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
}
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

Để thực hiện thiết kế thích ứng (responsive design), chúng ta sử dụng các truy vấn phương tiện truyền thông (media queries) để điều chỉnh bố cục trang web dựa trên kích thước màn hình khác nhau. Ví dụ, để thanh bên (sidebar) di chuyển xuống phía dưới nội dung chính trên màn hình nhỏ:

@media (max-width: 768px) {
    .site-main {
        width: 100%;
    }
    #sidebar {
        width: 100%;
        margin-top: 2rem;
    }
}

Đừng quên làm điều đó nhé.header.php的<head>Một số thẻ meta về viewport được thêm vào để đảm bảo rằng trang web sẽ được phóng to/thu nhỏ đúng cách trên các thiết bị di động:<meta name="viewport" content="width=device-width, initial-scale=1">。

Tóm lại

Từ việc tạo ra một thứ gì đó chứa…style.css和index.phpBắt đầu từ việc tạo một thư mục đơn giản, bạn đã dần xây dựng thành một chủ đề WordPress hoàn chỉnh với các tính năng như điều hướng, thanh bên cạnh và bố cục thích ứng với nhiều loại thiết bị khác nhau. Quá trình này bao gồm tất cả các khái niệm cốt lõi trong việc phát triển chủ đề WordPress. Bạn đã học được cfunctions.phpMở rộng chức năng của các chủ đề (templates), cách sử dụng hệ thống cấu trúc phân cấp của các mẫu (template hierarchy) để tổ chức mã nguồn, và cách chuyển đổi thiết kế thành mã HTML và CSS cho phần trình bày (frontend). Đây chỉ là điểm khởi đầu thôi; sau đó bạn có thể tìm hiểu thêm về các loại tệp mẫu nâng cao hơn (như…).single.php, page.php, archive.phpCác công cụ như bộ công cụ tạo blog, các loại bài viết tùy chỉnh, API cho việc thiết kế chủ đề, cùng với việc sử dụng các framework như Sass và JavaScript để xây dựng những chủ đề phức tạp và hiện đại hơn, đều là những công cụ hữu ích. Việc liên tục thực hành và tham khảo tài liệu phát triển chính thức của nhà phát triển là con đường tốt nhất để nâng cao kỹ năng của bạn.

FAQ 常见问题

Có bắt buộc phải sử dụng child theme khi phát triển theme không?

Không nhất thiết phải như vậy. Việc tạo ra một chủ đề độc lập từ đầu hoàn toàn có thể thực hiện được, và đó cũng là cách tốt nhất để học hỏi các nguyên lý cơ bản. Việc sử dụng các chủ đề con (sub-themes) thường là thực hành tốt nhất khi bạn cần tùy chỉnh hoặc sửa đổi một chủ đề cha (parent theme) có sẵn (chẳng hạn như các chủ đề của các framework phổ biến), bởi vì điều này sẽ đảm bảo rằng những thay đổi tự bạn thực hiện sẽ không bị xóa đi khi chủ đề cha được cập nhật. Đối với các dự án phát triển hoàn toàn mới, việc xây dựng một chủ đề độc lập từ đầu là phổ biến hơn.

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

Để một chủ đề hỗ trợ nhiều ngôn ngữ (hóa đa ngôn ngữ), chủ yếu cần thực hiện hai bước. Trước hết, cần đảm bảo rằng…style.cssvà trongfunctions.phpTất cả các chuỗi cần được dịch trong đoạn văn trên đều được bao bọc bởi hàm dịch của WordPress, ví dụ như:__( ‘文本’, ‘my-first-theme’ )或_e( ‘文本’, ‘my-first-theme’ )Thứ hai, bạn cần sử dụng các công cụ như Poedit để tạo ra những tài liệu cần thiết..potDịch các tệp mẫu, sau đó tạo ra các tệp tương ứng cho mỗi ngôn ngữ.po和.moTệp tin đó, hãy đặt nó vào phần liên quan đến chủ đề (theme)./languagesthư mục chính xác.

Sau khi việc phát triển chủ đề (theme) được hoàn tất, làm thế nào để đăng nó lên hệ thống?

Trước khi phát hành, hãy nhớ sử dụng tiện ích “Theme Check” để kiểm tra kỹ lưỡng chủ đề của bạn, nhằm đảm bảo rằng nó tuân thủ tất cả các tiêu chuẩn mã hóa và yêu cầu bảo mật của danh mục chủ đề WordPress. Hãy loại bỏ tất cả các đoạn mã gỡ lỗi (debug code) và chú thích không cần thiết. Sau đó, bạn có thể chọn gửi chủ đề đến danh mục chính thức của WordPress.org (cần qua quá trình xem xét) hoặc đóng gói nó thành tệp ZIP để cung cấp trực tiếp cho khách hàng hoặc phân phối trên trang web của riêng mình. Nếu bạn tự mình phân phối chủ đề, hãy đảm bảo cung cấp hướng dẫn cài đặt rõ ràng và tài liệu hỗ trợ người dùng.

Tại sao các kiểu dáng tùy chỉnh của tôi lại biến mất sau khi được cập nhật ở phía sau hậu trường (nghĩa là sau khi thao tác được thực hiện trên hệ thống)?

Có lẽ đó là do bạn đã trực tiếp sửa đổi các tệp thuộc chủ đề cha (parent theme) đang được sử dụng. Khi chủ đề cha được cập nhật thông qua giao diện quản trị WordPress, tất cả các tệp liên quan đến phần cốt lõi của hệ thống (core files) sẽ bị thay thế bằng phiên bản mới, khiến những thay đổi của bạn bị mất đi. Đây chính là lý do tại sao việc sử dụng các chủ đề con (child themes) được khuyến nghị mạnh mẽ trong mọi trường hợp phát triển tùy chỉnh. Các phong cách và chức năng của chủ đề con được tải độc lập so với chủ đề cha; vì vậy, ngay cả khi chủ đề cha được cập nhật, các tệp của chủ đề con vẫn sẽ giữ nguyên toàn bộ nội dung được tùy chỉnh.