Hướng dẫn toàn diện về việc phát triển các chủ đề (theme) cho WordPress: Từ cơ bản đến nâng cao, kèm theo các bài học thực hành chi tiết

Hiểu cấu trúc cơ bản của chủ đề WordPress

Một chủ đề WordPress về bản chất là tập hợp của một loạt tệp tin, những tệp tin này cùng nhau định nghĩa giao diện và chức năng của trang web. Trong số đó, có hai tệp tin mà mọi chủ đề đều phải có:style.css和index.phpChúng tạo thành nền tảng cơ bản cho chủ đề đó.

Ở cấp độ cơ bản nhất, các chủ đề (theme) của WordPress hoạt động thông qua hệ thống tệp tin mẫu (template file system). Khi người dùng truy cập một trang, WordPress sẽ xác định tệp tin PHP nào cần được tải để hiển thị nội dung dựa trên loại trang được yêu cầu (chẳng hạn: trang chủ, trang bài viết, trang danh mục, v.v.) thông qua cấu trúc phân cấp của các tệp mẫu. Thiết kế này cho phép các nhà phát triển kiểm soát một cách linh hoạt cách hiển thị nội dung cho từng loại trang khác nhau.

Tổng quan cấu trúc tệp chủ đề

Các chủ đề WordPress tiêu chuẩn bao gồm một loạt tệp tin cụ thể. Ngoài những tệp tin cần thiết…style.css和index.phpMột chủ đề (theme) được thiết kế đầy đủ chức năng thường bao gồm cả những thành phần sau:functions.php、header.php、footer.php、sidebar.phpCũng như các tệp mẫu dành cho các trang khác nhau…single.php(Bài viết) Vàpage.php(Trang web).functions.phpTệp tin chính là “bộ não” của một trang web, được sử dụng để thêm các tính năng mới, đăng ký các mục trong menu, thiết lập thanh bên cạnh, v.v.

Đọc thêm Nhập môn phát triển chủ đề WordPress: Xây dựng giao diện website đầu tiên từ con số 0。

style.cssTệp tin không chỉ chứa các bảng định dạng (style sheets) mà còn có các ghi chú ở phần đầu tệp (file headers) chứa thông tin metadata về chủ đề đó, như tên chủ đề, tác giả, mô tả, phiên bản, v.v. Đây là yếu tố then chốt giúp WordPress nhận diện một chủ đề.

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
 * Author: Your Name
 * Description: A custom theme built from scratch.
 * Version: 1.0
 */

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

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 chuyên nghiệp là điều vô cùng quan trọng. Điều này giúp bạn có thể kiểm thử tất cả các tính năng trong một môi trường an toàn và được cô lập, mà không ảnh hưởng đến trang web trực tuyến.

Bộ công cụ được khuyến nghị bao gồm Local by Flywheel, XAMPP hoặc MAMP – những công cụ có thể cài đặt PHP, MySQL và WordPress chỉ với một cú nhấp chuột. Ngoài ra, một trình soạn thảo mã mạnh mẽ (như VS Code, PhpStorm) và hệ thống quản lý phiên bản (như Git) cũng là những công cụ không thể thiếu trong quá trình phát triển các trang web hiện đại.

Hãy tạo thư mục chủ đề (theme folder) đầu tiên của bạn.

Đầu tiên, trong thư mục cài đặt WordPress,wp-content/themes/Trong thư mục đó, hãy tạo một thư mục mới, ví dụ như:my-first-themeTên của thư mục này chính là mã định danh cho chủ đề của bạn.

Sau đó, hãy tạo hai tệp tin cơ bản nhất trong thư mục đó:style.css和index.phpHãy đảm bảo rằng…style.cssHãy hoàn thành việc điền thông tin tiêu đề tệp (file header) một cách đầy đủ. Sau đó, đăng nhập vào giao diện quản trị WordPress, chọn mục “Nhìn” (Appearance) -> “Chủ đề” (Themes). Bạn sẽ thấy chủ đề mới của mình xuất hiện trên trang này; tuy nhiên, lúc này chủ đề đó vẫn chưa có bất kỳ kiểu dáng hay tính năng nào cả.

Đọc thêm Hướng dẫn hoàn chỉnh phát triển chủ đề WordPress: Từ mã nhập môn đến kỹ thuật thực chiến。

Đưa các thành phần mẫu cốt lõi vào hệ thống

Để tuân theo nguyên tắc DRY (Don’t Repeat Yourself – Đừng lặp lại bản thân), các chủ đề WordPress sử dụng các thành phần mẫu (template components) để tách các phần chung ra khỏi mã nguồn.header.php、footer.php和sidebar.php。

在index.phptrong đó, sử dụngget_header()、get_footer()和get_sidebar()Các hàm được sử dụng để đưa những thành phần này vào trang web. Những hàm này là những thẻ mẫu cốt lõi của WordPress; chúng sẽ tự động tìm kiếm và tải các tệp mẫu có tên tương ứng.

// 在 index.php 中的典型结构
<?php get_header(); ?>

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

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

Đi sâu vào các mẫu cốt lõi và vòng lặp (core templates and loops)

Cơ chế “lặp” (loop) trong WordPress là yếu tố then chốt để điều khiển việc hiển thị nội dung. Đây là một cấu trúc mã PHP được sử dụng để kiểm tra xem trang hiện tại có chứa bài viết (hoặc trang nào đó khác) hay không; nếu có, nó sẽ lặp qua tất cả các bài viết đó và hiển thị nội dung của chúng.

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

Hiểu về vòng lặp chính (main loop) và các thao tác truy vấn (query operations)

Cấu trúc lặp cơ bản nhất được trình bày như sau. Nó xuất hiện trong hầu hết các tệp mẫu, được sử dụng để lấy và hiển thị danh sách bài viết hoặc nội dung của một bài viết cụ thể.

<article>
            <h2><?php the_title(); ?></h2>
            <div><?php the_content(); ?></div>
        </article>

Trong vòng lặp này,have_posts()和the_post()Các hàm kiểm soát quá trình thực thi chương trình. Các thẻ mẫu (template tags) như…the_title()和the_content()Dùng để hiển thị thông tin chi tiết về bài viết hiện tại.

Tạo mẫu trang tùy chỉnh

Bạn có thể tạo ra một bố cục độc đáo cho một trang web cụ thể. Điều này đòi hỏi bạn phải tạo một tệp PHP mới và thêm ghi chú về tên mẫu (template name) ở đầu tệp đó.

Đọc thêm Hướng dẫn toàn diện về phát triển theme WordPress: Từ cơ bản đến nâng cao – Các kỹ thuật cốt lõi và hướng dẫn thực hành。

Ví dụ, tạo một mẫu có têntemplate-fullwidth.phpĐối với tệp tin này, hãy viết vào phần đầu:

<?php
/**
 * Template Name: 全宽页面
 * Description: 一个没有侧边栏的全宽度页面模板。
 */

Sau khi lưu thay đổi, hãy vào phần quản trị WordPress và chỉnh sửa bất kỳ trang nào. Bạn sẽ thấy tùy chọn “Trang toàn màn hình” (Full-width Page) trong danh sách thả xuống “Thuộc tính trang” (Page Properties) -> “Mẫu” (Template). Chọn tùy chọn này, và trang đó sẽ được hiển thị bằng mẫu tùy chỉnh của bạ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

Sử dụng các tệp chứa hàm (function files) để nâng cao chức năng của chủ đề (theme).

functions.phpĐây là “Hộp công cụ chủ đề” (Theme Toolbox) của bạn. Tại đây, bạn có thể thêm các tính năng hỗ trợ chủ đề, đăng ký các mục trong menu điều hướng, định nghĩa các khu vực chứa tiện ích nhỏ (widgets), sắp xếp thứ tự việc đưa các tệp kiểu dáng (styles) và tập lệnh (scripts) vào hệ thống, cũng

Thêm hỗ trợ cho chức năng chọn chủ đề và menu đăng ký

Sử dụngadd_theme_support()Các hàm (functions) có thể được sử dụng để kích hoạt các tính năng cốt lõi của WordPress. Ví dụ, việc kích hoạt tính năng hiển thị ảnh thu nhỏ (thumbnails) cho bài viết là một tính năng tiêu chuẩn trong nhiều giao diện (themes) của WordPress.

function mytheme_setup() {
    // 支持文章特色图像
    add_theme_support( 'post-thumbnails' );
    // 支持HTML5标记（用于评论表单、搜索表单等）
    add_theme_support( 'html5', array( 'comment-list', 'comment-form', 'search-form', 'gallery', 'caption', 'style', 'script' ) );
    // 支持自定义Logo
    add_theme_support( 'custom-logo' );
}
add_action( 'after_setup_theme', 'mytheme_setup' );

Đăng ký để sử dụng menu điều hướngregister_nav_menus()Sau khi đăng ký, bạn có thể quản lý vị trí của các mục này trong phần “Giao diện” -> “Menü” ở phía sau hậu trường, và sử dụng chúng trong các mẫu (templates).wp_nav_menu()Hãy gọi nó.

register_nav_menus( array(
    'primary' => __( '主导航菜单', 'my-theme' ),
    'footer'  => __( '页脚菜单', 'my-theme' ),
) );

Cách đưa các định dạng kiểu (styles) và mã nguồn (scripts) vào trang web một cách an toàn

Đừng bao giờ mã hóa trực tiếp các liên kết đến tệp CSS và JS trong tệp mẫu (template file). Cách thức đúng đắn là sử dụng các công cụ hoặc kỹ thuật phù hợp để quản lý và tham chiếu chúng một cách linh hoạt.wp_enqueue_style()和wp_enqueue_script()hàm, và gắn chúng vàowp_enqueue_scriptsNó được gắn trên chiếc móc này. Điều này đảm bảo rằng các mối phụ thuộc được xử lý đúng cách và tránh được tình trạng tải lại các tài nguyên không cần thiết.

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', true );
}
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );

Thực hiện thiết kế thích ứng và tùy chỉnh giao diện theo chủ đề (Implementing responsive design and theme customization)

Các chủ đề hiện đại phải có khả năng thích ứng với nhiều loại kích thước màn hình khác nhau – từ điện thoại di động đến máy tính bàn. Điều này đòi hỏi rằng bố cục và kiểu dáng của chủ đề phải có thể tự điều chỉnh để phù hợp với từng kích thước màn hình. Điều

Xây dựng CSS với sự ưu tiên dành cho thiết bị di động (mobile-first CSS)

Đề xuất áp dụng chiến lược CSS theo nguyên tắc “di động là ưu tiên” (mobile-first). Trước tiên, hãy viết các kiểu dáng cơ bản phù hợp với màn hình nhỏ, sau đó sử dụng các truy vấn phương tiện truyền thông (media queries) để từ từ thêm hoặc thay thế các kiểu dáng đó cho màn hình lớ

/* 基础样式（针对移动设备） */
.container {
    width: 100%;
    padding: 1rem;
}

/* 中等屏幕（平板） */
@media (min-width: 768px) {
    .container {
        width: 750px;
        margin: 0 auto;
    }
}

/* 大屏幕（桌面） */
@media (min-width: 992px) {
    .container {
        width: 970px;
    }
}

Tích hợp bộ tùy chỉnh WordPress

WordPress Customizer cho phép người dùng xem trước và thay đổi một số thiết lập của giao diện (như màu sắc, phông chữ) một cách thời gian thực.WP_Customize_ManagerBạn có thể thêm các tùy chọn tùy chỉnh cho chủ đề (theme).

Trước tiên trongfunctions.phpTạo một hàm trongcustomize_registerMóc.

function mytheme_customize_register( $wp_customize ) {
    // 添加一个设置项，用于保存主题色
    $wp_customize->add_setting( 'primary_color', array(
        'default' => '#0073aa',
        'sanitize_callback' => 'sanitize_hex_color',
    ) );

// 添加一个颜色控件到某个面板或节
    $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'primary_color', array(
        'label'    => __( '主题主色', 'my-theme' ),
        'section'  => 'colors',
        'settings' => 'primary_color',
    ) ) );
}
add_action( 'customize_register', 'mytheme_customize_register' );

Sau đó, bạn có thể sử dụng chúng trong CSS của phía trước (frontend CSS).get_theme_mod( 'primary_color' )Lấy các giá trị mà người dùng đã thiết lập và hiển thị các kiểu dáng (styles) được tạo động (dynamic styles).

Tóm lại

Việc phát triển các chủ đề (theme) cho WordPress là một quá trình kết hợp giữa sự sáng tạo và kỹ thuật. Bắt đầu từ việc hiểu rõ cấu trúc tệp tin cơ bản, cấu trúc các thành phần của mẫu (template) và các vòng lặp (loop) cốt lõi trong hệ thống, tiếp theo là thiết lập môi trường phát triển, viết các thành phần cấu thành nfunctions.phpTừ chức năng “injection” (thêm nội dung vào trang web), đến việc triển khai thiết kế thích ứng với các thiết bị khác nhau (responsive design) và các tùy chọn có thể được cá nhân hóa (customizable options), mỗi bước đều được xây dựng dựa trên sự hiểu biết bạn đã có về bước trước đó. Khi nắm vững những kỹ năng cốt lõi này, bạn sẽ có thể tự xây dựng những giao diện WordPress mạnh mẽ, có thiết kế đẹp mắt và tuân thủ các tiêu chuẩn tốt nhất. Hãy nhớ rằng thực hành là chìa khóa để học hỏi; việc liên tục thử nghiệm, tham khảo tài liệu chính thức và thực hiện các dự án là những cách hiệu quả nhất để

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 có một nền tảng PHP vững chắc là điều kiện bắt buộc. Bởi vì bản thân WordPress được viết bằng PHP, và tất cả các tệp mẫu (templates), hàm chức năng (functions) đều phụ thuộc vào PHP. Bạn cần hiểu ít nhất các khái niệm cơ bản như biến (variables), mảng (arrays), hàm (functions), vòng lặp (loops), và điều kiện (conditional statements), cũng như cách tương tác với các hàm và hook đặc biệt của WordPress.

Có thể sửa đổi thông tin ở đầu tệp style.css liên quan đến chủ đề (theme) không?

Được, nhưng bạn cần thận trọng. Thông tin “Theme Name” trong phần tiêu đề tệp (file header) là mã định danh duy nhất mà hệ thống WordPress sử dụng để nhận diện một theme. Nếu bạn thay đổi nội dung này trong quá trình phát triển, WordPress sẽ coi đó là một theme mới. Đối với những theme đã được đăng lên trang web và đang được sử dụng bởi người dùng, việc thay đổi tên trực tiếp có thể khiến người dùng gặp sự cố như việc thiết lập bị mất hoặc trang web của họ bị chuyển sang một theme khác một cách không mong muốn.

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ợ đa ngôn ngữ (i18n – Internationalization) của chủ đề. Trong mã nguồn, hãy sử dụng các hàm dịch của WordPress để bao bọc tất cả các chuỗi văn bản nhắm đến người dùng. Ví dụ:__( ‘文本’, ‘my-theme-textdomain’ )或_e( ‘文本’, ‘my-theme-textdomain’ )Sau đó, hãy sử dụng các công cụ như Poedit để tạo ra nội dung cần thiết..potĐây là tệp mẫu; những người dịch có thể sử dụng nó để tạo ra các bản dịch bằng các ngôn ngữ khác nhau..po和.moCuối cùng, hãy sử dụng tệp tin đó.load_theme_textdomain().

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?

Các chủ đề con (sub-themes) thừa hưởng tất cả các chức năng và kiểu dáng (styles) từ chủ đề cha (parent-theme), đồng thời cho phép bạn thực hiện các thay đổi an toàn trên chủ đề cha, thêm các chức năng mới hoặc ghi đè các kiểu dáng hiện có. Khi bạn muốn tùy chỉnh sâu một chủ đề đã được phát triển sẵn, nhưng vẫn muốn có thể cập nhật chủ đề cha một cách an toàn trong tương lai mà không mất đi những thay đổi tự định của mình, bạn nên tạo một chủ đề con. Chủ đề con chỉ cần một… (The sub-themes inherit all features and styles from the parent theme, allowing for safe modifications, additions, or overwriting of styles. Create a sub-theme when you want to make deep customizations basedstyle.cssVà một người nữafunctions.phpTệp tin đó đã sẵn sàng để sử dụng.